Vue 2.0 入門系列（1）數據綁定與響應式更新

時間 2019-11-06

標籤 vue 2.0 入門系列數據綁定響應更新简体版

原文原文鏈接

1.數據綁定與響應式更新

Hello Vue

咱們從一個基本的輸入框開始：css

<input type="text" id="input">

若是用 JavaScript 讓輸入框顯示 你好，Vue 呢？實現以下：html

<script>
    var data = {
        message: "你好，Vue"
    };

    document.querySelector('#input').value = data.message;
</script>

代碼說明：vue

定義一個 data 對象；git
使用 js 提供的 querySelector 方法，來選擇 id 爲 input 的元素，並對 input 元素的 value 進行賦值。github

那麼，這個例子用 Vue 來實現是怎樣的呢？瀏覽器

// html
<input type="text" id="input" v-model="message">

// js
var data = {
    message: "你好，Vue"
};

var vm = new Vue({
    el: '#input',
    data:data
})

咱們來詳細說明下。函數

var vm = new Vue();

首先，調用構造函數 Vue 建立一個新的 Vue 實例，命名爲 vm；工具

el: '#input',

Vue 的實例必須掛載到某個元素上，能夠經過 el 屬性來設置。在本例中，實例被掛在到了 input 元素上。學習

var data = {
    message: "你好，Vue"
};
    
data:data

咱們定義另外一個 data 對象，而後將其傳給了 Vue 實例的 data 屬性，該屬性專門負責管理數據。這樣，Vue 會全權代理 data 對象。好比，經過 vm.message 就能夠訪問 data 對象的 message 屬性了。spa

<input type="text" id="input" v-model="message">

最後，咱們使用 Vue 提供的指令 v-model，該指令一般用於對錶單控件的雙向綁定。什麼是雙向綁定？接下來會介紹。

安裝調試工具

在進一步學習 Vue 以前，首先來安裝相應的調試工具：官方地址。

安裝以後，要容許其訪問文件網址：

這裏與 Google Chrome 爲例，安裝好以後，右上角就會多出一個 Vue 的標記。若是你打開的是一個 Vue 頁面，那麼該圖標就會點亮。

感覺響應式更新

先來看看第一節例子，只作了稍微改動:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.2.6/vue.js"></script>
    
</head>
<body>
<div id="root">
    <input type="text" id="input" v-model="message">
    <p>{{ message }}</p>
</div>

<script>

    let data = {
        message: "你好，Vue"
    };

    var vm = new Vue({
        el: '#root',  // 綁定 id 爲 root 的元素
        data:data
    })
</script>
</body>
</html>

使用插值符號 {{ }} 爲元素賦值，在這裏，也可使用 v-text 指定元素的 contentText: