3.1 内部指令

1：v-if

完全根据表达式的值在DOM中生成或者移除一个元素；如果初始条件为假，则什么都不做，只有在条件第一次为真时才开始进行局部编译（编译会被缓存起来）；如果想切换多个元素，可以使用 元素当做包装元素，并在上面使用 v-if。最终的渲染结果不会包含 元素。

<template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template>

2：v-show

完全根据表达式的值在DOM中显示隐藏元素；元素始终编译并且保留，只是简单的进行CSS切换；

3：v-else

表示 v-if 的“else 块”；v-else 元素必须紧跟在 v-if 或者 v-else-if 元素的后面——否则它将不会被识别。

<div v-if="Math.random() > 0.5"> //（random() 方法可返回介于 0 ~ 1 之间的一个随机数。） Now you see me </div> <div v-else> Now you don't </div>

VUE会尽可能高效的渲染元素，通常会复用已有元素，而不是从头开始渲染；在下面的代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模版使用了相同的元素， 不会被替换掉——仅仅是替换了它的 placeholder。

<template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username"> </template> <template v-else> <label>Email</label> <input placeholder="Enter your email address"> </template>

如果不想复用他们。可以用key实现

<template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username" key='username-input'> </template> <template v-else> <label>Email</label> <input placeholder="Enter your email address" key='email-input'> </template>

当v-for跟v-if处于同一节点， v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你想为仅有的 一些 项渲染节点时，这种优先级的机制会十分有用，

<ul> <li v-for="todo in todos" v-if="!todo.isComplete"> {{ todo }} </li> </ul>

上面的代码只传递了未complete的todos。

4：v-else-if

v-else-if，顾名思义，充当 v-if 的“else-if 块”。可以链式地使用多次： <div v-if="type == 'A'"> A </div> <div v-else-if="type == 'B'"> B </div> <div v-else-if="type == 'C'"> C </div> <div v-else> Not A/B/C </div>

以上全部属于条件渲染

5：v-model

该指令在表单控件元素上创建双向数据绑定；会自动忽略表单元素的value,checked,selected属性的初始值； (1)输入框，文本框（同输入框） <input v-model="message" placeholder="edit me" value='初始值'> <p>Message is: {{ message }}</p> new Vue({ el: '...', data: { message : ‘’ } })

data中未写message的话，会报错；‘初始值’并不会显示在页面中

（2）复选框

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label for="jack">Jack</label> <input type="checkbox" id="john" value="John" v-model="checkedNames"> <label for="john">John</label> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> <label for="mike">Mike</label> <br> <span>Checked names: {{ checkedNames }}</span> new Vue({ el: '...', data: { checkedNames: [] //这里必须是数组，写成‘’的话，每次点击一个，3个全部被选中 } })

（3）单选框

<div id="example-4"> <input type="radio" id="one" value="One" v-model="picked"> <label for="one">One</label> <br> <input type="radio" id="two" value="Two" v-model="picked"> <label for="two">Two</label> <br> <span>Picked: {{ picked }}</span> </div> new Vue({ el: '#example-4', data: { picked: '' } })

（4）单选列表（如果v-model的值不匹配任何的选项，就以未选中状态渲染；在ios中这会使用户无法选择第一个选项，因为这样的情况下，IOS不会引发change事件，因此disabled是建议做法）

<div id="example-5"> <select v-model="selected"> <option disabled value="">请选择</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }}</span> </div> new Vue({ el: '...', data: { selected: '' } })

（5）多选列表(multiple是H5的新属性，如果使用该属性，则字段可接受多个值。windows下按住ctrl选择多个 )

<div id="example-6"> <select v-model="selected" multiple style="width: 50px"> <option>A</option> <option>B</option> <option>C</option> </select> <br> <span>Selected: {{ selected }}</span> </div> new Vue({ el: '#example-6', data: { selected: [] } })

6：v-bind

想绑定 value 到 Vue 实例的一个动态属性上，这时可以用v-bind 实现，并且这个属性的值可以不是字符串。

<input type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="b"> <input type="radio" v-model="pick" v-bind:value="a"> <select v-model="selected"> <option v-bind:value="{ number: 123 }">123</option> </select>

修饰符： （1）添加lazy属性可以将数据改到change事件中发生；

<input type="text" v-model.lazy='text' name="" value="123">

（2）如果想自动将用户输入的值转化为number类型（如果原值转化结果为NaN,则返回原值），可以添加一个修饰符number(type-number时，也返回字符串类型，因此很有必要添加)

<input type="number" v-model.number='text' name="" value="123">

（3）如果想自动过滤首尾空格，则可以添加trim修饰符；

<input v-model.trim="msg">

7：v-for

8：v-text

9：v-html

10：v-on

11：v-ref

12：v-el

13：v-pre

14：v-cloak

3.2 自定义指令

1：基础

2：高级选项