当前位置： 首页 > 编程技术 > web前端开发 » web教程一文聊聊vue中的指令和插值

web教程一文聊聊vue中的指令和插值

 所属分类：web前端开发

 浏览：170次-  评论： 0次-  更新时间：2022-11-25
描述：更多教程资料进入web教程获得。 前端（vue）入门到精通课程，老师在线辅导：联系老师Apipost = Postman + Swagger + Mock + Jmeter...
更多教程资料进入web教程获得。

前端（vue）入门到精通课程，老师在线辅导：联系老师
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具：点击使用

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。（学习视频分享：vue视频教程）

一、安装vue

直接使用script标签引入

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
登录后复制

二、Vue模板案例

步骤

1、引入vue框架
2、定义1个盒子（根节点）
3、定义1个script标签

3.1、定义js对象（根组件）
3.2、通过vue创建1个应用
3.3、将应用挂载到根节点（第二步中创建的盒子）

data()：存放页面中显示数据的地方

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--1、引入vue框架-->
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

	</head>
	<body>
		<!--2、定义1个盒子（根节点）-->
		<div id='app'>
			<h1>{{title}}</h1>
			<h1>{{name}}</h1>
		</div>
		
		<!--3、定义一个script标签-->
		<script>
			//3.1、定义js对象(根组件)
			const obj={
				//data():存放页面中存放数据的地方
				data(){
					return{
						title:'kobe',
						name:'cc'
					}
				}
			}
		
			//3.2、通过vue创建1个应用
			const app=Vue.createApp(obj)
			
			//3.3、将应用挂载到根节点（第二步中创建的盒子）
			app.mount('#app')
			
		</script>
		
	</body>
</html>
登录后复制

三、基础模板（记住）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--1、引入vue框架-->
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		
		<div id='app'></div>
		
		<script>
			
			Vue.createApp({
				data(){
					return{
						
					}
				}
			}).mount('#app')
			
		</script>
		
	</body>
</html>
登录后复制

四、vue的指令和插值

1、{{}}：插值表达式的语法

{{}}：可以在html中引用data中定义的数据
<h1>{{name}}</h1>

2、v-text：填充纯文本内容（data中的值）

效果和innerText一样
<h1 v-text='name'></h1>

3、v-html：填充html（data中的值）

效果和innerHtml一样
<div v-html='desc'></div>

4、v-pre：填充原始数据

防止vue对标签进行渲染（标签中写的什么，就显示什么）
<div v-pre>显示两个花括号，中间为js：{{}}</div>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--1、引入vue框架-->
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		
		<div id='app'>
			<h1>{{name}}</h1>
			<h1>{{age}}</h1>
			<h1>{{sex}}</h1>
			<h2>info中的a1:{info.a1}</h2>
			<h2>info中的a2:{info.a2}</h2>
			<hr>
			<h1 v-text='name'></h1>
			<h1 v-text='arr[0]'></h1>
			<div v-html='desc'></div>
			<div v-pre>显示两个花括号，中间为js：{{}}</div>
		</div>
		
		<script>
			//obj是vue的组件对象
			const obj={
				//data方法（返回的是vue组件对象的属性）——》页面上要显示的数据全部放到这里
				data(){
					return{
						name:'2022',
						age:18,
						sex:'男',
						info:{
							a1:'66',
							a2:'88'
						},
						desc:'<h1>js</h1>',
						arr:[8,24,23,24,25,66]
					}
				}
			}
			
			//3.2、通过vue创建1个应用
			const app=Vue.createApp(obj)
			
			//3.3、将应用挂载到根节点（第二步中创建的盒子）
			app.mount('#app')
			
	
		</script>
		
	</body>
</html>
登录后复制

效果展示：

在这里插入图片描述

5、v-bind：属性绑定

语法：
v-bind:属性=‘值’
简写 :属性=‘值’

<a v-bind:href="aInfo.addr">{{aInfo.title}}</a>
简写
<a :href="aInfo.addr">{{aInfo.title}}</a>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--1、引入vue框架-->
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		
		<div id='app'>
			<a v-bind:href="aInfo.addr">{{aInfo.title}}</a>
			<!--简写-->
			<a :href="aInfo.addr">{{aInfo.title}}</a>
		</div>
		
		<script>
			
			Vue.createApp({
				data(){
					return{
						aInfo:{
							title:'百度',
							addr:'http://www.baidu.com'
						}
					}
				}
			}).mount('#app')
			
	
		</script>
		
	</body>
</html>
登录后复制

样式绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--1、引入vue框架-->
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	
		<style>
			.js{
				width:200px;
				height:200px;
				background: red;
			}
		</style>
	</head>
	<body>
		
		<div id='app'>
			<!--样式绑定：class属性绑定-->
			<div :class='{js:isjs}'>js</div>
		</div>
		<hr />
			<!--样式绑定 style属性-->
		<div :style="s1">py</div>

		<script>
			
			Vue.createApp({
				data(){
					return{
						isjs:false,
						s1:{
							width:'300px',
							height:'200px',
							background:'red',
						}
						
					}
				}
			}).mount('#app')
			
	
		</script>
		
	</body>
</html>
登录后复制

6、v-on：事件绑定

语法：v-on：事件名称=‘执行的方法’
简写
@事件名=‘执行的方法’

<button v-on:click='switchShow'>切换显示</button>
简写
<button @click='switchShow'>切换显示</button>

7、v-show：控制元素显示和隐藏的指令

控制元素显示隐藏的指令：
v-show 值为True则显示，值为false为隐藏

<div v-show='status' :style="{width:'200px',height:'200px',background:'red'}">py</div>

methods：定义页面操作过程中调用的函数（vue组件的方法）
注意点：不要直接把方法定义为箭头函数

例如

switchShow()
定义页面操作过程中调用的函数（vue组件的方法）
注意点：不要直接把方法定义为箭头函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--1、引入vue框架-->
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		
		<div id='app'>
			
			<button v-on:click='switchShow'>切换显示</button>
			<!--<button @click='switchShow'>切换显示</button>-->
			<!--控制元素显示隐藏的指令：v-show
				值为True则显示，值为false为隐藏
			-->
			<div v-show='status' :style="{width:'200px',height:'200px',background:'red'}">py</div>
		
		</div>
		
		<script>
			
			Vue.createApp({
				//定义页面上显示数据的（组件的属性）
				data(){
					return{
						status:true
					}
				},
				//定义页面操作过程中调用的函数（vue组件的方法）
				//注意点：不要直接把方法定义为箭头函数
				methods:{
					switchShow(){
						//在方法中可以通过this获取组件中的数据
						//方法中的this代表组件中的对象
						this.status=!this.status
						
					}
				}
				
			}).mount('#app')
			
	
		</script>
		
	</body>
</html>
登录后复制

8、v-model：数据的双向绑定

双向绑定只用于表单和组件
页面修改数据会变，数据改变，页面也会改

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--1、引入vue框架-->
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>	
		<!--属性绑定是单向的-->
		<!--<div id='app'>
			<div>账号:<input type="text" :value='user'></div>
			<div>密码:<input type="password" :value='pwd'></div>
		</div>-->
		
		<!--双向绑定-->
		<div id='app'>
			<div>账号:<input type="text" v-model='user'></div>
			<div>密码:<input type="password" v-model='pwd'></div>
			<button @click='login'>登录</button>
		</div>
		
		<script>
			
			Vue.createApp({
				data(){
					return{
						user:"root",
						pwd:123456
					}
				},
				methods:{
					login(){
						//发送请求到后端，
						console.log('提交了登录')
						console.log(this.user,this.pwd)
					}
				}
			}).mount('#app')
			
	
		</script>
		
	</body>
</html>
登录后复制

9、v-if、v-else-if、v-else：条件渲染

通过条件来控制元素是否渲染到页面

v-if
v-else-if
v-else

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--1、引入vue框架-->
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>

		<div id='app'>
			<h1 v-if='item.result==="success"' style="color: green;">{{item}}</h1>
			<h1 v-else-if='item.result===fail' style="color: red;">{{item}}</h1>
			<h1 v-else>{{item}}</h1>
		</div>
		
		<script>
			
			Vue.createApp({
				data(){
					return{
						item:{
							case_id:1,
							title:'用例1',
							result:"success"
						},
					}
				}
			}).mount('#app')
			
	
		</script>
		
	</body>
</html>
登录后复制

10、v-for：遍历对象、数组

案例：根据不同的结果，展示不同文字颜色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--1、引入vue框架-->
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		
		<div id='app'>
			<table border='1'>
				<!--表头-->
				<tr>
					<th>id</th>
					<th>title</th>
					<th>result</th>
					<th>操作</th>
				</tr>
				<!--表格-->
				<tr v-for='item in cases'>
					<td>{{item.id}}</td>
					<td>{{item.title}}</td>
					<!--条件渲染-->
					<td v-if='item.result==="success"' style="color: green;">{{item.result}}</td>
					<td v-else-if='item.result==="error"' style="color:blue;">{{item.result}}</td>
					<td v-else-if='item.result==="fail"' style="color:tomato;">{{item.result}}</td>
					<td v-else>{{item.result}}</td>
					<td></td>
				</tr>
				
				
			</table>
			
		</div>
		
		<script>
			
			Vue.createApp({
				data(){
					return{
						cases:[
							{
							case_id:1,
							title:'用例1',
							result:"success"
						},
						{
							case_id:2,
							title:'用例2',
							result:"fail"
						},
						{
							case_id:3,
							title:'用例3',
							result:"error"
						},
						{
							case_id:4,
							title:'用例4',
							result:"success"
						},
						
						]
					}
				}
			}).mount('#app')
			
	
		</script>
		
	</body>
</html>
登录后复制

在这里插入图片描述

（学习视频分享：web前端开发、编程基础视频）

以上就是一文聊聊vue中的指令和插值的详细内容，更多请关注zzsucai.com其它相关文章！

 标签： Vue,vue.js,vue3,
收藏
积分说明：注册即送10金币，每日签到可获得更多金币，成为VIP会员可免金币下载！ 充值积分充值会员更多说明»

讨论这个素材（0）回答他人问题或分享使用心得奖励金币

〒_〒 居然一个评论都没有……

表情  文明上网，理性发言！
热门推荐 / HOT
    最新发布 / NEW
    点击排行 / RANK
    标签推荐 / TAG更多
    关于我们联系我们广告服务免责声明网站地图获取积分
    Copyright 2016-2024 © 站长素材网（zzsucai.com）工作时间:周一至周日早8:00-23:00 - Email:8877360@qq.com - 客服QQ:8877360 - 桂ICP备2022004755号-1
    本站资源均来自互联网或会员发布，如果侵犯了您的权益请与我们联系，我们将在24小时内删除！谢谢！