一、生命周期
1、beforeCreate:组件实例刚被创建,组件属性计算之前,如data属性等;
2、created:组件实例创建完成,属性绑定,但DOM还未生成,$el属性还不存在;
3、beforMount: 模板编译/挂载之前;
4、mounted: 模板编译/挂载之后(不保证组件已在document中);
5、beforeUpdate:组件更新之前;
6、update: 组件更新之后;
7、beforeDestory: 组件销毁前;
8、destoryed:组件销毁后;
二、组件模板中的常用方法
1、watch:{
title () {
if (this.title === '') {dosoming...}else{....}
}
} 监视组件内的某个变量变化,在变化时dosoming...
2、props:{
title: [String], data: [Object], flag:[Booleans], fn:[Function],
也可以设置有默认值的
prop: {
type: String或(Object,Booleans,Function),
default: function () {
return: 'string'或({},false,functiong(){},)
}
}
} 子组件用来接收父组件的对象,在父组件用到子组件时在子组件标签里使用如下;
<son :title='' :data={} :flag=false :fn=function(){} ></son>
3、注入组件
import 子组件名 form '路径'
components:{子组件名}
4、mixins 混入
var mixin = { data: function () { return { message: 'hello', foo: 'abc' } } } new Vue({ mixins: [mixin], data: function () { return { message: 'goodbye', bar: 'def' } }, created: function () { console.log(this.$data) // => { message: "goodbye", foo: "abc", bar: "def" } } })在混入时添加时间钩子先执行mixins混入中的时间钩子在实行组件中的;混入合并后如遇组件中由同名的变量或方法已组件内为主
5、filters 过滤器
<!-- 在双花括号中 --> {{ message | capitalize }} <!-- 在 `v-bind` 中 --> <div v-bind:id="rawId | formatId"></div>
过滤处理后展示
filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } }
6、methods 写方法的地方