Vue-事件等

vue的参数对象

• el vue的作用域（模板指定）
• template
• data vue的定义初始数据
• methods vue的事件方法中心
• computed vue的计算属性，从现有属性计算新的数据
• watch vue监听，如果监听对象，必须有deep : true
• 声明周期钩子函数
  • 创建阶段：
    • beforeCreate 创建之前
    • created 当vue创建完毕 可以获取到this
  • 挂载阶段：
    • beforeMount 挂载之前
    • mounted 挂载之后
  • 更新阶段：
    • beforeUpdate 更新之前
    • Updated 更新之后
  • 卸载阶段：
    • beforeDestroy 卸载之前
    • destroyed 卸载之后
• filters过滤-管道(新版vue已经废弃)
  • 使用{{num | 过滤方法(参数)}}
• directives 自定义指令
• props 属性
• mixin 混合
• 路由守卫
• components 组件

vue事件修饰符

• .once 事件只执行一次

<div id="app">
	<button @click.once="say()">大声说</button>
</div>

new Vue({
	el : "#app",
	data : {},
	methods : {
		say() {
			alert("我爱你");
		}
	}
})

• .prevent —阻止默认事件

<div id="app">
<!-- 点击没反应，组织了a标签的跳转，跳转就是a标签的默认事件 -->
	<a href="www.baidu.com" @click.prevent="">去百度</a>
</div>

• .stop —阻止冒泡事件

<div @click="says()">
	<button @click.stop="say()">大声说</button>
	<!-- 阻止事件向上传递 -->
</div>

new Vue({
	el : "#app",
	data : {},
	methods : {
		say() {
			alert("我爱你");
		},
		says() {
			alert("我爱你父亲");
		},
	}
})

按键修饰符

• .enter enter键
• .esc esc键
• .right →
• .left ←
• .up ↑
• .down ↓
• 等

<div id="app">
	<input 
		type="text" 
		v-model="num" 
		@keydown.down="num--" 
		@keydown.up="num++"
		@keydown.left="num++"
		@keydown.rigth="num++"
		@keydown.enter="num++"
		@keydown.esc="num++"
	/>
</div>

计算属性—computed

• 计算 从现有数据 计算出新的数据(缓存)

案例—把msg 字符串翻转

<div id="app">
	<h1>{{msg}}</h1>
	<h1>{{rmsg}}</h1>	olleh
</div>

new Vue({
	el : "#app",
	data : {
		msg : "hello"
	},
	methods : {},
	computed : {
		rmsg : function() {
			return this.msg.split('').reverse().join("");
		}
	}
})

案例—清单

<div id="app">
	<button @click="state = 'all'">完成</button>
	<button @click="state = 'ok'">未完成</button>
	<button @click="state = 'no'">全部</button>
	<h1 v-for="(item,index) in flist" :key="index">{{item.title}}</h1>
</div>

new Vue({
	el : "#app",
	data : {
		state : "all",
		list : [
			{done : true,title : "学会vue"},
			{done : false,title : "学会Angular"},
			{done : true,title : "看懂Typescript"},
			{done : true,title : "懂得uni-app"}
		]
	},
	methods : {
	},
	computed : {
		flist : function() {
			if(this.state ==="all") {
				return this.list
			}else if(this.state === "ok") {
				return this.list.filter( (item) =>{
					return item.done === true
				})
			}else if(this.state === "no") {
				return this.list.filter( (item) => {
					return item.done === false
				})
			}
		},
	}
})

监听—watch

监听—值类型，检测数据是否发生改变，并执行相应操作

<div id="app">
	<button @click="num++">{{num}}</button>
</div>

new Vue({
	el : "#app",
	data : {
		num : 1
	},
	watch : {
		// 监听 num 的变化，执行handler方法
		"num" : {
			handler : function(newval,oldval) {
				console.log("num的值从" + oldval + "变化到" + newval);
				localStorage.setItem("num",newval);
				// 当num值发生改变时会触发 handler函数
			}
		}
	},
	// 在挂载结束阶段获取num
	created() {
		this.num = localStorage.getItem("num") || 1;
		// 当vue实例创建完毕 获取num的值 如果获取不到，默认为1
	}
})
// 目标：每次num发生变化时存储到localStorage
// 当vue创建完毕，从localStorage取出num

监听—引用类型，实现一个简单自动计算器

• 引用类型的数据监听没有oldval
• deep : true 监听对象的属性，才能监听到引用类型数据改变

<div id="app">
	<input type="text" v-model="obj.v1" />
	<select v-model="obj.type">
		<option value="+">+</option>
		<option value="-">-</option>
		<option value="×">×</option>
		<option value="÷">÷</option>
	</select>
	<input type="text" v-model="obj.v2" />
	=
	<input type="text" v-model="obj.v3" />
</div>

new Vue({
	el : "#app",
	data : {
		obj : {v1 : 0,v2 : 0,type : "+",v3 : 0}
	},
	watch : {
		// 监听 obj 的变化，执行handler方法， 深度监听
		"obj" : {
			handler : function(newval) {
				console.log("数据修改了");
				if(this.obj.type === "+") {
					this.obj.v3 = this.obj.v1*1 + this.obj.v2*1
				}else if(this.obj.type === "-") {
					this.obj.v3 = this.obj.v1*1 - this.obj.v2*1
				}else if(this.obj.type === "×") {
					this.obj.v3 = this.obj.v1*1 * this.obj.v2*1
				}if(this.obj.type === "÷") {
					this.obj.v3 = this.obj.v1*1 / this.obj.v2*1
				}
			},
			deep : true		// 当deep时true时才能监听到对应的引用类型的数据变化
		}
	},
})

过滤—管道----filters : {}

• 使用：{{变量 | 过滤方法(参数)}}
• 定义：

filters : {
	过滤方法名 : () => {
		returen 
	}
}

案例—过滤小数以及更加条件

<div id="app">
	<h1>{{num}}</h1>	<!-- 998.8854225 -->
	<h1>{{num | price('￥')}}</h1>	<!-- ￥998.89 -->
	<h1>{{num | price('$',3)}}</h1>  <!-- $998.885-->
</div>

new Vue({
	el : "#app",
	data : {
		num : 998.8854225
	},
	filters : {
		price : (val,type='',num=2) => {
			return type + val.toFixed(num);
		}
	}
})

案例—电话3-4-4模式

<div id="app">
	<h1>{{tel|fenge("-")}}</h1>
</div>

new Vue({
	el : "#app",
	data : {
		tel : '13598859747'
	},
	filters : {
		fenge : (val,type) => {
			var arr = ("" + val).split("");
			arr.splice(3,0,type);
			arr.splice(8,0,type);
			return arr.join("");
		},
	}
})

自定义指令

• dom的获取，使用一些基于dom操作的插件
• 定义：directives : {}

<div v-img="*****"></div>

directives : {
	"img" : {
		inserted : function(el,binding) {
			// el 当前指令所在的元素
			// binding.value 指令值
		}
	}
}

案例— 图片加载骨架

<div id="app">	
	<div class="box" v-img="list[0]"></div>
	<div class="box" v-img="list[1]"></div>
	<div class="box" v-img="list[2]"></div>
</div>

directives:{
	 img:{
		 // inserted 指令所在的节点被插入时候执行  
		 // bind 绑定
		 // update 节点更新
		 inserted(el,binding){						
			 let color = Math.floor(Math.random()*1000000);	
			// 设置随机的颜色
			 el.style.backgroundColor = "#"+color;
			 // 设置为背景色
			 // var img = new Image();
			 // img.src = binding.value;//获取到之定义指令的值
			 // img.onload = function(){
				// el.append(img);
				
			 // }
			 el.style.backgroundImage = "url("+binding.value+")";
		 
		 }
	 }
 }