前端技术学习第九讲:VUE基础语法---VUE常用指令

这篇具有很好参考价值的文章主要介绍了前端技术学习第九讲:VUE基础语法---VUE常用指令。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

VUE常用指令

在VUE学习中,通常使用相关指令使VUE对象中的内容与网页进行挂载绑定,是我们的数据与视图之间产生关联,完成渐进式动态效果。VUE指令都会以“v-”开头。

指令名 描述
v-text 将文本内容挂载到页面元素中
v-html 将html代码展示到页面元素中
v-bind 将内容解析成为js,绑定至页面元素中,可以是内容,也可以是属性
v-if 根据判断结果控制内容展示
v-else 不能单独使用,一般与v-if一起使用
v-else-if 与v-if一起使用,组成多条件结果操作
v-for 循环多组内容
v-on 将方法挂载到页面元素中,具体方法参见JavaScript方法
v-model 将数据与元素进行双向绑定
v-show 对内容进行展示,也可以通过判定控制内容展示,相当于“display” 属性

一、v-text和v-html

v-text:将文字内容绑定到页面元素中,在某种情况下与{{}}插值表达式相似,但{{}}灵活一些,v-text更亲和元素
v-html:将Html代码绑定到页面元素中,{{}}插值表达式和v-text无法解析Html代码,只会原样展示,而v-html能够解析Html内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- {{context}} -->
			<p v-html="context"></p>
			<p v-text="name"></p>
			<p v-text="age"></p>
			<p v-text="sex"></p>
		</div>
		<script type="text/javascript">
			const vue=new Vue({
				el:'#app',
				data:{
					name:'张三',
					age:18,
					sex:'男',
					context:'<h1>个人信息</h1>'
				}
			})
		</script>
	</body>
</html>

前端技术学习第九讲:VUE基础语法---VUE常用指令,前端技术学习,vue.js,前端,学习

二、v-bind

v-bind:可以将内容绑定到属性值中,将绑定的内容解析成为js,方便获取内容或属性值,v-bind可以直接简写成为“:属性”

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- {{context}} -->
			<p v-html="context"></p>
			<p v-text="name"></p>
			<p v-text="age"></p>
			<p v-text="sex"></p>
			<img v-bind:src="img" v-bind:width="width" :height="height"/>
		</div>
		<script type="text/javascript">
			const vue=new Vue({
				el:'#app',
				data:{
					name:'张三',
					age:18,
					sex:'男',
					context:'<h1>个人信息</h1>',
					img:'img/1.png',
					width:'100px',
					height:'100px'
				}
			})
		</script>
	</body>
</html>

前端技术学习第九讲:VUE基础语法---VUE常用指令,前端技术学习,vue.js,前端,学习

三、v-if,v-else,v-else-if

这三组指令其实可以视作一类指令,是对内容进行判定。**注意:**判定条件之间要相邻,否则不足以形成一个合理的判定闭环

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- {{context}} -->
			<p v-html="context"></p>
			<p>
				姓名:{{name}}
				年龄:{{age}}
				性别:{{sex}}
				成长阶段:
				<strong v-if="age<18">青少年</strong>
				<strong v-else-if="age>=18&&age<=35">青年</strong>
				<strong v-else-if="age>35&&age<=60">中年</strong>
				<strong v-else>老年</strong>
			</p>
			<!-- <p v-text="name"></p>
			<p v-text="age"></p>
			<p v-text="sex"></p> -->
			<img v-bind:src="img" v-bind:width="width" :height="height"/>
		</div>
		<script type="text/javascript">
			const vue=new Vue({
				el:'#app',
				data:{
					name:'张三',
					age:19,
					sex:'男',
					context:'<h1>个人信息</h1>',
					img:'img/1.png',
					width:'100px',
					height:'100px'
				}
			})
		</script>
	</body>
</html>

前端技术学习第九讲:VUE基础语法---VUE常用指令,前端技术学习,vue.js,前端,学习

四、v-for

v-for指令,适用于循环操作数据内容,在数据中,多组内容会以数组的形式进行存储,我们在实现前后端分离项目时,也经常遇见多组内容,需要将这些内容渲染到页面中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h1>{{title}}</h1>
			<table border="" cellspacing="" cellpadding="">
				<tr>
					<th>姓名</th>
					<th>年龄</th>
					<th>性别</th>
				</tr>
				<tr v-for="l in list" >
					<td>{{l.name}}</td>
					<td>{{l.age}}</td>
					<td>{{l.sex}}</td>
				</tr>
			</table>
		</div>
		<script type="text/javascript">
			new Vue({
				el:'#app',
				data:{
					title:'个人信息',
					list:[
						{name:'张三',age:20,sex:'男'},
						{name:'李四',age:23,sex:'女'},
						{name:'王五',age:31,sex:'女'},
						{name:'赵六',age:17,sex:'男'},
					]
				}
			})
		</script>
	</body>
</html>

前端技术学习第九讲:VUE基础语法---VUE常用指令,前端技术学习,vue.js,前端,学习注意 : 永远不要把v-if 和 v-for 同时用在一个元素上,因为v-for的优先级高于v-if,当v-if去判断条件时,v-for已经遍历结束,如果确实需要判断条件再渲染,那么,可以先把数据处理好,再遍历处理好的数据

五、v-on

v-on指令,适用于向页面组件中绑定可以执行的方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h1>{{mess}}</h1>
			<ul>
				<li v-for="l in list">
					{{l}}
				</li>
			</ul>
			<ul>
				<li v-for="u in user">
					{{u.name}}---{{u.age}}---{{u.sex}}
				</li>
			</ul>
			<h1 v-on:click="show1()">我是一级标题,点击我会触发特殊效果</h1>
			<h2 @dblclick="show2()">我是二级标题,点击我会触发特殊效果</h2>
		</div>
		<script type="text/javascript">
			const vm=new Vue({
				el:'#app',
				data:{
					mess:'Hello',
					list:['11','22','33'],
					user:[{name:'张三',age:19,sex:'男'},{name:'李四',age:18,sex:'女'}]
				},
				methods:{
					show1:function(){
						alert('我就是特殊效果');
					},
					show2(){
						console.log('我是隐藏效果')
					}
				}
			})
		</script>
	</body>
</html>

前端技术学习第九讲:VUE基础语法---VUE常用指令,前端技术学习,vue.js,前端,学习

六、v-model

v-model指令,适用于数据与页面组件双向绑定效果,也就是说,当我们的组件通过v-model指令绑定data的数据时改变组件的内容,data的数据的值也随之改变

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="mess">
			{{mess}}
		</div>
		<script type="text/javascript">
			const vm=new Vue({
				el:'#app',
				data:{
					mess:'Hello',
					list:['11','22','33'],
					user:[{name:'张三',age:19,sex:'男'},{name:'李四',age:18,sex:'女'}]
				},
				methods:{
					show1:function(){
						alert('我就是特殊效果');
					},
					show2(){
						console.log('我是隐藏效果')
					}
				}
			})
		</script>
	</body>
</html>

前端技术学习第九讲:VUE基础语法---VUE常用指令,前端技术学习,vue.js,前端,学习前端技术学习第九讲:VUE基础语法---VUE常用指令,前端技术学习,vue.js,前端,学习

七、v-show

v-show指令,根据data中数据的值进行判定,如果结果为true,则显示内容,如果结果为false,则不显示内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="mess">
			{{mess}}
			<h1 v-show="flog==1">我的内容应该怎么显示</h1>
			<h2 v-show="flog2">我的内容应该怎么显示???</h2>
			<h3 v-show="flog==2">我的内容应该怎么显示???</h3>
		</div>
		<script type="text/javascript">
			const vm=new Vue({
				el:'#app',
				data:{
					mess:'Hello',
					list:['11','22','33'],
					user:[{name:'张三',age:19,sex:'男'},{name:'李四',age:18,sex:'女'}],
					flog:1,
					flog2:true
				},
				methods:{
					show1:function(){
						alert('我就是特殊效果');
					},
					show2(){
						console.log('我是隐藏效果')
					}
				}
			})
		</script>
	</body>
</html>

前端技术学习第九讲:VUE基础语法---VUE常用指令,前端技术学习,vue.js,前端,学习文章来源地址https://www.toymoban.com/news/detail-546065.html

到了这里,关于前端技术学习第九讲:VUE基础语法---VUE常用指令的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Redis 7 第九讲 微服务集成Redis 应用篇

            Jedis是redis的java版本的客户端实现,使用Jedis提供的Java API对Redis进行操作,是Redis官方推崇的方式;并且,使用Jedis提供的对Redis的支持也最为灵活、全面;不足之处,就是编码复杂度较高。   直连案列    获取Redis连接对象 Redis 案列 关闭Jedis对象   池案列  获取

    2024年02月09日
    浏览(29)
  • 『Linux』第九讲:Linux多线程详解(二)_ 线程控制

    「前言」文章是关于Linux多线程方面的知识,上一篇是 Linux多线程详解(一),今天这篇是 Linux多线程详解(二),讲解会比较细,下面开始! 「归属专栏」Linux系统编程 「主页链接」个人主页 「笔者」枫叶先生(fy) 「枫叶先生有点文青病」「每篇一句」 纵有千古,横有八荒

    2024年02月01日
    浏览(43)
  • 『Linux』第九讲:Linux多线程详解(五)_ 信号量

    「前言」文章是关于Linux多线程方面的知识,上一篇是 Linux多线程详解(四),今天这篇是 Linux多线程详解(五),内容大致是信号量,讲解下面开始! 「归属专栏」Linux系统编程 「主页链接」个人主页 「笔者」枫叶先生(fy) 「枫叶先生有点文青病」「每篇一句」 求其上,

    2024年02月07日
    浏览(48)
  • 设计模式第九讲:常见重构技巧 - 去除不必要的!=

    项目中会存在大量判空代码,多么丑陋繁冗!如何避免这种情况?我们是否滥用了判空呢?本文是设计模式第九讲,讲解常见重构技巧:去除不必要的!= 通常是这样的 初步的,使用Apache Commons,Guvava,Hutool等 StringUtils 考虑用Assert断言 逐级判断空,还是抛出自定义异常,还是

    2024年02月11日
    浏览(40)
  • 前端学习笔记:JavaScript基础语法(ECMAScript)

    此博客参考b站:【黑马程序员前端JavaScript入门到精通全套视频教程,javascript核心进阶ES6语法、API、js高级等基础知识和实战教程】https://www.bilibili.com/video/BV1Y84y1L7Nn?p=76vd_source=06e5549bf018e111f4275c259292d0da 这份笔记适用于已经学过一门编程语言(最好是C语言)的同学,如果你没有

    2024年02月16日
    浏览(46)
  • 『Linux』第九讲:Linux多线程详解(三)_ 线程互斥 | 线程同步

    「前言」文章是关于Linux多线程方面的知识,上一篇是 Linux多线程详解(二),今天这篇是 Linux多线程详解(三),内容大致是线程互斥与线程同步,讲解下面开始! 「归属专栏」Linux系统编程 「主页链接」个人主页 「笔者」枫叶先生(fy) 「枫叶先生有点文青病」「每篇一句

    2024年02月02日
    浏览(70)
  • 第九讲 单片机驱动彩色液晶屏 控制RA8889软件:显存操作

    目录 第一讲 单片机最小系统STM32F103C6T6通过RA8889驱动彩色液晶屏播放视频 第二讲 单片机最小系统STM32F103C6T6控制RA8889驱动彩色液晶屏硬件框架 第三讲 单片机驱动彩色液晶屏 控制RA8889软件:如何初始化 第四讲 单片机驱动彩色液晶屏 控制RA8889软件:绘图 第五讲 单片机驱动彩色液

    2024年01月16日
    浏览(46)
  • 考研数二第九讲 函数凹凸性证明,求极值以及拐点及渐近线

    函数的凹凸性即对一个在某区间A上连续的函数,它的图像上凸或者上凹,则分别称为凸函数或者凹函数。而对于在某个区间内既有凹图像又有凸图像,则将凹图像所在区间称为函数的凹区间,凸图像所在区间则称为凸区间。 中点定义法 同样是观察凹凸函数的图像,发现凹函

    2024年02月09日
    浏览(42)
  • 『Linux』第九讲:Linux多线程详解(四)_ 生产者消费者模型

    「前言」文章是关于Linux多线程方面的知识,上一篇是 Linux多线程详解(三),今天这篇是 Linux多线程详解(四),内容大致是生产消费者模型,讲解下面开始! 「归属专栏」Linux系统编程 「主页链接」个人主页 「笔者」枫叶先生(fy) 「枫叶先生有点文青病」「每篇一句」

    2024年02月07日
    浏览(42)
  • 第九章、Vue3中<script setup>语法糖

    摘要:script setup语法糖: https://cn.vuejs.org/api/sfc-script-setup.html 一、script setup语法糖用法 1.1 基本语法: 要使用这个语法,在script 中添加setup属性即可。 里面的代码最终会编译成setup()函数中的内容: 所以每次在组件实例被创建时,都会执行; 1.2 顶层绑定自动暴露给模板 当使用

    2024年02月11日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包