一文了解vue基本概念
发布日期:2021-10-09 15:34:58
浏览次数:1
分类:技术文章
本文共 2713 字,大约阅读时间需要 9 分钟。
Vue实例
Vue实例是Vue应用的启动器,对于SPA(Single Page Web Application),只会创建一个Vue根实例。
当我们实例化一个Vue实例时,需要传入选项对象,可包含data(数据相关), template(模板),el(挂载元素), methods(方法)与生命周期钩子函数(created, mounted…)等等,具体可见Vue选项对象。new Vue({ el: '#app', router, store, render: h => h(App)})
Vue组件
Vue组件是被扩展的vue实例,同Vue实例类似,初始化时也需要传入Vue选项对象,可包含data(数据相关), template(模板),el(挂载元素), methods(方法)与生命周期钩子函数(created, mounted…)等等,具体可见Vue选项对象。
vue组件包括局部组件和全局组件。
局部组件:局部组件只能在所定义的vue实例中使用,定义如下://定义组件new Vue({ // ... components: { // 将只在父模板可用 'my-component': { template: ' A custom component!' } }})
全局组件:全局组件可在全局范围使用,主要包括两种定义方式
1.利用Vue提供的静态函数component注册Vue.component('my-component', { template: 'A custom component!', //必须是用函数返回数据模型,这样才能让多个组件实例拥有自己的数据模型 data: function () { return data; }})
2.定义单文件组件
如下使用search.vue定义了search组件Vue选项对象
Vue选项对象主要包括数据,DOM,生命周期钩子函数,资源,组合和其它多种类型参数。
数据选项
选项 | 类型 | 限制 | 描述 |
---|---|---|---|
data | Object /Function | 组件的定义只接受 function | vue实例或组件的对象数据 |
props | Array/ Object | props 可以是数组或对象,用于接收来自父组件的数据 | |
propsData | { [key: string]: any } | 只用于 new 创建的实例中 | 创建实例时传递 props。主要作用是方便测试 |
computed | { [key: string]: Function / { get: Function, set: Function } } | 计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。 | |
methods | { [key: string]: Function } | methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法,或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例 | |
watch | { [key: string]: string / Function /Object / Array } | 一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象 |
DOM选项
选项 | 类型 | 限制 | 描述 |
---|---|---|---|
el | string | Element | 只在用 new 创建实例时生效 |
template | string | 一个字符串模板作为 Vue 实例的标识使用。模板将会替换挂载的元素。挂载元素的内容都将被忽略,除非模板的内容有分发插槽 | |
render | (createElement: () => VNode) => VNode | 字符串模板的代替方案,允许你发挥 JavaScript 最大的编程能力。该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode | |
renderError | (createElement: () => VNode, error: Error) => VNode | 只在开发者环境下工作 |
生命周期钩子函数选项
选项 | 类型 | 描述 |
---|---|---|
beforeCreate | Function | 在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用 |
created | Function | 在实例创建完成后被立即调用 |
beforeMount | Function | 在挂载开始之前被调用 |
mounted | Function | 实例被挂载后调用,这时 el 被新创建的 vm.$el 替换了 |
beforeUpdate | Function | 数据更新时调用,发生在虚拟 DOM 打补丁之前 |
updated | Function | 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子 |
activated | Function | 被 keep-alive 缓存的组件激活时调用 |
deactivated | Function | 被 keep-alive 缓存的组件停用时调用 |
beforeDestroy | Function | 实例销毁之前调用。在这一步,实例仍然完全可用。 |
destroyed | Function | 实例销毁后调用。该钩子被调用后,对应 Vue 实例的所有指令都被解绑,所有的事件监听器被移除,所有的子实例也都被销毁 |
资源选项
选项 | 类型 | 描述 |
---|---|---|
directives | Object | 包含 Vue 实例可用指令的哈希表 |
filters | Object | 包含 Vue 实例可用过滤器的哈希表 |
components | Object | 包含 Vue 实例可用组件的哈希表 |
组合选项
选项 | 类型 | 描述 |
---|---|---|
parent | Vue instance | 指定已创建的实例之父实例,在两者之间建立父子关系。子实例可以用 this.$parent 访问父实例,子实例被推入父实例的 $children 数组中。 |
mixins | Array | mixins 选项接收一个混入对象的数组 |
extends | Object/Function | 允许声明扩展另一个组件 |
其它选项
选项 | 类型 | 限制 | 描述 |
---|---|---|---|
name | string | 只适合组件 | 允许组件模板递归地调用自身 |
转载地址:https://blog.csdn.net/qinwuxian19891211/article/details/105901025 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
路过,博主的博客真漂亮。。
[***.116.15.85]2024年03月14日 03时18分30秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
php+mysql记事本_一个简单记事本php操作mysql辅助类创建
2019-04-21
中国网建java发送短信_短信验证登陆-中国网建提供的SMS短信平台
2019-04-21
隔行变色java代码_jquery入门—选择器实现隔行变色实例代码
2019-04-21
webpack 入口文件 php,如何实现webpack多入口文件打包配置
2019-04-21
php tire树,Immutable.js源码之List 类型的详细解析(附示例)
2019-04-21
matlab转差频率控制,转差频率控制的异步电机调速系统的研究
2019-04-21
oracle错误1327,Oracle中的PGA监控报警分析(r11笔记第97天)
2019-04-21
php函数内的循环,PHP 循环列出目录内容的函数代码
2019-04-21
oracle树状排序,Oracle树状结构查询
2019-04-21
深度linux内核升级,深度操作系统 2020.11.11 更新发布:内核升级
2019-04-21
sql 拆解函数_SQL入门50题详解(含知识点讲解及代码运行步骤拆解)
2019-04-21
java和python交互 jni_Python基于pyjnius库实现访问java类
2019-04-21
mysql表名长度_JavaWeb之MySQL(一)
2019-04-21