[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> ```