Vue模板语法汇总

Vue模板语法汇总

最近在看 Vue 的编程思想，真的是大开眼界，作者为什么能够写出 Vue 这样的框架，为什么有这么强的编程能力，反思中…。

回到本文的主题，我们可以先看看 Vue 的模板语法：

{ { title }}

{ { age + 1}}

{ { age > 18 ? '大朋友' : '小朋友'}}

<!-- 通过 v-bind 来绑定属性 -->
<a v-bind:href="url">点我</a>
<!-- 可简写 -->
<a :href="url">点我</a>

<!-- v-once 指令，只修改一次 -->
<div v-once>{
   { from }}</div>

<!-- 可渲染 HTML 字符串 -->
<div v-html="html">v-html</div>

<!-- 监听事件 -->
<button v-on:click="clickMe">von</button>
<!-- 简写 -->
<button @click="clickMe">von</button>
<!-- 支持动态属性名， eventName 可动态变化，它的值可以是 click、focus-->
<button v-on:[eventName]="eventChange">von</b