条件渲染

v-if

<p v-if="布尔表达式"> if </p>
<p v-else-if="布尔表达式"> else if </p>
<p v-else> else </p>

• 用 key 管理可复用的元素
  Vue会尽可能重用相同的元素。如果不想它让重用，可以添加key="唯一身份标识"来区分。

v-show

<h1 v-show="布尔表达式"> 布尔表达式为【真】时显示</h1>

v-if vs v-show

v-if 为假时不创建元素。
v-show 为假时只是 style="display: none;"

v-if 与 v-for 一起使用 (在同一标签上)

• 不推荐同时使用。详情看风格指南。
• 一起使用时v-for优先级更高。详情看列表渲染指南。

列表渲染

v-for 遍历数组

v-for="item in arr" 或 v-for="(item, index ) of arr" :key="item"

关键字	解释
arr	数组
item	当前遍历到的对象
index	可选的第二参数，当前元素索引
in 和 of	两种写法，没区别
:key	可选。支持字符串和数字。建议始终加上

v-for 遍历对象

v-for="(value, key, index) in obj"
只遍历 value 可以省略括号。遍历的结果来自Object.keys(obj)本质还是遍历数组。

维护状态

:key不是for专用的。支持字符串和数字。

数组更新检测

变更方法

Vue封装了这些 push() pop() shift() unshift() splice() sort() reverse()数组方法，所以它们也能触发视图更新。

替换数组

filter()、concat() 和 slice()一般用来替换原数组。Vue实现了一些智能方法，所以用含有相同元素的数组替换原来数组是非常高效的。

注意事项

由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。深入响应式原理中有相关的讨论。

显示过滤/排序后的结果

• 使用计算属性保护原始数据，返回要用的结果。
• 在嵌套 v-for循环中计算属性不合适，可以使用方法

在 v-for 里使用值范围

遍历 1 到 10

<div><span v-for="(item, index) of 10">{{index}} - {{ item }}</span>
</div>

在 上使用 v-for

利用template可以渲染一组元素（template自己是不会出现的）

<ul><template v-for="n in 3"><li>{{ n }}</li><li>--------</li></template>
</ul>

	<ul><li>1</li><li>--------</li><li>2</li><li>--------</li><li>3</li><li>--------</li></ul>

v-for 与 v-if 一同使用

官方不推荐在同一元素上使用 v-if 和 v-for。更多细节可查阅风格指南。

在组件上使用 v-for

自定义组件和普通元素上v-for用法一样。 但：

1. 2.2.0+ 的版本里key 是必须的。
2. 组件有自己的作用域，所以外面的数据要v-bind:手动传进去。

<div id="app"><my_component v-for="item in arr" v-bind:npc="item"></my_component>
</div>
<script>var vm = new Vue({el: '#app',data: {arr: [{name:'张三'},{name:'李四'},{name:'王五'}],},components: {'my_component': {props: ['npc'],template: '<div> {{npc.name}} </div>'}}});
</script>

	<div id="app"><div> 张三 </div><div> 李四 </div><div> 王五 </div></div>

事件处理

监听事件

v-on 简写 @
v-on:事件名="代码 or 函数名"

参数描述	示例 (变量or函数都已Vue实例中定义)
表达式	v-on:click="i++"
函数	v-on:click="function foo(){i++}"
事件处理方法	v-on:click="foo"
内联处理器中的方法	v-on:click="foo(2)"
原始的 DOM 事件	v-on:click="foo(2, $event)"

事件修饰符

v-on:事件.修饰符1.修饰符2="事件处理方法"。修饰生效与顺序有关，从左向右依次生效。

修饰符	说明
v-on:click.stop	阻止单击事件继续传播
v-on:submit.prevent	提交事件不再重载页面
v-on:click.stop.prevent	修饰符可以串联：阻止单击事件继续传播、提交事件不再重载页面
v-on:submit.prevent	只有修饰符
v-on:click.capture	添加事件监听器时使用事件捕获模式 即外部元素触发的事件先处理，然后才交由内部元素进行处理
v-on:click.self	只当在 event.target 是当前元素自身时触发处理函数
v-on:click.once	2.1.4 新增：点击事件将只会触发一次
v-on:scroll.passive	2.3.0 新增：滚动事件的默认行为 (即滚动行为) 将会立即触发 而不会等待 onScroll 完成 这其中包含 event.preventDefault() 的情况 这个 .passive 修饰符尤其能够提升移动端的性能。 .passive 和 .prevent 不要一起使用，.passive 会告诉浏览器你不想阻止事件的默认行为。

按键修饰符

在监听键盘事件时可以使用：v-on:keyup.enter="myClick"
如上仅当$event.key 为"Enter"时调用"myClick"方法。完整有效按键名见：MDN: Key Values

按键码 keyCode

keyCode即将废弃，为兼容旧浏览器Vue定义了常用别名：
.enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right
你还可以通过全局 config.keyCodes 对象自定义按键修饰符别名

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

系统修饰键 2.1.0 新增

.ctrl .alt .shift .meta

<!-- Alt + C -->
<input v-on:keyup.alt.67="clear"><!-- Ctrl + Click -->
<div v-on:click.ctrl="doSomething">Do something</div>

系统键要是按住的，如果想单击触发，请使用按键码 keyCode

.exact 修饰符 2.5.0 新增

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button v-on:click.ctrl="onClick">A</button><!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button><!-- 没有任何系统修饰符被按下的时候才触发 -->
<button v-on:click.exact="onClick">A</button>

鼠标按钮修饰符 2.2.0 新增

.left .right .middle

为什么在 HTML 中监听事件？

Vue 只在标签上用v-on绑定事件，方便查找定位。视图销毁，Vue会自动清理事件。代码里也是可以的但尽量避免使用，详见：实例方法 / 事件

表单输入绑定

基础用法

• v-model用来进行双向绑定，可用在<input>、<textarea> 及<select>。
• 用了它就后就只认Vue实例data中的值，元素上的 value、checked、selected 都忽略。

<p> 【变量a】的值为：{{变量a}} <p>
<input v-model="变量a">

输入元素将会触发什么事件，从何处取值赋给变量a

输入元素	取值	事件
<input type="text " v-model=“变量a”>	value	input
<textarea v-model=“变量a”>	value	input
<input type=“checkbox” v-model=“变量a”>	checked	change
<select v-model=“变量a”>	value	change

下表中专注于输入元素本身，对应的标签<label for="input的Id">标签文字</label>省略。

元素	写法	备注
文本	<input v-model=“message”>	绑定到字符串message
多行文本	<textarea v-model=“message”>	<textarea>{{message}}</textarea>无效
复选框（单个）	<input type=“checkbox” v-model=“isChecked”>	绑定到布尔值 isChecked
复选框（多个）	<input type=“checkbox” value=“a” v-model=“arr”> <input type=“checkbox” value=“b” v-model=“arr”> <input type=“checkbox” value=“c” v-model=“arr”>	绑定到数组arr 比如全勾选则arr = [ "a", "b", "c" ]
单选按钮	<input type=“radio” value=“男” v-model=“gender”> <input type=“radio” value=“女” v-model=“gender”>	绑定到变量gender勾选后值为男或女
选择框(单选)	<select v-model=“book”> <option disabled value="">请选择</option> <option>三国</option> <option>水浒</option> <option>西游</option> </select>	绑定到变量book 如：book = "三国" 建议始终添加一个禁用的空值
选择框(多选)	<select v-model=“bookList” multiple > <option>三国</option> <option>水浒</option> <option>西游</option> </select>	1. 绑定到数组bookList 如：bookList= ["三国","水浒","西游"] 2. 支持 v-for 动态生成<option> 值可用v-bind绑定如：:value="book.name"

值绑定

单选按钮，复选框及选择框，v-model绑定的值通常是：字符常量（单个复选框默认布尔）。但也支持通过v-bind:value="xxx"将值绑定到实例的property上。

选择输入类型元素	写法	备注
复选框	<input type=“checkbox” v-model=“t” true-value=“yes” false-value=“no”>	vm.t === ‘yes’ // 当选中时 vm.t === ‘no’ // 当没有选中时
单选按钮	<input type=“radio” v-model=“pick” v-bind:value=“a”>	vm.pick === vm.a //选中时
选择框的选项	<select v-model=“book”> <option v-bind:value="{ name: ‘三国’ }">三国演绎</option> </select>	此处绑定的值是个内联对象字面量 如果选中book={name:'三国'}

修饰符

修饰符	写法	功能
.lazy	<input v-model.trim=“msg”>	将数据同步改为change事件后。v-model默认每次input同步数据。
.number	<input v-model.number=“n” type=“number”>	输入的值可以被 parseFloat() 解析 ? 转为数值 : 返回原始值
.trim	<input v-model.trim=“msg”>	去掉首尾空白字符

在组件上使用 v-model

组件上支持使用v-model，建议先按顺序学习，学完组件后再看：自定义输入组件

参考资料

Vue 官方教程基数篇 - 本笔记的学习对象
Vue 官方CLI 官方文档
Vue 官方API 参考
Vue 官方API文档 - 生命周期钩子

vue-devtools 编译安装
我的 Vue CLI 学习笔记
Vue 学习笔记 - 基础（上）
Vue 学习笔记 - 基础（中）
Vue 学习笔记 - 基础（下）组件基础
Vue 学习笔记 - 深入了解组件

MDN 完整有效按键名 Key Values
千锋教育-李卫民 Vue 渐进式 JavaScript 框架