1. 组件模板不再支持片段代码,必须有一个顶级元素包裹,例如:
version1.0:
<template>
<h3>h3标签</h3>
<p>p标签</p>
</template>
version2.0:
<template>
<div>
<h3>h3标签</h3>
<p>p标签</p>
</div>
</template>
2. 关于组件的定义。
version1.0:
Vue.component(组件名称,{//vue2.0能用,但不在那么用了。
//组件内容
})
version2.0:
var home={
template:' ' //代替了之前的Vue.extend({})的形式,直接把对象抛出来,就认为成是组件了。
}
3. 生命周期。
version1.0:
(1)init
(2)created
(3)beforeCompile
(4)compiled
(5)ready
(6)beforeDestroy
(7)destroyed
version2.0:
(1)beforeCreate
组件实例刚刚被创建,属性都没有
(2)created
组件实例创建完毕,属性已经绑定
(3)beforeMount
模板编译之前
(4)mounted
模板编译之后,代替了之前的ready*
(5)beforeUpdate
组件更新之前
(6)updated
组件更新完毕
(7)beforeDestroy
组件销毁之前
(8)destroyed
组件销毁后
4. 循环。
version1.0:v-for="(index,val) in array"
需要track-by="$index"
属性解决添加重复数据问题。
version2.0:v-for="(val,index) in array"
默认可以添加重复数据,:key="index"
属性提高循环性能,对功能没有影响,一般情况下用再大型项目中。
5. 自定义键盘事件。(以ctrl键为例)
version1.0:
Vue.directive("on").keyCodes.ctrl = 17;
version2.0:
Vue.config.keyCodes.ctrl = 17;
6. 过滤器。
version1.0:有很多系统自带过滤器,如:{{msg|json}}
、{{msg|currency}}
。
version2.0:内置过滤器全部删除,要用的时候需要自己用一些辅助函数解决。
7. 组件通信。
version1.0:子组件利用sync
(eg: :msg.sync="change"
)可以更改父组件信息。
version2.0:子级想拿到父级的数据:通过props
,且不允许更改父组件信息。
如何改:
a)父组件每次传一个对象给子组件,对象引用。
b)只是追求不报错,可以用mounted
的钩子函数,改变自身数据。
8. 可以单一事件管理组件通信
var Event = new Vue();
Event.$emit('事件名','数据');
Event.$on('事件名',function(){ ... }.bind(this));
9. 动画。
transition
不再是属性:transition=“fade”
而是像模板一样的标签
<transition name="fade" @before-enter="" @enter="" @after="" @before-leave="" @leave="" @after-leave="">这里放运动的元素,属性,路由...</transition>
10. 路由.
布局的改变:
version1.0:
<a v-link="{path:'/home'}">我是主页</a>
version2.0:
<router-link to="/home">我是主页</router-link>
路由写法的改变:
var Home ={ //准备组件
template:'<h3>我是主页</h3>'
}
const routes = [ //配置路由
{path:'/home',component:Home},
{path:'*',redirect:'/home'} //重定向
...
];
const router = new VueRouter({routes:routes}); //生成路由实例
//简写成对象的形式 :const router = new VueRouter({routes});
new Vue({ //最后挂到vue上
router,
el:'#box'
});
- 路由嵌套
const routes = [ //配置路由
{path:'/home',component:Home},
{path:'/news',component:News,
children:[
{path:'/newsname',component:newsNameDetail},
...
]
},
{path:'*',redirect:'/home'} //重定向
...
];