Vue.js 快速入门 (二) —— Vue常用指令

记录自己学习Vue.js的过程，如果有什么地方写的不好或者写错的，欢迎探讨和指正。

Vue.js 快速入门 (一) —— Vue基础
Vue.js 快速入门 (三) —— Vue本地应用
Vue.js 快速入门 (四) —— Vue网络应用

本次我们学习Vue.js常用的一些指令。

写的有点乱，各位看官见谅。

常见指令目录

v-text
v-html
v-on
v-on(补充关于函数参数的用法以及对触发事件的限制)
v-show
v-if
v-bind
v-for
v-model

本章将通过一些小demo进行讲解。

v-text

• v-text指令作用：设置标签的文本值(textContent
• v-text其默认写法会替换全部内容，而使用插值表达式( {{ }} ) 则可以替换指定内容。换句话说，如果你使用了v-text，又使用了插值表达式，那么插值表达式的内容将不会显示在页面上，页面只显示v-text指令所指定的内容，如果你想可替换指定内容的话，可以使用插值表达式。
• 其内部支持写表达式

Demo如下：

v-html

• v-html指令作用：设置元素的innerHTML
• 内容中有html结构会被解析为标签
• (相比较)v-text指令无论内容是什么，都只会解析为文本
• 解析文本使用v-text，需要解析html结构使用v-html

Demo如下：

v-on指令（例：v-on:click、v-on:dblclick等）

• v-on指令作用: 为元素绑定事件。
• 事件名不需要写on，直接v-on:click(点击事件)。(对比：之前jq使用点击事件：onclick)
• 指令可以简写为@。(例如v-on:click可以简写为@click)
• 绑定的方法定义在methods属性中
• 方法内部通过this关键字可以访问定义在data中的数据

Demo如下：

v-on指令(补充关于函数参数的用法以及对触发事件的限制)

• 事件绑定的方法写成函数调用的形式，可以自定义传入参数
• 定义方法时需要定义形参来接受接受传入的实参
• 事件的后面跟上 .修饰符 可以对事件进行显示(例如@keyup.enter=“xxx”,意思为当触发到键盘的enter键后，才会触发xxx方法)
• 事件修饰符有多种，具体参考官方文档

Demo如下：

v-show

• v-show指令作用：根据真假切换元素的显示状态
• 原理：修改元素的display属性，实现显示隐藏
• 指令后面的内容，最终都会解析成为布尔值
• 值为true时元素显示，值为false时元素隐藏
• 数据改变之后，对应元素的显示状态会同步更新

Demo如下:

v-if

• v-if指令作用：根据表达式的真假切换元素的显示状态
• 表达式的值为true，元素存在于dom树中，为false时元素从dom树中移除
• 与v-show的区别：v-if的本质是通过操作dom元素来切换显示状态的，而v-show是通过操纵display属性来达到切换显示状态的目的的
• 关于二者的选择：频繁的切换显示选择v-show，否则选择v-if，前者对资源消耗较小。

Demo如下：

v-bind

• v-bind指令作用：为元素绑定属性
• 完整写法为 v-bind:属性名 ， 简写为 :属性名

Demo如下：

v-for

• v-for指令作用：根据数据生成列表结构
• 语法：(item,index) in 数据
• 数组经常和v-for指令一起使用
• item和index可以结合其他指令一起使用
• 数组长度的更新会同步到页面上，是响应式的

Demo如下：

v-model

• v-model指令作用：便捷的设置和获取表单元素的值
• 绑定的数据会和表单元素的值相关联
• 绑定的数据和表单元素的值时双向关联的

Demo如下：

以上就是Vue.js在网页开发中的几个比较常见的指令。