vue最常用的事件修饰符和指令(收藏)
一、事件修饰符
1 .stop 阻止自身的冒泡事件
<div id="app">
<!-- .stop 阻止自身的冒泡事件-->
<div @click="divClick">
<button @click.stop="btnClick">点击</button>
</div>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
},
methods:{
divClick :function () {
console.log("触发了div的点击事件")},
btnClick :function () {
console.log("触发了btn的点击事件")}
}
})
</script>
2 .prevent 阻止默认事件
<div id="app">
<!--.prevent 阻止默认事件-->
<a href="http://www.baidu.com" @click.prevent="linkClick">百度一下</a>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
},
methods:{
linkClick :function () {
console.log("触发了a的点击事件")}
}
})
</script>
3 .capture 添加事件侦听器时使用事件捕获模式 : 用捕获的模式来触发
<div id="app">
<!--.capture 添加事件侦听器时使用事件捕获模式 : 用捕获的模式来触发-->
<div @click.capture="divClick">
<button @click="btnClick">点击
<span @click="linkClick">里面的事件</span>
</button>
</div>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
},
methods:{
divClick :function () {
console.log("触发了div的点击事件")},
btnClick :function () {
console.log("触发了btn的点击事件")},
linkClick :function () {
console.log("触发了a的点击事件")}
}
})
</script>
4 .self : 阻止自己身上的冒泡行为
<div id="app">
<!--.self : 阻止自己身上的冒泡行为-->
<div @click.self="divClick">
<button @click="btnClick">点击
<span @click="linkClick">里面的事件</span>
</button>
</div>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
},
methods:{
divClick :function () {
console.log("触发了div的点击事件")},
btnClick :function () {
console.log("触发了btn的点击事件")},
linkClick :function () {
console.log("触发了a的点击事件")}
}
})
</script>
5 .once 事件只触发一次
<div id="app">
<!--.once 事件只触发一次-->
<a href="http://www.baidu.com" @click.prevent.once="linkClick">百度一下</a>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
},
methods:{
linkClick :function () {
console.log("触发了a的点击事件")}
}
})
</script>
二、常用指令
1.v-text
<div id="app">
<h2 v-text="text"></h2>
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
text:"html标签"}
})
</script>
2.v-html
<div id="app">
<h2 v-html="text"></h2>
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
text:"html标签"}
})
</script>
3.v-cloak
解释：
①这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
②防止刷新页面，网速慢的情况下出现{ { message }}等数据格式
<div id="app">
<h1 v-cloak>{
{
text}}</h1>
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
text:"html标签"}
})
4.v-if 和 v-show 条件渲染
v-if：根据表达式的值的真假条件，销毁或重建元素
v-show：根据表达式之真假值，切换元素的 display CSS 属性
<div id="app">
<h1 v-show="false">v-show的显示和隐藏</h1>
<h1 v-if="isIf">v-if的显示和隐藏</h1>
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
isIf:true,
msg:"请输入用户名"
}
})
</script>
5. v-model双向绑定数据
<input type="text" v-model="msg"/> {
{
msg}} <!--取数据-->
6.v-for循环
v-for语法 : item in arr
参数： arr: 要遍历的数组
item : 数组里的每一个元素
in: 特殊的语法
------------------------------------------------------------------
<div id="app">
<ul>
<li v-for="(item,i) in arr">
<span>{
{
i+1}}</span>
<span>{
{
item.name}}</span>
<span>{
{
item.age}}</span>
<span>{
{
item.sex}}</span>
</li>
</ul>
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
arr:[
{
name:'xiaoming', age :18, sex: "男"},
{
name:'xiaoming', age :18, sex: "男"},
{
name:'xiaoming', age :18, sex: "男"}
]
}
})
</script>
7.v-bind绑定属性
<div id="app">
<!--绑定属性-->
<img v-bind:src="imgSrc" alt="">
<!--简写-->
<img :src="imgSrc" alt="">
<!--class绑定 : 绑定的是字符串的类名-->
<h2 :class="'red'">class绑定</h2>
<h2 :class="['red', 'pink']">class绑定</h2>
<h2 :class="red">不写引号class绑定,去vm实例中找</h2>
<h2 :class="{red : flag, pink:true}">以对象的方式去写,通过布尔值判定,key是style里面的类名</h2>
<!--三元表达式: 当flag为true,就有red样式, 否则有pink样式-->
<h2 :class="[flag?red:pink]">三元表达式</h2>
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
imgSrc:'1.png',
red:'red',
flag:true
}
})
</script>
8.v-on添加事件
<div id="app">
<button v-on:click="num++">点击+1</button>
<h1>{
{
num}}</h1>
<!--简写 小括号没有参数, 可以省略-->
<button @click="fn('hello')">点我弹框</button>
<h1>{
{
fn()}}</h1>
<!--点击切换颜色-->
<button @click="change" :class="{red: flag}">点击切换颜色</button>
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
num:0,
flag: true
},
//在methods定义方法
methods:{
fn:function (sayHi) {
//console.log(sayHi)
return 11;
},
change: function () {
//此时的this是实例对象
console.log(this.flag)
this.flag = !this.flag;
}
}
})
</script>
9.v-class 类名
v-style 与v-class用法大致一样 这个我就不写了
<style>
.red {
background: red;
}
.blue {
width: 100px;
height: 100px;
background: blue;
}
</style>
<div id="box">
<div style="width: 100px;height: 100px;" v-bind:class='{red:isred}'></div>
<!--<div style="width: 100px;height: 100px;" v-bind:class='isred?"red":"blue"'></div>--> <!--三元运算符方式-->
<!--<div style="width: 100px;height: 100px;" v-bind:class='[{red:"isred"}]'></div>-->
</div>
<script>
new Vue({
el: "#box",
data(){
return {
isred:false
}
}
})
</script>
10.v-pre 把标签内部的元素原位输出
<div id="box">
<div v-pre>欢迎--{
{
msg}}</div>
</div>
<script>
new Vue({
el:"#box",
data(){
return{
msg:"111111"
}
}
})
</script>