返回顶部
首页 > 资讯 > 前端开发 > 其他 >一文聊聊vue中的指令和插值
  • 141
分享到

一文聊聊vue中的指令和插值

Vuevue.jsvue3 2022-11-22 23:11:09 141人浏览 薄情痞子
摘要

data():存放页面中显示数据的地方<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title

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中的指令和插值的详细内容,更多请关注编程网其它相关文章!

--结束END--

本文标题: 一文聊聊vue中的指令和插值

本文链接: https://www.lsjlt.com/news/173445.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 一文聊聊vue中的指令和插值
    data():存放页面中显示数据的地方<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title...
    99+
    2022-11-22
    Vue vue.js vue3
  • 一文聊聊Vue中的KeepAlive组件
    看下面的图更加直观,图片来源一篇讲keepAlive 缓存优化的文章4、如何添加到 vue devtools 组件树上sharedContext.activate = (vnode, container, anchor) => { ...
    99+
    2022-11-22
    前端 Vue.js 前端框架
  • 一文聊聊Vue中provide和inject的使用方法
    Vue中如何使用provide与inject?下面本篇文章就来给大家介绍一下Vue中provide和inject的使用方法,希望对大家有所帮助!在vue2.0里面provide与inject是以选项式(配置)API的方式在组件中进行使用的,...
    99+
    2023-05-14
    Vue javascript
  • 一文聊聊Vue中的全局守卫
    Vue中怎么进行全局守卫?下面本篇文章带大家聊聊Vue中的全局守卫,希望对大家有所帮助!前言:项目中大多数都是通过路由来进行跳转的,但是普遍的都会进行登陆验证后才能进入下一页面,这时候就需要守卫了,本博文主要讲解vue中的全局守卫 。全局守...
    99+
    2023-05-14
    全局守卫 Vue
  • 一文聊聊Vue-Router的实现原理
    路由既然我们在分析路由,我们首先来说说什么是路由,什么是后端路由、什么是前端路由。路由就是根据不同的 url 地址展示不同的内容或页面,早期路由的概念是在后端出现的,通过服务器端渲染后返回页面,随着页面越来越复杂,服务器端压力越来越大。后来...
    99+
    2023-05-14
    vue-router Vue
  • 聊聊Vue指令的基本原理及其实现
    Vue中的指令(Directive)是一种特殊的语法,用于在页面中对元素进行控制和渲染。指令的实现原理是Vue框架中的重要组成部分,本文将介绍Vue指令的基本原理及其实现。指令的基本原理指令是Vue框架中的一个重要概念,用于定义页面中元素的...
    99+
    2023-05-14
  • 一起聊聊vue的3.0和2.0版本
    Vue是一款流行的基于JavaScript的现代框架。Vue.js是由尤雨溪开发的一个渐进式JavaScript框架。该框架易于学习,方便上手,而且具有高效、灵活、可重用组件等特点,成为广大开发者的首选。目前Vue的版本主要包括Vue 2....
    99+
    2023-05-14
  • 简单聊一聊vue中data的代理和监听
    目录假设现在有一个data需求一: 用 Object.defineProperty 定义 n需求二:n不能小于0所以就有了需求三:不暴露data中可以设置的属性,而是使用一个代理因此...
    99+
    2024-04-02
  • 一文聊聊go语言中的限流漏桶和令牌桶库
    本篇文章带大家聊聊go语言中的限流漏桶和令牌桶库,介绍令牌桶和漏桶的实现原理以及在实际项目中简单应用。为什么需要限流中间件?在大数据量高并发访问时,经常会出现服务或接口面对大量的请求而导致数据库崩溃的情况,甚至引发连锁反映导致整个系统崩溃。...
    99+
    2023-05-14
    Golang go语言
  • 一文聊聊Node中的stream(流)
    流是用于在 Node.js 中处理流数据,也就是连续字节的抽象接口。 流有 4 种基本类型,本篇文章主要介绍其中两种 —— 可读流和可写流。可读的(Readable)我们可以通过 fs.createReadStream() 创建一个可读流 ...
    99+
    2023-05-14
    stream node nodejs​
  • 一起聊聊C++中的智能指针
    目录一:背景二:关键词解析1. auto_ptr2. auto_ptr 多引用问题一:背景 我们知道 C++ 是手工管理内存的分配和释放,对应的操作符就是 new/dele...
    99+
    2024-04-02
  • vue中的指令和插值怎么使用
    这篇文章主要介绍“vue中的指令和插值怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue中的指令和插值怎么使用”文章能帮助大家解决问题。一、安装vue直接使用script标签引入<s...
    99+
    2023-07-04
  • 一文聊聊node中的path模块
    path 模块是 nodejs 中用于处理文件/目录路径的一个内置模块,可以看作是一个工具箱,提供诸多方法供我们使用,当然都是和路径处理有关的。同时在前端开发中 path 模块出现的频率也是比较高的,比如配置 webpack 的时候等。本文...
    99+
    2023-05-14
    path模块 Node.js
  • 一文聊聊Angular中的管道(PIPE)
    在我们设置好管道之后,浏览器中的时间已经发生了变化了其他管道Angular还提供了其他管道,比如说改变人名币格式的管道(currency):Angular - CurrencyPipehttps://angular.cn/api/commo...
    99+
    2023-05-14
    管道 Angular
  • 一文聊聊vue3中的ref、toRef、toRefs
    (学习视频分享:vuejs入门教程、编程基础视频)以上就是一文聊聊vue3中的ref、toRef、toRefs的详细内容,更多请关注编程网其它相关文章!...
    99+
    2023-05-14
    Vue
  • 一文聊聊Node.js中的cluster(集群)
    日常工作中,对 Node.js 的使用都比较粗浅,趁未羊之际,来学点稍微高级的,那就先从 cluster 开始吧。尼古拉斯张三说过,“带着问题去学习是一个比较好的方法”,所以我们也来试一试。当初使用 cluster 时,一直好奇它是怎么做到...
    99+
    2023-05-14
    cluster Node.js
  • 一文聊聊Node中的可读流
    本篇文章带大家解读一下Node.js流源码,深入了解下Node可读流,看看其基本原理、使用方法与工作机制,希望对大家有所帮助!1. 基本概念1.1. 流的历史演变流不是 Nodejs 特有的概念。 它们是几十年前在 Unix 操作系统中引入...
    99+
    2023-05-14
    可读流 node
  • 一文聊聊Node中的net模块
    而客户端和服务端的传输流如下如果角色变成发送者和接受者的时候,传输流如下图:可以看出来传输的过程中,从发送端开始,没经过一层协议都会加上所需要的首部信息.层层把关,层层加码. 然后到了接收端的时候, 就反而行之, 每经过一层都剥去对应的首部...
    99+
    2023-05-14
    net模块 node Node.js
  • 一文聊聊Javascript中的执行上下文
    本篇文章带大家聊聊Javascript中的执行上下文,分享一个思考题,通过对思考题的分析,想必会对执行上下文有更加深入的理解。在前面的几篇文章中,我们深入了解了关于执行上下文的三个重要成员:变量对象、作用域链和 this ,本篇文章是前四篇...
    99+
    2023-05-14
    执行上下文 javascript
  • vue的指令和插值问题汇总
    目录一、安装vue二、Vue模板案例步骤三、基础模板(记住)四、vue的指令和插值1、{{}}:插值表达式的语法2、v-text:填充纯文本内容(data中的值)3、v-html:填...
    99+
    2022-11-13
    vue指令和插值 vue指令
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作