Vue版本过渡变化

Posted 2020-09-20 嘉爷

到了2.0以后，有哪些变化：

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

之前:

<template id=”aaa”>

<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推出一个组件，简洁定义方式：类似于Vue.extend()

var Home={

template:‘#aaa‘

};

 Vue.component(‘my-aaa‘,Home);

 

 

3、关于生命周期

之前:

created：       当new Vue执行后，即实例已经创建时执行

beforeCompile：当开始编译html页面所有的Vue语法之前执行

compiled：     当编译HTML页面所有的Vue语法结束之后执行

ready：       当编译结束后把所有元素挂到Dom树，即插入到文档中后执行

beforeDestroy : 销毁之前

destroyed :     销毁之后

现在：

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

created        实例已经创建完成，属性已经绑定

beforeMount 模板编译之前，页面的｛｛｝｝未替换

mounted 模板编译之后，代替之前ready  *

beforeUpdate 组件更新之前

updated 组件更新完毕 *

beforeDestroy 组件销毁前

destroyed 组件销毁后

 

4、关于生命周期v-for

2.0里面默认就可以添加重复数据，不需要使用track-by=‘$index/uid‘

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

之前:                    index表示下标，val表示当前的值

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

 

现在:

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

 

track-by="id" 变成      <li v-for="(val,index) in list" :key="index">

 

 

5、自定义键盘信息

之前：

 

Vue.directive(‘on‘).keyCodes.ctrl=17;

 

 

 

现在: 

 Vue.config.keyCodes.ctrl=17

 

 

6、关于过滤器，推荐自定义写法

之前:

系统就自带很多过滤

{{msg | currency}}   {{msg | json}}   limitBy    filterBy

 

 

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

推荐使用lodash 工具库

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

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

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

 

 

7、关于父子组件直接的数据交互

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

之前：

子组件可以更改父组件信息，可以是同步  sync

现在：

不允许直接给父级的数据，做赋值操作

 

解决办法：

a). 父组件每次传一个对象给子组件, 对象之间引用 。将数据变成对象

b). 只是不报错, mounted中转，将数据赋值后更改，不直接更改

 

8、可以单一事件管理组件通信: vuex

在全局定义一个vue对象

var Event=new Vue();

 

在发送出数据的组件内定义一个方法，点击触发。调用vue对象中的$emit

      send(){   Event.$emit (‘a-msg‘,this.a);  }

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

 

在接收数据的组件中调用调用vue对象中的$on进行接收数据

    Event.$on(‘a-msg‘,function(a){

                     this.a=a;

                 }.bind(this));

Event.$on(事件名称,function(data){

//data

}.bind(this));

 

 

 

9、动画过渡

 之前： transition 作为一个属性使用

HTML元素：<p transition="fade"></p>

定义CSS：.fade-transition{}

.fade-enter{}

.fade-leave{}

 

 

现在：transition 作为一个组件HTML标签

<transition name="fade">

需要运动的对象(可以是元素，属性、路由....)

</transition>

 

定义CSS:

.fade-enter{}         //初始状态，即目标元素原本的状态

.fade-enter-active{}   //变化成什么样  ->  当元素出来(显示)的时候的状态

.fade-leave{}         //离开前的状态

.fade-leave-active{}  //变成成什么样   -> 当元素离开(消失)的时候的状态

 

例子：

 

<transition name="fade"><p v-show="show"></p> </transition>

  .fade-enter-active, .fade-leave-active{   //定义总的动画时间

            transition: 1s all ease;

        }

    .fade-enter,.fade-leave{             //动画前的状态

            opacity:0;

            width:100px;

            height:100px;

        }

        .fade-enter-active{         //目标元素出现（显示）时的动画

            opacity:1;

            width:300px;

            height:300px;

        }

        .fade-leave-active{   //目标元素消失（隐藏）时的动画

            opacity:0;

            width:100px;

            height:100px;

        }

 

 

transition内部具备多个方法函数：后面跟的·是一个方法

  @before-enter="beforeEnter"        显示前触发

  @enter="enter"                      显示时触发

  @after-enter="afterEnter"            显示后触发

  @before-leave="beforeLeave"        消失前触发

  @leave="leave"                      消失时触发

  @after-leave="afterLeave"            消失后触发

方法名不可改变，每个方法函数可传入el值，表示当前动画对象

例子：

 

 <transition name="fade @before-enter="beforeEnter" >


  </transition>

 

 

  methods:{

          beforeEnter(el){         //定义动画之前的方法，el表示动画对象

                console.log(‘动画enter之前‘);

                    },

        }

 

 

 

如何animate.css配合用？

直接在transition标签内调用animate.css的class样式

<transition enter-active-class="bounceInLeft"   leave-active-class="bounceOutRight">

       <p v-show="show" class="animated"></p>   //调用animated

</transition>

 

 

当一个transition内有多个元素需要使用动画时，使用transition-group，并且使用 :key 标注顺序

 

例子一：

    <transition-group enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">

            <p v-show="show" class="animated" :key="1"></p>

            <p v-show="show" class="animated" :key="2"></p>

   </transition-group>

 

例子二：

<transition-group enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">

    <p v-show="show" class="animated" v-for="(val,index) in lists" :key="index">

            {{val}}

     </p>

 </transition-group>

 

10、关于路由

基本使用:

1.  布局

<router-link to="/home">主页</router-link>      //不再使用a标签

<router-view></router-view>

 

2. 路由具体写法

//声明各个组件

var Home={

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

};

var News={

    template:‘<h3>我是新闻</h3>‘

};

//配置路由对应的组件

const routes=[

    {path:‘/home‘, componet:Home},

    {path:‘/news‘, componet:News},

];

 

//生成路由实例

const router=new VueRouter({

    routes                    //相当于routes ：routes

});

 

//最后挂到vue上

new Vue({

    router,                     //相当于 router：router

    el:‘#box‘

});

 

3. 重定向redirect

之前  router.rediect  废弃了

{path:‘*‘, redirect:‘/home‘}             

//  *表示任何一个路由链接，当找不到路由的情况下也会跳转到这个位置

 

 

路由嵌套 : children

<router-link to="/user/username">跳转到子路由</router-link>

const routes=[                     //配置路由对应的组件

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

    {

        path:‘/user‘,

        component:User,

        children:[                     //写在嵌套的路由里面，使用children

            {path:‘username‘, component:UserDetail}

        ]

    },

    {path:‘*‘, redirect:‘/home‘}              //404错误默认跳转

];

 

 

路由之间的数据携带：$route.params

<router-link to="/user/strive/age/10">Strive</router-link>   //注意链接{path:‘:username/age/:age‘, component:UserDetail} //使用：表示携带数据

<div>{{$route.params}}</div>   //页面展示该路由携带的数据

 

 

路由实例方法:  表现为是否产生历史记录

router.push({path:‘home‘});   //直接添加一个路由,表现切换路由，本质往历史记录里面添加一个

router.replace({path:‘news‘})          //替换路由，不会往历史记录里面添加

例子：

 methods:{

                push(){    router.push({path:‘home‘});      },

                replace(){  router.replace({path:‘user‘});   }

            }

 

给路由切换添加动画：使用animate.css

直接将 <router-view></router-view>放在transition 标签内

例子：

<transition enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">

                <router-view></router-view>

 </transition>

 

11、关于脚手架

添加路由命令：npm install vue-router --save

main.js文件内发生变化，本质上没有区别，其他都一样写法

 之前：

new Vue({

   el: ‘#app‘,

   components:{App}

})

 

现在：

new Vue({

  el: ‘#app‘,

  render: h => h(App)

})

 

在vue-loader里面为路由添加动画

1、直接在index.html页面引入

2、在main.js顶部引入，直接打包成一个文件

注意：需要另外按照style-loader  css-loader两个模块

命令行：npm install style-loader css-loader

并在webpack.config.js文件中配置

   {

        test: /\.css$/,

        loader: ‘style!css‘                 //顺序定死的

      }

 

 

例子：

 

import ‘./assets/css/animate.css‘;

 

 

 

 

12、关于与后台的数据交互

推荐使用axios

跟vue-resourse使用方式完全一样

命令行安装：npm install axios --save-dev

页面引入：  import axios from “axios”