vue2.0 vs vue1.0

1.每个组件模板不支持代码片段
组件中模板
之前
<template>
<h3>as</h3>
</template>
现在 必须要有根元素 包裹住所有代码
<template>
<div>

</div>
</template>

2.关于组件定义
Vue.extend
Vue.component(组件名称,{
data(){}
methods:{}
template:{}
})

3.生命周期
之前
init
created
beforeCompile
compiled
ready => mounted
beforeDestroyed
destroyed

现在
beforeCreate 组件刚刚被创建 属性都没有
created 实例已经创建 属性已经绑定
beforeMount 模板编译之前
mounted 模板编译之后 代替之前的ready
beforeUpdate 组件更新之前
updated 组件更新完毕
beforeDestroy 组件销毁之前
destroyed 组件销毁之后

3循环
默认可以插入重复的数据
去掉了一些隐式的变量
v-for="(val,index) in array"
v-for="(index,val) in array"

4.track-by="id"
变成
<li v-for="(val,index) in list" :key="index"></li>

5.自定义键盘指令
之前 Vue.directive("on").keyCodes.f1 = 17
现在 Vue.config.keyCodes.ctrl = 17

6过滤器
内置过滤器 全部删除

lodash 工具库 _.debounce(fn,200)
自定义过滤器还有
传参改变
{{msg|toDou '12' '5'}}
{{msg|toDou('12','5')}}

组件通讯
vm.$emit()
vm.$on()

父组件和子组件

子组件要拿到父组件数据 props

之前 子组件可以更改父组件信息 同步sync
现在 不允许直接直接给父级数据 做赋值操作

问题
1.父组件每次传一个对象给子组件
2.mounted中转

单一事件管理组件通信 vuex
var Event = new Vue();
Event.$emit(事件名称,数据)
Event.$on(事件名称,function(data){
//data
}.bind(this))

debounce 废弃
->lodash
_.debounce(fn,事件)

vue动画
vue路由

-------

transition 之前是属性
<p transition="fade"></p>
.fade-transition{}
.fade-enter{}
.fade-leave{}

2.0之后是组件
<transition>
运动东西 元素 属性路由
</transition>

class定义
fade-enter 初始状态
fade-enter-active 变成什么样 元素显示出来
fade-leave
fade-leave-active 元素离开

和animate.css配合
<transition enter-active-class="" leave-active-class="">
</transition>

vue2.0路由
1
<router-link to="/home"></router-link>
<router-view></router-view>
2
var Home = {
template
}
var News = {
template
}
//配置路由
const routes = [
{path:"/home",component:Home},
{path:"/News",component:News}
];
//生成路由实例
const router = new VueRouter({
routes
})
new Vue({
router,
el:"#box"
})
3.重定向
router.direct废弃
{path:'*',redirect:'/home'}
4.路由嵌套
const routes = [
{path:'/home',component:Home},
{
path:'/user',
component:User,
children:[
{path:'username',component:UserDetail}
]
},
{path:'*',component:'/home'}
]

/user/:id/:name
/user/12/weizai

路由实例方法
router.push({path:'home'}) 直接添加一个路由 表现切换路由历史记录里面添加一个
router.replace({path:'news'}) 替换路由 不会往历史记录里添加

脚手架
vue-cli npm install

1.0
new Vue({
el:"#app",
components:{App}
})
2.0
new Vue({
el:'#app',
render:h=>h(App)
})