对于Vue的指令,官网是这么解释的:指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM
文章目录
官网介绍
v-bind指令、v-on指令、v-model指令、v-for指令、v-text指令、v-html指令、v-pre指令、v-cloak指令、v-if指令、v-else-if指令、v-else指令、v-show指令、v-once指令、v-slot指令。
1、v-bind指令
v-bind可以接受一个参数,用于响应式更新HTML的属性的属性值,v-bind:可以缩写为:
<template>
<div id="app">
<a href='https://www.csdn.net/'>CSDN</a>
<br> <!-- 用做换行 -->
<a v-bind:href="url">v-bind</a>
<br> <!-- 用做换行 -->
<a :href="url">v-bind缩写</a><!--缩写-->
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
url: 'https://www.csdn.net/'
}
}
}
</script>
2、v-on指令
v-on可以用来绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句,如果没有修饰符也可以省略。用来绑定Vue中methods里的事件函数,v-on:可以缩写为@
<template>
<div id="app">
<button v-on:click="Click('第一次点击')">v-on点击事件</button>
<br><!--用作换行-->
<br><!--用作换行-->
<button @click="Click('第二次点击')">v-on 缩写@点击事件</button>
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
}
},
methods: {
Click (val) {
console.log('点击事件触发', val)
}
}
}
</script>
3、v-model指令
在表单控件或者组件上创建双向绑定,当数据变化视图同步更新,当视图更新数据也会同步更新。
原理是绑定value属性,监听input事件
<template>
<div id="app">
v-model:<input type="text" v-model="text">
<br>
v-model原理:<input type="text" :value="text" @input="inputChange">
<p>text的值是:{
{text}}</p>
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
text: '我是一个输入框'
}
},
methods: {
inputChange (e) {
this.text = e.target.value // 获取输入框内容,对数据text重新赋值
}
}
}
</script>
4、v-for指令
基于源数据多次渲染元素或模板块。可以用来遍历数组、对象、字符串
vue中使用v-for循环时,应该添加key主键,作为唯一标识,使用key目的是为了高效的更新虚拟DOM。原理是在更新过程中通过key,可以精准判断两个节点是否是同一个,避免频繁更新元素,减少DOM操作,提高性能(涉及Vue的Diff算法)
<template>
<div id="app">
<p v-for="i in str" :key="i">{
{i}}</p>
<hr>
<p v-for="(val,index) in arr" :key="index">{
{val}}</p>
<!--通常情况下不建议使用下标index作为key值,如果只是用来展示数据,可以考虑使用-->
<hr>
<p v-for="val,key in obj" :key="key"> <!--也可以使用对象中的每一项作为key值,毕竟每一个成员都不相同-->
<span>这一项的key值是{
{key}},他的value值是{
{val}}</span>
</p>
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
str: 'abcdefg',
arr: ['1', '2', '3', '4'],
obj: {
a: '一', b: '二', c: '三', d: '四' }
}
}
}
</script>
5、v-text指令
更新元素的 textContent。如果要更新部分的 textContent,需要使用 {
{ Mustache }} 插值。
相当于Js原生里面的innerText属性,但是无法解析标签,会被当做纯文本输出
<template>
<div id="app">
<p v-text="str"></p>
<p id="text"></p>
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
str: '<h1>我是一个p标签</h1>'
}
},
mounted () {
// Vue的生命周期钩子函数,从这开始可以获取到页面中的dom元素
const p = document.getElementById('text')
p.innerText = this.str
}
}
</script>
6、v-html指令
更新元素的 innerHTML。注意:内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。如果试图使用 v-html 组合模板,可以重新考虑是否通过使用组件来替代。
<template>
<div id="app">
<p v-html="str"></p>
<p id="text"></p>
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
str: '<h1 style=color:red;>我是一个p标签</h1>'
}
},
mounted () {
// Vue的生命周期钩子函数,从这开始可以获取到页面中的dom元素
const p = document.getElementById('text')
p.innerHTML = this.str
}
}
</script>
7、v-pre指令
跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
实际上就是标签里写的是什么就是什么,对内容没有影响
<span v-pre>{
{ this will not be compiled }}</span>
8、v-cloak指令
在使用{
{}}展示或更新页面数据时:当网速比较慢时,会出现一个不好的过度现象,会让用户先看到我们的表达式{
{变量名称}},然后才能看到具体的值,这样用户体验很不好。
v-cloak指令可以配合CSS的属性选择器 [v-cloak] { display: none },这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕再显示。
<template>
<div id="app">
<!-- <img :src="src" alt=""> -->
<div v-cloak>{
{message}}</div>
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
message: 'this is a book'
}
}
}
</script>
<style lang="scss">
[v-cloak]{
display: none !important;
}
</style>
9、v-if、v-else-if、v-else指令
v-if指令可以根据条件判断控制标签或组件的显示和隐藏
为true显示,为false隐藏,可以搭配v-else-if和v-else指令一起使用,相当于Js中的if语句
v-esle-if/v-else指令不能单独使用
v-if控制显示隐藏的原理就是将结果为false的标签从dom上直接移除
<template>
<div id="app">
<p v-if="number >= 95">优秀</p> <!--成绩位于95-100-->
<p v-else-if="number >=85">良好</p> <!--成绩位于85-94-->
<p v-else-if="number>=60">及格</p> <!--成绩位于60-84-->
<p v-else>不及格</p> <!--成绩位于0-59-->
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
number: parseInt(Math.random() * 101)
}
},
created () {
console.log('小明的分数是----->', this.number)
}
}
</script>
10、v-show指令
根据表达式之真假值,控制元素的显示和隐藏,与v-if相似
但是v-show的工作原理是通过切换元素的 display属性是否为none,从样式上达到显示隐藏的效果
并且v-show只能单独使用,不能v-else-if,v-else一起使用
<template>
<div id="app">
<p v-show="boolean">只有为真,我才会显示</p>
<button @click="change">切换</button>
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
boolean: true
}
},
methods: {
change () {
this.boolean = !this.boolean
// 点击的时候将boolean切换为相反值
}
}
}
</script>
11、v-once指令
只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
<template>
<div id="app">
<button v-once @click="add">+</button>
<p v-once>{
{num}}</p>
<button @click="reduce">-</button>
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
num: 1
}
},
methods: {
add () {
this.num++
console.log(this.num)
},
reduce () {
this.num--
console.log(this.num)
}
}
}
</script>
因为页面初始化的时候已经渲染过一次了,所以即便num在变化,但是页面也不会再去渲染而是跳过
12、v-slot指令
提供具名插槽或作用域插槽。可以缩写为#
可放置在函数参数位置的 JavaScript 表达式 (在支持的环境下可使用解构)。可选,即只需要在为插槽传入 prop 的时候使用。
当我们需要在父组件中展示子组件的数据时,需要在子组件内部通过插槽提前写好
父组件
<template>
<div class="home">
<HelloWorld></HelloWorld>
</div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'HomeView',
components: {
HelloWorld
}
}
</script>
子组件
<template>
<div>
<slot>{
{ sport.basketball }}</slot>
</div>
</template>
<script>
export default {
data () {
return {
sport: {
basketball: '篮球',
football: '足球',
tabletennis: '乒乓球'
}
}
},
}
</script>
此时页面中显示的是篮球
但是当我们想更换显示的内容的时候就需要用到v-slot作用域插槽的方式
父组件
<template>
<div class="home">
<HelloWorld>
<template v-slot:default="type">
{
{type.sport.tabletennis}} <!--通过v-slot获取子组件把暴露出来的数据,然后进行展示-->
</template>
</HelloWorld>
</div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'HomeView',
components: {
HelloWorld
}
}
</script>
子组件
<template>
<div>
<slot :sport="sport">{
{ sport.basketball }}</slot> <!--把sport对象暴露出去,使父组件可以通过作用域插槽获取-->
</div>
</template>
<script>
export default {
data () {
return {
sport: {
basketball: '篮球',
football: '足球',
tabletennis: '乒乓球'
}
}
}
}
</script>
此时父组件页面中显示的内容就可以按照需求来更换