vue2.0变化(转载)

2018-06-24 01:04:59来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

原文链接:https://www.cnblogs.com/itbainianmei/p/6062249.html

  1.每个组件模板template,不再支持片段代码

    之前:

      <template>
        <h3>vue-router+vue-loader</h3>
        <p>hshsh</p>
      </template>

       现在:必须有根元素   

        <template>

          <div>
            <h3>vue-router+vue-loader</h3>
            <p>hshsh</p>

          </div>
        </template>

  2.推出一个新的组件 

     如var home={

          template:' '  ->   代替了之前的Vue.extend({})的形式,直接把对象抛出来,就认为成是组件了。

        }

  3.生命周期

    之前:

    init created  beforeCompile  compiled  ready   beforeDestroy  destroyed

    现在:

    beforeCreate  组件实例刚刚被创建,属性都没有

    created          组件实例创建完毕,属性已经绑定

    beforeMount  模板编译之前

    mounted    模板编译之后,代替了之前的ready*

    beforeUpdate  组件更新之前

    updated     组件更新完毕

    beforeDestroy  组件销毁之前

    destroyed         组件销毁后

  4.循环

     2.0默认可以添加重复的数据,之前是必须加个track-by="$index"

        arr.forEach(function(item,index){ });

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

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

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

  5.track-by="$index"

     变成<li v-for="(val,index) in arr" :key="index" >

  6.自定义键盘指令

       之前:Vue.directive("on").keyCodes.ctrl = 17;

       现在:Vue.config.keyCodes.ctrl = 17;

   7.过滤器

       内置过滤器都删了

       自定义过滤器还有,但是:

      之前:{{msg | toDou '12' '5'}}

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

      8.组件通信  vm.$emit()  vm.$on()

      子级想拿到父级的数据:通过props

      之前子组件可以更改父组件信息,利用sync   eg:  :msg.sync="change"

      现在不允许

      如何改:

      a)父组件每次传一个对象给子组件,对象引用

      b)只是追求不报错,可以用mounted的钩子函数,改变自身数据

      9.可以单一事件管理组件通信  ps:vuex以后单独学习

      var Event = new Vue();

      Event.$emit('事件名','数据');

      Event.$on('事件名',function(){  }.bind(this));

      10.动画

      transition不再是属性:transition="fade"

      而是像模板一样的标签了<transition name="fade" @before-enter="" @enter="" @after="" @before-leave="" @leave="" @after-leave="">这里放运动的元素,属性,路由。。。</transition>

      .fade-enter-active,.fade-leave-active{transition:1s all ease;}

      .fade-enter  初始状态

      .fade-enter-active 变成什么样,元素显示出来的时候

      .fade-leave 

      .fade-leave -active 变成什么样,元素离开的时候

 

      配合animate.css使用:把fade和name去掉。给transition加enter-active-class="zoomInleft" leave-active-class="zoomOutRight",给运动的元素本身加class="animated"

      如果一组元素运动,标签换成<transition-group></transition-group>并且把每个运动元素加个:key="index",其他同上

   11.路由vue-router和vue-loader

    路由改变:

    1.布局的改变

    之前:<a v-link="{path:'/home'}">我是主页</a>

    现在:<router-link to="/home">我是主页</router-link>  它会自动解析成a v-link形式

    <router-view>没变

    2.路由具体写法

    var Home ={      //准备组件

      template:'<h3>我是主页</h3>'

    }

    const routes = [   //配置路由

      {path:'/home',component:Home},

      {path:'*',redirect:'/home'}   //重定向

      ...一个个json

    ];

    const router = new VueRouter({routes:routes});  //生成路由实例   简写成对象的形式 :const router = new VueRouter({routes});

    new Vue({   //最后挂到vue上

      router,

      el:'#box'

    });

    vue-loader一样的。配合起来使用也一样。

  12.路由嵌套

    const routes = [   //配置路由

      {path:'/home',component:Home},

      {path:'/news',component:News,

        children:[

          {path:'/newsname',component:newsNameDetail},

          {}

        ]

      },

      {path:'*',redirect:'/home'}   //重定向

      ...一个个json

    ];

    带有参数的路由配置

    

    //组件
    var Home={
      template:'<h3>我是主页</h3>'
    };
    var User={
      template:`
      <div>
      <h3>我是用户信息</h3>
      <ul>
        <li><router-link to="/user/strive/age/10">Strive</router-link></li>
        <li><router-link to="/user/blue/age/80">Blue</router-link></li>
        <li><router-link to="/user/eric/age/70">Eric</router-link></li>
      </ul>
      <div>
      <router-view></router-view>
      </div>
      </div>
      `
    };
    var UserDetail={
      template:'<div>{{$route.params}}</div>'
    };

    //配置路由
    const routes=[
      {path:'/home', component:Home},
      {
      path:'/user',
      component:User,
        children:[
          {path:':username/age/:age', component:UserDetail}
        ]
      },
       {path:'*', redirect:'/home'} //404
     ];

      //生成路由实例
      const router=new VueRouter({
        routes
      });


      //最后挂到vue上
      new Vue({
        router,
        el:'#box'
       });

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:面向接口编程

下一篇:javascript设计模式——适配器模式