文章/答案/技术大牛

发布

社区首页 >专栏 >Vue常用内置指令

Vue常用内置指令

别团等shy哥发育

发布于 2023-02-25 08:02:59

5190

文章被收录于专栏：全栈开发那些事全栈开发那些事

Vue内置指令

1、v-show

v-show指令根据表达式的真假，显示或隐藏HTML元素。使用v-show指令，元素本身是要被渲染的，至于是否显示是通过设置CSS样式属性display来控制的，如果表达式的值为false,则设置样式:"display:none"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <title>v-show指令</title>
</head>
<body>
    <div id="app">
        <h1 v-show="yes">Yes!</h1>
        <h1 v-show="no">NO!</h1>
        <h1 v-show="age >= 25">Age: {{ age }}</h1>
        <h1 v-show="name.indexOf('Smith') >= 0">Name: {{ name }}</h1>
    </div>

    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const vm = Vue.createApp({
            data() {
                return {
                    yes: true,
                    no: false,
                    age: 28,
                    name: 'Will Smith'
                }
            }
        }).mount('#app');
    </script>
</body>
</html>

渲染结果如下：

2、v-if

v-if指令根据表达式值得真假来生成或删除一个元素。 v-if指令在HTML元素是否显示的实现机制上与v-show不同，当表达式值为false时，v-if指令不会创建该元素，只有当表达式的值为true时，v-if才会真正创建该元素；而v-show指令不管表达式的值是真是假，元素本身都是会被创建的，显示与否是通过CSS的样式属性display控制的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <title>v-if指令</title>
</head>
<body>
    <div id="app">
        <h1 v-if="yes">Yes!</h1>
        <h1 v-if="no">NO!</h1>
        <h1 v-if="age >= 25">Age: {{ age }}</h1>
        <h1 v-if="name.indexOf('Smith') >= 0">Name: {{ name }}</h1>
    </div>

    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const vm = Vue.createApp({
            data() {
                return {
                    yes: true,
                    no: false,
                    age: 28,
                    name: 'Will Smith'
                }
            }
        }).mount('#app');
    </script>
</body>
</html>

如果v-if需要控制多个元素的创建与删除，可以用<template>元素包裹这些元素，然后在<template>元素上使用v-if指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <template v-if="!isLogin">
            <form>
                <p>username:<input type="text"></p>
                <p>password:<input type="password"></p>
            </form>
        </template>
    </div>

    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const vm=Vue.createApp({
            data(){
                return{
                    isLogin:false
                }
            }
        }).mount('#app');
    </script>
</body>
</html>

3、v-else-if/v-else

v-else-if指令与v-if指令一起使用，可以实现互斥的条件判断。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <span v-if="score>=85">优秀</span>
        <span v-else-if="score>=75">良好</span>
        <span v-else-if="score>=60">及格</span>
        <span v-else>不及格</span>
    </div>

    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const vm=Vue.createApp({
            data(){
                return{
                    score:90
                }
            }
        }).mount('#app');
    </script>
</body>
</html>

4、v-for

v-for指令就是通过循环的方式渲染一个列表，循环的对象可以是数组，也可以是一个javascript对象。 v-for指令的表达式还支持一个可选的参数作为当前项的索引。

4.1 v-for遍历数据

表达式的语法形式为item in items。其中，items是源数据数据；item是被迭代数据元素的别名。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="(book,index) in books">{{index}} - {{book.title}}</li>
			</ul>
		</div>
	
		<script src="https://unpkg.com/vue@next"></script>
		<script>
			const vm = Vue.createApp({
				data() {
				    return {
				        books: [
    						{title: 'Java无难事'},
    						{title: 'VC++深入详解'},
    						{title: 'Servlet/JSP深入详解'}
    					]
				    }
				}
			}).mount('#app');
		</script>
	</body>
</html>

4.2 v-for遍历对象

遍历对象的语法形式和遍历数组是一样的，即value in Object。Object是被迭代的对象，value是被迭代的对象属性的别名

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <ul>
                <li v-for="(value, key, index) in book">{{index}}. {{key}} : {{value}}</li>
            </ul>
        </div>
    
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const vm = Vue.createApp({
            data() {
                return {
                    book: {
                        title: 'VC++深入详解',
                        author: '孙鑫',
                        isbn: '9787121362217'
                    }
                }
            }
        }).mount('#app');
    </script>
  </body>
</html>

5、 v-bind

v-bind指令主要用于响应更新HTML元素的属性，将一个或多个属性或一个组件的prop动态绑定到表达式。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <!-- 绑定一个属性 -->
            <img v-bind:src="imgSrc">
            
            <!-- 简写语法 -->
            <img :src="imgSrc">
            
            <!-- 动态属性名 -->
            <a v-bind:[attrname]="url">链接</a>
            
            <!-- 内联字符串拼接 -->
            <img :src="'images/' + fileName">
            
            <!-- 绑定一个有属性的对象 -->
			<form v-bind="formObj">
				<input type="text">
			</form>
        </div>
    
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const vm = Vue.createApp({
            data() {
                return {
                    attrname: 'href',
                    url: 'http://www.sina.com.cn/',
                    imgSrc: 'images/bg.jpg',
                    fileName: 'bg.jpg',
                    formObj: {
						method: 'get',
						action: '#'
					}
                }
            }
        }).mount('#app');
    </script>
  </body>
</html>

6、v-model

v-model指令用来在表单<input><textarea>和<select>元素上创建双向数据绑定，它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model的本质不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行特殊处理。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="message">
        </div>
    
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const vm = Vue.createApp({
            data() {
                return {
                    message: 'Hello World'    
                }
            }
        }).mount('#app');
    </script>
  </body>
</html>

然后我们在控制台改变message的值，观察文本框中的数据是否也发生变化

可以看到控件中的内容发生了变化，message的值也发生了变化

7、v-on

v-on指令用于监听DOM事件，并在触发时运行一些JavaScript代码。v-on指令的表达式可以是一段JavaScript代码，也可以是一个方法的名字或方法调用语句。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <p>
                <!--① click事件直接使用JavaScript语句-->
                <button v-on:click="count += 1">Add 1</button>
                <span>count: {{count}}</span>
            </p>
            <p>
                <!--② click事件直接绑定一个方法-->
                <button v-on:click="greet">Greet</button>
                <!--简写语法-->
                <button @click="greet">Greet</button>
            </p>
            <p>
                <!--③ click事件使用内联语句调用方法-->
                <button v-on:click="say('Hi')">Hi</button>
            </p>
        </div>
    
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const vm = Vue.createApp({
            data() {
                return {
                    count: 0,
                    message: 'Hello, Vue.js!'
                }
            },
            //在选项对象的methods属性对象中定义方法
            methods: {
                greet: function() {
                    //方法的this值始终指向组件实例
                    alert(this.message)
                },
                //对象方法的简写语法
                say(msg) {
                    alert(msg)
                }
            }
        }).mount('#app');
    </script>
  </body>
</html>

点击add count+1 点击左侧Greet

8、v-text

v-text指令用于更新元素的文本内容(即元素的textContent属性)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<span v-text="message"></span>
		
			<!-- 等价于
			<span v-text>{{message}}</span>
			-->
		</div>
	
		<script src="https://unpkg.com/vue@next"></script>
		<script>
			const vm = Vue.createApp({
				data() {
				    return {
				        message: 'Hello Vue.js'    
				    }
				}
			}).mount('#app');
		</script>
	</body>
</html>

9、v-html

v-html指令用于更新元素的innerHTML，该部分内容作为普通的HTML代码插入，不会作为Vue模板编译。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<div v-html="hElt"></div>
		</div>
	
		<script src="https://unpkg.com/vue@next"></script>
		<script>
			const vm = Vue.createApp({
				data() {
				    return {
				        hElt: "<h1>《Java无难事》</h1>"
				    }
				}
			}).mount('#app');
		</script>
	</body>
</html>

在网站上动态渲染任意的HTML都是非常危险的，很容易导致XSS攻击。切记，只在可信的内容上使用v-html,永远不要在用户提交的内容上使用该指令

10、v-once

v-once指令可以让元素或组件只渲染一次，该指令不需要表达式。之后再次渲染时，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			a {
				margin: 20px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h1>{{title}}</h1>
			<a v-for="nav in navs" :href="nav.url" v-once>{{nav.name}}</a>
		</div>
	
		<script src="https://unpkg.com/vue@next"></script>
		<script>
			const vm = Vue.createApp({
				data() {
				    return {
				        title: 'v-once指令的用法',
    					navs: [
    						{name: '首页', url: '/home'},
    						{name: '新闻', url: '/news'},
    						{name: '视频', url: '/video'},
    					]
				    }
				}
			}).mount('#app');
		</script>
	</body>
</html>

切换console窗口，输入vm.navs.push({name:'论坛',url:'/bbs'})

可以看到页面并没有任何变化，这就是v-once指令的作用，只渲染一次，渲染之后的结果将作为静态内容而存在。

11、v-pre

v-pre指令也不需要表达式，用于跳过这个元素及其所有子元素的编译。v-pre指令可以用来显示原始Mustache标签。对于大量没有指令的节点使用v-pre指令可以加快编译速度。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h1 v-pre>{{message}}</h1>
		</div>
	
		<script src="https://unpkg.com/vue@next"></script>
		<script>
			const vm = Vue.createApp({
				data() {
				    return {
				        message: 'Java无难事',    
				    }
				}
			}).mount('#app');
		</script>
	</body>
</html>

渲染结果：

12、v-cloak

v-cloak指令也不需要表达式，这个指令保留在元素上直到关联的组件实例编译结束，编译结束后该指令被移除。当和CSS规则如[v-clock]{display:none}一起使用时，这个指令可以隐藏未编译的Mustache标签直到组件实例准备完毕。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			[v-cloak] {
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h1 v-cloak>{{message}}</h1>
		</div>
	
		<script src="https://unpkg.com/vue@next"></script>
		<script>
			const vm = Vue.createApp({
				data() {
				    return {
				        message: 'Vue.js无难事'
				    }
				}
			}).mount('#app');
		</script>
	</body>
</html>