vue的指令和插值总结

news2025/7/18 11:36:40

在这里插入图片描述

文章目录

  • 一、安装vue
  • 二、Vue模板案例
    • 步骤
  • 三、基础模板（记住）
  • 四、vue的指令和插值
    • 1、{{}}：插值表达式的语法
    • 2、v-text：填充纯文本内容（data中的值）
    • 3、v-html：填充html（data中的值）
    • 4、v-pre：填充原始数据
    • 效果展示：
    • 5、v-bind：属性绑定
    • 样式绑定
    • 6、v-on：事件绑定
    • 7、v-show：控制元素显示和隐藏的指令
    • 8、v-model：数据的双向绑定
    • 9、v-if、v-else-if、v-else：条件渲染
    • 10、v-for：遍历对象、数组

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，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>

在这里插入图片描述

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/406055.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

蓝桥杯刷题第九天

蓝桥杯刷题第九天

题目描述本题为填空题&#xff0c;只需要算出结果后&#xff0c;在代码中使用输出语句将所填结果输出即可。素数就是不能再进行等分的整数。比如7&#xff0c;11。而 9 不是素数&#xff0c;因为它可以平分为 3 等份。一般认为最小的素数是2&#xff0c;接着是 3&#xff0c;5&…
阅读更多...
el-upload 超详细-（附件，图片，多类型文件）玩转上传upload--new FormData()

el-upload 超详细-（附件，图片，多类型文件）玩转上传upload--new FormData()

代码&#xff08;我的项目代码&#xff1a;注解在下面&#xff09;代码复制直接用&#xff0c;可以实现所有文件上传&#xff0c;更改接口即可&#xff08;如需详细注解&#xff0c;学习&#xff0c;下面的详解完全够用&#xff0c;从0到学会这一片加官方文档就够了&#xff09…
阅读更多...
Electron 分享（入门，安装，打包）

Electron 分享（入门，安装，打包）

Electron Electron 是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架 安装 在使用 Electron 进行开发之前&#xff0c;需要安装Node.js&#xff0c;可以在终端输入以下命令输出了 Node.js 和 npm 的版本信息&#xff1a; node -v npm -v没有安装的话&#xff0c…
阅读更多...
css 100vw、100vh出现滚动条怎么解决

css 100vw、100vh出现滚动条怎么解决

要搞清楚这个问题首先要知道这两个单位&#xff08;vw、vh&#xff09;是什么意思。vw&#xff08;vh&#xff09;是相对于浏览器的视口宽度&#xff08;高度&#xff09;的&#xff0c;100vh等于浏览器的视口宽度&#xff0c;设置vw和vh会在视口发生变化时重新计算宽度和高度。…
阅读更多...
【Vue实用功能】Vue实现文档在线预览功能，在线预览PDF、Word、Excel、ppt等office文件

【Vue实用功能】Vue实现文档在线预览功能，在线预览PDF、Word、Excel、ppt等office文件

文章目录[TOC](文章目录)方法一、 Luckysheet 预览方法二、 Office Web 查看器&#xff08;微软的开发接口&#xff09;方法三、 XDOC文档预览云服务(预览pdf、word、xls、ppt)方法一、 Luckysheet 预览 Luckysheet 是一个类似于 excel 的在线电子表格&#xff0c;功能强大、配…
阅读更多...
超详细纯前端导出excel并完成各种样式的修改（xlsx-style）

超详细纯前端导出excel并完成各种样式的修改（xlsx-style）

超详细纯前端导出excel并完成各种样式的修改&#xff08;xlsx-style&#xff09; 一杠正在上传…重新上传取消 2020年12月08日 17:53 阅读 6247 一、前言 最近做的项目涉及到了excel的导出&#xff0c;在这块真的花了很多的时间&#xff0c;起初需求是不需要样式层面的修改…
阅读更多...
【css】svg修改图标颜色

【css】svg修改图标颜色

项目中使用了大量的svg图标&#xff0c;一开始只是导入直接使用&#xff0c;直到产品提出要根据条件修改图标的颜色 svg教程||菜鸟教程 可以简单看下教程了解下svg SVG 意为可缩放矢量图形&#xff0c;SVG 使用 XML 格式定义图像。 导入项目的svg图标大概是这样 有个path路…
阅读更多...
怎样在应用中实现自助报表功能

怎样在应用中实现自助报表功能

前言&#xff1a;大家好&#xff0c;我是小威&#xff0c;24届毕业生&#xff0c;在一家满意的公司实习。本篇将记录几次面试中经常被问到的知识点以及对学习的知识点总结。 本篇文章记录的基础知识&#xff0c;适合在学Java的小白&#xff0c;也适合复习中&#xff0c;面试中的…
阅读更多...
后台管理系统前端模板（html + CSS + JavaScript）

后台管理系统前端模板（html + CSS + JavaScript）

这是为大家准备的资源链接&#x1f910;&#x1f910;&#x1f910;&#xff1a; 提取码&#xff1a;0000 bootstrap_htmb.zip_免费高速下载|百度网盘-分享无限制百度网盘为您提供文件的网络备份、同步和分享服务。空间大、速度快、安全稳固&#xff0c;支持教育网加速&#…
阅读更多...
实现Vue按钮(button)绑定回车(enter)事件

实现Vue按钮(button)绑定回车(enter)事件

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录前言一、页面展示二、实现步骤1.在删除对话框的取消与确定按钮之间添加input输入框2.写个监听器&#xff0c;监听弹窗打开时&#xff0c;给input框自动聚焦&#xff…
阅读更多...
AI引领技术变革，自动化云平台所带来的测试工程师进阶危机~

AI引领技术变革，自动化云平台所带来的测试工程师进阶危机~

推荐&#xff1a; Python全栈白宝书专栏&#xff0c;免费阶段订阅数量4300&#xff0c;购买任意白宝书体系化专栏可加入TFS-CLUB 私域社区。福利&#xff1a;加入社区的小伙伴们&#xff0c;除了可以获取博主所有付费专栏的阅读权限之外&#xff0c;还有机会加入 星荐官共赢计划…
阅读更多...
微信小程序设计规范

微信小程序设计规范

一、宏观角度 微信小程序设计的基本原则是微信设计中心针对在微信类上线的小程序页面总结的设计指南及建议。以下设计原则都是基于对用户的尊重的基础上的&#xff0c;旨在微信生态类建立有号、高效、一致的用户体验的同时&#xff0c;最大程度顺应和支持各业务需求设计…
阅读更多...
PHP+MySQL制作简单的用户注册登录界面（注释超详细~附源代码）

PHP+MySQL制作简单的用户注册登录界面（注释超详细~附源代码）

成果 网站能实现判断账户信息是否合法&#xff0c;同时附带验证码验证登录。在用户输入正确的用户名与密码后会有登录成功的弹窗&#xff0c;若输入的账户不存在&#xff0c;则会跳转至注册页面。 实现过程 项目文件分配&#xff1a; 1.首先创建login.html 实现的是用户登录…
阅读更多...
vue-element-admin--使用体验

vue-element-admin--使用体验

原文网址&#xff1a;vue-element-admin--使用体验_IT利刃出鞘的博客-CSDN博客 简介 说明 本文用示例介绍vue-element-admin的用法。 vue-element-admin 是一个后台前端解决方案&#xff0c;它基于 vue 和 element-ui实现。它使用了最新的前端技术栈&#xff0c;内置了 i18 国…
阅读更多...
小满Vue3第三十九章（Vue开发桌面程序Electron）

小满Vue3第三十九章（Vue开发桌面程序Electron）

建议视频教程小满Vue3&#xff08;第三十九章 electron桌面程序&#xff09;_哔哩哔哩_bilibili Electron官网Electron | Build cross-platform desktop apps with JavaScript, HTML, and CSS. 我们用的VsCode 也是 electron 开发的 electron 内置了 Chromium 和 nodeJS 其中…
阅读更多...
【最简便方法】element-plus/element-ui走马灯配置图片以及图片自适应

【最简便方法】element-plus/element-ui走马灯配置图片以及图片自适应

首先展示官网给的模板 <template><el-carousel :interval"4000" type"card" height"200px"><el-carousel-item v-for"item in 6" :key"item"><h3 text"2xl" justify"center">…
阅读更多...
前端实现文件下载的方法

前端实现文件下载的方法

前端实现文件下载 前端下载一般分为两种情况&#xff0c;一种是后端直接给一个文件地址&#xff0c;通过浏览器打开就可以下载&#xff0c;另外一种则需要发送请求&#xff0c;后端返回二进制流数据&#xff0c;前端解析流数据&#xff0c;生成URL&#xff0c;实现下载。 一、…
阅读更多...
css添加边框阴影

css添加边框阴影

css边框阴影如何设置&#xff1f; 语法&#xff1a; <style> box-shadow: h-shadow v-shadow blur spread color inset; </style> 取值&#xff1a; h-shadow&#xff1a;必需设置的值&#xff0c;定义水平阴影的位置。允许负值。 v-shadow&#xff1a;必需设置…
阅读更多...
微信小程序web-view与H5 通信方式探索

微信小程序web-view与H5 通信方式探索

本文作者为奇舞团前端开发工程师小程序简介小程序是一种全新的连接用户与服务的方式&#xff0c;它可以在微信内被便捷地获取和传播&#xff0c;同时具有出色的使用体验。需求微信小程序 H5 混合开发就是 在一个小程序中&#xff0c;采用部分小程序原生页面&#xff0c;部分通过…
阅读更多...
Vue组件通信——父子组件通信的四种方法

Vue组件通信——父子组件通信的四种方法

引入组件 全局引入 在main.js文件中引入并注册 import ChildrenDemo from /views/components/ChildrenDemo Vue.component(ChildrenDemo,ChildrenDemo)// 第一个参数 全局组件的名字(字符串类型)&#xff0c;第二个参数&#xff1a;引入的组件名&#xff08;一般都与组件名保持…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023