最近中文字幕高清中文字幕无,亚洲欧美高清一区二区三区,一本色道无码道dvd在线观看 ,一个人看的www免费高清中文字幕

1. 前言

本節(jié)開(kāi)始我們將正式進(jìn)行 Vue 基礎(chǔ)知識(shí)的學(xué)習(xí)。本小節(jié)我們將先介紹什么是 Vue 實(shí)例，包括如何創(chuàng)建 Vue 實(shí)例，Vue 實(shí)例上的屬性參數(shù)，以及如何使用 Vue 開(kāi)始工作。Vue 實(shí)例上的屬性和方法很多，本小節(jié)我們不會(huì)詳細(xì)介紹所有的屬性和方法，同學(xué)們目前只需要了解什么是 Vue 實(shí)例以及如何創(chuàng)建它。

2. 慕課解釋

每個(gè) Vue 應(yīng)用都是通過(guò)用 Vue 函數(shù)創(chuàng)建一個(gè)新的 Vue 實(shí)例開(kāi)始的。 — 官方定義

Vue 實(shí)例是通過(guò) Vue 函數(shù)傳入對(duì)應(yīng) options 參數(shù)創(chuàng)建出的一個(gè)實(shí)例對(duì)象。

3. 創(chuàng)建 Vue 實(shí)例

Vue 實(shí)例的創(chuàng)建是通過(guò) new Vue(options) 來(lái)實(shí)現(xiàn)的，options 是創(chuàng)建 vue 實(shí)例傳遞的參數(shù)。它是一個(gè)對(duì)象：

//最簡(jiǎn)單的 options 對(duì)象示例：
{
  el: "#app",
  data() {
    return {}
  },
}

接下來(lái)我們用一個(gè)簡(jiǎn)單的例子來(lái)學(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)建了一個(gè)實(shí)例對(duì)象，在調(diào)用函數(shù)時(shí)我們傳入了一個(gè)對(duì)象參數(shù)，該對(duì)象只有一個(gè) el 屬性。

在之前的小節(jié)中我們學(xué)習(xí)到Vue是一個(gè)MVVM框架，所以在日常開(kāi)發(fā)中我們通常將 Vue 實(shí)例的變量名取為 vm。當(dāng)然，這并不是必須的，你也可以給他其他任意的變量名。

3.1 vue 實(shí)例參數(shù)

在上述的例子中，我們首先使用 Vue 函數(shù)創(chuàng)建一個(gè)新的 Vue 實(shí)例，并在創(chuàng)建實(shí)例的時(shí)候傳入了一個(gè)選項(xiàng)對(duì)象，接下來(lái)我們逐個(gè)分析每個(gè)對(duì)象屬性的意義。

3.1.1 el 屬性

el 屬性表示 Vue 實(shí)例要掛載的節(jié)點(diǎn)，該屬性的值可以是一個(gè) CSS 選擇器，也可以是一個(gè) HTMLElement。

代碼解釋:
JS 代碼第 3-10 行，我們創(chuàng)建了一個(gè) 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 賦值：

代碼解釋:
JS 代碼第 4 行，我們使用 HTMLElement 的方式給 el 賦值。

3.1.2 data 屬性

data 屬性表示 Vue 實(shí)例中的數(shù)據(jù)，data接收一個(gè) Object 或者返回一個(gè)對(duì)象數(shù)據(jù)的函數(shù) Function。當(dāng)一個(gè) Vue 實(shí)例被創(chuàng)建時(shí)，它將 data 對(duì)象中的所有的屬性加入到Vue 的響應(yīng)式系統(tǒng)中。當(dāng)這些屬性的值發(fā)生改變時(shí)，視圖也會(huì)同時(shí)更新。

data 為對(duì)象的示例：

/修改 vue 實(shí)例上的 message 數(shù)據(jù)
vm.message = 'Hello 句號(hào) ！'

代碼解釋：
JS 代碼第 3-5 行，我們定義了 data 數(shù)據(jù)，在頁(yè)面中可以看到已經(jīng)顯示出 message 的值。當(dāng)我們打開(kāi)控制臺(tái)，修改 vm 上的 message 時(shí)，頁(yè)面會(huì)同時(shí)做更新。

data 為函數(shù)的示例：

var vm = new Vue({
  el: "#app",
  data() {
    return {
    	message: 'Hello Imooc !'
    }
  }
})

TIPS：只有當(dāng)實(shí)例被創(chuàng)建時(shí)就已經(jīng)存在于 data 中的屬性才是響應(yīng)式的。

也就是說(shuō)在實(shí)例創(chuàng)建之后添加的新的屬性不是響應(yīng)式的，比如：

//修改 vue 實(shí)例上的 date 數(shù)據(jù)
vm.date = "2020-08-08"

代碼解釋：
在 HTML 代碼第 2 行，我們使用了數(shù)據(jù) date 和 message，但是在創(chuàng)建 Vue 實(shí)例的時(shí)候我們只初始化了 message 而沒(méi)有 date 的值，當(dāng)我們?cè)诳刂婆_(tái)修改實(shí)例上的 date 屬性時(shí)，視圖并不會(huì)更新。

如果有一些屬性在之后的過(guò)程中需要使用，那么你可以在創(chuàng)建Vue實(shí)例的時(shí)候設(shè)置一些初始值。比如：

data: {
  date: '',
  count: 0
}

注意一下，如果 data 中初始化的屬性是一個(gè) Object 類型的，那么你需要將 Object 的屬性也同時(shí)初始化。例如：

//修改 vue 實(shí)例上的 date 數(shù)據(jù)
vm.message.title = "Hello Imooc !"

代碼解釋：
在 HTML 代碼第 2 行， 我們使用了數(shù)據(jù) message.title，但是在創(chuàng)建 Vue 實(shí)例的時(shí)候我們只初始化了 message 對(duì)象，但是該對(duì)象上并沒(méi)有 title 屬性，所以，當(dāng)我們?cè)诳刂婆_(tái)上修改 message.title 時(shí)，試圖不會(huì)做更新。

我們只需要給 message 初始化一個(gè) title：

// 修改 message.title
vm.message.title = "Hello Imooc !"
// 頁(yè)面正常顯示 Hello Imooc !

3.2 $set 方法的使用

前面我們提到了，想要在頁(yè)面中使用數(shù)據(jù)，首先要在 data 中初始化。有些同學(xué)可能并不想在創(chuàng)建實(shí)例的時(shí)候就初始化這些屬性。那么，我們可以利用 Vue 實(shí)例的 $set 方法來(lái)添加響應(yīng)式數(shù)據(jù)，例如：

//使用 vm.$set 方法修改數(shù)據(jù)
vm.$set(vm.message, 'title','Hello Imooc !')
// 頁(yè)面正確顯示 Hello Imooc ! 

代碼解釋：
HTML 代碼第 2 行，我們使用了 message.title 的數(shù)據(jù)，但是，在創(chuàng)建 Vue 實(shí)例的時(shí)候并沒(méi)有給 message 初始化 title 屬性，所以我們通過(guò) $set 的方式給 message 添加屬性。

除了$set，Vue 實(shí)例還暴露了其他有用的實(shí)例屬性與方法。它們都有前綴 $。這些實(shí)例方法我們會(huì)在后續(xù)的章節(jié)中逐步介紹，這里大家只需要對(duì)它有個(gè)印象。

Vue的實(shí)例并不只接收這兩個(gè)選項(xiàng)，還有諸如methods、computed、watch、props等選項(xiàng)，這些選項(xiàng)我們?cè)诮酉聛?lái)的小節(jié)中會(huì)逐個(gè)詳解。在這里，我們只需要先對(duì)Vue實(shí)例有一個(gè)初步的了解就可以了。

4. 小結(jié)

本小節(jié)對(duì) Vue 實(shí)例進(jìn)行了簡(jiǎn)單的介紹，主要有以下知識(shí)點(diǎn)：

• vue 實(shí)例就是通過(guò) Vue 函數(shù)創(chuàng)建返回的一個(gè)實(shí)例對(duì)象。該函數(shù)接收一個(gè)對(duì)象形式的參數(shù)；
• 介紹了 Vue 函數(shù)參數(shù)中的 el 和 data 的含義；
• 介紹了 Vue 實(shí)例上 $set 方法的使用。