1.在每个组建的模板中,不再支持片段代码。

组件中模板:

Vue1.0:

<template>

<h3>我是组件</h3><strong>我是加粗</strong>

</template>

Vue2.0:必须有一个根元素,包裹所有的元素

<template id=‘aaa'’>

<div>

<h3>我是组件</h3>

<strong>我是加粗</strong>

</div>

</template>


2.关于组件的定义

Vue.extend 这种方式,在2.0里面有,但是有一些改动,这种写法虽然可以用,但是尽量少用

Vue.component(组件名称,{ // 在2.0继续能用

data(){}

methods{}

template:

});


2.0推出一个组件的简洁定义的方式:

var Home={

template:''

};


3.生命周期

Vue1.0:

init

created

beforeCompile

compiled

ready

beforeDestroy

destroyed

Vue2.0:

beforeCreate: 组件实例刚刚被创建,属性都没有

created: 实例已经创建完成,属性已经绑定

beforeMount: 模板编译之前

mounted: 模板编译完成(代替之前的cimpiled和ready两个状态)

beforeUpdate: 组件更新之前

updated: 组件更新完毕

beforeDestroy: 组件销毁前

destroyed: 组件销毁后


4.Vue2.0循环

1.0里面:v-for="val in list"想要添加重复的数据:track-by="$index"

2.0里面:

1)默认可以添加重复的数据

2)去掉了隐式的变量,如$index,$key,在Vue2.0中 v-for="(val,index) in list :index"

在json中,v-for="(val,key) in json"


5.自定义键盘的指令

1.0里面:Vue.direction('on').keyCodes.f1=12;

2.0里面:Vue.config.keyCodes.ctrl=17;


6.过滤器

1.0里面:

系统自带很多过滤器

{{msg |currency}}

{{msg |json}}

....

limitBy

filterBy

一些简单的功能,自己通过js实现

2.0里面:

内置过滤器,全部删除了

lodash工具库:_.debounce(fn,200)

自定义过滤器:还存在

但是,自定义过滤器传参,

之前: {{msg | toDou '12' '5'}}

现在: {{msg | toDou('12','5')}}


7.组件通信:

vm.$emit()

vm.$on();

父组件和子组件:

子组件想要拿到父组件的数据:

通过 props:[]

Vue1.0:子组件可以更改父组件的信息,可以使同步的sync

现在:不允许直接给父级的数据,进行赋值操作

满足下面的条件时可以修改:

a).父组件每次传一个对象给子组件,对象之间是引用的 最靠谱的方式

b).只是不报错,mounted中转


8.可以使用一个"单一事件"管理组件通信

var Event = new Vue();

Event.$emit(事件名称,数据)

Event.$on(事件名称,function(data){

//data

}.bind(this));

Logo

前往低代码交流专区

更多推荐