二

为什么要有Vue.set的存在?


由于Javascript的限制，Vue不能自动检测以下变动的数组。


*当你利用索引直接设置一个项时，vue不会为我们自动更新。


*当你修改数组的长度时，vue不会为我们自动更新。

全局API混入方式

Vue.mixin({

                updated:function () {

                    console.log('我是全局被混入的');

                }

            })

PS：全局混入的执行顺序要前于混入和构造器里的方法。

 

Extends Option  扩展选项

varbbb = {

            created:function () {

                console.log("我是被扩展出来的");

            },

            methods: {

                add:function () {

                    console.log('我是被扩展出来的方法！');

                }

            }

        };

        varapp = newVue({

            el:'#app',

            data: {

                message:'hello Vue!'

            },

            methods: {

                add:function () {

                    console.log('我是原生方法');

                }

            },

            extends:bbb

        })

 

 

delimiters 选项

delimiters的作用是改变我们插值的符号。Vue默认的插值是双大括号{{}}。但有时我们会有需求更改这个插值的形式。

delimiters:['${','}']现在我们的插值形式就变成了${}。

 

Vue和Jquery.js一起使用

和以前的引入方法是一样的

<scriptsrc="../assets/js/vue.js"></script>

    <scripttype="text/javascript"src="../assets/js/jquery-3.1.1.min.js"></script>

但是操作要写在mounted中

  mounted:function(){

                $('#app').html('jQuery!');

            }

 

实例事件就是在构造器外部写一个调用构造器内部的方法。这样写的好处是可以通过这种写法在构造器外部调用构造器内部的数据。

 

$on  在构造器外部添加事件。

app.$on('reduce',function(){

    console.log('执行了reduce()');

    this.num--;

});

$on接收两个参数，第一个参数是调用时的事件名称，第二个参数是一个匿名方法。

 

如果按钮在作用域外部，可以利用$emit来执行。

$emit触发自定义事件

//外部调用内部事件

functionreduce(){

    app.$emit('reduce');

}

$once执行一次的事件

app.$once('reduceOnce',function(){

    console.log('只执行一次的方法');

    this.num--;

 

});

 

$off关闭事件

//关闭事件

functionoff(){

   app.$off('reduce');

}