Vue 2.0学习（二）数据绑定

Vue实例对象

　　创建一个vue应用很简单，通过构造函数Vue就能创建一个Vue的根实例：

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue.js!'
    }
})

　　变量app代表了这个Vue实例。el、data都属于实例的参数选项。

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

<div id="app"></div>

var app = new Vue({
    el:document.getElementById('app')       //或者"#app”
})

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

 

数据渲染

　　vue.js的核心是允许采用简洁的模板语法来声明式地将数据渲染进DOM。

<!-- html -->
<div id="app">
  {{ message }}
</div>

//JS
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Hello Vue!

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

　　如果想输出HTML，而不是将数据解析之后的纯文本，就需要使用到v-html：

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

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

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

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

　　在{{}}中，除了支持简单的绑定值，还可以使用JavaScript表达式进行简单的运算，三元运算等。但是只支持单个表达式，不支持语句和流控制。表达式中也不支持用户自定义的全局变量，只能使用Vue白名单内的全局变量，例如Math和Date。

 

过滤器

　　Vue.js支持在{{}}插值的尾部添加一个管道符"|"对数据进行过滤，一般用于格式化文本。过滤的规则是自定义的，通过Vue实例添加选项filters来设置。下面的过滤器作用是对时间的格式化

<!-- html -->
<div id="app">
    {{ data | formatDate }}
</div>                      

<script>
    //在月份、日期、小时等小于10时前面补0
    var padDate = function(value){
        return value < 10 ? '0' + value : value;
    };

    var app = new Vue({
        el: '#app',
        date: {
            date: new Date()
        },
        filters: {
            //这里的value就是需要过滤的数据
            formatDate: function(value){
                var date = new Date(value);
                var year = 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 year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
            }
        },
        mounted: funtion() {
            //声明一个变量指向Vue实例this，保证作用域一致
            var _this = this;
            this.timer = setInterval(function() {
                _this.date = new Date(); //给date重新赋值
            },1000);
        },
        beforeDestroy: function() {
            if(this.timer){
                clearInterval(this.timer); //在Vue实例销毁前，清除定时器
            }
        }
    })    
</script>  

　　过滤器也可以串联，也可以接收参数。

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

　　参数会传递给过滤器的第二个和第三个参数，第一个参数是数据本身。