Vue中常用的指令
指令
vue提供了指令（directive）功能，这些指令都是以v-开头(例如：v-for )，它们从形式上来看是标签的自定义属性（只不过是由vue提供的）。
作用
指令必须用在某个标签（或者是组件）上， 用来扩展标签的原有功能。
vue指令v-bind
作用
v-bind用来动态绑定标签上的属性的值。（标签上的属性值不能使用插值表达式来设置）。
格式
<元素 v-bind:属性名1="值1" v-bind:属性名2="值2"></元素>
// 简写, 省略v-bind
<元素 :属性名1="值1" :属性名2="值2"></元素>
一般在是在属性名的=里面写一个data中的数据项， :属性名="数据项" 称之为：把x绑定在y属性上。
示例
<template>
<h2>v-bind绑定属性值</h2>
<!-- 绑定属性
v-bind:src 可以简写成 :src
-->
<img v-bind:src="imgSrc" v-bind:id="id"/>
</template>
<script>
data () {
return {
imgSrc: "https://bkimg.cdn.bcebos.com/pic/4afbfbedab64034f29596c8ba6c379310b551da2"
}
}
</script>
vue指令-v-for
作用
列表渲染, 所在标签结构, 按照数据数量, 循环生成
语法
<标签 v-for="(值, 索引或者属性名) in 目标结构" :key="唯一值"></标签>
- 索引可以省略
- 目标结构可以是：数组 / 对象 / 数字
示例
<template>
<div>
<h1>v-for</h1>
<ul>
<!-- v-for: item为元素，idx是索引值，in 后面接数组/对象/数字 :key="唯一值" -->
<li v-for="(item, idx) in list" :key="idx"><a href="#">{{ item.title }}</a></li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
list: [{id: 1,title: "新闻1"}, {id: 2,title: "新闻2"}]
}
}
}
</script>
小结
- v-for的功能是对标签进行循环生成
- 快速把数据赋予到相同的dom结构上循环生成
vue指令v-text和v-html
作用
更新DOM对象的innerText/innerHTML
语法:
- v-text="vue数据变量"
- v-html="vue数据变量"
示例
<template>
<div>
<p v-text="str"></p>
<p v-html="str"></p>
</div>
</template>
<script>
export default {
data() {
return {
str: "<span>我是一个span标签</span>"
}
}
}
</script>
小结
-
v-text把值当成普通字符串显示, v-text ===> innerText
-
v-html把值当做html解析,v-html ===> innerHTML
vue指令v-show和v-if
作用
控制标签的可见与不可见
语法
- <标签 v-show="vue变量" />
- <标签 v-if="vue变量" />
如果vue变量的值为true，就可见，否则就不可见。
原理
- v-show 用的display:none隐藏 (频繁切换使用)
- v-if 直接从DOM树上添加或移除
示例
<template>
<div>
<h1>v-show, v-if</h1>
<!-- v-show 类似于display：值控制显示隐藏，但一定会创建元素， -->
<p v-show="isOk">v-show</p>
<!-- v-if 根据值判断是否创建元素，true：创建，false：不创建，页面也看不到 -->
<p v-if="isOk"> v-if</p>
</div>
</template>
<script>
export default {
data() {
return {
isOk: false
}
}
}
</script>
小结
-
v-show 性能较好，对应需要频繁切换显示与隐藏的功能，可以使用v-show。
- 注意无论变量是否为true还是false,它一定会创建元素的。
-
v-if 会动态创建和删除元素。
- 在频繁的切换可见与不可见时，它的效率会低一点
- 如果变量的值为false,它将不会创建元素
特殊的适用v-if的场景：如果是登陆用户就显示头像 <img src="xxx" v-if="isLogin">
vue指令v-if,v-else-if,else
功能
模板中的选择结构
格式
与js中的if选择结构是一致的。
<标签 v-if="条件"> </标签>
<标签 v-else-if="条件"> </标签>
<标签 v-else-if="条件"> </标签>
<标签 v-else> </标签>
示例
<template>
<h2>学习v-if-elseif-else</h2>
<p v-if="num >= 80">优秀</p>
<p v-else-if="num >= 60">一般</p>
<p v-else>不及格</p>
</template>
<script>
export default {
data () {
return {
num: 59 // 分数
}
}
}
</script>
-on和methods
作用
给标签绑定事件
语法
- <标签 v-on:事件名="要执行的少量代码" >
- <标签 v-on:事件名="methods中的函数" >
- <标签 v-on:事件名="methods中的函数(实参)">
注意
- v-on可以简写成 @。 即
@事件名="methods中的函数" - 事件名可以是任意合法的dom事件
示例
<template>
<!-- vue指令: v-on事件绑定-->
<button v-on:click="msg=1">简单代码直接写</button>
<button v-on:click="add2">增加2个,调用函数</button>
<button v-on:click="addN(5)">一次加5件，调用函数传递参数</button>
<button @mouseenter="mouseFn">鼠标进入事件</button>
</template>
<script>
export default {
data(){
return {
msg: 'v-on'
}
},
methods: {
add2(){
console.log('add2')
},
addN(num){
console.log(num)
},
mouseFn(){
console.log('mouseFn')
}
}
}
</script>
