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”