寫在前面
上一篇總結(jié)了在實(shí)操過程中如果遇到了nodejs版本的問題，我們該如何去解決的，還有就是總結(jié)了vue2和vue3生命周期的區(qū)別，如果感興趣的可以去看看上一篇的內(nèi)容vue生命周期基礎(chǔ)知識了解一下。
那知道了vue的生命周期知識點(diǎn)，接下就開始vue模板語法吧，在Vue中，Vue模板對應(yīng)的就是Vue中的View（視圖）部分，也是Vue重中之一，而在Vue中要了解Vue模板我們就需要從兩個(gè)方面來著手，其一是Vue的模板語法，其二就是模板渲染。模板語法較簡單一點(diǎn)，但對于模板的渲染（模板編譯）就會更為復(fù)雜一些，如果需要了解模板渲染就需要對Vue的渲染函數(shù)，響應(yīng)式原理之類的要有所了解。
Vue模板語法
<!-- App.vue --> <template> <div id="app"> {{ message }} </div> </template>
上面的代碼演示的僅僅Vue模板中的一種方式，也是最簡單和最常見的一種模板方式。
在Vue中，模板語法是邏輯和視圖之間的溝通橋梁，使用模板語法編寫的HTML會響應(yīng)Vue實(shí)例中的各種變化，簡單地說，Vue實(shí)例中的邏輯可以隨心所欲的渲染在頁面上。
Vue模板中插值常見的使用方法主要有：文本、原始HTML、屬性、JavaScript表達(dá)式、指令和修飾符**等。
文本
使用了v-once指令的話，那么該插值就是一次性地插值。也就是說，當(dāng)數(shù)據(jù)改變時(shí)，插值處的內(nèi)容不會更新。其使用如下所示：
<!-- App.vue --> <template> <div id="app"> <span v-once>{{ message }}</span> </div> </template>
原始HTML
不能使用v-html來復(fù)合局部模板，因?yàn)閂ue不是基于字符串的模板引擎。另外動態(tài)渲染任意的HTML會有一定的危險(xiǎn)，因?yàn)樗苋菀讓?dǎo)致XSS攻擊。
插值語法中（也就是{{}}）會將數(shù)據(jù)解釋為普通文本，而非HTML代碼，為了輸出真正的HTML，需要使用v-html指令，比如下面這個(gè)示例：
<!-- 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>
開源Vue模板和主題框架集合
現(xiàn)在有很多項(xiàng)目vue項(xiàng)目都有很好用的vue模板，這里就總結(jié)一些常用的末班集合。
BootstrapVue
BootstrapVue 擁有85個(gè)以上的組件，45個(gè)以上的可用插件，多個(gè)指令和670+個(gè)圖標(biāo)， 它提供了可用于Vue.js v2.6的Bootstrap v4.5組件和網(wǎng)格系統(tǒng)的最全面的實(shí)現(xiàn)之一 ，并具有廣泛的功能和自動 WAI-ARIA 可訪問性標(biāo)記。
采用 BootstrapVue 構(gòu)建響應(yīng)式、移動優(yōu)先、ARIA項(xiàng)目（Accessible Rich Internet Application，可訪問的富媒體應(yīng)用，即無障礙友好應(yīng)用)，基于 Vue.js 和世界全球最受歡迎的 CSS 前端框架 — Bootstrap v4
GitHub地址：BootstrapVue直接進(jìn)入
element-ui
element-ui應(yīng)該常用了，使用 Element需要先引入整個(gè) Element-ui
在 main.js 中寫入以下內(nèi)容：
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) });
點(diǎn)擊跳轉(zhuǎn)跳轉(zhuǎn)地址：Element-ui地址
還有一些開源的項(xiàng)目比如：
-
基于Vue2.0和bulma0.2的后臺管理框架 - vue-admin
-
人人開源 / renren-fast-vue
renren-fast-vue基于vue、element-ui構(gòu)建開發(fā)，實(shí)現(xiàn)renren-fast后臺管理前端功能，提供一套更優(yōu)的前端解決方案
前后端分離，通過token進(jìn)行數(shù)據(jù)交互，可獨(dú)立部署* 主題定制，通過scss變量統(tǒng)一一站式定制* 動態(tài)菜單，通過菜單管理統(tǒng)一管理訪問路由* 數(shù)據(jù)切換，通過mock配置對接口數(shù)據(jù)／mock模擬數(shù)據(jù)進(jìn)行切換* 發(fā)布時(shí)，可動態(tài)配置CDN靜態(tài)資源／切換新舊版本.
-
若依 / RuoYi-Vue
-
VueJS Expo
