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:

<p v-text="message"></p>

在浏览器中打开该例，打开 Chrome 的控制台，进行以下操做：点击 Root 元素，令其与 $vm0 绑定。点哪一个节点，那个节点就会绑定 $vm0。

如今，咱们可使用 $vm0 在控制台中访问实例，咱们立刻来直观感觉下什么是响应式更新：

能够看出：

输入框的值改变后，控制台中访问 message 发现跟着变化；
控制台中操做 message 的值，输入框也实时跟着变化；

这就是响应式更新啦。须要注意的是 v-model 只能用于表单控件，不能用于 div、p 等其余元素。

附录：

本节源码