【Vue】各v-指令用法

v-html、v-text、v-show、v-if、v-for、v-on、v-bind、v-model、v-once、v-cloak、v-pre、v-slot 等指令的使用

一颗不甘坠落的流星

2456人浏览 · 2022-07-21 16:47:21

一颗不甘坠落的流星 · 2022-07-21 16:47:21 发布

文章目录

一、更新元素

1.1、v-html

更新元素的 innerHTML。
注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 不执行 html 标签解析 -->
			{{myhtml}}
			<!-- 解析html指令 -->
			<div v-html="myhtml">在 v-html 里面设置内容无效</div>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el: "#app",
				data: {
					myhtml: '<em>1111111</em>'
				},
			})
		</script>
	</body>
</html>

结果：

1.2、v-text

更新元素的 textContent。如果要更新部分的 textContent，需要使用 {{ Mustache }} 插值。
语法：

<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 更新整个内容 -->
			<span v-text="msg">在 v-text 里面设置内容无效</span>
			<br />
			<!-- 更新部分内容 -->
			<span>我是：{{msg}}</span>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el: "#app",
				data: {
					msg: "textContent"
				},
			})
		</script>
	</body>
</html>

结果：

二、渲染元素

2.1、v-show

根据表达式之真假值，设置元素的 CSS 中的 display: none 属性。
来实现控制元素的显隐，只会编译一次
如果要频繁切换某节点，使用v-show(切换开销比较小，初始开销较大)。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<p v-if="isShow">v-if控制显隐</p>
			<p v-show="isShow">v-show控制显隐</p>
			<button @click="handleClick">切换</button>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el: "#app",
				data: {
					isShow: true
				},
				methods: {
					handleClick() {
						this.isShow = !this.isShow
					}
				}
			})
		</script>
	</body>
</html>

未点击之前：
点击切换之后：

2.2、v-if、v-else、v-else-if

根据表达式的真假值来有条件地渲染元素。
相应组件的渲染是销毁-重建的过程，而不是设置CSS样式display:none控制的
v-if 是动态的向 DOM 树内添加或者删除 DOM 元素，若初始值为 false，就不会编译了。
而且v-if不停的销毁和创建比较消耗性能，如果不需要频繁切换某节点使用v-if（初始渲染开销较小，切换开销比较大）。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>   
	    <div id="app">
			<!-- value 小于 0 时展示 -->
			<span v-if="value < 0">value 小于 0</span>
			<!-- value 等于 0 时展示 -->
			<span v-else-if="value === 0">value 等于 0</span>
			<!-- value 大于 0 时展示 -->
			<span v-else>value 大于 0</span>
			<button @click="handleClick">切换</button>
	    </div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
		    var app = new Vue({
		        el:"#app",
		        data:{
					value:-1
		        },
				methods:{
					handleClick(){
						// 实现 3 个 span 标签来回切换
						this.value > 0 ?this.value = -1:++this.value
					}
				}
		    })
		</script>
	</body>
</html>

2.3、v-for

基于源数据多次渲染元素或模板块。
此指令之值，必须使用特定语法 alias in expression
语法：

<div v-for="item in items"></div>
<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, name, index) in object"></div>

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>   
	    <div id="app">
			<ul>
				<!-- item：值 -->
				<li v-for="item in dataArray">item = {{item}}</li>
				<!-- item：值 ，index ：索引-->
				<li v-for="(item,index) in dataArray">item = {{item}}、index = {{index}}</li>
				<!-- val：属性值 ，key ：属性名-->
				<li v-for="(val, key) in dataObject">val = {{val}}、key = {{key}}</li>
				<!-- val：属性值 ，name ：属性名，index ：索引-->
				<li v-for="(val, name, index) in dataObject">val = {{val}}、name = {{name}}、index = {{index}}</li>
			</ul>
	    </div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
		    var app = new Vue({
		        el:"#app",
		        data:{
					dataArray:['aa','bb','cc'],
					dataObject:{name: "jj",age: 18}	
		        }
		    })
		</script>
	</body>
</html>

结果：

三、绑定元素

3.1、方法绑定 v-on 或 `@`

绑定事件监听器，事件类型由参数指定，v-on简写就是@。
表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。
修饰符有：

.stop  		// 调用 event.stopPropagation()。
.prevent 	// 调用 event.preventDefault()。
.capture 	// 添加事件侦听器时使用 capture 模式。
.self 		// 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias}	 //只当事件是从特定键触发时才触发回调。
.native 	// 监听组件根元素的原生事件。
.once 		// 只触发一次回调。
.left 		// 只当点击鼠标左键时触发。
.right 		// 只当点击鼠标右键时触发。
.middle 	// 只当点击鼠标中键时触发。
.passive 	// 模式添加侦听器

示例：

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>

<!-- 动态事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button>

<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

<!-- 动态事件缩写 (2.6.0+) -->
<button @[event]="doThis"></button>

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>

<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>

<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">

<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">

<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>

<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			v-on用来绑定事件：
			<button v-on:click="num++">++</button>{{num}}<br>
			v-on 可以简写成@：
			<button @click="num--">--</button>{{num}}<br>
			vue的属性表达式中不可以直接写业务逻辑<br>
			<button v-on:click="alert(666)">Vue-alert-报错</button>
			<button onclick="alert(777)">js-alert-正确</button><br>
			事件绑定，调用函数<br>
			<button v-on:click="show1">调用无参函数</button>
			<button v-on:click="show2(5,10)">调用传参函数</button>
			<button v-on:click="show3(5,10,$event)">调用传$event函数</button><br>
			可以使用 $event提供的属性 接收 文本框的内容，$event是一个事件对象，里面有很多属性可以操作<br>
			<input type="text" value="" v-on:input="show4($event)" />{{mytext}}<br>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el: "#app",
				data: {
					num: 0,
					mytext: ''
				},
				// 所有的自定义函数都写在这里
				methods: {
					show1(ev) { // 接收一个未定义的参数相当于：$event
						console.log("无参函数被调用了，接收一个未定义的参数时：");
						console.log(ev);
					},
					show2(a, b) {
						console.log('传普通参的函数被调用了：' + (a + b));
					},
					show3(a, b, ev) {
						console.log('传$event参数的函数被调用了：');
						console.log(ev);
					},
					show4(ev) {
						console.log(ev.target.value);
						this.mytext = ev.target.value;
					}
				}
			})
		</script>
	</body>
</html>

运行结果：

3.2、属性绑定 v-bind 或 `:`

v-bind 的缩写为 :
动态地绑定一个或多个属性，或一个组件 prop 到表达式。
例如：动态切换背景色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.red {
			background-color: red;
		}

		.green {
			background-color: green;
		}
	</style>
	<body>
		<div id="app">
			<p class="red">设置背景色</p>
			<!-- 点击切换后不生效 -->
			<p class="isActive ? 'red':'green'">动态切换背景色</p>
			<!-- 生效 -->
			<p v-bind:class="isActive ? 'red':'green'"> v-bind 动态切换背景色</p>
			<!-- 简写也是生效的 -->
			<p :class="isActive ? 'red':'green'"> : 动态切换背景色</p>
			<button @click="handleClick">切换</button>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el: "#app",
				data: {
					isActive: true
				},
				methods: {
					handleClick() {
						this.isActive = !this.isActive
					}
				}
			})
		</script>
	</body>
</html>

运行结果：
例如：对象形式写法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.red {
			background-color: red;
		}

		.green {
			background-color: green;
		}

		.blue {
			background-color: blue;
		}

		.yellow {
			background-color: yellow;
		}
	</style>
	<body>
		<div id="app">
			<p :class="classObj">class对象写法</p>
			<p :class="classArr">class数组写法</p>
			<hr>
			<p :style="styleObj">style对象写法</p>
			<p :style="styleArr">style数组写法</p>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el: "#app",
				data: {
					classObj: {
						red: true,
						green: true,
						blue: true
					},
					styleObj: {
						backgroundColor: 'red',
					},
					classArr: ['red', 'green', 'blue'],
					styleArr: [{
						backgroundColor: 'red'
					}, ]
				},
				mounted() {
					this.classArr.push('yj') // 向数组中追加属性
					this.styleArr.push({
						fontSize: '20px'
					}) // 向数组中追加属性
				}
			})

			Vue.set(app.classObj, 'yellow', true) // 向对象中追加属性
			Vue.set(app.styleObj, 'fontSize', '40px') // 向对象中追加属性
		</script>
	</body>
</html>

运行结果

3.3、双向绑定 v-model

在表单控件或者组件上创建双向绑定
只能作用于： <input>或<select> 或<textarea>或组件
修饰符有：
- .lazy ：取代 input 监听 change 事件
- .number ：输入字符串转为有效的数字
- .trim ：输入首尾空格过滤
例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h1>注册表单</h1>
			<!--v-model 双向绑定的指令-->
			<div>用户名：
				<input type="text" value="" name="username" v-model="username" />{{username}}
			</div>
			<div>密码：
				<input type="password" value="" name="pwd" v-model="pwd" />{{pwd}}
			</div>
			<div>
				性别：
				<input type="radio" value="1" name="sex" v-model="sex" />男
				<input type="radio" value="0" name="sex" v-model="sex" />女
				{{sex}}
			</div>
			<div>
				爱好：
				<input type="checkbox" name="hobby" value="篮球" v-model="hobby" />篮球
				<input type="checkbox" name="hobby" value="足球" v-model="hobby" />足球
				<input type="checkbox" name="hobby" value="乒乓" v-model="hobby" />乒乓
				{{hobby}}
			</div>
			<div>
				阶段：
				<select v-model="lesson" name="lesson">
					<option value="1">1阶段</option>
					<option value="2">2阶段</option>
					<option value="3">3阶段</option>
				</select>
				{{lesson}}
			</div>
			<div>
				来自哪个城市：
				<!-- 使用循环来完成option -->
				<select v-model="city" name="city">
					<option value="" disabled>未选中</option>
					<option v-for="i in cityList" :value="i.id">{{i.name}}</option>
				</select>
				{{city}}
			</div>
			<div>
				<!-- 如果 checkbox只需要一项，不需要使用 数组 -->
				<input type="checkbox" v-model="flag" name="flag" /> 已阅读***，并同意！{{flag}}
			</div>
			<div>
				<!-- 绑定点击事件 
	            绑定函数时，如果没有参数，不需要写小括号
	            -->
				<button v-on:click="mySubmit">注册</button>
			</div>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el: "#app",
				data: {
					username: "",
					pwd: "",
					sex: "",
					hobby: [],
					lesson: 3,
					cityList: [{
							"id": 1,
							"name": "深圳"
						},
						{
							"id": 2,
							"name": "北京"
						},
						{
							"id": 3,
							"name": "上海"
						}

					],
					city: "",
					flag: false

				},
				// vue所有的自定义函数都放在这里
				methods: {
					mySubmit: function() {
						console.log("注册已完成");
						console.log({
							"username": this.username,
							"hobby": this.hobby
						});
					}
				}
			})
		</script>
	</body>
</html>

运行结果：

四、其他指令

4.1、v-once

只渲染元素和组件一次

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			{{msg}}
			<hr>
			<!-- v-once 使 双大括号里面的内容只渲染一次 -->
			<div v-once>{{num}}</div>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el: "#app",
				data: {
					"msg": "hello",
					"num": 10
				},
				mounted() {
					setTimeout(() => {
						this.msg = 'wold';
						this.num = 12;
					}, 2000)
				}
			})
		</script>
	</body>
</html>

运行结果：

在这里插入图片描述

4.2、v-cloak

使用 vue 开发时，在 vue 初始化之前，由于 div 是不归 vue 管的，所以我们写的代码在还没有解析的情况下会容易出现花屏现象，看到类似于 {{message}} 的字样，虽然一般情况下这个时间很短暂，但是我们还是有必要让解决这个问题的

解决了当数据未解析时，双大括号闪现的缺点
例如：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		[v-cloak] {
			display: none;
		}
	</style>
	<body>
		<div id="app">
			<!--没加 v-cloak 会先显示：{{msg}}，再显示：注意看我是否闪动了-->
			<div>{{msg}}</div>
			<hr>
			<!--加了 v-cloak 直接显示：注意看我是否闪动了-->
			<div v-cloak>{{msg}}</div>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el: "#app",
				data: {
					msg: '注意看我是否闪动了'
				},

			})
		</script>
	</body>
</html>

由于要网速慢才能体会到，所以教大家一招限制网速的方法

打开要测试的页面，右键点击检查
点击Network
点击No throttling，选择Slow 3G（Fash 3G表示快速的3G网络，Slow 3G表示慢速的3G网络）

1. 右键点击刷新页面的图标
1. 然后在选择硬性重新加载就能看到效果了

4.3、v-pre

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<p >{{ msg }}</p>
			<p v-pre>{{ msg }}</p>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el: "#app",
				data: {
					msg: '一段要被编译的文本'
				},
			})
		</script>
	</body>
</html>

结果：

4.4、v-slot 或 `#`

缩写：#
提供具名插槽或需要接收 prop 的插槽。

<!-- 具名插槽 -->
<base-layout>
  <template v-slot:header>
    Header content
  </template>

  Default slot content

  <template v-slot:footer>
    Footer content
  </template>
</base-layout>

<!-- 接收 prop 的具名插槽 -->
<infinite-scroll>
  <template v-slot:item="slotProps">
    <div class="item">
      {{ slotProps.item.text }}
    </div>
  </template>
</infinite-scroll>

<!-- 接收 prop 的默认插槽，使用了解构 -->
<mouse-position v-slot="{ x, y }">
  Mouse position: {{ x }}, {{ y }}
</mouse-position>

View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

vue+element ui实现好看的登录界面

ViewDesign

vue3.0中使用elementUi(element-plus的使用)

element-plus的使用小朋友，你是不是有很多问号❓❓❓甲：为什么在vue3.0中不能使用Element UI了？乙：由于vue3.0在插件install函数的入参从Vue原型（类）改成了app（vue实例），导致element-ui中Vue.prototype.* 这样的代码已经全都失效了。所以element-ui铁定是不兼容了。甲：那有什么方法能解决吗？乙：使用Element UI的升级

ViewDesign

ElementUI 整体页面布局

一、概述一般后台页面的顶部导航栏和左侧导航栏一般是固定的，我们可以布局成下面的样式二、整体项目布局因为我们的首页是个公共的组件，点击首页，会员管理，都不会变，所以我们可以放在一个单独文件夹里面。需要分别对头部，左侧区域，主区域拆分成不同的文件。创建项目创建一个全新的ElementUI 项目，请参考链接：https://www.cnblogs.com/xiao987334176/p...