vue的常用指令和事件修饰符

一、常用指令
1.v-text
解释：更新元素的 textContent

<div id="app">
<h2 v-text="text"></h2>
</div>

<script>
let vm = new Vue({
el:'#app',
data:{text:"<span>html标签</span>"}
})
</script>

2.v-html
解释：更新元素的 innerHTML

<div id="app">
<h2 v-html="text"></h2>
</div>

<script>
let vm = new Vue({
el:'#app',
data:{text:"<span>html标签</span>"}
})
</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:"<span>html标签</span>"}
})

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>

1. 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>

二、事件修饰符
7. .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>

1. .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>

1. .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>

1. .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>

1. .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的点击事件")
2b4ea
}
}
})
</script>