A detailed introduction to common template syntax in Vue.js

<p class="row">

 <h2>文本 - 实时渲染</h2>

 <input type="text" v-model="msg" class="col-md-2" />

 <span class="col-md-">{{ msg }}</span>

</p>

<p class="row">

 <h2>文本 - 一次渲染</h2>

 <input type="text" v-model="msg_once" class="col-md-2" />

 <span class="col-md-" v-once>{{ msg_once }}</span>

</p>

require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {

  var vm = new Vue({

    el: "#app",

    data: {

      msg_once: "once..."

    }

  });

});

require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {

  var vm = new Vue({

    el: "#app",

    data: {

      html: "<span>This is a html tag.</span>"

    }

  });

});

<p class="row">

 <h2>文本 - HTML</h2>

 <p v-html="html"></p>

</p>

<p>

 <h4>运算表达式</h4>

 <span v-pre>{{ Number(number)+ }}：</span>

 <input v-model="number" type="text" />

 <span>运算结果：{{ Number(number)+ }}</span>

</p>

<p>

 <h4>三元运算表达式</h4>

 <span v-pre>{{ ok ? &#39;YES&#39; : &#39;NO&#39; }}：</span><span>{{ ok ? &#39;YES&#39; : &#39;NO&#39; }}</span>

</p>

<p>

  <h4>Javascript方法</h4>

  <span v-pre>{{msg_once.split(&#39;&#39;).reverse().join(&#39;&#39;)}}：</span><span>{{msg_once.split(&#39;&#39;).reverse().join(&#39;&#39;)}}</span>

</p>

require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {

  var vm = new Vue({

    el: "#app",

    data: {

      filter_msg: 'base'

    },

    filters: {

      filter: function (value) {

        if (!value) {

          return '';

        }

        return value + '_filter1';

      },

      filter2: function (value) {

        if (!value) {

          return '';

        }

        return value + '_filter2';

      },

      filter_arg: function (value, arg1, arg2) {

        if (!value) {

          return '';

        }

        return value + ' ' + arg1 + ' ' + arg2;

      }

    }

  });

});

<p>

  <h4>单一过滤器</h4>

  <span v-pre>{{ filter_msg | filter1 }}：</span><span>{{ filter_msg | filter1 }}</span>

 </p>

<p>

 <h4>串联过滤器</h4>

 <span v-pre>{{ filter_msg | filter1 | filter2 }}：</span><span>{{ filter_msg | filter1 | filter2 }}</span>

</p>

<p>

 <h4>过滤器参数</h4>

 <span v-pre>{{ filter_msg | filter_arg(&#39;arg1&#39;, &#39;arg2&#39;) }}：</span><span>{{ filter_msg | filter_arg(&#39;arg1&#39;, &#39;arg2&#39;) }}</span>

</p>

<p>

 <h>v-bind（属性绑定）</h>

 <span v-pre>可用的按钮(v-bind:disabled="!btn_enabled")：</span><button v-bind:disabled="!btn_enabled" type="button">可以点击的按钮</button><br/>

 <span v-pre>不可用的按钮(v-bind:disabled="btn_enabled")：</span><button v-bind:disabled="btn_enabled" type="button">不可点击的按钮</button><br/>

 <span v-pre>缩写(:disabled="!btn_enabled")：</span><button :disabled="!btn_enabled" type="button">可以点击的按钮</button>

</p>

require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {

  var vm = new Vue({

    el: "#app",

    data: {

      btn_enabled: true

    }

  });

});

require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {

  var vm = new Vue({

    el: "#app",

    methods: {

      btn_click: function () {

        console.log("button click!");

      },

      btn_clickWithEvent: function($event){

        console.log($event);

      },

      btn_clickWithMsg: function (msg) {

        console.log("Message is:" + msg);

      }

    }

  });

});

<p>

 <h4>v-on（事件绑定）</h4>

 <span v-pre>点击事件(v-on:click="btn_click")：</span><button v-on:click="btn_click" type="button">点我！</button><br/>

 <span v-pre>带事件参数的点击事件(v-on:click="btn_clickWithEvent($event)")：</span><button v-on:click="btn_clickWithEvent($event)" type="button">点我！</button><br/>

 <span v-pre>带自定义参数的点击事件(v-on:click="btn_clickWithMsg(&#39;Hello world!&#39;)")：</span><button v-on:click="btn_clickWithMsg(&#39;Hello world!&#39;)" type="button">点我！</button><br/>

 <span v-pre>缩写(@click="btn_click")：</span><button @click="btn_click" type="button">点我！</button>

</p>

require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {

  var vm = new Vue({

    el: "#app",

    data: {

      books: ["深入浅出node", "C#本质论", "编程珠玑"]

    }

  });

});

<p>

 <h4>v-for（循环）</h4>

 <ul>

   <li v-for="item in books">

    {{ item }}

   </li>

 </ul>

</p>

<p>

 <h4>v-if、v-else-if、v-else（分支）</h4>

 <span>分支示例：</span>

 <input type="text" v-model="number" />

 <span v-if="number>10">大于10</span>

 <span v-else-if="number==10">等于10</span>

 <span v-else>小于10</span><br/>

</p>

<p>

 <h4>v-show（条件渲染）</h4>

 <span>v-show示例：</span>

<input type="text" v-model="number" />

 <span v-show="number>10">大于10</span>

 <span v-show="number==10">等于10</span>

 <span v-show="number<10">小于10</span><br/>

</p>