1:P61（值綁定）

<input type="checkbox" v-model="toggle" :true-value="a" :false-value="b"/><span>{{toggle}}</span> </div>

對應的js

var example = new Vue({el:'#example',data: {toggle: '',a:'aaa',b:'bbb'}});

效果選中狀態：

2：P74 過濾器 filter語法

js代碼：

var example = new Vue({el:'#example',data: {message: 'hello'},filters:{reserve:function(value,begin,end){return value+begin+end;}}});

相應的html

<span>{{ message | reserve('arg1', 'arg2') }}</span>

顯示效果為：?helloarg1arg2

但是按照書中的例子出不來效果；P76雙向過濾器出不來該效果：

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

js

Vue.filter('filterExample',{read:function(val){return 'read'+val;},write: function(newval,oldval){return oldval+'write';}});var example = new Vue({el:'#example',data: {message: 'hello'}});

?P96 methods配置：html：

<div id="example"><p>{{message}}</p><button class="mybox" v-on:click="green"></button> </div>

對應的js代碼：

var example = new Vue({el:'#example',data: {message: 'hello'},methods:{green:function(event){//注意這里的event和target的使用方法$(event.target).css('background','green');//使用$()形成 jquery對象 }}});

?P98 prevent阻止默認事件，stop阻止冒泡事件：

<div id="example"><a v-on:click.stop.prevent="doThat" href="http://www.baidu.com">鏈接</a> </div>

js代碼：

var example = new Vue({el:'#example',data: {message: 'hello'},methods:{green:function(event){$(event.target).css('background','green');},doThat:function(){alert('nihao');}} });

效果：點擊鏈接后不會跳轉，而是執行doThat函數，出現alert警告。

P108 要注意組件的名稱：

var ddComponent=Vue.extend({template:'<p>this is a template</p>'});Vue.component('didi-component',ddComponent);var example = new Vue({el:'#example',data: {message: 'hello'}});

這里組件didi-component的名字還可以寫成component，但注意不要寫成didiComponent的駝峰式寫法

相應的html為：

<div id="example"><didi-component></didi-component> </div>

?

轉載于:https://www.cnblogs.com/xiaozhumaopao/p/6400717.html

總結

以上是生活随笔為你收集整理的vue.js权威指南----代码解释实例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。