此間少年_ ·1. 前言
本節(jié)開始我們將正式進(jìn)行 Vue 基礎(chǔ)知識的學(xué)習(xí)。本小節(jié)我們將先介紹什么是 Vue 實(shí)例，包括如何創(chuàng)建 Vue 實(shí)例，Vue 實(shí)例上的屬性參數(shù)，以及如何使用 Vue 開始工作。Vue 實(shí)例上的屬性和方法很多，本小節(jié)我們不會詳細(xì)介紹所有的屬性和方法，同學(xué)們目前只需要了解什么是 Vue 實(shí)例以及如何創(chuàng)建它。
2. 慕課解釋
每個 Vue 應(yīng)用都是通過用 Vue 函數(shù)創(chuàng)建一個新的 Vue 實(shí)例開始的。 — 官方定義
Vue 實(shí)例是通過 Vue 函數(shù)傳入對應(yīng) options 參數(shù)創(chuàng)建出的一個實(shí)例對象。
3. 創(chuàng)建 Vue 實(shí)例
Vue 實(shí)例的創(chuàng)建是通過 new Vue(options) 來實(shí)現(xiàn)的，options 是創(chuàng)建 vue 實(shí)例傳遞的參數(shù)。它是一個對象：
//最簡單的 options 對象示例：
{
el: "#app",
data() {
return {}
},
}
接下來我們用一個簡單的例子來學(xué)習(xí)如何創(chuàng)建 vue 實(shí)例：
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: "#app"
})
</script>
代碼解釋
JS 代碼第 3-10 行，我們使用 Vue 函數(shù)創(chuàng)建了一個實(shí)例對象，在調(diào)用函數(shù)時我們傳入了一個對象參數(shù)，該對象只有一個 el 屬性。
在之前的小節(jié)中我們學(xué)習(xí)到Vue是一個MVVM框架，所以在日常開發(fā)中我們通常將 Vue 實(shí)例的變量名取為 vm。當(dāng)然，這并不是必須的，你也可以給他其他任意的變量名。
3.1 vue 實(shí)例參數(shù)
在上述的例子中，我們首先使用 Vue 函數(shù)創(chuàng)建一個新的 Vue 實(shí)例，并在創(chuàng)建實(shí)例的時候傳入了一個選項(xiàng)對象，接下來我們逐個分析每個對象屬性的意義。
3.1.1 el 屬性
el 屬性表示 Vue 實(shí)例要掛載的節(jié)點(diǎn)，該屬性的值可以是一個 CSS 選擇器，也可以是一個 HTMLElement。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<div>
{{ message }}
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data() {
return {
message: 'Hello Imooc !'
}
}
})
</script>
</html>
代碼解釋:
JS 代碼第 3-10 行，我們創(chuàng)建了一個 Vue 實(shí)例，將它掛載在 id 為 app 的 html 元素節(jié)點(diǎn)上。
HTML 代碼第 2-4 行，我們定義了 id 為 app 的 DOM 元素。所以我們看到 id 為 app 的節(jié)點(diǎn)內(nèi) {{ message }} 被替換成了 Hello Imooc !，而未給定 id 的元素并未受到 Vue 的作用。
同樣，我們可以使用 HTMLElement 的方式給 el 賦值：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: document.getElementById('app'),
data() {
return {
message: 'Hello Imooc !'
}
}
})
</script>
</html>
代碼解釋:
JS 代碼第 4 行，我們使用 HTMLElement 的方式給 el 賦值。
3.1.2 data 屬性
data 屬性表示 Vue 實(shí)例中的數(shù)據(jù)，data接收一個 Object 或者返回一個對象數(shù)據(jù)的函數(shù) Function。當(dāng)一個 Vue 實(shí)例被創(chuàng)建時，它將 data 對象中的所有的屬性加入到Vue 的響應(yīng)式系統(tǒng)中。當(dāng)這些屬性的值發(fā)生改變時，視圖也會同時更新。
data 為對象的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
message: 'Hello Imooc !'
}
})
</script>
</html>
/修改 vue 實(shí)例上的 message 數(shù)據(jù)
vm.message = 'Hello 句號 ！'
代碼解釋：
JS 代碼第 3-5 行，我們定義了 data 數(shù)據(jù)，在頁面中可以看到已經(jīng)顯示出 message 的值。當(dāng)我們打開控制臺，修改 vm 上的 message 時，頁面會同時做更新。
data 為函數(shù)的示例：
var vm = new Vue({
el: "#app",
data() {
return {
message: 'Hello Imooc !'
}
}
})
TIPS：只有當(dāng)實(shí)例被創(chuàng)建時就已經(jīng)存在于
data中的屬性才是響應(yīng)式的。
也就是說在實(shí)例創(chuàng)建之后添加的新的屬性不是響應(yīng)式的，比如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
{{ message }} {{ date }}
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data() {
return {
message: 'Hello Imooc !'
}
}
})
</script>
</html>
//修改 vue 實(shí)例上的 date 數(shù)據(jù)
vm.date = "2020-08-08"
代碼解釋：
在 HTML 代碼第 2 行，我們使用了數(shù)據(jù) date 和 message，但是在創(chuàng)建 Vue 實(shí)例的時候我們只初始化了 message 而沒有 date 的值，當(dāng)我們在控制臺修改實(shí)例上的 date 屬性時，視圖并不會更新。
如果有一些屬性在之后的過程中需要使用，那么你可以在創(chuàng)建Vue實(shí)例的時候設(shè)置一些初始值。比如：
data: {
date: '',
count: 0
}
注意一下，如果 data 中初始化的屬性是一個 Object 類型的，那么你需要將 Object 的屬性也同時初始化。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
{{ message.title }}
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data() {
return {
message: {}
}
}
})
</script>
</html>
//修改 vue 實(shí)例上的 date 數(shù)據(jù)
vm.message.title = "Hello Imooc !"
代碼解釋：
在 HTML 代碼第 2 行， 我們使用了數(shù)據(jù) message.title，但是在創(chuàng)建 Vue 實(shí)例的時候我們只初始化了 message 對象，但是該對象上并沒有 title 屬性，所以，當(dāng)我們在控制臺上修改 message.title 時，試圖不會做更新。
我們只需要給 message 初始化一個 title：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
{{ message.title }}
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data() {
return {
message: {
title:''
}
}
}
})
</script>
</html>
// 修改 message.title
vm.message.title = "Hello Imooc !"
// 頁面正常顯示 Hello Imooc !
3.2 $set 方法的使用
前面我們提到了，想要在頁面中使用數(shù)據(jù)，首先要在 data 中初始化。有些同學(xué)可能并不想在創(chuàng)建實(shí)例的時候就初始化這些屬性。那么，我們可以利用 Vue 實(shí)例的 $set 方法來添加響應(yīng)式數(shù)據(jù)，例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
{{ message.title }}
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data() {
return {
message: {}
}
}
})
</script>
</html>
//使用 vm.$set 方法修改數(shù)據(jù)
vm.$set(vm.message, 'title','Hello Imooc !')
// 頁面正確顯示 Hello Imooc !
代碼解釋：
HTML 代碼第 2 行，我們使用了 message.title 的數(shù)據(jù)，但是，在創(chuàng)建 Vue 實(shí)例的時候并沒有給 message 初始化 title 屬性，所以我們通過 $set 的方式給 message 添加屬性。
除了$set，Vue 實(shí)例還暴露了其他有用的實(shí)例屬性與方法。它們都有前綴 $。這些實(shí)例方法我們會在后續(xù)的章節(jié)中逐步介紹，這里大家只需要對它有個印象。
Vue的實(shí)例并不只接收這兩個選項(xiàng)，還有諸如methods、computed、watch、props等選項(xiàng)，這些選項(xiàng)我們在接下來的小節(jié)中會逐個詳解。在這里，我們只需要先對Vue實(shí)例有一個初步的了解就可以了。
4. 小結(jié)
本小節(jié)對 Vue 實(shí)例進(jìn)行了簡單的介紹，主要有以下知識點(diǎn)：
- vue 實(shí)例就是通過 Vue 函數(shù)創(chuàng)建返回的一個實(shí)例對象。該函數(shù)接收一個對象形式的參數(shù)；
- 介紹了 Vue 函數(shù)參數(shù)中的 el 和 data 的含義；
- 介紹了 Vue 實(shí)例上 $set 方法的使用。
2025 imooc.com All Rights Reserved |