一 转义输出html
- 弃用了原来<span>{{{message}}}</span>写法，只保留了<span v-html="message"></span>的写法。
二 v-for循环中常用的$index、$key也已不支持使用
三 过滤器
- 2.0不再有自带过滤器，需要自己定义
- 在vue2.0里 过滤器只能用类似函数的写法reverseString( ‘I must tell you:’)，括号内是参数，不同于vue1.0的用空格后加参数的写法；
- v-text里用过滤器失效，原因是在vue2.0里 管道符‘|’只能用在mousetache和v-bind中。
Vue.filter('filtername',function(value,参数){
return 参数+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() 注册一个自定义过滤器，它接收两个参数：过滤器 ID 和过滤器函数。
Vue.filter('reverseString',function(value,myString){
// function里第一个参数value默认为使用这个过滤器的data值，在本例中是msg的值'you are mine'。请注意：第一个参数必须为自身的值，后面可以加任意多的参数
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里 过滤器只能用类似函数的写法reverseString( 'I must tell you:')，括号内是参数，不同于vue1.0的用空格后加参数的写法" 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>
四 组件定义的变化
- 在每个组件模板中,组件的定义有一点变化且不再支持片段代码
之前可以写片段代码
<template>
<h3>我是标题</h3>
<strong>我是组件</strong>
</template>
现在必须有一个根元素包裹
<template id="aaa">
<div>
<h3>我是标题</h3>
<strong>我是组件</strong>
</div>
</template>
Vue.component('my-aaa',{
template:'#aaa'
});
- vue2.0组件定义的变化：(不再支持Vue.extend()的定义方式,有改动)
- Vue.component在2.0继续能够使用,但是不简洁
Vue.component(组件名称,{
data(){},
methods:{},
template:''
});
- vue2.0推荐定义组件的一个简洁的方法
var Home={ //定义一个json,即是定义的一个组件
template:'#aaa'
}; //相当于vue1.0之前的vue.extend();
Vue.component('my-aaa',Home); //定义好组件之后,需要注册
<template id="aaa">
<div>
<h3>我是标题</h3>
<strong>我是组件</strong>
</div>
</template>
五 组件通信的变化
子组件与父组件:
- 子组件想要拿到父组件的数据
- 通过props，没有更改
- $broadcast()，已废除
父组件里：
<parent>
<child :child-msg="msg"></child>//这里必须要用 - 代替驼峰
</parent>
data(){
return {
msg: [1,2,3]
};
}
子组件通过props来接收数据
法一：
props: ['childMsg']
法二：
props: {
childMsg: Array //这样可以指定传入的类型，如果类型不对，会警告
}
法三：
props: {
childMsg: {
type: Array,
default: [0,0,0] //这样可以指定默认的值
}
}
例子：
<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:'我是父组件的数据'
}
},
template:'#aaa',
components:{
'bbb':{
props:['mmm'],
template:'<h3>我是bbb组件->{{mmm}}</h3>'
}
}
}
}
});
</script>
</body>
- 子组件想要更改父组件数据/传递数据给父组件
在vue1.0中：
- 子组件利用$dispatch()来向父组件传递数据，2.0已废除
- 子组件调用$emit和父组件用v-on监听子组件的变化，进而获取数据
vm.$emit(事件名,数据);
v-on: @
子组件:
<template>
<div @click="send"></div>
</template>
methods: {
send() {
this.$emit('child-msg','我是子组件数据'); //主动触发child-msg方法，‘我是子组件数据’为向父组件传递的数据
}
父组件
<div>
<child @child-msg="change" :msg="msg"></child> //监听子组件触发的child-msg事件,然后调用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:'我是父组件的数据'
}
},
template:'#aaa',
methods:{
get(msg){
// alert(msg);
this.msg=msg;
}
},
components:{
'bbb':{
data(){
return {
a:'我是子组件的数据'
}
},
template:'#bbb',
methods:{
send(){
this.$emit('child-msg',this.a);
}
}
}
}
}
}
});
</script>
</body>
六 自定义键盘指令
之前：Vue.directive('on').keyCodes.f1=17;
现在: Vue.config.keyCodes.ctrl=17
六 Vue过渡
- 之前：transition 属性
<p transition="fade"></p>
.fade-transition{}
.fade-enter{}
.fade-leave{}
- 现在： transition 组件
<transition name="fade">
</transition>
.fade-transition{}
.fade-enter{}
.fade-leave{}
