常用指令

v-model：雙向資料繫結

<div id="app">
      輸入您的姓名: <input type="text" v-model="name">
      <p>{{ $data | json }}</p>
      <p>{{ name }}</p>
</div>
<script>
      var V = new Vue({
            el : '#app',
            data : {
                  name : '_Appian'
 

            }
      });
</script>

input中輸入的name，會被時時獲取到；

v-on：事件繫結

<div id="app">
      輸入您的姓名: <input type="text" v-model="name">
      <button v-on:click="say">歡迎點選</button>
      <button @click="say">歡迎點選</button>   //縮寫
</div>
<script>
      var
 
 V = new Vue({
            el : '#app',
            data : {
                  name : '_Appian'
            },
            methods : {
                  say : function(){
                       alert('歡迎' + this.name);
                 }
            }
      });
</script>

還可以繫結其他的，如

v-if&v-show&v-else：條件判斷

<div id="app">
     <section v-if="loginStatus">
         輸入您的姓名: <input type="text" v-model="name">
         <button v-on:click="say">歡迎點選</button>
     </section>

     <section v-if="!loginStatus">
           登入使用者: <input type="text">
           登入密碼: <input type="password">
           <button @click="say">歡迎點選</button>
     </section>
</div>
<script>
      var V = new Vue({
            el : '#app',
            data : {
                  name : '_Appian',
                  loginStatus :　false
            },
            methods : {
                  say : function(){
                       alert('歡迎' + this.name);
                  },
                  change:function(){
                      this.loginStatus=!this.loginStatus;
                  },
            }
      });
</script>

this的執行就是例項V

一般來說，v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此，如果需要頻繁切換 v-show 較好，如果在執行時條件不大可能改變 v-if 較好。

v-for：輸出列表

<div id="app">
     <ul>
         <li v-for="el in products">
            {{ el.name }} - ￥ {{ el. price }} - {{ el. category }}
         </li>
     </ul>
</div>

<script>
      var V = new Vue({
            el : '#app',
            data : {
                   products : [
                         {name: 'microphone', price: 25, category: 'electronics'},
                         {name: 'laptop case', price: 15, category: 'accessories'},
                         {name: 'screen cleaner', price: 17, category: 'accessories'},
                         {name: 'laptop charger', price: 70, category: 'electronics'},
                         {name: 'mouse', price: 40, category: 'electronics'},
                         {name: 'earphones', price: 20, category: 'electronics'},
                         {name: 'monitor', price: 120, category: 'electronics'}
                   ]
            }
      });
</script>

物件裡的對應下標

//#1
<li v-for="el in products">
    {{ $index }} - {{ el.name }} - ￥ {{ el. price }} - {{ el. category }}
</li>

//#2
<li v-for="(index,el) in products">
   {{ index }} - {{ el.name }} - ￥ {{ el. price }} - {{ el. category }}
</li>