Vue1.x 到Vue2.0的一个变化-优快云博客

本文详细介绍了Vue从1.x升级到2.0的主要变化，包括模板结构的调整、组件定义方式的变化、生命周期钩子的更新、v-for循环语法的改进、自定义键盘指令的增强、过滤器的使用及组件间通信方式的改进等内容。

小弟初来乍到，写的不好的地方还望指正。谢谢各位！

　　废话不多说进入正题：

　　　　Vue1.x到2.0的一个变化

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

                            之前:
   　　　　　　　　　　　　　　　　　　<template>
    　　　　　　　　　　　　　　　　　　　　<h3>我是组件</h3><strong>我是加粗标签</strong>
   　　　　　　　　　　　　　　　　　　</template>
  　　　　　　　　　　　　　　　　现在:  必须有根元素，包裹住所有的代码
   　　　　　　　　　　　　　　　　　　<template id="aaa">
        　　　　　　　　　　　　　　　　  　　 <div>
       　　　　　　　　　　　　　　　      　　　　  <h3>我是组件</h3>
            　　　　　　　　　　　　　　　　　 　　  <strong>我是加粗标签</strong>
          　　　　　　　　　　　　　　　　　　 </div>
   　　　　　　　　　　　　　　　　　　</template>

　　　　　　　　2. 关于组件定义

　　　　　　　　　　　　Vue.extend 这种方式，在2.0里面有，但是有一些改动，这种写法，即使能用，咱也不用——废弃
 
 　　　　　　　　　　　Vue.component(组件名称,{ 在2.0继续能用
 　　　　　　　　　　　　　　 data(){}
 　　　　　　　　　　　　　　 methods:{}
　　　　　　　　　　　　　　  template:
　　　　　　　　　　　　 });
 　　　　　　　　　　2.0推出一个组件，简洁定义方式：
 　　　　　　　　　　　　var Home={
 　　　　　　　　　　　　　　 template:''  ->   Vue.extend()
 　　　　　　　　　　　　};

　　　　　　　　3. 生命周期

之前:
        init    
        created
        beforeCompile
        compiled
        ready        √    ->     mounted
        beforeDestroy          
现在:
        beforeCreate    组件实例刚刚被创建,属性都没有
        created    实例已经创建完成，属性已经绑定
        beforeMount    模板编译之前
        mounted    模板编译之后，代替之前ready  *
        beforeUpdate    组件更新之前
        updated    组件更新完毕    *
        beforeDestroy    组件销毁前
        destroyed    组件销毁后

　　　　　　　　4. 循环　　　　　　　

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

   　　　　 去掉了隐式一些变量
      　　　　  $index    $key

    　　　　之前:
       　　　　 v-for="(index,val) in array"
    　　　　现在:
      　　　　  v-for="(val,index) in array"

　　　　　　　　5. 自定义键盘指令

　　　　　　　之前：Vue.directive('on').keyCodes.f1=17;    
    
　　　　　　　现在:  Vue.config.keyCodes.ctrl=17

　　　　　　　　6.过滤器

    之前:
        系统就自带很多过滤
        {{msg | currency}}
        {{msg | json}}
        ....
        limitBy
        filterBy
        .....
    一些简单功能，自己通过js实现

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


    lodash    工具库    _.debounce(fn,200)


    自定义过滤器——还有
        但是,自定义过滤器传参

        之前:    {{msg | toDou '12' '5'}}
        现在:     {{msg | toDou('12','5')}}

　　　　　　　　7.组件通信

　　 vm.$emit()
    vm.$on();

    父组件和子组件:

    子组件想要拿到父组件数据:
        通过  props

    之前，子组件可以更改父组件信息，可以是同步  sync
    现在，不允许直接给父级的数据，做赋值操作

    问题，就想更改：
        a). 父组件每次传一个对象给子组件, 对象之间引用    √
        b). 只是不报错, mounted中转

转载于:https://www.cnblogs.com/fzng/p/7227327.html