【一】事件修饰符
1:知识点
2:
结果:因黄色块在红色块内,当点击黄色块时就相当时点击了红色块,为避免这样的触发,可使用.stop来阻止事件冒泡。
3:
结果:当点击一次按钮时,就会一直触发增加,而我们需要的就是点击一次触发一次,就可以使用.once来进行触发。
4:按键修饰符
结果:在搜索框中搜入东西时,每当按键抬起时,就会触发,为防止这样,我们使用按键修饰符.enter来进行改进,当按回车才会触发。
5:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vueApp</title>
<style>
.out{width: 200px;height: 200px;background: red;}
.box{width: 100px;height: 100px;background: yellow;}
</style>
</head>
<body>
<div id="app">
<div class="out" @click="clickOut">
<!-- 阻止事件冒泡 -->
<div class="box" @click.stop="clickBox"></div>
</div>
<form action="https://baidu.com">
<!-- 提交事件不再重载页面 -->
<input type="submit" @click.prevent="formBtn" >
</form>
<a href="http://jd.com" @click.prevent="linkBtn">京东购物</a>
<!-- 点击事件将只会触发一次 -->
<button @click.once="btnClick">按钮</button>
<!-- 按键修饰符 -->
<input type="text" @keyup.enter="keyFun">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
},
methods: {
clickOut(){
console.log("点击了out")
},
clickBox(){
console.log("点击了box")
},
formBtn(){
console.log("formBtn")
},
linkBtn(){
console.log("linkBtn")
},
btnClick(){
console.log("btnClick")
},
keyFun(){
console.log("keyFun")
}
}
});
</script>
</body>
</html>
【二】v-bind动态参数
v-bind指令用于设置HTML属性:v-bind:title 缩写为 :title
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vueApp</title>
</head>
<body>
<div id="app">
<!-- <h1>{{name}}</h1> -->
<!-- <h1 v-text="name"></h1> -->
<!-- <h3 title="欢迎你来到我这里" v-bind:title="tit">我在我在你心里</h3> -->
<!-- <h4 :title="tit">vue</h4> -->
<!-- <img :src="picurl[1]"> -->
<!-- 利用for循环和v-bind进行的遍历 -->
<img v-for="v in picurl" :src="v" >
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
name:"vue开发",
tit:"我的心里有你",
picurl:["images/pic2.webp","images/pic1.webp"]
},
methods: {
}
});
</script>
</body>
</html>
喜欢的可以点个赞呦!