vue.js权威指南----代码解释实例

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>