到了Vue2.x有哪些变化？—— 知识点

1. 关于模板：在每个组件模板中（template），不在支持片段代码。

个人理解：在template中必须有有一个根元素（root element）来包裹住所有代码。也就是template标签只能有一个亲儿子。

注意上面的模板（template）中，有两个根元素h3标签和span标签。报错如下图：

应该改成如下：

2. 关于组件的定义 ：利用json格式来代替extend定义组件。比较简洁。

3. 生命周期（钩子函数）

beforeCreate => 组件实例刚刚被创建，属性和方法都没有；
create => 属性和方法已经绑定成功，但DOM还没有生成；
beforeMount => 模板编译之前；
mounted => 模板已经编译完成，类似之前的ready,就是模板引擎数据有没有展示；有用
beforeUpdate => 组件（数据）更新之前，用于监测实例内的变化；有用
updated => 组件更新完毕;
beforeDestroy => 组件销毁之前; this.$destroy();
destroyed => 组件销毁之后;

    

        
        
        {{ msg }}
    

页面效果如图：

4. 循环（v-for）

在Vue1.x中默认不能添加重复数据，需要在此元素上添加“track-buy="$index"”，但是在2.x中是不需要的，默认就可以重复添加。

Vue2.x中去掉了，隐式的变量（$index、$key等），用的时候需要自己定义，类似原生js中的arr.forEach(function(val,key){});

    

        
        

            
 
                {{ val }}  => {{ key }}
            
        
    

页面效果如图：

5. 自定义键盘指令

绑定在 Vue.config上了

Vue.config.keyCodes.xxx = xxx;

6. 过滤器

Vue2.x把所有系统内置的过滤器都删除。但是可以直接展示json数据

    

        {{ msg }}
    

json数据展示如图：

注：可参考lodash工具库。

自定义传参的方式发生变化了（函数传参的方式），参数在括号内{{ msg | touble(1,2)}}

    

        {{ msg | touble(1,2)}}
    

效果如下图：

请看下回