原文鏈接：https://www.cnblogs.com/itbainianmei/p/6062249.html 1.每個組件模板template,不再支持片段代碼 之前： <template> <h3>vue-router+vue-loader</h3> <p>hshsh</p> </templa ...
原文鏈接：https://www.cnblogs.com/itbainianmei/p/6062249.html
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'
});
