v-model指令

該指令用於數據的雙向綁定，即通過input text文本框，和Vue進行雙向的顯示。
一般用於表單元素。
只需要這樣編寫掛載目標：

<div id="app">
    <input type="text" v-model="message"/><br/>
    文本框的內容為:{{message}}
</div>

Vue實例的內容跟上節一樣不用變。
通過對文本框的輸入，Vue實例會自動解析並綁定到{{message}}進行渲染。

v-model為Vue的內部指令，到後面我們是可以指令的。

v-for指令

該指令，顧名思義，使用來循環的。

data:{
    arr:[‘51CTO‘,‘走著路‘,‘Vue‘,‘v-for‘]
}

2.然後再div中編寫

<div id="app">
    <ol>
        <li>51CTO博客</li>
        <li>走著路</li>
        <li>Vue</li>
        <li>v-for</li>
    </ol>
    <hr/>
    <ul>
        <li v-for="val in arr">{{val}}</li>
    </ul>
</div>
 

ol是手動寫的有序列表，下面的ul是我們通過v-for指令的無序列表。運行可看到顯示成功。
但如果想要索引和值，那麽修改:

<li v-for=‘(val,key) in arr‘>{{key}}={{val}}</li>

即可,註意，括號裏val在前，而模板顯示時時，key在前。需註意。

v-on指令

用於綁定事件的,類似onclick,onblur等等。
用法：v-on:事件="函數"
既然使用事件，那麽就要有一個新的選項methods來制定方法。
例如：

<div id=‘app‘>
    <button v-on:click="sayHi()">點擊方法，sayHi</button>
    <button @mouseover=‘mousevoer()‘>鼠標經過</button>
</div>

<script>
    var vm = new Vue({
        el:‘#app‘,
        data:{
            arr:[‘51CTO‘,‘走著路‘,‘Vue‘,‘v-for‘]
        },
        methods:{
            sayHi:function(){
                console.log(‘HelloWorld‘);
            },
            mousevoer(){
                console.log(‘mouseover‘);
            }
        }
    })
</script>
 

然後，打開控制臺，點擊按鈕，控制臺就會顯示HelloWorld，點擊多次，前面會有數字顯示次數。

v-on指令可以簡寫為@

v-once指令

用於只綁定一次

<input type="text" v-model="message"/><br/>
<h2 v-once>{{message}}</h2>
<h3>{{message}}</h3>

盡管v-model綁定message如何更改，message值總會變，但是h2通過v-once指令，它卻只能顯示一次，即‘HelloWorld‘這個初始綁定。而h3卻始終動態渲染。

其余常用的v-if,v-show在 條件渲染 中介紹
v-bind在 Class與Style綁定 中介紹

Vue2.0筆記——常用指令