Vue.js学习笔记之常用模板语法详解

 <div class="row">
  <h2>文本 - 实时渲染</h2>
  <input type="text" v-model="msg" class="col-md-2" />
  <span class="col-md-">{{ msg }}</span>
 </div>

 <div class="row">
  <h2>文本 - 一次渲染</h2>
  <input type="text" v-model="msg_once" class="col-md-2" />
  <span class="col-md-" v-once>{{ msg_once }}</span>
 </div>

 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>"
     }
   });
 });

 <div class="row">
  <h2>文本 - HTML</h2>
  <div v-html="html"></div>
 </div>

 <div>
  <h4>运算表达式</h4>
  <span v-pre>{{ Number(number)+ }}：</span>
  <input v-model="number" type="text" />
  <span>运算结果：{{ Number(number)+ }}</span>
 </div>

 <div>
  <h4>三元运算表达式</h4>
  <span v-pre>{{ ok ? 'YES' : 'NO' }}：</span><span>{{ ok ? 'YES' : 'NO' }}</span>
 </div>

 <div>
  <h4>Javascript方法</h4>
  <span v-pre>{{msg_once.split('').reverse().join('')}}：</span><span>{{msg_once.split('').reverse().join('')}}</span>
</div>

 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;
       }
     }
   });
 });

<div>
  <h4>单一过滤器</h4>
  <span v-pre>{{ filter_msg | filter1 }}：</span><span>{{ filter_msg | filter1 }}</span>
 </div>

 <div>
  <h4>串联过滤器</h4>
  <span v-pre>{{ filter_msg | filter1 | filter2 }}：</span><span>{{ filter_msg | filter1 | filter2 }}</span>
 </div>

 <div>
  <h4>过滤器参数</h4>
  <span v-pre>{{ filter_msg | filter_arg('arg1', 'arg2') }}：</span><span>{{ filter_msg | filter_arg('arg1', 'arg2') }}</span>
 </div>

 <div>
  <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>
 </div>

 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);
       }
     }
   });
 });

 <div>
  <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('Hello world!')")：</span><button v-on:click="btn_clickWithMsg('Hello world!')" type="button">点我！</button><br/>
  <span v-pre>缩写(@click="btn_click")：</span><button @click="btn_click" type="button">点我！</button>
 </div>

 require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {
   var vm = new Vue({
     el: "#app",
     data: {
       books: ["深入浅出node", "C#本质论", "编程珠玑"]
     }
   });
 });

 <div>
  <h4>v-for（循环）</h4>
  <ul>
    <li v-for="item in books">
     {{ item }}
    </li>
  </ul>
 </div>

 <div>
  <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/>
 </div>

 <div>
  <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/>
 </div>