Vue基础之模板语法介绍

news2024/12/23 0:52:11

前言

上篇我分享了关于Vue的入门,简单的入了个门。本篇文章将要分享的内容为Vue的模板语法。

一、插值

        1.1、文本

        1.2、html

        1.3、属性

        1.4、class、style绑定

        1.5、表达式

在Vue的模板语法中,插值是一种常用的方式来动态地将数据渲染到视图中Vue使用双大括号{{}}作为插值的语法标记。

最简单的用法是在模板中直接插入数据值,例如:

<p>{{ message }}</p>

上面的代码将把Vue实例中的message属性的值插入到<p>元素中。

插值还支持JavaScript表达式,你可以在插值中使用表达式来执行计算或调用函数,例如:

<p>{{ message.toUpperCase() }}</p>

上面的代码将把message属性的值转换为大写后插入到<p>元素中。

另外,插值还可以用在HTML属性中,例如:

<a v-bind:href="url">{{ linkText }}</a>

上面的代码使用v-bind指令将url属性的值绑定到<a>元素的href属性上,并将linkText属性的值插入到<a>元素中显示的文本内容中。

需要注意的是,在插值中不能使用括号或赋值语句,因为插值只接受单个表达式。

总结起来,Vue的模板语法中的插值提供了一种简洁而灵活的方式来将数据动态地渲染到视图中可以直接插入数据值,也可以使用JavaScript表达式进行计算和函数调用。此外,插值还可以用在HTML属性中。

案例:

完整代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>插值</title>
		<!-- 引入vue.js的依赖 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<h1>{{msg}}</h1>
			<h6>{{msg}}</h6>
 
			<h3>演示适用html样式</h3>
			
			<div v-html="htmlstr"></div>
			
 
			<h3>演示vue 中的属性值</h3>
			<input type="text" v-bind:value="val" />
 
			<h3>演示Class与style绑值</h3>
			<span :class="f200" v-bind:style="colorblue">二者合为一体</span>
 
			<h3>演示表达式</h3>
 
			{{str.substr((0,5))}}<br />
			月薪:{{number-2000}}<br />
			{{ok ? '好' : '不好'}}<br />
 
			<span :id="id+'id'">商品id</span>
		</div>
	</body>
	<script>
		// 绑定边界
		new Vue({
			el: '#app',
			data() {
				return {
					msg: '七里香的名字很美',
					htmlstr: '<span style="color:red;">雨水</span>',
					val: '输入的值',
					str: '人生苦短,我用Java',
					number: 19999,
					ok: false,
					id: 'goods_',
					colorblue: 'color: blue;',
					f200: 'f200'
				}
			}
 
 
		})
	</script>
</html>

二、指令


核心指令

  (v-if|v-else|v-else-if)/v-show/v-for/v-bind/v-on/v-model

 v-if|v-else|v-else-if:根据其后表达式的bool值进行判断是否渲染该元素

他们只能是兄弟元素

v-else-if上一个兄弟元素必须是v-if

v-else上一个兄弟元素必须是v-if或者是v-else-if

  v-show与v-if类似,只是会渲染其身后表达式为false的元素,而且会给这样的元素添加css代码:style="display:none"

  v-for类似JS的遍历,

 遍历数组: v-for="item in items", items是数组,item为数组中的数组元素

 遍历对象: v-for="(value,key,index) in stu", value属性值,key属性名,index下标

 v-model:用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定,根据表单上的值,自动更新绑定的元素的值   

v-for/v-model一起绑定[多选]复选框和单选框
 

  1. v-bind插值:v-bind指令用于在HTML属性中插入动态的数据。可以简写为:
<img :src="imageSrc">

上述代码中,:src将会把imageSrc变量的值作为src属性的值进行插值。

  1. v-on插值:v-on指令用于在HTML事件处理程序中插入动态的方法。可以简写为@
<button @click="handleClick">Click Me</button>

上述代码中,@click将会将handleClick方法插入到click事件处理程序中。

  1. v-html插值:v-html指令用于将数据作为原始HTML插入到元素中。
<div v-html="htmlString"></div>

上述代码中,htmlString变量的值将会被作为原始HTML插入到<div>元素之中。

  1. v-text插值:v-text指令用于替代双大括号插值,将指定的数据直接作为文本内容插入到元素中。
<p v-text="message"></p>

上述代码中,message变量的值将会作为<p>元素的文本内容。

注意重点:面试考题!!!

区别v-if与v-show?

  1. v-if
    v-if指令根据条件表达式的值来控制元素的存在与否。当条件为true时,元素会被添加到DOM中;当条件为false时,元素会被从DOM中移除。它是惰性的,在条件变为true时才会进行渲染,可以避免不必要的DOM操作。
<div v-if="isShown">This is shown</div>

isShowntrue时,<div>元素会被渲染到视图中;当isShownfalse时,<div>元素不会被渲染。

  1. v-show
    v-show指令根据条件表达式的值来控制元素的显示或隐藏,但不会对DOM结构进行改变。当条件为true时,元素会以CSS的方式进行展示;当条件为false时,元素会以CSS的方式隐藏。即使在条件为false时,元素仍然存在于DOM中,只是在视觉上被隐藏了。
<div v-show="isShown">This is shown</div>

isShowntrue时,<div>元素会以可见的方式展示;当isShownfalse时,<div>元素通过display: none隐藏,但仍然在DOM中存在。

区别总结:

  • v-if:根据条件决定元素是否存在于DOM中,惰性渲染。
  • v-show:根据条件决定元素的显示与隐藏,通过CSS控制。

一般而言,如果需要在条件变化频繁的情况下切换元素的显示与隐藏,或者初始渲染时元素可能不会被显示的情况下,推荐使用v-show。而如果需要在条件改变时有更高的渲染开销,或避免初始化时不必要的渲染,使用v-if更为合适。

案例:

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>指令</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
	     	<h3>演示v-if 使用</h3>
			请输入成绩:1-100 <input type="text" v-model="degree" style="color: red;" />
			<div v-if="degree<=60">等级E</div>
			<div v-else-if="degree<=70">等级D</div>
			<div v-else-if="degree<=80">等级C</div>
			<div v-else-if="degree<=90">等级B</div>
			<div v-else-if="degree<=100">等级A</div>
			<div v-else="">输入成绩不合法</div>
 
 
			 <h3>演示v-show 与 v-if区别</h3>
			<div v-show="ok">show</div>
			<div v-if="ok">if</div>
 
			<h3>演示v-for</h3>
 
			<select>
				<option v-for="h in hobby" :value="h.id">{{h.name}}</option>
			</select>
 
			<div v-for="h in hobby">
				<input :value="h.id" type=checkbox />{{h.name}}
			</div>
		</div>
	</body>
	<script>
		new Vue({
			el: '#app',
			data() {
				return {
					degree: 78,
					ok: false,
					hobby: [{
							id: "1",
							name: "乒乓球"
						},
						{
							id: "2",
							name: "滑板"
						},
						{
							id: "3",
							name: "跑步"
					}
						],
				};
			}
 
		})
	</script>
</html>

三、过滤器


过滤器

全局过滤器

Vue.filter('filterName', function (value) {
 // value 表示要过滤的内容

});

局部过滤器

new Vue({
 filters:{'filterName':function(value){}}

});

vue允许你自定义过滤器,被用作一些常见的文本格式化,格式如下:

<!-- 在两个大括号中 -->

{{ name | capitalize }}

<!-- 在 v-bind 指令中 -->

<div v-bind:id="rawId | formatId"></div>

注1:过滤器函数接受表达式的值作为第一个参数

注2:过滤器可以串联     

{{ message | filterA | filterB }}

注3:过滤器是JavaScript函数,因此可以接受参数:

{{ message | filterA('arg1', arg2) }}

注4:js定义一个类

function Stu(){};

Stu.prototype.add(a,b){};//添加一个新的实例方法

Stu.update(a,b){};//添加一个新的类方法 
 

四、计算属性、过滤器

计算属性

   计算属性可用于快速计算视图(View)中显示的属性。这些计算将被缓存,并且只在需要时更新

   computed:{}

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

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

相关文章

CentOS 7 安装Libevent

CentOS 7 安装Libevent 1.下载安装包 新版本是libevent-2.1.12-stable.tar.gz。&#xff08;如果你的系统已经安装了libevent&#xff0c;可以不用安装&#xff09; 官网&#xff1a;http://www.monkey.org/~provos/libevent/ 2.创建目录 # mkdir libevent-stable 3.解压 …

数字森林:无人机航测技术在林业调查中的应用

林业调查是林业工作的基础&#xff0c;对于森林资源的管理、规划、保护、经济发展和农业种植等方面都具有重要的意义。传统林业调查主要依赖人工进行&#xff0c;存在工作效率低、数据精度低、数据分析困难、受地形限制、无法实时监测等缺陷。 随着科技的不断发展&#xff0c;无…

DJYOS开源往事三:DJYOS源码发布网络实证

在DJYOS经营开发社区的时候&#xff0c;DJYOS的代码更新记录是在自己的官网上。然后散发到各种技术论坛上。这里我实证的举例以第三方网站为数据源头&#xff0c;罗列2009年之后发布的一些源码实证信息。 1、2009年2月2日&#xff1a;djyos含example的0.2.0版本发布了&#xf…

JDK1.8下载

https://www.oracle.com/cn/java/technologies/downloads/#java8-windows

git log和git reflog命令

工作区 版本历史库 ,暂存区 (1)git log (2)git log --oneline (3)git log -n4 --graph (4)git log -n4 --graph --oneline (5)git log --all (6)git log master 查看master分支历史记录(1)HEAD指向当前工作commit,是个变量 (2)git reset HEAD^,git log找不到之前的commi…

函数式编程------JDK8新特性

函数式编程式jdk 8中的语法糖,在许多地方都有用到,以下是一些优点. 能够看懂公司里的代码大数量下处理集合效率高代码可读性高消灭嵌套地狱 Lamda表达式 lamda表达式是函数是编程的基础,先看一个列子 新建一个线程,参数是匿名类内部类(匿名内部类是一个匿名子类对象。这里使…

Web应用系统的小安全漏洞及相应的攻击方式

写作目的 本文讲述一个简单的利用WebAPI来进行一次基本没有破坏力的“黑客”行为。 主要目的如下&#xff1a; 了解什么叫安全漏洞 知道什么是api 了解一些获取api的工具 通过对API的认识了解白盒接口测试基本概念和技术 免责声明&#xff1a; 本文主要是以学习交流为目的&a…

python抠图(去水印)开源库lama-cleaner入门应用实践

1. 关于 Lama Cleaner Lama Cleaner 是由 SOTA AI 模型提供支持的免费开源图像修复工具。可以从图片中移除任何不需要的物体、缺陷和人&#xff0c;或者擦除并替换&#xff08;powered by stable diffusion&#xff09;图片上的任何东西。 特征&#xff1a; 完全免费开源&am…

axios取消上一页面的请求

请求拦截 声明变量用于存放请求请求拦截存放请求导出请求 导航守卫 导入请求集合路由前置守卫中遍历取消所有请求 登录失效取消后续请求

Go学习视频整理(总共59门课程,860GB)

由阿里P8 Golang架构师亲自精心筛选整理的全网最新最具价值的Golang进阶学习课程&#xff01; 培训机构原版教程&#xff01; 课程知识点和一线大厂完美匹配&#xff01; 所有课程资源完整成套&#xff0c;不残缺&#xff0c;不拼凑&#xff0c;不拆开乱发&#xff01; 这系…

深度学习——线性神经网络一

深度学习——线性神经网络一 文章目录 前言一、线性回归1.1. 线性回归的基本元素1.1.1. 线性模型1.1.2. 损失函数1.1.3. 解析解1.1.4. 随机梯度下降1.1.5. 用模型进行预测 1.2. 向量化加速1.3. 正态分布与平方损失1.4. 从线性回归到深度网络 二、线性回归的从零开始实现2.1. 生…

【每日运维】文件系统损坏:shutting down filesystem

问题场景&#xff1a;服务器突发断电导致 处理步骤 先确认属于哪个逻辑卷&#xff1a;ls -l /dev/mapper 通过文件系统命令进行修复&#xff1a;xfs_repair -L /dev/mapper/centos-root 最终修复的预期效果如下&#xff1a; 重启服务器后验证是否正常进入系统

Polygon L2扩容方案揭秘

1. 引言 前序博客&#xff1a; Polygon生态 以太坊扩容是一个几乎与以太坊本身一样古老的问题。扩容任务的复杂性是 以太坊伟大之处的直接结果&#xff1a; 以太坊是有活力的协议&#xff0c;其缓慢进化&#xff0c;以确保链的安全性和去中心化。 当活动的增加刺激了更大的…

vue3项目学习一:创建vue3项目

创建vue3项目 一、使用vue-cli创建vue3项目1.安装vue-cli2.创建vue3项目 二、初始化项目结构三、导入element-ui 一、使用vue-cli创建vue3项目 1.安装vue-cli 先查看是否安装vue-cli 在cmd窗口输入vue -V查看版本&#xff0c;如果出现 则说明存在vue-cli,如果出现 则需要安…

FTP这么“好用”和“便宜”,为什么企业还要替换掉?

FTP是一种历史悠久的网络协议&#xff0c;自1971年问世以来&#xff0c;它因其简易性、便捷性以及强大的跨平台兼容性而被广泛使用。在网站开发、软件更新和数据备份等多个场景中&#xff0c;FTP都发挥了重要作用。不过&#xff0c;随着互联网技术的不断发展和企业需求的多样化…

DockerCompose和Docker镜像仓库

个人名片&#xff1a; 博主&#xff1a;酒徒ᝰ. 个人简介&#xff1a;沉醉在酒中&#xff0c;借着一股酒劲&#xff0c;去拼搏一个未来。 本篇励志&#xff1a;三人行&#xff0c;必有我师焉。 本项目基于B站黑马程序员Java《SpringCloud微服务技术栈》&#xff0c;SpringCloud…

SpringCloud Alibaba - Nacos

1.安装与部署 Nacos是阿里巴巴开源的服务注册与发现、配置管理的组件&#xff0c;相当于是EurekaConfig的组合。 Nacos服务器是单独安装部署的&#xff0c;需要下载Nacos服务端程序&#xff0c;下载地址https://github.com/alibaba/nacos。 window下双击startup.cmd 登录Naco…

Linux的Redis集群搭建-主从集群哨兵模式

上次教大家在linux中安装单机版本的redis&#xff1a; Linux安装Redis&#xff08;图文解说详细版&#xff09; 这次我们讲一下Linux安装redis的集群版本 文章目录 &#x1f334;准备redis环境&#x1f334;第一步&#xff0c;下载redis&#x1f334;第二步&#xff0c;传输到…

PCIE研究-2

PCIe是一种高速串行总线&#xff0c;用于连接计算机内部的各种设备。在PCIe中&#xff0c;有四种不同的设备类型&#xff1a;Switch、Bridge、Root Complex和EndPoint。本篇文章将介绍这四种设备类型的基础知识。 1. Switch Switch是PCIe中最常见的设备类型之一&#xff0c;它…

【LeetCode热题100】--11.盛最多水的容器

11.盛最多水的容器 给定一个长度为 n 的整数数组 height 。有 n 条垂线&#xff0c;第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。 找出其中的两条线&#xff0c;使得它们与 x 轴共同构成的容器可以容纳最多的水。 返回容器可以储存的最大水量。 **说明&#xff1a;*…