模版语法
模版语法已成为前端在数据驱动模式上 V 层最好的实现。
插值
<div id="app">
<!-- 文本 当对 data.message 发生改变时，对应插值的内容也会自动改变-->
<fieldset>
<legend>文本</legend>
<div>{{message}}</div>
</fieldset>
<!-- 纯 HTML {{}} 这种形式最终会被解释成文本，如果要想输入 HTML 结构，使用要用到 v-html="对象"-->
<fieldset>
<legend>纯 HTML</legend>
<div v-html="rawHtml"></div>
</fieldset>
<!-- 属性 元素的任意属性（包含自定义属性）都可以和对象绑定 :属性名(或者 v-bind:属性名)=“对象”-->
<fieldset>
<legend>属性</legend>
<img :src="src" alt="" />
<img v-bind:src="'../imgs/red.jpg'" alt="" />
</fieldset>
<!-- js 表达式 {{}} 可以用来解释 js 的表达式-->
<fieldset>
<legend>js 表达式</legend>
<div>{{1 + 1}}</div>
<div>{{status ? 'YES' : 'NO'}}</div>
<div>{{message.split('').reverse().join('')}}</div>
</fieldset>
</div>var vm = new Vue({
el: '#app',
data: {
message: '我是文本',
rawHtml: '<h1>我是 h1 标签</h1>',
src: '../imgs/green.jpg',
status: true,
}
})缩写
v-bind 缩写
<!--完整写法-->
<img v-bind:src="'../imgs/red.jpg'" alt="" />
<!--缩写-->
<img :src="src" alt="" />v-on 缩写
<!--完整语法-->
<button v-on:click="greet">Greet</button>
<!--缩写语法-->
<button @click="greet">Greet</button> 指令
指令（Directive），换句话说就是元素的自定义属性，在 Vue 中是以 v- 为前缀的自定义属性，属性值为对象或 js 表达式
| 指令 | 类型 | 用法 |
|---|---|---|
| v-text | string | <!–v-text–> ` html <span v-text=”msg”></span> <!–效果等同于–> <!–v-text 的权重高于 {{}}–> <span>{{msg}}</span> ` |
| v-html | string | <!–v-html–> ` html <div v-html=”html”></div> ` |
| v-show | boolean | <!–v-show–> ` html <!–show 的值会直接影响 div 在文档中是否显示–> <div v-show=”show”></div> ` |
| v-if | boolean | <!–v-if–> ` html <!–status 的值会直接影响 div 在文档中是否存在–> <div v-if=”status”></div> ` |
| v-else-if | boolean | <!–v-else-if–> ` html <div v-if=”flag == 1″>1</div> <!–必须跟 v-if 或者 v-else-if 元素后面–> <div v-else-if=”flag == 2″>2</div> ` |
| v-else | 不需要表达式 | <!–v-else–> ` html <div v-if=”flag == 1″>1</div> <div v-else-if=”flag == 2″>2</div> <!–必须跟 v-if 或者 v-else-if 元素后面–> <div v-else>2</div> ` |
| v-for | Array | Object | Number | String | <!–v-for–> ` html <!– data = 3 结果会生成 3 个 div， value 的值分类为 1, 2, 3 index 的值分别为 0, 1, 2 –> <div v-for=”(value, index) in data”> <span v-text=”value”></span> <span>{{index}}</span> </div> <!–也可以这样写–> <div v-for=”value in data”> <span v-text=”value”></span> </div> <!– data = “abc” 结果会生成 data.length 个 div， value 的值分类为 a, b, c index 的值分别为 0, 1, 2 –> <div v-for=”(value, index) in data”> <span v-text=”value”></span> <span>{{index}}</span> </div> <!–也可以这样写–> <div v-for=”value in data”> <span v-text=”value”></span> </div> <!– data = {name: ‘dk’, age: 18} 结果会生成 data 属性个数 个 div， value 的值分类为 dk, 18 key 的值分别为 name, age –> <div v-for=”(value, key) in data”> <span v-text=”key”></span> <span>{{value}}</span> </div> <!–也可以这样写–> <div v-for=”value in data”> <span v-text=”value”></span> </div> <!– data = [{name: ‘dk1’, age: 18}, {name: ‘dk2’, age: 20}] 结果会生成 data.length 个 div， obj 的值分类为 data[0], data[1] index 的值分别为0, 1 –> <div v-for=”(obj, index) in data”> <span v-text=”JSON.stringify(obj)”></span> <span>{{index}}</span> </div> <!–也可以这样写–> <div v-for=”obj in data”> <span v-text=”JSON.stringify(obj)”></span> </div> ` |
| v-on | Function | <!–v-on–> ` html <!–click事件直接绑定一个方法–> <button v-on:click=”say1″>say1</button> <!–缩写方式–> <!–click事件使用内联语句–> <button @click=”say2(‘调用了 say2’, $event)”>say2</button> ` |
| v-bind | Object | <!–v-bind–> ` html <img v-bind:src=”‘imgs/red.jpg'” /> <!–缩写方式–> <img :src=”‘imgs/yellow.jpg'” /> ` |
| v-model | 表单元素的值 | <!–v-model–> ` html <!–仅限于表单元素，双向绑定–> <input type=”text” v-model=”mess”/> ` |
| v-pre | 不需要表达式 | <!–v-pre–> ` html <!–{{}} 不编译，当字符串输出–> <span v-pre>{{mess}}</span> ` |
| v-cloak | 不需要表达式 | <!–v-cloak–> ` html <!– mess = ‘abc’ span 还没被 vue 解析的时候会显示 {{mess}} 解析后会显示 123 用于解决这两个转换的过程不友好的显示 尤其是在页面加载过慢的情况很容易出现这种情况 –> <span v-cloak>{{mess}}</span> ` |
| v-once | 不需要表达式 | <!–v-once–> ` html <!–内容只解释一次，当改变 mess 时不会再次映射到 span–> <span v-once>{{mess}}</span> ` |
