Vue.js 数据绑定与示例

1、实例与数据

        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

2、生命周期

        每一个 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>
        }
    })

 

3、插值与表达式

        使用双大括号（ 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>

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

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

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

 

4、过滤器

        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') }}

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