本文版权归 “公众号 | 前端一万小时” 所有,欢迎转载!
转载请注明出处,未经同意,不可修改文章内容。
🔥🔥🔥本系列文章已在“公众号 | 前端一万小时”更新完毕,有需要的小伙伴可按需前往查看。
🔥🔥🔥“前端一万小时”两大明星专栏——“从零基础到轻松就业”、“前端面试刷题”,已于本月大改版,合二为一,干货满满,欢迎点击公众号菜单栏各模块了解。
涉及面试题:
1. Vue 实例是什么?
2. 如何访问根实例?
3. 如何访问父实例?
[编号:vue_06]
🔗前置知识(先把下边文章整篇通读):
理解“构造函数”是什么——《面向对象编程:① 对象构造函数》
1 Vue 中的根实例
在实现“简易TodoList”的过程中,就已经提到过很多次“Vue 实例”。
❓什么是根实例?
答:通过 new
运算符创建的 Vue 实例就是根实例,整个程序都是以这个 Vue 实例作为入口开始执行的。
<head>
<meta charset="UTF-8">
<title>前端一万小时-Vue 实例</title>
<script src="./vue.js"></script> <!-- ❗️在创建 Vue 实例之前,必须先引入 Vue.js 库! -->
</head>
<body>
<div id="app"> <!-- 1️⃣页面上有一个 id 为 app 的 div; -->
{{message}} <!-- 3️⃣-②:通过插值表达式调用数据内容。 -->
</div>
<script>
var app = new Vue({ // 2️⃣-①:使用 new 运算符通过 Vue 这个类创建出 Vue 的实例;
el: '#app', /*
2️⃣-②:el 负责定义 Vue 实例所接管的 DOM 最外层的标签,
这里即让 Vue 实例接管 #app 这个 div 标签里所有 DOM 的显示;
*/
data: { // 3️⃣-①:data 存放数据;
message: 'hello qdywxs'
}
})
</script>
</body>
保存,返回页面查看,可以看到 message
中的内容显示在了页面上:
这是因为 Vue 实例接管了 #app
这部分的 DOM,所以它会对 DOM 的内容进行分析。
当 Vue 发现 #app
中使用了 {{message}}
这样的插值表达式语法,就会到 data 中寻找 message
对应的数据 hello qdywxs
,用数据替换插值表达式。
同样的,当我们给 message
所在元素上绑定一个 click 事件时,当 Vue 对 DOM 内容进行分析,也会发现这一个 DOM 元素绑定了一个事件。于是它会到 methods
中找到事件触发后要执行的 handleClick
方法。
<div id="app">
<div @click="handleClick"> <!-- 1️⃣通过 v-on(即 @ ) 绑定 click 事件,
事件触发后执行 handleClick 方法; -->
{{message}}
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'hello qdywxs'
},
methods: { // 2️⃣方法必须定义在 Vue 实例的 methods 中。
handleClick() {
alert('qdywxs')
}
}
})
</script>
2 Vue 中每个组件都是实例
除了 Vue 的根实例以外,Vue 中的每个小组件也都是一个个 Vue 实例。
当创建一个小组件时,Vue 的底层会把它编译成一个 Vue 的实例。我们可以理解为:一个 Vue 的项目,是由很多小的 Vue 实例(组件)组成的。
<div id="app">
<div @click="handleClick">
{{message}}
</div>
<child></child> <!-- 3️⃣在根实例所接管的 #app 中通过标签的形式使用 child 组件。 -->
</div>
<script>
Vue.component('child', { // 1️⃣通过 Vue.component() 定义一个名为 child 的组件;
template: '<div>hi qdywxs</div>' // 2️⃣child 让它显示一个内容是“hi qdywxs” 的 div;
})
var app = new Vue({
el: '#app',
data: {
message: 'hello qdywxs'
},
methods: {
handleClick() {
alert('qdywxs')
}
}
})
</script>
我们可以通过控制台在页面上查看到 Vue 实例:
1️⃣我们的根实例名为“app”,在控制台可以通过输入 app
获取到它;
2️⃣通过 app.$el
可以获取到实例所接管的 DOM 元素的最外层,这里即为 #app
;
3️⃣通过 app.$data
可以获取到数据 message
;
❗️在获取实例的 el
、 data
属性时, app.
后面都加了一个 $
符。
当我们输入 app.$
后,可以看到有很多其他的属性:
所以 Vue 实例上除了有 el
、 data
、 methods
这样的属性(或者说“方法”)之外,还有很多其他的属性。比如 watch
、 computed
等等,我们在后面的内容会涉及到。
祝好,qdywxs ♥ you!
原文链接:https://juejin.cn/post/7214517573584781368 作者:itsOli