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