vue绑定数据原理（数据绑定与示例）

vue绑定数据原理（数据绑定与示例）$(document).ready(function() { // DOM 加载完后，会执行这里的代码 }); Vue 的生命周期钩子与之类似，比较常用的有： var myData = { a: 1 } var app = new Vue({ el: "#app" data: { a: myData } }) sonsole.log(app.a); // 1 // 修改属性，原数据也会随之修改 app.a = 2; console.log(myData.a); // 2 // 反之，修改原数据，Vue 属性也会修改 myData.a = 3; console.log(app.a); // 3 二、生命周期 每个 Vue 实例创建时，都会经历一系列的初始化过程，同时也会调用相应的生命周期钩子，我们可以利用这些钩子，在合适的时机执行我们的业务逻辑。如果你使

一、实例与数据

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

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

变量 app 就代表了这个 Vue 实例。事实上，几乎所有的代码都是一个对象，写入 Vue 实例的选项内的。首先，必不可少的一个选项就是 el 。el 用于指定一个页面已存在的 DOM 元素来挂载 Vue 实例，它可以是 HTMLElement ，也可以是 CSS 选择器，比如：

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

挂载成功后，可以通过 app.$el 来访问该元素。Vue 提供了很多常用的实例属性与方法，都以 $ 开头，比如 $el 。

<div id="app"> <input type="text" v-model="name" placeholder="请输入你的名字"> <h1>Vue.js 最核心功能：数据的双向绑定 —— {{ name }}</h1> </div> <script> var app = new Vue ({ el: '#app' data: { name: '' } }) </script>

上述代码，在 input 标签上，有一个 v-model 的指令，它的值对应于创建的 Vue 实例的 data 选项中的 name 字段，这就是 Vue 的数据绑定。通过 Vue 实例的 data 选项，可以声明应用内需要双向绑定的数据。建议所有会用到的数据都预先在 data 内声明，这样不至于将数据散落在业务逻辑中，难以维护。

Vue 实例本身也代理了 data 对象里的所有属性，故可以这样访问：

var app = new Vue({ el: "#app" data: { a: 1 } }) sonsole.log(app.a); //1

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

var myData = { a: 1 } var app = new Vue({ el: "#app" data: { a: myData } }) sonsole.log(app.a); // 1 // 修改属性，原数据也会随之修改 app.a = 2; console.log(myData.a); // 2 // 反之，修改原数据，Vue 属性也会修改 myData.a = 3; console.log(app.a); // 3 二、生命周期

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

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

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

• created : 实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载，$el 还不可用。需要初始化处理一些数据时会比较有用。
• mounted : el 挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始。
• beforeDestroy : 实例销毁之前调用。主要解绑一些使用 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 语法 ）“ {{ }} ” 是最基本的文本插值方法，它会自动将我们双向绑定的数据实时显示出来，例如实时显示当前时间，每秒更新：

<script> var app = new Vue ({ el: '#app' data: { date: new Date() } mounted: function () { var _this = this; // 声明一个变量指向 Vue 实例 this 保证作用域一致 this.timer = setInterval(function() { _this.date = new Date(); // 修改数据 date } 1000); // 1秒 } beforeDestroy: function () { if (this.timer) { clearInterval(this.timer); // 在 Vue 实例销毁前，清除我们的定时器 } } }) </script>

双大括号里的内容会被替换为 data 选项中 date 的值，通过任何方法修改数据 data 选项中 date 的值，双大括号的内容都会被实时替换。这里的 {{ date }} 输出的是浏览器默认的时间格式，并非格式化的时间（ 2018-10-07 10:05:59 ），所以需要注意时区。有多种方法可以对时间格式化，比如赋值前先使用自定义的函数处理。当然，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="https://www.baidu.com/">百度</a>' } }) </script>

link 的内容将会被渲染为一个具有点击功能的 a 标签，而不是纯文本。但是要注意，如果将用户产生的内容使用 v-html 输出后，有可能导致 XSS 攻击（跨站脚本攻击），所以要在服务端对用户提交的内容进行处理，一般可将尖括号 “<>” 转义。

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

<span v-pre>{{ 这里会显示双花括号，内容不会被编译 }}</span>

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

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

显示结果依次为：1、取消、456 123 。

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

<!-- 这是语句，不是表达式 --> {{ var text = '123 456' }} <!-- 不能使用流控制，要使用三目运算 --> {{ if (areYouOK) return msg }} 四、过滤器

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

<div id="app"> {{ date | formatDate }} </div> <script> // 在月份、日期、小时等小于 10 时前面补 0 var padDate = function(value) { return value < 10 ? '0' value : value; }; var app = new Vue({ el: "#app" data: { date: new Date() } filters: { formatDate: function (value) { // 这里的 value 就是需要过滤的数据 var date = new Date(value); var yaer = date.getFullYear(); var month = padDate(date.getMonth() 1); var day = padDate(date.getDate()); var hours = padDate(date.getHours()); var minutes = padDate(date.getMinutes()); var seconds = padDate(date.getSeconds()); // 整理返回格式化后的日期 return yaer '-' month '-' day ' ' hours ':' minutes ':' seconds; } } mounted: function () { var _this = this; // 声明一个变量指向 Vue 实例 this 保证作用域一致 this.timer = setInterval({ _this.date = new Date(); // 修改数据 date } 1000); } beforeDestroy: function() { if (this.timer) { clearInterval(this.timer); // 在 Vue 实例销毁前，清除我们的定时器 } } }) </script>

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

<!-- 串联 --> {{ message | filterA | filterB }} <!-- 接收参数 --> {{ message | filterA('arg1' 'arg2') }}

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