Vue常用属性汇总

1、Vue实例常用属性

（1）数据

data:Vue 实例的数据对象

components：Vue实例配置局部注册组件

（2）类方法
computed:计算属性

watch：侦听属性

filters：过滤器

methods:Vue实例方法

render：渲染函数，创建虚拟DOM

（3）生命周期
created：在实例创建完成后被立即调用，完成初始化操作
mounted：el挂载到Vue实例上了，开始业务逻辑操作
beforeDestroy：实例销毁之前调用

 

2、Vue组件

props:用于接收来自父组件的数据
template：组件模板

var vm = new Vue({
    name:'root',
    el:"#app",
    // 数据
    data: { a: 1 } / Function, // data类型根实例为Object，组件中为Function
    props:[]/{}, // 设置父组件传递给子组件的数据限制
    computed:{}, // 计算属性
    watch:{}, // 监控属性
    methods:{}, // 事件操作
    // 资源
    directives:{}, // 内部指令
    filters:{}, // 内部过滤器
    components:{}, // 内部组件
    // 生命周期：实例创建 => 编译挂载 => 组件更新 => 销毁
    beforeCreate(){
        console.log('beforeCreate ==> 实例创建')
    },
    created(){
        // 可以操作data, 但未生成DOM（未挂载）发起异步请求，初始化组件状态数据 data
        console.log('created ==> 实例创建完成，属性已绑定')
    },
    beforeMount(){
        console.log('beforeMount ==> 模板编译/挂载之前')
    },
    mounted(){
        // 已生成DOM到document中，可访问this.$el属性
        console.log('mounted ==> 模板编译/挂载之后')
    },
    beforeUpdate(){
        console.log('beforeUpdate ==> 组件更新之前')
    },
    updated(){
        // 操作DOM $('#box1')
        console.log('updated ==> 组件更新之后')
    },
    activated(){
        // 操作DOM $('#box1')
        console.log('activated ==> 组件被激活时（for keep-alive组件）')
    },
    deactivated(){
        console.log('deactivated ==> 组件被移除时（for keep-alive组件）')
    },
    beforeDestroy(){
        // 解除事件绑定，销毁非Vue组件实例等 如：this.$off('event1') select2.destory()
        console.log('beforeDestroy ==> 组件销毁之前')
    },
    destroyed(){
        console.log('destroyed ==> 组件销毁之后')
    }
})

转载于:https://my.oschina.net/u/265033/blog/3058886