Vue的常用知识点

一、生命周期

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{....}

扫描二维码关注公众号，回复： 4808481 查看本文章

}

} 监视组件内的某个变量变化，在变化时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 写方法的地方