vue实例与数据绑定

vue 是什么

Vue 的官方文档中这样介绍它：

简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。

简单小巧是指 Vue.js 压缩后大小仅有17KB。所谓的渐进式，就是你可以一步一步、有阶段性地来使用 Vue.js，不必一开始就使用所有的东西。

使用 Vue.js 可以让 Web 开发变得简单，同时也颠覆了传统前端开发模式，它提供了现代 Web 开发中常见的高级功能，比如:

• 解耦视图与数据
• 可复用的组件
• 前端路由
• 状态管理
• 虚拟 DOM

vue中两个核心点

1. 响应的数据绑定

当数据发生改变 → 自动更新视图

利用Object.definedProperty的setter/getter代理数据，监控对数据的操作。

Object.definedProperty只能兼容IE8以上的浏览器,vue也是如此！

2. 组合的视图组件

UI页面映射为组件树

划分组件可维护、可重用、可测试

MVVM模式

M：Model 数据模板
V：view 视图模板
vm：view-Model 视图模型

vue实例与数据绑定

每一个应用都是通过 Vue 这个构造函数创建根实例（root instance）启动 new Vue（选项对象）

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

变量 app 就代表了这个 Vue 实例，事实上，几乎所有的代码都是对象，写入 Vue 实例的选项内，对象包含挂载元素、数据、模板、方法等

• el：挂载元素选择器 string | HtmlElement
• data：代理数据 Object | Funtion
• methods：定义方法 Object

vue代理data数据

每个 vue 实例都会代理其 data 对象里所有的属性，这些代理的属性是响应的；

注：新添加的属性不具备响应功能，改变后不会更新视图

vue实例自身的属性和方法

暴露自身的属性和方法，以 $ 开头 例如：$el $data…

vue生命周期

比较常用生命周期钩子有：

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

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

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

插值与表达式

使用双大括号(Mustache语法)是最基本的文本插值方法，它会自动将我们双向绑定的数据实时显示出来。

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

<div id="app">
    <p v-html="link"></p>
</div>

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

在 {{}} 中除了简单的绑定属性值外，还可以使用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>

显示结果依次为：10、取消、456,123

过滤器

Vue 只是在{{}}插值的尾部添加一个管道符“（|）”对数据进行过滤，经常用于格式化文本，比如字母全部大写等。过滤规则是自定义的，通过给 Vue 实例添加选项 filters 来设置。

<div id="app">
    {{ date | formatDate }}
</div>

<script>
    var padDate = function (value) {
        return value < 10 ? '0' + value : value;
    };
    var app = new Vue({
        el: '#app',
        data: {
            date: new Date()
        },
        filters: {
            formatDate: function (value) {
                var date = new Date(value),
                    year = date.getFullYear(),
                    month = padDate(date.getMonth() + 1),
                    day = padDate(date.getDate()),
                    hours = padDate(date.getHours()),
                    minutes = padDate(date.getMinutes()),
                    seconds = padDate(date.getSeconds());
                return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
            }
        },
        mounted: function () {
            var _this = this;
            this.timer = setInterval(function () {
                _this.date = new Date();
            }, 1000);
        },
        beforeDestroy: function () {
            if(this.timer){
                clearInterval(this.timer);
            }
        }
    })
</script>

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

<!-- 串联 -->
{{ message | filterA | filterB }}

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

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

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

计算数据

模板是为了描述视图的结构，模板中放入太多逻辑导致模板过重难以维护，所以遇到复杂的逻辑时应该使用计算属性。

<div id="app">
    {{ reversedText }}
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            text: '123,456'
        },
        computed: {
            reversedText: function () {
                return this.text.split(',').reverse().join(',');
            }
        }
    })
</script>

所有的计算属性都以函数的形式写在 Vue 实例内的 computed 选项内，最终返回计算属性的结果。

每一个计算属性都包括 getter 和一个 setter。

<div id="app">
    {{ fullName }}
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            firstName: 'Jack',
            lastName: 'Green'
        },
        computed: {
            fullName: {
                // getter,用于读取
                get: function () {
                    return this.firstName + ' ' + this.lastName;
                },

                // setter,写入时触发
                set: function (newValue) {
                    var name = newValue.split('');
                    this.firstName = name[0];
                    this.lastName = name[name.length - 1];
                }
            }
        }
    })
</script>

当执行 app.fullName = ‘John Doe’ 时，setter就会被调用，数据 firstName 和 lastName 都会相对更新，视图同样也会更新。

计算属性还经常用于动态地设置元素的样式名称 class 和内联样式 style，当使用组件时，计算属性也经常用来动态传递 props。

计算属性还有两个很实用的小技巧：一是计算属性可以依赖其他计算属性；二是计算属性不仅可以依赖当前 Vue 实例的数据，还可以依赖其他实例的数据。