Vue.js模板语法

动态绑定一个或多个属性，或一个组件prop到表达式。

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
<!-- 缩写 -->
<img :src="imageSrc">

<!-- 绑定多个属性 -->
<div v-bind="{ id: someId, class: someClass }"></div>
                                    

绑定事件监听器，事件类型由参数指定。

<!-- 绑定点击事件 -->
<button v-on:click="doSomething">点击</button>
<!-- 缩写 -->
<button @click="doSomething">点击</button>

<!-- 绑定多个事件 -->
<button v-on="{ click: onClick, mouseover: onMouseOver }">按钮</button>
                                    

在表单输入和应用状态间创建双向绑定。

<input v-model="message" placeholder="输入消息">
<p>消息是: {{ message }}</p>
                                    

根据条件渲染元素。

<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else>C</div>
                                    

根据条件展示元素（通过切换display属性）。

<h1 v-show="ok">你好!</h1>
<!-- 注意：v-show不支持<template>元素 -->
                                    

基于源数据多次渲染元素或模板块。

<ul>
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</ul>
                                    

更新元素的textContent，类似于双大括号插值。

<span v-text="message"></span>
<!-- 等价于 -->
<span>{{ message }}</span>
                                    

更新元素的innerHTML。

<div v-html="htmlContent"></div>
                                    

用于v-on指令，处理DOM事件细节。

<!-- 阻止单击事件继续传播 -->
<a @click.stop="doThis"></a>

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

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

<!-- 添加事件监听器时使用事件捕获模式 -->
<div @click.capture="doThis">...</div>

<!-- 只当事件在该元素本身触发时触发回调 -->
<div @click.self="doThat">...</div>

<!-- 点击事件最多触发一次 -->
<a @click.once="doThis"></a>
                                    

监听键盘事件时，指定具体的按键。

<!-- 只有在key是Enter时调用submit方法 -->
<input @keyup.enter="submit">

<!-- 常用按键修饰符 -->
<input @keyup.enter="...">   <!-- Enter键 -->
<input @keyup.tab="...">     <!-- Tab键 -->
<input @keyup.delete="...">  <!-- 删除键 -->
<input @keyup.esc="...">     <!-- Esc键 -->
<input @keyup.space="...">   <!-- 空格键 -->

<!-- 也可以使用按键码，但已废弃 -->
<input @keyup.13="submit">
                                    

实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

<!-- Alt + C -->
<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

<!-- 常用系统修饰键 -->
.ctrl .alt .shift .meta
                                    

改变v-model在输入事件中同步数据的方式。

<!-- 在"change"事件后同步，而不是"input"事件 -->
<input v-model.lazy="msg">

<!-- 自动将用户的输入值转为数值类型 -->
<input v-model.number="age" type="number">

<!-- 自动过滤用户输入的首尾空白字符 -->
<input v-model.trim="msg">