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”