Vue模板语法汇总

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

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

<div id="suyan-app">
    <!-- 使用双大括号，可直接渲染变量，当 title 发生变化时，页面也会发生变化 -->
    <!-- title 可以是一个计算属性 -->
    <div>{
   { title }}</div>
    <!-- 可接收表达式 -->
    <div>{
   { age + 1}}</div>
    <div>{
   { age > 18 ? '大朋友' : '小朋友'}}</div>

    <!-- 通过 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="clic