Vue.js學習筆記： 指令

標籤：vue.js 指令 v-in v-model v-on v-bind v-for

指令(Directives)是特殊的帶有首碼v-的特性。指令的值限定為綁定運算式，指令的職責就是當其運算式的值改變時把某些特殊的行為應用到DOM上

HTML：

<div id="test01">    <p v-if="greeting">Hello!</p></div>

這裡，v-if指令將根據運算式greeting值得真假  刪除/插入p元素

JS：

var vm1=new Vue({    el:‘#test01‘,    data:{        greeting:false    }});

當greeting取值為false時，查看頁面效果和控制台

650) this.width=650;" src="http://s2.51cto.com/wyfs02/M02/88/80/wKiom1f58mHAK7bgAAEPbjR0TEM356.png" title="QQ20161009153045.png" alt="wKiom1f58mHAK7bgAAEPbjR0TEM356.png" />

當greeting取值為true時，查看頁面效果和控制台

650) this.width=650;" src="http://s4.51cto.com/wyfs02/M02/88/80/wKiom1f58nahgonvAAER3Y0dmrc663.png" title="QQ20161009153121.png" alt="wKiom1f58nahgonvAAER3Y0dmrc663.png" />這裡需要注意的是，v-if="greeting"不能用於根項目之上，也就是說必須用於某一元素的子項目之上，否則，控制台就會報錯"[Vue warn]: v-if="greeting" cannot be used on an instance root element."

查看錯誤樣本：

HTML:

<p v-if="greeting">Hello!</p>

JS:

var vm=new Vue({    el:‘p‘,    data:{        greeting:true    }});

控制台錯誤提示：

650) this.width=650;" src="http://s1.51cto.com/wyfs02/M01/88/7D/wKioL1f58-qR9hoWAADvhbjsY_E379.png" title="QQ20161009153758.png" alt="wKioL1f58-qR9hoWAADvhbjsY_E379.png" />有些指令可以在其名稱後面帶一個”參數“(Argument)，中間放一個冒號隔開。例如：v-bind指令用於響應地更新HTML特性

HTML：

<a id="test02" v-bind:href="url">v-bind連結</a>

這裡href是參數，它告訴v-bind指令將元素的href特性跟運算式url的值綁定

JS：

var vm2=new Vue({    el:‘#test02‘,    data:{        url:‘http://cn.vuejs.org/‘    }});

v-on指令用於監聽DOM事件

HTML:

<div id="test03" >    <p>{{message}}</p>    <button v-on:click="reverseMessage">Reverse Message</button></div>

JS:

var vm3=new Vue({    el:‘#test03‘,    data:{        message:‘顛倒字型順序‘    },    methods:{        reverseMessage:function(){            //console.log(this)  this指代div#test03            this.message=this.message.split(‘‘).reverse().join(‘‘)        }    }});

v-model指令實現雙向資料繫結

這個指令只能用在<input>, <select>,<textarea>這些表單元素上，所謂雙向資料繫結，指的就是在JS執行個體中的data與其渲染的dom元素上的內容保持一致，二者任何一個被改變，另一個也會相應的更新為相同的內容，這是通過屬性訪問器實現的。

HTML：

<div id="test04">    <p>{{message}}</p>    <input type="text" v-model="message"></div>

JS：

var vm4=new Vue({    el:‘#test04‘,    data:{        message:‘雙向資料繫結‘    }});

v-for列表渲染，用作迴圈遍曆，類似ng中的ng-repeat

HTML：

<div id="test05">    <ul>        <li v-for="todo in todos">{{todo.text}}</li>    </ul></div>

JS：

var vm5=new Vue({    el:‘#test05‘,    data:{        todos:[            {text:‘Learn JavaScript‘},            {text:‘Learn Vue.js‘},            {text:‘Learn Angular.js‘}        ]    }});

再來兩個綜合的例子回顧下以上幾個指令的用法

HTML：

<div id="zongHe">    <input type="text" v-model="newTodo" v-on:keyup.enter="addTodo">    <ul>        <li v-for="todo in todos">            <span>{{todo.text}}</span>            <button v-on:click="removeTodo($index)">X</button>        </li>    </ul></div>

JS：

var vm=new Vue({    el:‘#zongHe‘,    data:{        newTodo:‘‘,        todos:[            {text:‘add some todos‘}        ]    },    methods:{        addTodo:function(){            var text=this.newTodo.trim();            if(text){                this.todos.push({text:text}),                this.newTodo=‘‘            }        },        removeTodo:function(index){            this.todos.splice(index,1)        }    }});

HTML:

<form id="demo">    <!-- text -->    <p>        <input type="text" v-model="msg">        {{msg}}    </p>    <!-- checkbox -->    <p>        <input type="checkbox" v-model="checked">        {{checked ? "yes" : "no"}}    </p>    <!-- radio buttons -->    <p>        <input type="radio" name="picked" value="one" v-model="picked">        <input type="radio" name="picked" value="two" v-model="picked">        {{picked}}    </p>    <!-- select -->    <p>        <select v-model="selected">            <option>one</option>            <option>two</option>        </select>        {{selected}}    </p>    <!-- multiple select -->    <p>        <select v-model="multiSelect" multiple>            <option>one</option>            <option>two</option>            <option>three</option>        </select>        {{multiSelect}}    </p>    <p><pre>data: {{$data | json 2}}</pre></p></form>

JS:

var demoVm=new Vue({    el:‘#demo‘,    data:{        msg:‘hi!‘,        checked:true,        picked:‘one‘,        selected:‘two‘,        multiSelect:[‘one‘, ‘three‘]    }});

查看頁面效果：

650) this.width=650;" src="http://s4.51cto.com/wyfs02/M02/88/82/wKiom1f6DkfQibyZAAIed36tIRA097.png" title="QQ20161009173016.png" alt="wKiom1f6DkfQibyZAAIed36tIRA097.png" />

本文出自 “dapengtalk” 部落格，請務必保留此出處http://dapengtalk.blog.51cto.com/11549574/1859897

Vue.js學習筆記： 指令