一文了解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 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:Vue路由懒加载
下一篇:Vue Router参数大全

发表评论

最新留言

路过,博主的博客真漂亮。。
[***.116.15.85]2024年03月14日 03时18分30秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

php+mysql记事本_一个简单记事本php操作mysql辅助类创建 2019-04-21
300小时成为java程序员_直击面试现场: Java程序员3轮6小时面试, 成功拿到阿里offer!... 2019-04-21
中国网建java发送短信_短信验证登陆-中国网建提供的SMS短信平台 2019-04-21
隔行变色java代码_jquery入门—选择器实现隔行变色实例代码 2019-04-21
角标越界 Java_【新人求助】利用占位符操作数据库是总是提示数组角标越界是怎么回事 - Java论坛 - 51CTO技术论坛_中国领先的IT技术社区... 2019-04-21
java类中声明log对象_用于Android环境,java环境的log打印,可打印任何类型数据 2019-04-21
db2与mysql编目_DB2编目、联邦数据库 - Goopand's OS Space - OSCHINA - 中文开源技术交流社区... 2019-04-21
atomikosdatasourcebean mysql_SpringBoot2整合JTA组件实现多数据源事务管理 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
macbook pro 卸载mysql_MacBook Pro全新重装OS X Yosemite 2019-04-21
已达到计算机的连接数最大值无法再同此远程计算机连接_电脑远程访问已达到计算机的连接数最大值怎么办?解决方法很简单... 2019-04-21
mysql表名长度_JavaWeb之MySQL(一) 2019-04-21