方法和事件的绑定
方法:在methods中写方法,供事件或者别的方法内部调用,而且因为底层是做了es6语法处理的,所以我们学过的所有方式的写法都能在methods里面写
v-on: 和 @ 都是绑定事件的指令
指令后面跟事件类型,值就是methds中的方法,可以加小括号也可以不加
常用的事件修饰符
- .stop 阻止冒泡,阻止从当前元素经过的所有冒泡行为
- .prevent 阻止默认事件
- .capture 添加事件侦听器时让事件在捕获阶段触发
- .self 其他元素的事件触发时 事件链经过它,无论是捕获还是冒泡阶段都不会触发它的事件,只有它自己是目标对象才会触发事件, 虽然它自己不会被别人影响,但是它自己的事件触发的时候还是会生成事件链经过其他元素,并不阻止继续冒泡到其他元素
- .once 事件只触发一次,触发完之后,事件就解绑
- 多修饰符一起使用连点(.)
<style>
.box1 {
width: 300px;
height: 300px;
background-color: chocolate;
}
.box2 {
width: 200px;
height: 200px;
background-color: lightcoral;
}
.box3 {
width: 100px;
height: 100px;
background-color: lightblue;
}
</style>
<div id="app">
<button @click="fn3" @mouseenter="fn4">多个事件绑定</button>
<br><br>
<div @click="fn1" class="box1">1
<!-- .self既不阻止冒泡也不触发事件,只有当自己是目标对象时才会触发绑定事件,冒泡也不会触发 -->
<div @click.self="fn2" class="box2">2
<!-- .stop就阻止了事件冒泡,点击最小的div时就只会打印fn3了 -->
<div @click.stop="fn3" class="box3">3</div>
<!-- 没有.prevent就会跳转到百度,但是有了.prevent就会阻止这个默认的跳转事件 -->
<a @click.prevent="fn3" href="http://www/baidu.com">阻止默认事件</a>
</div>
</div>
<!-- .once只能执行一次,要写在执行只能刷新页面才行 -->
<button @click.once="fn5">只执行一次</button>
</div>
<script>
new Vue({
el: "#app",
data: {
},
methods: {
fn1() {
console.log("fn1");
},
fn2() {
console.log("fn2");
},
fn3() {
console.log("fn3");
},
fn4() {
console.log("fn4");
},
fn5() {
alert("倒计时两分钟");
}
}
})
</script>
具体的执行结果这里就不展示了,有兴趣的自己可以去试试
样式绑定
style样式绑定
style的样式绑定一般用于当页面中有样式的改变的时,但是是某一些小的改变,用样式绑定会方便一些
如果是要改变大的样式的时候用class绑定会方便一些
<style>
.imgbox {
width: 200px;
height: 200px;
}
.img1,
.img2 {
width: 400px;
height: 200px;
}
</style>
<div id="app">
<button @click="changeImg">点击换图</button><br><br>
<div class="imgbox">
<img class="img1" :src="imgurl1" :style="{display: s,display: h}">
<img class="img2" :src="imgurl2" :style="{display: h,display: s}">
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
imgurl1: "https://tenfei05.cfp.cn/creative/vcg/800/new/VCG41N1210205351.jpg",
imgurl2: "https://t7.baidu.com/it/u=963301259,1982396977&fm=193&f=GIF",
s: "none",
h: "block",
flag: false
},
methods: {
changeImg() {
this.flag = !this.flag;
if (this.flag) {
this.s = "block";
this.h = "none";
console.log(111);
} else {
this.h = "block";
this.s = "none";
console.log(222);
}
}
}
})
</script>
这些都是动态的展示效果,就都不展示效果了
class样式绑定
一般用于大的板块的切换,比如点击某个按钮,整个页面的布局改变等等
<style>
.box {
width: 300px;
height: 400px;
background-color: lightsteelblue;
}
.content1 {
width: 300px;
height: 300px;
color: mediumorchid;
background-color: mediumpurple;
margin-top: 25px;
}
.content2 {
width: 300px;
height: 300px;
color: mediumseagreen;
background-color: mediumspringgreen;
margin-top: 25px;
}
</style>
<div id="app">
<button @click="change">{{btn}}</button>
<br><br>
<div class="box">box
<div :class="contents">内容一</div>
</div>
</div>
<script>
new Vue({
el:"#app",
data:{
btn:"点击切换板块内容",
contents:"content1",
flag:true,
text:"内容一"
},
methods: {
change(){
this.flag = !this.flag;
if (this.flag) {
this.contents="content1";
this.text="内容一";
} else {
this.contents="content2";
this.text="内容二";
}
}
}
})
</script>
条件渲染
条件渲染一般有两个命令v-if /v-else 或者 v-show
使用的变量为true就显示,false就隐藏
在业务中常常可以通过操作if或者show使用的变量,来达到操作元素显示和隐藏的效果
v-i是删除节点,v-show是操作css的display:none
四种显隐效果的区别
visibility: hidden: 不脱离文档流的
display:none :脱离文档流
v-if :删除节点
v-show : display:none
<div id="app">
<div>
<button @click="change">控制文字二的显隐</button>
<p v-if="flag">文字二</p>
</div>
<div>
<br>
<button @click="change1">控制文字三的显隐</button>
<p v-show="flag1">文字三</p>
</div>
</div>
<script>
new Vue({
el: "#app",
data: {
flag: true,
flag1: true
},
methods: {
change() {
this.flag = !this.flag
},
change1() {
this.flag1 = !this.flag1
}
}
})
</script>
循环渲染
如果是嵌套循环,嵌套就写里面
如果循环是平级关系,循环也就是平级关系
如果插值表达式里面没有值,那么这个div是不会渲染上去的
<div id="app">
<div v-for="(item) in arr">
<h3>{{item.name}}</h3>
<h4>{{item.age}}</h4>
<div v-for="(items) in item.habbt">
<span>{{items}}</span>
</div>
</div>
</div>
<script>
new Vue({
el: "#app",
data: {
arr: [{
name: "丽丽",
age: 20,
habbt: ["运动", "看书"]
}, {
name: "琳达",
age: 18,
habbt: ["游泳", "看书", "旅游"]
}, {
name: "小明",
age: 23,
habbt: ["运动", "看书", "旅游","逛街"]
}, {
name: "小红",
age: 26,
habbt: ["跑步", "画画"]
}, ]
}
})
</script>