模板语法

1. 数据绑定最常见的形式

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

<span>Message: {{ msg }}</span>

Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。

2. v-once指令

v-once设置该指令的节点执行一次性地插值，当数据改变时，插值处的内容不会更新。

<span v-once>这个将不会改变: {{ msg }}</span>

3. v-html

v-html指令:双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

eg1>

data: {
	rawHtml: '<span style="color:red"> This should be red</span>'
}

执行结果：

查看渲染的DOM：

eg2>

data: {
	message: 'Vue的v-html',
	rawHtml: '<span style="color:red"> {{message}}</span>'
}

执行结果：

这个 span 的内容将会被替换成为属性值 rawHtml，若直接作为 HTML会忽略解析属性值中的数据绑定。

4. v-bind

Mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令：

<div v-bind:id="dynamicId"></div>

在布尔特性的情况下，它们的存在即暗示为 true，v-bind 工作起来略有不同，在这个例子中：

<button v-bind:disabled="isButtonDisabled">Button</button>

如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled 特性甚至不会被包含在渲染出来的 <button>元素中。

5 修饰符

修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定

5.1 事件修饰符

.stop ==> 阻止单击事件继续传播
.prevent ==> 取消事件的默认动作
.capture ==> 添加事件侦听器时使用时间捕获模式
.self ==> 只当事件在该元素本身（而不是子元素）触发时触发回调
.once ==> 事件只会触发一次
.passive ==> 滚动事件的默认行为

<div id="app2">
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件侦听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
</div>

5.2 按键修饰符

在监听键盘事件时，我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

全部的按键别名：

• enter
• tab
• delete (捕获 “删除” 和 “退格” 键)
• esc
• space
• up
• down
• left
• right

5.3 修饰符

• lay
• number
• trim

lay：在改变后才触发（也就是说只有光标离开input输入框的时候值才会改变）

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

number：将输出字符串转为Number类型·（虽然type类型定义了是number类型，但是如果输入字符串，输出的是string）

<input v-model.number="age" type="number">

trim：自动过滤用户输入的首尾空格

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

5.4 系统修饰键

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
.ctrl
.alt
.shift
.meta
注意：在 Mac 系统键盘上，meta 对应 command 键 。在 Windows 系统键盘 meta 对应 Windows 徽标键。在 Sun 操作系统键盘上，meta 对应实心宝石键。

5.5 鼠标按钮修饰符

.left
.right
.middle
这些修饰符会限制处理函数仅响应特定的鼠标按钮。

https://www.cnblogs.com/xiaotanke/p/7160962.html