寫在前面

上一篇總結了在實操過程中如果遇到了nodejs版本的問題，我們該如何去解決的，還有就是總結了vue2和vue3生命周期的區別，如果感興趣的可以去看看上一篇的內容vue生命周期基礎知識了解一下。

那知道了vue的生命周期知識點，接下就開始vue模板語法吧，在Vue中，Vue模板對應的就是Vue中的View（視圖）部分，也是Vue重中之一，而在Vue中要了解Vue模板我們就需要從兩個方面來著手，其一是Vue的模板語法，其二就是模板渲染。模板語法較簡單一點，但對于模板的渲染（模板編譯）就會更為復雜一些，如果需要了解模板渲染就需要對Vue的渲染函數，響應式原理之類的要有所了解。

Vue模板語法

<!-- App.vue --> <template> <div id="app"> {{ message }} </div> </template> 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

上面的代碼演示的僅僅Vue模板中的一種方式，也是最簡單和最常見的一種模板方式。
在Vue中，模板語法是邏輯和視圖之間的溝通橋梁，使用模板語法編寫的HTML會響應Vue實例中的各種變化，簡單地說，Vue實例中的邏輯可以隨心所欲的渲染在頁面上。

Vue模板中插值常見的使用方法主要有：文本、原始HTML、屬性、JavaScript表達式、指令和修飾符**等。

文本

使用了v-once指令的話，那么該插值就是一次性地插值。也就是說，當數據改變時，插值處的內容不會更新。其使用如下所示：

<!-- App.vue --> <template> <div id="app"> <span v-once>{{ message }}</span> </div> </template> 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

原始HTML

不能使用v-html來復合局部模板，因為Vue不是基于字符串的模板引擎。另外動態渲染任意的HTML會有一定的危險，因為它很容易導致XSS攻擊。
插值語法中（也就是{{}}）會將數據解釋為普通文本，而非HTML代碼，為了輸出真正的HTML，需要使用v-html指令，比如下面這個示例：

<!-- App.vue --> <template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <div>{{rawHTML}}</div> <div v-html="rawHTML"></div> </div> </template> <script> export default { name: 'app', data () { return { rawHTML: '<span style="color:red;">原始HTML</span>' } } } </script> 

    




    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

屬性

在布爾特性的情況下，它們的存在即暗示為true， v-bind 工作起來略有不同，比如：

<button v-bind:disabled="isButDisabled">Button</button> 


    

        1
    

開源Vue模板和主題框架集合

現在有很多項目vue項目都有很好用的vue模板，這里就總結一些常用的末班集合。

BootstrapVue

BootstrapVue 擁有85個以上的組件，45個以上的可用插件，多個指令和670+個圖標， 它提供了可用于Vue.js v2.6的Bootstrap v4.5組件和網格系統的最全面的實現之一 ，并具有廣泛的功能和自動 WAI-ARIA 可訪問性標記。

采用 BootstrapVue 構建響應式、移動優先、ARIA項目（Accessible Rich Internet Application，可訪問的富媒體應用，即無障礙友好應用)，基于 Vue.js 和世界全球最受歡迎的 CSS 前端框架 — Bootstrap v4

GitHub地址：BootstrapVue直接進入

element-ui

element-ui應該常用了，使用 Element需要先引入整個 Element-ui
在 main.js 中寫入以下內容：

import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import App from './App.vue'; Vue.use(ElementUI); new Vue({ el: '#app',
  render: h => h(App) }); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

點擊跳轉跳轉地址：Element-ui地址

還有一些開源的項目比如：

• 基于Vue2.0和bulma0.2的后臺管理框架 - vue-admin
• 人人開源 / renren-fast-vue

renren-fast-vue基于vue、element-ui構建開發，實現renren-fast后臺管理前端功能，提供一套更優的前端解決方案

前后端分離，通過token進行數據交互，可獨立部署* 主題定制，通過scss變量統一一站式定制* 動態菜單，通過菜單管理統一管理訪問路由* 數據切換，通過mock配置對接口數據／mock模擬數據進行切換* 發布時，可動態配置CDN靜態資源／切換新舊版本.

• 若依 / RuoYi-Vue
• VueJS Expo