Vue实践--指令和事件

 Vue思想是数据驱动DOM，所以你只需要把主要精力放在数据和逻辑上即可，DOM的事情交给Vue就行了；

指令的作用是当表达式的值发生变化的时候，将某些行为应用到DOM上：

Vuejs中的一些指令：
1.v-bind：动态更新DOM元素的属性（通常用来绑定DOM属性），例如：

<p v-if='datas' :href="url">{{greeting|toUpperCase|strClip(3)}}</p>//给该元素绑定href属性，属性的值是对应Vue数据url

v-on：事件监听器，主要给DOM绑定事件的,事件写在methods选项里，在函数体内的this指 向当前的Vue实例，可以像访问Vue数据（data里面的数据）那样访问函数：

var myApp = new Vue({
			el:"#container",
			data:{
				datas:true,
				greeting:"hello,World",
				url:"www.baidu.com"
			},
			filters:{
				toUpperCase:function(value){
					return value.toUpperCase()
				},
				strClip:function(val,index){
					return val.substring(index)
				}
			},
			methods:{
				showFunc:function(){
					var status = this.datas;//this指向myApp
					alert(this.datas);
					if(this.datas){
						this.datas = false;
					}
					else if(!this.datas){
						this.datas = true
					}
				}
			},
			computed:{
				getLength:function(){
					return this.url.length//同上
				}
			}
		})

v-on：事件名= “函数名"，这里的事件名可以是（click，dbclick，mouseup等）