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+")";
}
}
}