Vue.js数据绑定解析

最新推荐文章于 2024-10-11 17:39:47 发布

weixin_34208185

最新推荐文章于 2024-10-11 17:39:47 发布

阅读量102

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/johnvwan/p/9605699.html

版权

本篇文章聊聊Vue.js实例与数据绑定。

一.实例与数据

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.getElementByld('app')   //或者是'#app'
})

挂载成功后，我们可以通过app.$el来访问该元素。 Vue提供了很多常用的实例屈性与方法，都以＄开头，比如 $el, 后续还会介绍更多有用的方法。通过Vue实例的data选项，可以声明应用内需要双向绑定的数据。建议所有会用到的数据都预先在data内声明，这样不至于将数据散落在业务逻辑中，难以维护。Vue实例本身也代理了data对象里的所有属性，所以可以这样访问：

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

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

var myData = {
    a: 1
}
var app = new Vue({
    el: '#app',
    data: myData
})
console.log(app.a); //1
//修改属性，原数据也会随之修改
app.a = 2;
console.log(myData.a); //2
//反之，修改原数据，Vue属性也会修改
myData.a = 3;
console.log(app.a);   //3

二.插值与表达式

使用双大括号“{{}}”是最基本的文本插值方法，它会自动将双向绑定的数据实时显示出来，例如：

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

如果有的时候就是想输出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-html输出后，有可能导致XSS攻击，所以要在服务端对用户提交的内容进行处理，一般可将尖括号"< >"转义。

如果想显示{{ } }标签，而不进行替换，使用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 str= 'demo '}}
//不能使用流控制， 要使用三元运算
{{ if (ok) return msg }}

三.过滤器

Vue.js支持在{{}}插值的尾部添加一个管道符'(|)’, 对数据进行过滤，经常用于格式化文本，比如字母全部大写、货币千位使用逗号分隔等。过滤的规则是自定义的，通过给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);
            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: function() {
        var _this = this;
        this.timer = setInterval(function() {
            _this.date = new Data();
        }, 1000);
    },
    beforeDestroy: function() {
        if (this.timer) {
            clearInterval(this.timer);
        }
    }
})
</script>