zoukankan      html  css  js  c++  java
  • vue2.0有哪些变化

    • vue2.0之后有哪些变化:

      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'
           });

        

  • 相关阅读:
    周末之个人杂想(十三)
    PowerTip of the DaySorting Multiple Properties
    PowerTip of the DayCreate Remoting Solutions
    PowerTip of the DayAdd Help to Your Functions
    PowerTip of the DayAcessing Function Parameters by Type
    PowerTip of the DayReplace Text in Files
    PowerTip of the DayAdding Extra Information
    PowerTip of the DayPrinting Results
    Win7下IIS 7.5配置SSAS(2008)远程访问
    PowerTip of the DayOpening Current Folder in Explorer
  • 原文地址:https://www.cnblogs.com/itbainianmei/p/6062249.html
Copyright © 2011-2022 走看看