vue中常见的指令

简单介绍一下常见的vue中用到的指令

v-on

指定当前的事件,语法糖为@,如例子所示,指定按钮的事件为addCounter,点击会使变量counter + 1

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- <script src="https://unpkg.com/vue@next"></script> -->
		<script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">		
			{{ counter }}
			<button @click="addCounter">+1</button>
		</div>
		<script>
			const App = {
				data() {
					return {
						counter: 0
					}
				},
				methods: {
					addCounter() {
						this.counter ++;
					}
				}
			};
			Vue.createApp(App).mount('#app');
		</script>
	</body>
</html>

v-html

会将输出的文本解析为html

v-text

会将变量解析为文本

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- <script src="https://unpkg.com/vue@next"></script> -->
		<script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">		
			<p v-text="msg"></p>
			<p v-html="msg"></p>
		</div>
		<script>
			const App = {
				data() {
					return {
						msg: '<b>1</b>'
					}
				}
			};
			Vue.createApp(App).mount('#app');
		</script>
	</body>
</html>

v-if v-show

都可以控制元素的显示,v-show 不管显示不显示,元素都会被加载,使用的css的display属性去控制元素,v-if如果不显示的话,元素会在编译的时候被去除.

<p v-html="msg" v-if="displayFlg">

v-for

用户循环变量的显示,以及列表数据的显示。

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- <script src="https://unpkg.com/vue@next"></script> -->
		<script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">		
			<p v-for="(val,index) in arrayText">{{index}} -- {{val}} </p>
		</div>
		<script>
			const App = {
				data() {
					return {
						arrayText: ['蛮子', '寒冰', '剑圣']
					}
				}
			};
			Vue.createApp(App).mount('#app');
		</script>
	</body>
</html>

v-bind

用于绑定元素的属性,如下图给img标签绑定了src属性

html 复制代码
		<div id="app">		
			<img v-bind:src="imgsrc"/>
		</div>
		<script>
			const App = {
				data() {
					return {
						imgsrc: 'img/1.jpg'
					}
				}
			};
			Vue.createApp(App).mount('#app');
		</script>

v-model

用于绑定表单元素的值,改变表单中的值,也会改变对应的属性值

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- <script src="https://unpkg.com/vue@next"></script> -->
		<script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<input  type="text" v-model="text"/>
			<p>{{text}}</p>
		</div>
		<script>
			const App = {
				data() {
					return {
						text: 'Hi好'
					}
				}
			};
			Vue.createApp(App).mount('#app');
		</script>
	</body>
</html>

v-pre

跳过元素的vue编辑

v-once

只加载一次,后续改变不在渲染

v-cloak

用于元素未完全加载时候,不显示。需要配合css来使用。

v-cloak\] { display: none; }

相关推荐
国家不保护废物11 分钟前
Vue组件通信全攻略:从父子传到事件总线,玩转组件数据流!
前端·vue.js
写不来代码的草莓熊1 小时前
vue前端面试题——记录一次面试当中遇到的题(9)
前端·javascript·vue.js
二十雨辰2 小时前
eduAi-智能体创意平台
前端·vue.js
郝学胜-神的一滴2 小时前
Three.js光照技术详解:为3D场景注入灵魂
开发语言·前端·javascript·3d·web3·webgl
m0dw2 小时前
vue懒加载
前端·javascript·vue.js·typescript
国家不保护废物2 小时前
手写 Vue Router,揭秘路由背后的魔法!🔮
前端·vue.js
小光学长3 小时前
基于Vue的保护动物信息管理系统r7zl6b88 (程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
麦麦大数据4 小时前
F029 vue游戏推荐大数据可视化系统vue+flask+mysql|steam游戏平台可视化
vue.js·游戏·信息可视化·flask·推荐算法·游戏推荐
cecyci4 小时前
如何实现AI聊天机器人的打字机效果?
前端·javascript
paopaokaka_luck5 小时前
基于SpringBoot+Vue的社区诊所管理系统(AI问答、webSocket实时聊天、Echarts图形化分析)
vue.js·人工智能·spring boot·后端·websocket