亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

此間少年_ · 更新于 2020-11-27

1. 前言

本節開始我們將正式進行 Vue 基礎知識的學習。本小節我們將先介紹什么是 Vue 實例，包括如何創建 Vue 實例，Vue 實例上的屬性參數，以及如何使用 Vue 開始工作。Vue 實例上的屬性和方法很多，本小節我們不會詳細介紹所有的屬性和方法，同學們目前只需要了解什么是 Vue 實例以及如何創建它。

2. 慕課解釋

每個 Vue 應用都是通過用 Vue 函數創建一個新的 Vue 實例開始的。 — 官方定義

Vue 實例是通過 Vue 函數傳入對應 options 參數創建出的一個實例對象。

3. 創建 Vue 實例

Vue 實例的創建是通過 new Vue(options) 來實現的，options 是創建 vue 實例傳遞的參數。它是一個對象：

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

接下來我們用一個簡單的例子來學習如何創建 vue 實例：

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
  var vm = new Vue({
    el: "#app"
  })
</script>

代碼解釋
JS 代碼第 3-10 行，我們使用 Vue 函數創建了一個實例對象，在調用函數時我們傳入了一個對象參數，該對象只有一個 el 屬性。

在之前的小節中我們學習到Vue是一個MVVM框架，所以在日常開發中我們通常將 Vue 實例的變量名取為 vm。當然，這并不是必須的，你也可以給他其他任意的變量名。

3.1 vue 實例參數

在上述的例子中，我們首先使用 Vue 函數創建一個新的 Vue 實例，并在創建實例的時候傳入了一個選項對象，接下來我們逐個分析每個對象屬性的意義。

3.1.1 el 屬性

el 屬性表示 Vue 實例要掛載的節點，該屬性的值可以是一個 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 行，我們創建了一個 Vue 實例，將它掛載在 id 為 app 的 html 元素節點上。
HTML 代碼第 2-4 行，我們定義了 id 為 app 的 DOM 元素。所以我們看到 id 為 app 的節點內 {{ 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 實例中的數據，data接收一個 Object 或者返回一個對象數據的函數 Function。當一個 Vue 實例被創建時，它將 data 對象中的所有的屬性加入到Vue 的響應式系統中。當這些屬性的值發生改變時，視圖也會同時更新。

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 實例上的 message 數據
vm.message = 'Hello 句號 ！'

代碼解釋：
JS 代碼第 3-5 行，我們定義了 data 數據，在頁面中可以看到已經顯示出 message 的值。當我們打開控制臺，修改 vm 上的 message 時，頁面會同時做更新。

data 為函數的示例：

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

TIPS：只有當實例被創建時就已經存在于 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 }} {{ 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 實例上的 date 數據
vm.date = "2020-08-08"

代碼解釋：
在 HTML 代碼第 2 行，我們使用了數據 date 和 message，但是在創建 Vue 實例的時候我們只初始化了 message 而沒有 date 的值，當我們在控制臺修改實例上的 date 屬性時，視圖并不會更新。

如果有一些屬性在之后的過程中需要使用，那么你可以在創建Vue實例的時候設置一些初始值。比如：

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 實例上的 date 數據
vm.message.title = "Hello Imooc !"

代碼解釋：
在 HTML 代碼第 2 行， 我們使用了數據 message.title，但是在創建 Vue 實例的時候我們只初始化了 message 對象，但是該對象上并沒有 title 屬性，所以，當我們在控制臺上修改 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 方法的使用

前面我們提到了，想要在頁面中使用數據，首先要在 data 中初始化。有些同學可能并不想在創建實例的時候就初始化這些屬性。那么，我們可以利用 Vue 實例的 $set 方法來添加響應式數據，例如：

實例演示
預覽 復制
復制成功！
<!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 方法修改數據
vm.$set(vm.message, 'title','Hello Imooc !')
// 頁面正確顯示 Hello Imooc !

代碼解釋：
HTML 代碼第 2 行，我們使用了 message.title 的數據，但是，在創建 Vue 實例的時候并沒有給 message 初始化 title 屬性，所以我們通過 $set 的方式給 message 添加屬性。

除了$set，Vue 實例還暴露了其他有用的實例屬性與方法。它們都有前綴 $。這些實例方法我們會在后續的章節中逐步介紹，這里大家只需要對它有個印象。

Vue的實例并不只接收這兩個選項，還有諸如methods、computed、watch、props等選項，這些選項我們在接下來的小節中會逐個詳解。在這里，我們只需要先對Vue實例有一個初步的了解就可以了。

4. 小結

本小節對 Vue 實例進行了簡單的介紹，主要有以下知識點：

  • vue 實例就是通過 Vue 函數創建返回的一個實例對象。該函數接收一個對象形式的參數；
  • 介紹了 Vue 函數參數中的 el 和 data 的含義；
  • 介紹了 Vue 實例上 $set 方法的使用。