vue中部分组件

最新推荐文章于 2021-10-11 09:52:16 发布

别等了。LA

最新推荐文章于 2021-10-11 09:52:16 发布

阅读量187

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/qq_43084651/article/details/95594014

vue 专栏收录该内容

6 篇文章

订阅专栏

本文展示了一个Vue实例的代码，包含了数据、资源等属性设置，如data、props、computed等，还详细列出了Vue实例从创建到销毁的各个生命周期钩子函数，如beforeCreate、created、beforeMount等，体现了Vue在实例操作和组件管理方面的特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 $KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲box1') \dots$ off(‘event1’) select2.destory()
console.log(‘beforeDestroy ==> 组件销毁之前’)
},
destroyed(){
console.log(‘destroyed ==> 组件销毁之后’)
}
})