vue实例和数据绑定

vue实例和数据绑定

通过script便签引入vue

 <script src="http://vuejs.org/js/vue.js"></script>

通过vue构造函数来创建一个vue实例。传入一个对象。

必不可少的一个属性是el。el用于指定一个页面存在的DOM元素，可以是标签，也可以是css选择器.

通过vue实例的data选项，可以声明应用内需要双向绑定的数据。建议所有会用到的数据都预先在data内声明，这样不至于将数据散落在业务逻辑中，难以维护。也可以指向一个已经有的变量。

<div id="xxx">
        {{qqq}}
        {{a}}
    </div>
    <script>
        var sss = new Vue({
            el: '#xxx',
            data: {
                qqq: 'hello world.',
                a: 5
            }
        })
    </script>

访问vue对象中属性前面要加$符号，访问data中的属性要直接用点

sss.$el
sss.$data
sss.qqq // 'hello world' 
sss.a // 5

生命周期钩子

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

var sss = new Vue({
            el: '.xxx .jjj',
            data: {
                date: new Date()
            },
            mounted: function(){
                var _this = this // 之所以这里要加_this，是因为在定时器函数的this不是指实例的this
                this.timer = setInterval(function () {
                    'use strict'
                    _this.date = new Date()
                },1000)

            },
            beforeDestory: function () {
                window.clearInterval(this.timer)
            }
        })

过滤器

过滤器的用法，在变量名后添加|如{{date | filter1 | filter2(1,2)}},过滤器可以无限叠加。注意后面不要加()
和el、data，我们也需要在vue实例里的filters里写上我们的过滤器,filters是一个对象，属性名是我们自定义的顾虑器的名字

filters: {
// 这里的value是就要过滤的值
    filter1: function(value){
        
    },
    filter2: function(value,arg1,arg2){
        // 过滤器也接受参数。
    }
}

指令

v-bind

用于绑定HTML里面的属性名，动态更新HTML属性，语法糖为:

<span v-bind:class="tranRed">hello</span>
data: {
    tranRed: 'red'
}

v-on

用于绑定监听事件.语法糖为@

在普通元素上，v-on可以监听原生的DOM事件，除了click外，还有dbclick、keyup。mousemove等。表达式可以是一个方法名，这些方法都写在vue实例的methods属性内，而且还是函数的形式，函数内的this指向的是当前vue实例本身，因此可以直接使用this.xxx的形式来访问或修改数据。

vue中用到的所欲方法都写在methods属性里面。

<button v-on:click="plus">{{countnum}}</button>
methods: {
                plus: function () {
                    this.countnum += 1;
                }
            }

v-test

控制文本，和{{}}作用一样

<span v-text="apple"></span>
data: {
    apple: '苹果'
}

v-html

把字符串中当作HTML

<span v-html="banana"></span>
banana: '<span style="color:red">红字</span>'