Vue版本过渡变化

到了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”