Vue#2.0__（阶段二）

Vue2.0生命周期

beforeCreate()
组件实例刚刚被创建
created()
实例已经创建完成
beforeMount()
模板编译之前
mounted()
模板编译完成
beforeUpdate()
组件更新之前
updated()
组件更新完毕
beforeDestroy()
组件销毁之前
destroyed()
组件销毁之后
HTML

        
        
        {{msg}}
    

javascript

        window.onload=function(){
            new Vue({
                el:'#box',
                data:{
                    msg:'welcome vue2.0'
                },
                methods:{
                    update(){
                        this.msg='大家好';
                    },
                    destroy(){
                        this.$destroy();
                    }
                },
                beforeUpdate(){
                    console.log('组件更新之前');
                },
                updated(){
                    console.log('组件更新完毕');
                },
                beforeDestroy(){
                    console.log('组件销毁之前');
                },
                destroyed(){
                    console.log('组件销毁之后');
                }
            });
        };
    

image.png

点击“更新数据”按钮，
执行方法函数 update()，数据对象的msg被重新赋值，重新编译模板，组件重新渲染。
打出“组件更新之前”，打出“组件更新完毕”
点击“销毁组件”按钮，
执行方法函数 destroy()，执行组件自带的销毁组件函数 this.$destroy。
打出“组件销毁之前”，打出“组件销毁之后”

组件定义方式

1. 在每个组件模板，不在支持片段代码

组件中模板:

之前:

现在: 必须有根元素，包裹住所有的代码

2. 关于组件定义

Vue.extend  

这种方式，在2.0里面有，但是有一些改动，这种写法，即使能用，咱也不用——废弃

Vue.component(组件名称,{    在2.0继续能用
    data(){}
    methods:{}
    template:
});

2.0推出一个组件，简洁定义方式：

var Home={
    template:''     ->   Vue.extend()
};

循环

2.0里面默认就可以添加重复数据

arr.forEach(function(item,index){

});

去掉了隐式一些变量

    $index  $key

之前:

    < li  v-for="(index,val) in array"    track-by="id">

现在:

自定义键盘指令

之前：

     Vue.directive('on').keyCodes.f1=17;    

现在:

     Vue.config.keyCodes.ctrl=17

过滤器

内置过滤器

之前:系统就自带很多过滤器

    {{msg | currency}}
    {{msg | json}}
    ....
    limitBy
    filterBy
    .....
一些简单功能，自己通过js实现

到了2.0， 内置过滤器，全部删除了

自定义过滤器传参

之前:

   {{msg | toDou '12' '5'}}

现在:

   {{msg | toDou('12','5')}}