一 轉(zhuǎn)義輸出html
- 棄用了原來<span>{{{message}}}</span>寫法，只保留了<span v-html="message"></span>的寫法。
二 v-for循環(huán)中常用的$index、$key也已不支持使用
三 過濾器
- 2.0不再有自帶過濾器，需要自己定義
- 在vue2.0里 過濾器只能用類似函數(shù)的寫法reverseString( ‘I must tell you:’)，括號內(nèi)是參數(shù)，不同于vue1.0的用空格后加參數(shù)的寫法；
- v-text里用過濾器失效，原因是在vue2.0里 管道符‘|’只能用在mousetache和v-bind中。
Vue.filter('filtername',function(value,參數(shù)){
return 參數(shù)+value.split('').reverse().join('');
});
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
</style>
</head>
<script src='./vue2.js'></script>
<script>
window.onload=function(){
//類似于自定義指令，可以用全局方法 Vue.filter() 注冊一個(gè)自定義過濾器，它接收兩個(gè)參數(shù)：過濾器 ID 和過濾器函數(shù)。
Vue.filter('reverseString',function(value,myString){
// function里第一個(gè)參數(shù)value默認(rèn)為使用這個(gè)過濾器的data值，在本例中是msg的值'you are mine'。請注意：第一個(gè)參數(shù)必須為自身的值，后面可以加任意多的參數(shù)
return myString+value.split('').reverse().join('');
});
new Vue({
el:'#box',
data:{
msg:'you are mine'
}
});
};
</script>
<body>
<div id='box'>
<p>msg is: <br>{{msg}}</p>
<hr>
<p>reverse msg is: <br>{{msg|reverseString( 'Hello:' )}}</p><!-- 在vue2.0里 過濾器只能用類似函數(shù)的寫法reverseString( 'I must tell you:')，括號內(nèi)是參數(shù)，不同于vue1.0的用空格后加參數(shù)的寫法" msg|reverseString 'I must tell you:' " -->
<!-- <p v-text="msg|reverseString( 'I must tell you:' )"></p>失效 -->
<!-- v-text里用過濾器失效，原因是在vue2.0里 管道符‘|’只能用在mousetache和v-bind中 -->
</div>
</body>
</html>
四 組件定義的變化
- 在每個(gè)組件模板中,組件的定義有一點(diǎn)變化且不再支持片段代碼
之前可以寫片段代碼
<template>
<h3>我是標(biāo)題</h3>
<strong>我是組件</strong>
</template>
現(xiàn)在必須有一個(gè)根元素包裹
<template id="aaa">
<div>
<h3>我是標(biāo)題</h3>
<strong>我是組件</strong>
</div>
</template>
Vue.component('my-aaa',{
template:'#aaa'
});
- vue2.0組件定義的變化：(不再支持Vue.extend()的定義方式,有改動)
- Vue.component在2.0繼續(xù)能夠使用,但是不簡潔
Vue.component(組件名稱,{
data(){},
methods:{},
template:''
});
- vue2.0推薦定義組件的一個(gè)簡潔的方法
var Home={ //定義一個(gè)json,即是定義的一個(gè)組件
template:'#aaa'
}; //相當(dāng)于vue1.0之前的vue.extend();
Vue.component('my-aaa',Home); //定義好組件之后,需要注冊
<template id="aaa">
<div>
<h3>我是標(biāo)題</h3>
<strong>我是組件</strong>
</div>
</template>
五 組件通信的變化
子組件與父組件:
- 子組件想要拿到父組件的數(shù)據(jù)
- 通過props，沒有更改
- $broadcast()，已廢除
父組件里：
<parent>
<child :child-msg="msg"></child>//這里必須要用 - 代替駝峰
</parent>
data(){
return {
msg: [1,2,3]
};
}
子組件通過props來接收數(shù)據(jù)
法一：
props: ['childMsg']
法二：
props: {
childMsg: Array //這樣可以指定傳入的類型，如果類型不對，會警告
}
法三：
props: {
childMsg: {
type: Array,
default: [0,0,0] //這樣可以指定默認(rèn)的值
}
}
例子：
<body>
<div id="box">
<aaa>
</aaa>
</div>
<template id="aaa">
<h1>11111</h1>
<bbb :mmm="msg2"></bbb>
</template>
<script>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
data(){
return {
msg2:'我是父組件的數(shù)據(jù)'
}
},
template:'#aaa',
components:{
'bbb':{
props:['mmm'],
template:'<h3>我是bbb組件->{{mmm}}</h3>'
}
}
}
}
});
</script>
</body>
- 子組件想要更改父組件數(shù)據(jù)/傳遞數(shù)據(jù)給父組件
在vue1.0中：
- 子組件利用$dispatch()來向父組件傳遞數(shù)據(jù)，2.0已廢除
- 子組件調(diào)用$emit和父組件用v-on監(jiān)聽子組件的變化，進(jìn)而獲取數(shù)據(jù)
vm.$emit(事件名,數(shù)據(jù));
v-on: @
子組件:
<template>
<div @click="send"></div>
</template>
methods: {
send() {
this.$emit('child-msg','我是子組件數(shù)據(jù)'); //主動觸發(fā)child-msg方法，‘我是子組件數(shù)據(jù)’為向父組件傳遞的數(shù)據(jù)
}
父組件
<div>
<child @child-msg="change" :msg="msg"></child> //監(jiān)聽子組件觸發(fā)的child-msg事件,然后調(diào)用change方法
</div>
methods: {
change(msg) {
this.msg = msg;
}
}
例子：
<body>
<div id="box">
<aaa>
</aaa>
</div>
<template id="aaa">
<span>我是父級 -> {{msg}}</span>
<bbb @child-msg="get"></bbb>
</template>
<template id="bbb">
<h3>子組件-</h3>
<input type="button" value="send" @click="send">
</template>
<script>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
data(){
return {
msg:111,
msg2:'我是父組件的數(shù)據(jù)'
}
},
template:'#aaa',
methods:{
get(msg){
// alert(msg);
this.msg=msg;
}
},
components:{
'bbb':{
data(){
return {
a:'我是子組件的數(shù)據(jù)'
}
},
template:'#bbb',
methods:{
send(){
this.$emit('child-msg',this.a);
}
}
}
}
}
}
});
</script>
</body>
六 自定義鍵盤指令
之前：Vue.directive('on').keyCodes.f1=17;
現(xiàn)在: Vue.config.keyCodes.ctrl=17
六 Vue過渡
- 之前：transition 屬性
<p transition="fade"></p>
.fade-transition{}
.fade-enter{}
.fade-leave{}
- 現(xiàn)在： transition 組件
<transition name="fade">
</transition>
.fade-transition{}
.fade-enter{}
.fade-leave{}
