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

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

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

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

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

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

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

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

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

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

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

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