一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第13天，点击查看活动详情。

一、插值表达式

在模板中输出变量，在插值表达式中是可以写JavaScript表达式的。例如：{{1 + 2}}，但不能写语句。

二、基础指令

v-html

转义输出变量的HTML标签。

v-bind

绑定HTML标签的属性值。

v-once

读取一次变量值，不随变量改变而改变。

v-if

模板中进行判断，根据变量负责DOM的展示与否。

如果v-if的值为false时，将直接移除DOM元素。

v-else-if、v-else

模板中进行判断，根据变量负责DOM的展示与否。

必须和v-if一起使用

v-show

模板中进行判断，根据变量负责DOM的展示与否。

通过样式进行展示，为false时，display:none.

v-on

阻止默认行为-@click.prevent

在模板中绑定事件，例如v-on:click="handleClick"

$event传递原生事件：handleClick(num,$event)

ref

ref是获取Dom节点/组件引用的一个语法

模板语法：

程序写法：this.$refs.count

v-model

将input标签的值动态绑定到属性msg上，通过{{ msg }}表达式显示在页面上。

当修改文本框内容时，后面的页面内容将实时变化并与文本框内容保持一致。

v-for

该指令用来基于源数据多次渲染元素或模板块。

属性值是一个 item in expression 结构的表达式，其中 item 代表 expression 运算结果的每一项。

{{ item }}

三、指令简写方法

v-bind简写：

原写法：

简写法：

动态属性绑定：<div :[xxx]="message">,xxx是在data里定义的变量。

v-on简写：

原写法：

简写法：<div @click="handleClick">

动态属性绑定：<div @[xxx]="handleClick">,xxx是在data里定义的变量。