VUE权威指南-第三章 指令

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：高级选项