從Angular 轉向VUE，再做一次菜鳥-有解無憂

我并不是一個前端工程師，作一個小型團隊的成員，又不得寫一些前端代碼，對于一個小團隊而言，請一個前端工程師，或者一個美工來搞定界面，也許只是一個夢想，而且在產品的創建初期，由別人來寫前端代碼不現實，溝通成本比寫代碼更難，大多數的前端工程師更擅長模仿，而不是全新設計，因為他們對專案的專業背景并不熟悉，這類似于請工業設計師設計產品造型相似，

為了快速地開發產品原型，前幾年曾經學習使用過一段時間的angularJS，當時的感覺自己就是一個傻小子，跟著各種檔案和實體填寫，拷貝，粘貼，界面設計出來了，腦子里卻是一團亂麻，

幾年后，Google 工程師完全重寫了框架，以滿足當今富客戶端應用程式的需求，他們在 TypeScript 中創建了一個新版本的 AngularJS（不向后兼容），并在 2016 年發布了 Angular 2 作為框架，他們將其命名為 Angular 2，去掉了 JS 后綴，于是有開始學習TypeScript，Angular4，5，感覺更復雜，更零亂，其實，我只是一個物聯網，工業控制的工程師而以，我們對前端的需要并沒有那么多，在接下來的日子里，自己仍然回到了 bootstrap ，jquery ，javascript 的原始階段，

最近，撰寫一個圖資料庫物聯網演示系統，希望能夠采納基于模型設計的思想，使前端模塊化，并且與系統模型融合，感覺要使用前端框架實作更合理，而且用戶使用會簡單一些，和前幾年不同，VUE 的身影到處可見，為什么不試試VUE呢？反正angular 也忘的差不多了，又一次成為了菜鳥，

vue 更容易學

也許有了angular 使用的經歷，心中不斷地將VUE 和Angular 做比較，而且努力地弄清楚內部的邏輯，了解VUE·的設計思想，雖然我并不十分明白，還是談談自己的感受，

Angular 和 Vue 都是以組件驅動

網頁是分層結構的，網頁的每個部分由一小段HTML5，css和javascript 構成，原始的HTML5 是將完整的頁面歸結為三個大的檔案，它們分別是HTML，CSS和Javascript 檔案，當頁面復雜時候，難以維護和閱讀，而且相同的段無法重用，組件的思想就是根據以頁面中的元素，分解成為一段一段的單元，稱為組件 components，

所以說，組件是一段可重用的代碼，這意味著我們創建一次并在整個 vue 應用程式中重用它，

vue組件是一個單一檔案，將HTML，CSS和Javascript包含在一個檔案中，這一點我很喜歡，檔案太多，找起來很麻煩，而 Angular 將 HTML、CSS 和 TypeScript 分離到它們自己的檔案中，

VUE 的組件可以實體化，重復地使用，類似于物件程式設計中的物件，

VUE 的程式入口是main.js 在其中建立App組件，然后分層建立各個子組件，抓住了VUE 的組件概念，就能夠理解其內在邏輯，

main.js

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
}).$mount('#app')

在id =App 的document 中，建立一個App 組件，

對應的index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

下面是一個VUE 組件的簡單例子：

<template>
  <span class="welcome">
    {{ message }}
  </span>
</template>

<script>
import Vue from 'vue';

export default Vue.extend({
  name: 'Welcome',
  data() {
    return {
      message: 'Hello World'
    }
  }
});
</script>

<style>
.welcome {
  color: blue;
}
</style>

VUE Typescript 型別的組件：

<template>
  <p>hello times: {{ helloTimes }}</p>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from '../../../lib/index'
@Component
export default class Hello extends Vue {
  helloTimes: number = 0
  sayHello () {
    this.helloTimes++
  }
}
</script>

組件的實體化

組件作為HTML 的標簽，直接出現在HTML 模板中

例如我們有一個button-counter 的組件，那么可以這樣使用；

<div id="components-demo">
  <button-counter></button-counter>
</div>

使用多個組件實體：

<div id="components-demo">
  <button-counter></button-counter>
 <button-counter></button-counter>
</div>

在HTML5 中動態匯入組件

<div>

<component v-bind:is="currentComponent" />

</div>

只要currentComponent 指向不同的組件，在這里就呈現相應組件的實體，

路由方式

下面討論，

組件之間的訊息傳遞

組件之間傳遞資料十分重要，

父組件使用Props 向子組件傳遞引數
子組件使用Event向父組件傳遞引數

必要時需要一級一級地向上傳遞引數，

VUE 中的路由（router）

VUE 是面向單頁應用，如果要在網頁的某一個區域調入不同的組件，怎么撰寫呢？這里顯然不能直接使用<a > 中的href ，因為它是跳轉不同的網頁，而不是組件，

要使用router 來實作

路由的定義


import Vue from 'vue'   //引入Vue
import Router from 'vue-router'  //引入vue-router
import Hello from '@/components/Hello'  //引入根目錄下的Hello.vue組件
 
Vue.use(Router)  //Vue全域使用Router
 
export default new Router({
  routes: [              //配置路由，這里是個陣列
    {                    //每一個鏈接都是一個物件
      path: '/',         //鏈接路徑
      name: 'Hello',     //路由名稱，
      component: Hello   //對應的組件模板
    }，{
      path:'/hi',
      component:Hi,
      children:[        //子路由,嵌套路由 （此處偷個懶，免得單獨再列一點）
        {path:'/',component:Hi},
        {path:'hi1',component:Hi1},
        {path:'hi2',component:Hi2},
      ]
    }
  ]

路由導航條 router-link

<router-link to="/login/1"> </router-link>
<router-link to="/login/2"> </router-link>

安放組件的地方router-view


<transition name="fade">
  <router-view ></router-view>
</transition>

如果對router-view 命名的話，可以實作多視圖，

Bootstrapvue -與bootstrap 的完美結合

使用bootstrapvue 組件，使用bootstrap更加簡單明了，比直接操控bootstrap 的class 和css 更具有確定性，

使用VUE 實作HMI 組件化

選擇VUE 作為物聯網，工業控制軟體的前端框架的另一個重要因素是為了實作HMI 的組件化，從而實作基于模型設計方法，

大量的widget 庫已有了VUE 組件，可以在VUE 組件中使用，例如JQWidget（https://www.jqwidgets.com/vue/vue-gauge/）

下面是一個使用JQwidget 儀表盤的組件例子

<template>
<div>
  <h4>Dashboard</h4>
  <gauge></gauge>   
</div>
</template>
<script>
import gauge from '../jqwidgets-vue/vue_jqxgauge.vue';
  export default {
    data() {
      return { 
      }
    },
   components: {
     gauge
   }
  }
</script>

<style scoped>
 
</style>

慎重轉向TS語言

和Angular一樣，VUE 也從最初的Javascript 編程，轉向了支持Typescript語言，不過，即便是目前的VUE3 仍然支持javascript 語言編程語言，而且VUE 的javascript 版本的組件格式與Typescript 組件十分相似，因此從javascript VUE 遷移到 TypeScript 相對容易，但是，如果沒有Typecript 背景的程式員而言，還是晚一點切換到TS 語言，免得在語言上過于糾結，

的確像網路上介紹的那樣，VUE 短小精悍，容易上手，對于小型物聯網和控制系統專案而言，是一個不錯的選擇，

重新做一次菜鳥是值得的！

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/293038.html

標籤：其他

上一篇：STM32點亮電子世界的那盞燈

下一篇：JavaEE精英進階課學習筆記《博學谷》