Vue2 模板语法

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

<p>Using v-html: <span v-html="rawHtml"></span></p>

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

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

<!-- 动态参数 -->
<a :[attributeName]="url">...</a>

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

<!-- 动态事件 -->
<a @[eventName]="doSomething">...</a>

<input v-model="message">
<textarea v-model="message"></textarea>
<input type="checkbox" v-model="checked">
<select v-model="selected">
  <option>A</option>
  <option>B</option>
</select>

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

<h1 v-show="ok">Hello!</h1>

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

<div v-for="(item, index) in items">
  {{ index }} - {{ item.message }}
</div>

<div v-for="(value, key) in object">
  {{ key }}: {{ value }}
</div>

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

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

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

<!-- 只有修饰符 -->
<form @submit.prevent></form>

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

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<div @click.self="doThat">...</div>

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

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

<!-- 常用按键别名 -->
<input @keyup.enter="submit">
<input @keyup.tab="submit">
<input @keyup.delete="submit">
<input @keyup.esc="submit">
<input @keyup.space="submit">
<input @keyup.up="submit">
<input @keyup.down="submit">
<input @keyup.left="submit">
<input @keyup.right="submit">

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

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

<!-- 在"change"时而非"input"时更新 -->
<input v-model.lazy="msg">

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

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

<!-- v-bind 缩写 -->
<a :href="url">...</a>
<a :[key]="url">...</a>

<!-- v-on 缩写 -->
<a @click="doSomething">...</a>
<a @[event]="doSomething">...</a>