Vue(一) 数据绑定和第一个Vue应用

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

学习 Vue.js 最有效的方法是查看官网文档

数据绑定和第一个Vue应用

先从一段简单的 HTML 代码开始，感受 Vue.js 最核心的功能。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue示例</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model="name" placeholder="你的名字"> <h1>你好,{{ name }}</h1> </div> <script> var app = new Vue({ el: '#app', data: { name: '' } }) </script> </body> </html>

这是一段非常简单的代码，但是体现了 Vue 最核心的功能：双向绑定。在输入框输入的内容会实时显示在页面的 h1 标签内。

Vue实例与数据绑定

实例与数据

通过构造函数 Vue 就可以创建一个 Vue 的根实例，并启动 Vue 应用：

var app = new Vue({ //选项 })

变量 app 就代表了这个 Vue 实例。

首先，必不可少的一个选项就是 el 。el 用于指定一个页面已存在的 DOM 元素来挂载 Vue 实例，它可以是 HTMLElement，也可以是 CSS 选择器，比如：

<div id="app"><div>var app = new Vue({ el: document.getElementById('app')//或者是'#app' })

挂载成功后可以使用 app.$el 来访问该元素。

通过 Vue 实例的 data 选项，可以声明应用内需要双向绑定的数据。

var app = new Vue({ el: '#app', data: { a: 2 } })console.log(app.a);// 2

除了显示声明数据外，也可以指向一个已有的变量，并且他们之间默认建立了双向绑定，当修改其中一个，另一个也会一起变化。

var myDate = { a: 1 }var app = new Vue({ el: '#app', data: myDate })

生命周期

每个 Vue 实例创建时，都会经历一系列的初始化过程，同时也会调用相应的生命周期钩子，我们可以利用这些钩子，在合适的时机执行我们的业务逻辑，如果你使用过 jQuery，一定知道它的 ready() 方法，比如以下示例：

$(document).ready(function() { //DOM 加载完后，会执行这里的代码 })

Vue的生命周期钩子与之类似，比较常用的有：

created：实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载，$el 还不可用，需要初始化处理一些数据时会比较有用。
mounted：el 挂载到实例上后调用，一般我们的第一个业务会在这里开始。
beforeDestory：实例销毁之前调用，主要解绑一些使用 addEventListener 监听的事件等。

这些钩子与 el 和 data 类似，也是作为选项写入 Vue 实例内，并且钩子的 this 指向的是调用它的 Vue 实例：

var app = new Vue({ el: '#app', data: { a: 2 }, created: function() { console.log(this.a);// 2 } mounted: function() { console.log(this.$el);// <div id="app"></div> } })

插值与表达式

使用双大括号（Mustache 语法）"{{}}" 是最基本的文本插值方法，它会将我们双向绑定的数据实时显示出来，例如：

<div id="app"> <h1>{{ name }}</h1> </div> <script> var app = new Vue({ el: '#app', data: { name: 'Vue.js' } }) </script>

大括号里的内容会被替换为 Vue.js，通过任何方式修改数据 name，大括号里的内容都会被实时替换，比如下面的示例，实时显示当前的时间，每秒更新：

<div id="app"> <p>时间：{{ date }}</p> </div> <script> var app = new Vue({ el: '#app', data: { date: new Date() }, mounted: function () { this.timer = setInterval(() => { this.date = new Date(); }, 1000) }, beforeDestory: function () { if(this.timer) { clearInterval(this.timer); } } }) </script>

这里的 {{ date }} 输出的是浏览器默认的时间格式，比如 2017-01-02T14:04:49.470Z，并非格式化的时间（2017-01-02 22:04:49）,所以需要注意时区，有多种方法可以对时间格式化，比如赋值时先使用自定义的函数处理。Vue 的过滤器（filter）或计算属性（computed）也可以实现。

如果有的时候想输出 HTML，而不是将数据解释后的纯文本，可以使用 v-html：

<div id="app"> <span v-html="link"></span> </div> <script> var app = new Vue({ el: '#app', data: { link: '<a href="#">这是一个链接</a>' } }) </script>

如果想显示 {{}} 标签，使用 v-pre 即可跳过这个元素和它的子元素的编译过程，例如：

<span v-pre>{{ 这里的内容不会被编译 }}</span>

在 {{}} 中，除了简单的绑定属性值外，还可以使用 JavaScript 表达式进行简单的运算、三元运算等，例如：

<div id="app"> {{ number /10 }} {{ isOK ? '确定' : '取消' }} {{ text.split(',').reverse().join(',') }} </div> <script> var app = new Vue({ el: '#app', data: { number: 100, isOK: false, text: '123, 456' } }) </script>

Vue.js 只支持单个表达式，不支持语句和流控制。另外，在表达式中，不能使用用户自定义的全局变量，只能使用 Vue 白名单内的全局变量，例如 Math 和 Date。以下是一些无效的示例：

 {{ var book = 'Vue.js'}}  {{ if(ok) return msg}}

过滤器

Vue.js 支持在 {{}} 插值的尾部添加管道符"（|）"对数据进行过滤，经常用于格式化文本，比如字母全部大写，货币千位使用逗号分隔。过滤的规则是自定义的，通过给 Vue 实例添加选项 filters 来设置，例如在上一节中实时显示当前时间的案例，可以对时间进行格式化处理。

<div id="app"> <p>时间：{{ date | formatDate }}</p> </div> <script> var padDate = function (value) { return value < 10 ? '0' + value : value; }; var app = new Vue({ el: '#app', data: { date: new Date() }, methods: { }, filters: { formatDate: function (value) { var date = new Date(value); var year = date.getFullYear(); var month = padDate(date.getMonth() + 1); var day = padDate(date.getDate()); var hour = padDate(date.getHours()); var minutes = padDate(date.getMinutes()); var second = padDate(date.getSeconds()); return year + '-' + month + '-' + day + '-' + hour + '-' + minutes + '-' + second; } }, mounted: function () { this.timer = setInterval(() => { this.date = new Date(); }, 1000) }, beforeDestory: function () { if(this.timer) { clearInterval(this.timer);//在 Vue 实例销毁前，清除我们的定时器 } } }) </script>

过滤器也可以串联，而且可以接收数据，例如：

 {{ message | filterA | filterB }} {{ message | filterA('arg1', 'arg2') }}

这里的字符串 arg1 和 arg2 将分别传给过滤器的第二个和第三个参数，因为第一个参数是数据本身。

过滤器应当用于简单的文本转换，如果要实现复杂的数据变换，应当使用计算属性。

指令与事件

指令是 Vue.js 模板中最常用的功能，它带有前缀 v-，指令的主要职责就是当其表达式的值改变时，相应地将某些行为应用到 DOM 上。

Vue.js 内置了很多指令，现在只需了解 v-bind 和 v-on 指令。

v-bind

v-bind 的基本用途是动态更新 HTML 的属性，比如 id，class，例如：

<div id="app"> <a v-bind:href="url">百度一下</a> </div> <script> var app = new Vue({ el: '#app', data: { url: 'https://www.baidu.com' } }) </script>

此时示例中的链接地址与 url 进行了绑定，当通过某种方法改变 url 时，链接就会更新。

v-on

v-on 用来绑定事件监听器，这样就可以做一些交互了，例如：

<div id="app"> <p v-if="show">这是一段文本</p> <button v-on:click="change">点我切换</button> </div> <script> var app = new Vue({ el: '#app', data: { show: true }, methods: { change: function () { this.show = !this.show } } }) </script>

在 button 按钮上，使用 v-on:click 给该元素绑定一个点击事件，在普通的元素上，v-on 可以监听原生的 DOM 事件，除了 click 外，还有 dbclick，keyup，mousemove 等。表达式可以是一个方法名，这些方法都写在 Vue 实例的 methods 属性内，并且都是函数的形式，函数内的 this 指向当前 Vue 实例本身，因此你可以使用 this.xxx 的形式访问或修改数据。

表达式除了方法名，也可以直接是一个内联语句，上例可改为：

<div id="app"> <p v-if="show">这是一段文本</p> <button v-on:click="show = !show">点我切换</button> </div> <script> var app = new Vue({ el: '#app', data: { show: true } }) </script>