Vue事件以及获取dom元素
一.事件对象
Vue 事件 以及获取dom元素（虚拟）
① v-on:事件类型 简写
@事件类型
v-on:click=" " 简写 @click=" "
② v-once 一次性数据绑定
③ changes 执行的方法可以不带括号
④ 写当前组件的所有方法
methods:{ } 注意methods后边是冒号：
<template>
<div id="app">
<button v-on:click="changes">显示隐藏</button>
<div v-show="bool" class="p1"></div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
bool:true
}
},
//写当前组件的所有方法
methods:{
changes(){
//写简单效果的代码
//修改当前组件data方法里边变量值
//this 指向 VueComponent
//this里边可以拿到属性和方法
console.log(this); //注意this指针
console.log(this.bool);
console.log(this._data.bool);
this.bool=!this.bool;
}
}
}
</script>
<style lang="less">
.p1{
width: 200px;
height: 200px;
background-color: aqua;
}
</style>
⑤ 执行的方法有参数, 通过传参将参数传过去
<template>
<div id="app">
<ul>
<li v-for="(item,index) in object" :key="index" v-on:click="changes(index)">
姓名：{
{
item.name}}
性别：{
{
item.sex}}
<span v-for="(show,i) in item.hobby" :key="i">
爱好：{
{
show}}，
</span>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
object:[
{
name:"张三",
sex:"男",
hobby:["篮球","排球"]
},
{
name:"李四",
sex:"男",
hobby:["篮球","排球","乒乓球"]
},
{
name:"王五",
sex:"男",
hobby:["游戏"]
}
]
}
},
methods:{
changes(index){
console.log(this.object[index].sex)
this.object[index].sex="女"
}
}
}
</script>
二.事件修饰符
事件修饰符的作用是阻止事件默认行为
.stop 阻止事件冒泡(阻止事件传播)
只有点击事件有冒泡
click后边不写stop的时候，点击子元素会同时执行父元素事件，同时输出2和1，事件冒泡行为
<template>
<div id="app">
<div class="d1" @click.stop="changes(1)">
<div class="d2" @click.stop="changes(2)"></div>
</div>
</div>
</template>
<script>
export default {
name: "app",
data() {
return {
}
},
methods: {
changes(num) {
console.log(num);
}
}
};
</script>
<style lang="less">
.d1{
width: 300px;
height: 300px;
background-color: aqua;
}
.d2{
width: 100px;
height: 100px;
background-color: aquamarine;
}
</style>
.self 阻止事件不从内部触发
相当于事件的委托，当前的触发元素是自身的时候，才能执行当前事件的函数 ( 只能我自身去触发，不能我的子集代替我去触发)
<template>
<div id="app">
<ul @click.self="changes">
//点击li时不能触发事件，只有点击ul时才可以触发事件
<li>1111111</li>
</ul>
</div>
</template>
<script>
export default {
name: "app",
data() {
return {
}
},
methods: {
changes() {
console.log(1111);
}
}
};
</script>
.prevent 阻止重载页面(表单提交事件需要重载页面)
.once 事件触发一次
.capture 类似原生js里边的事件的捕获 事件由外向里执行
.enter 按下的键为回车键 eg: keydown.enter
三.事件的执行参数
① e 与原生js中event一致
② 键盘事件e的相关参数:
当前事件 e.target e.srcElement
获取键值 e.keyCode e.which
获取键名 e.key e.code
③ 鼠标事件e的相关参数：
e.timeStamp 触发事件的事件间隔
e.clientX,e.clientY e.pageX,e.pageY e.target e.srcElement
四.获取dom元素(虚拟)
通过refs获取dom元素
<template>
<div id="app">
<p ref="name">111111111111</p>
<button @click="getDOM"></button>
</div>
</template>
<script>
export default {
name: "app",
data() {
return {
}
},
methods: {
getDOM(){
console.log(this.$refs.name);
console.log(this.$refs.name.innerHTML);//获取文本值 value获取文本框值
}
}
};
</script>
vue虚拟dom(重点)
???
五.组件属性
name: " "
data() { }
methods:{ } 调用方法时可以加括号，也可以不加括号
computed:{ } 计算属性，调用方法的时候不需要加括号，直接调用属性
里边所写的方法，不可以在标签中直接调用，只能在methods方法中通过this.调用
watch:{ }
filters:{ } 过滤器
compontens:{ } 组件的挂在
监听属性watch:{ }
① 监听谁：对象，值，数组
② 监听当前的有没有发生变化
当前的变量如果发生变化了，会执行大括号里边的方法
③ 方法的名称是监听的变量 变量()
④ 若监听的是值，可以获取到变化前后的值
④ 监听的是对象和数组，只能获取到变化后的数值
<template>
<div id="app">
<button @click="btn">按钮</button>
</div>
</template>
<script>
export default {
name: "app",
data() {
return {
arr: [1, 2, 3, 4],
obj: [
{
name: "小王",
sex: "男"
},
{
name: "小花",
sex: "女"
}
],
num: 1
};
},
methods: {
btn() {
//调用的时候调用属性
this.changeValue;
}
},
computed: {
changeValue() {
this.obj.push({
name: "张三",
sex: "男"
});
this.num++;
this.arr.push(8);
}
},
watch: {
//这种写法是深度监听
arr:{
handler(newval, oldval){
console.log(newval, oldval);
}
},
obj:{
handler(newval, oldval){
//在监听里边知道变化的事件，知道啥时候变化了,可以写出相应的代码
console.log(newval, oldval);
}
},
num(newval, oldval) {
console.log(newval, oldval);
}
}
};
</script>
过滤器filters:{ }
针对值进行过滤，管道符加过滤器
管道符前边的对象一直在循环，最后会产生死循环
用扩展符后用新变量排序，引用空间会发生变化，与原数组就没有关系了
<template>
<div id="app">
<p>{
{
arr|mysort}}</p>
</div>
</template>
<script>
export default {
name: "app",
data() {
return {
arr:[1,2,3,4,5,6]
};
},
methods: {
},
computed: {
},
watch: {
},
filters: {
//这里是写过滤器
mysort(val) {
//过滤器里边一定要有返回值
//在返回之前要对值进行过滤
//val 代表管道符前边的值
let [...arrele]=[...val];
arrele.sort((a,b)=>{
return b-a;
})
return arrele;
}
}
};
</script>
有参数过滤，传的参数是形参的第二个参数
<template>
<div id="app">
<input type="text" v-model="textele">
<p>{
{
sex|sexele(textele)}}</p>
</div>
</template>
<script>
export default {
name: "app",
data() {
return {
sex:["男","女","男","女","女"],
textele:"男"
};
},
filters: {
sexele(val,textele){
console.log(textele);
let arr=[];
for(let key of val){
//只保留数组中和文本框输入属性一致的
if(key===textele){
arr.push(textele);
}
}
return arr;
}
}
};
</script>
v-for过滤
不可以在v-for后边加过滤，这种写法系统会报错，如下图所示
v-for过滤可以在后边加方法，方法里边写你的过滤方法，最后的过滤出的值return出来
这里边写的这些过滤器，仅限于当前组件使用，全局过滤器在main.js中写，所有的组件都可以使用
<template>
<div id="app">
<span v-for="(item,index) in forSort" :key="index">
{
{
item}}
</span>
</div>
</template>
<script>
export default {
name: "app",
data() {
return {
arr: [1, 2, 3, 4, 5, 6, 7]
};
},
computed: {
forSort(val) {
//在方法里边变相去写过滤器
this.arr.sort((a, b) => b - a);
return this.arr;
//console.log(val); 这里边输出value参数，是一个VueComponent对象
}
}
};
</script>