[TOC] # 模版語法 Vue.js 使用了基于 HTML 的模板語法，允許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。在底層的實現上，Vue 將模板編譯成虛擬 DOM 渲染函數。結合響應系統，Vue 能夠智能地計算出最少需要重新渲染多少組件，并把 DOM 操作次數減到最少。uni-app使用自定義的一套標簽，不能直接使用傳統的HTML標簽，例如DIV就不允許直接使用。 # 文本插值 數據綁定最常見的形式就是使用Mustache（胡子）語法 `“{{ }}”`的文本插值，它會自動將雙向綁定的數據實時的顯示出來。 ``` <text>{{ message }}</text> ``` Mustache 標簽將會被替代為對應數據對象上 message屬性的值。無論何時，綁定的數據對象上 message屬性發生了改變，插值處的內容都會更新。 通過使用 v-once 指令，也能執行一次性地插值，當數據改變時，插值處的內容不會更新。但請留心這會影響到該節點上的其它數據綁定： ``` <text v-once>這個將不會改變: {{ message }}</text> ``` 使用雙花括號（Mustache語法）`{{ }}`是最基本的文本差值方法，它會自動將我們雙向綁定的數據實時的顯示出來，綁定的也可以是一個對象，例如： 文件pages/lab/gramma/express.vue的內容如下： ``` <template> <view> <text>{{ book.title }}</text> </view> </template> <script> export default { data() { return { book: { title: "uni-app實戰", price: 59, }, } } } </script> <style> </style> ``` 大括號里面的內容會被替換成“uni-app實戰”，通過任何方法修改數據對象book，大括號內的內容都會被實時替換。 # data 屬性 `data`必須聲明為返回一個初始數據對象的函數；否則頁面關閉時，數據不會自動銷毀，再次打開該頁面時，會顯示上次數據。 ~~~ //正確用法，使用函數返回對象 data() { return { title: 'Hello' } } ~~~ ~~~ //錯誤寫法，會導致再次打開頁面時，顯示上次數據 data: { title: 'Hello' } ~~~ # 屬性綁定與縮寫 指令是帶有 v- 前綴的特殊屬性。指令用于在表達式的值改變時，將某些行為應用到 DOM 上。Mustache 語法不能作用在 HTML 屬性上，遇到這種情況應該使用 v-bind 指令： ``` <view id=”{{ dynamicId }}”></view> ``` ``` <view v-bind:id="dynamicId"></view> ``` 在布爾特性的情況下，它們的存在即暗示為 true，v-bind 工作起來略有不同，例如： ``` <button v-bind:disabled="isButtonDisabled" @click="changeStatus">切換</button> ``` > 如果 isButtonDisabled 的值是 null、undefined 或 false，則 disabled 特性甚至不會被包含在渲染出來的` <button> `元素中。 可以用 v-on 指令監聽 DOM 事件，并在觸發時運行一些 JavaScript 代碼。下面的例子點擊按鈕切換文本的顯示，為了演示，首先定義isButtonDisabled屬性默認為false，意思是按鈕可用，定義seen屬性控制文本消息message是否可見，默認可見（true）。 ``` data: { isButtonDisabled: false, seen: true, message: 'Hello world' }, ``` 然后通過v-bind將isButtonDisabled動態綁定到按鈕組件disabled屬性上。 ``` <button v-bind:disabled="isButtonDisabled" v-on:click="changeStatus">切換</button> ``` 單擊按鈕觸發changeStatus事件，在事件中改變seen屬性，控制文本消息message的顯示與隱藏。 ``` methods: { changeStatus() { this.seen = !this.seen; } } ``` 代碼清單： ``` <!-- pages/lab/gramma/vbind.vue --> <template> <view style="flex-direction: column; flex: 1;"> <button v-bind:disabled="isButtonDisabled" v-on:click="changeStatus">切換</button> <text v-show="seen">{{message}}</text> </view> </template> <script> export default { data: { isButtonDisabled: false, seen: true, message: '廣州番禺職業技術學院' }, methods: { changeStatus() { this.seen = !this.seen; } } } </script> <style> view { display: flex; flex-direction: row; } </style> ``` 這里的v-show指令用于根據條件展示元素，帶有 v-show 的元素始終會被渲染并保留在 DOM 中。v-show 只是簡單地切換元素的 CSS 屬性 display。 v-on與v-bind是常用的指令，vue定義了一個語法糖，達到簡化代碼的目的： 常規寫法 ``` <button v-bind:disabled="isButtonDisabled" v-on:click="changeStatus">切換</button> ``` 簡寫： ``` <button :disabled="isButtonDisabled" @click="changeStatus">切換</button> ``` # 表達式 迄今為止，在我們的模板中，我們一直都只綁定簡單的屬性鍵值。但實際上，對于所有的數據綁定，雖然Vue.js 都提供了完全的 JavaScript 表達式支持，但是為兼容平臺差異，uni-app無法支持復雜的 JavaScript 表達式。 目前可以使用的有` + - * % ?: ! == === > < [] `.。 下面的表達式都是合法的： ``` {{ number + 1 }} {{ ok ? 'YES' : 'NO' }} <view v-bind:id="'list-' + id"></view> ```