Vue 常用指令详细介绍

Vue 常用指令

1.Vue 常用指令介绍

内容讲解

【1】Vue 指令介绍

在vue中指令是作用在视图中的即html标签，可以在视图中增加一些指令来设置html标签的某些属性和文本。

指令都是以带有 v- 前缀的特殊属性。

【2】使用Vue指令

使用指令时，通常编写在标签的属性上，值可以使用 JS 的表达式。

【3】常见的Vue指令

在这里插入图片描述

内容小结

1.使用Vue指令注意事项

1）就是vue中的常见指令都是必须书写在html标签的属性中，在属性值中书写js代码。

2）vue中的指令只能使用在视图中，不能使用在脚本。

2.文本插值v-html

内容讲解

【1】文本插值使用格式

<标签名 v-html="vue中data的key"></标签名>
说明：文本插值v-html通过data的key获取value显示标签的文本中

【2】需求：使用文本插值v-html和插值表达式**{{}}**获取vue中data数据

【3】步骤：

1.在素材中找到文本插值的代码

2.使用文本插值获取vue中的数据

3.打开浏览器查看结果

【4】代码实现:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文本插值</title>
</head>
<body>
<!--视图-->
<div id="div"><div>{{msg}}</div><!--使用文本插值指令：v-html--><div v-html="msg"></div><div v-text="msg"></div>
</div>
</body>
<script src="js/vue.js"></script>
<script>//脚本new Vue({el:"#div",data:{msg:"<h1>Hello Vue</h1>"}});
</script>
</html>

内容小结

1.使用文本插值，v-html 用来获取vue中的数据，将数据放到标签的文本中，并且解析标签。

<标签名 v-html="data中的key"></标签名>

2.v-html于v-text和插值表达式的区别

1.v-html称为文本插值，属于指令，解析html标签

2.插值表达式：{{data中的key}},不解析html标签

3.v-text：属于指令，但是不解析html标签 了解

3.绑定属性 v-bind:属性名或者 :属性名 (重点)

内容讲解

【1】绑定属性格式

完整写法
<标签名 v-bind:属性名="data中key"></标签名>
简写：常用 *****
<标签名 :属性名="data中key"></标签名>

【2】需求：给html标签绑定属性

【3】步骤：

1.在素材中找到绑定属性的代码

2.给html标签绑定属性，获取vue的data值作为属性值

3.打开浏览器查看结果

【4】代码实现:

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绑定属性</title><style>.my{border: 1px solid red;}</style>
</head><body><div id="div"><!--插件表达式不能写在属性中--><a href="{{url}}">百度一下</a><br><!--v-bind：为 HTML 标签绑定属性值--><a v-bind:href="url">百度一下</a><br><!--v-bind 可以省略不写--><a :href="url">百度一下</a><br><!--也可以绑定其他属性给当前div标签绑定一个class属性，属性值通过data中的keycls获取到my，这里相当于<div class="my">我是div</div>--><div :class="cls">我是div</div></div>
</body>
<script src="js/vue.js"></script>
<script>new Vue({el:"#div",data:{url:"http://www.baidu.com",cls:"my"}});
</script>
</html>

内容小结

1.绑定属性格式：

完整写法：
<标签名 v-bind:属性名="data中的key"></标签名>
简写：重点记忆
<标签名 :属性名="data中的key"></标签名>

4.条件渲染v-if

内容讲解

【1】条件渲染v-if格式

<标签名 v-if="条件表达式">满足条件显示的内容</标签名>
<标签名 v-else-if="条件表达式">满足条件显示的内容</标签名>
.......
<标签名 v-else>上述条件都不满足执行的内容</标签名>

【2】需求：判断vue中data的某个变量的值，对3取余，余数为0显示div1，余数为1显示div2，否则显示div3

【3】步骤

1.在素材中找到条件渲染的代码

2.在html中获取vue中data的数据并判断，显示结果

3.打开浏览器查看结果

【4】代码实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>条件渲染</title>
</head>
<body><div id="div"><!-- 判断num的值，对3取余余数为0显示div1余数为1显示div2余数为2显示div3 --><div v-if="num % 3 == 0">div1</div><div v-else-if="num % 3 == 1">div2</div><!--注意：如果不满足上述条件，则执行v-else，这里不用书写判断条件--><div v-else>div3</div></div>
</body>
<script src="js/vue.js"></script>
<script>new Vue({el:"#div",data:{num:2,flag:true}});
</script>
</html>

内容小结

1.条件渲染：v-if

<标签名 v-if="条件表达式">如果条件表达式为true则执行文本内容，如果为false则向下继续判断</标签名>
<标签名 v-else-if="条件表达式">如果条件表达式为true则执行文本内容，如果为false则向下继续判断</标签名>
....
<标签名 v-else>如果上述条件都为false则执行该文本</标签名>
注意：v-else，这里不用书写判断条件

5.条件渲染v-show

内容讲解

【1】条件渲染v-show格式

<标签名 v-show="data中的key">文本</标签名>
说明：
1.如果data中的key的值是true，则显示标签文本内容，如果是false则不显示标签文本内容

【2】需求：获取Vue中data的布尔类型数据并显示

【3】步骤：

1.在素材中找到条件渲染的代码

2.在html中获取vue中data的数据并判断，显示结果

3.打开浏览器查看结果

【4】代码实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>条件渲染</title>
</head>
<body>
<div id="div"><!--v-show指令--><div v-show="flag">div4</div><!--v-if  v-show 他们俩虽然都是控制元素是否显示，但是底层的原理不一样v-if 如果条件为false，页面中根本没有这个元素v-show如果条件为false，页面中有这个元素只不过它的display属性值为none-->
</div>
</body>
<script src="js/vue.js"></script>
<script>new Vue({el: "#div",data: {num: 2,flag: false}});
</script>
</html>

内容小结

1.条件渲染v-show

<标签名 v-show="data中的key"></标签名>

2.v-show和v-if区别

1.v-if：如果条件不满足，那么在页面中没有任何标签内容，直接删除

2.v-show:如果条件不满足，是通过设置css样式的属性display，设置属性值为none来隐藏标签，标签还在页面中，只是我们看不见

6.列表渲染 v-for

内容讲解

【1】格式

增强for循环：掌握
for(int x : arr){}
<标签名 v-for="x in 数组或者对象名或者集合名">{{x}} 使用插值表达式获取元素
</标签名>普通for循环：了解
<标签名 v-for="(x,index) in 数组或者对象名">元素:{{x}},索引:{{index}}
</标签名>
说明：x和index属于标识符

【2】作用：

遍历数组或者对象

【3】代码演示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>列表渲染</title>
</head>
<body><div id="div"><ul><!--类似于增强for循环1. element是遍历得到的每一个元素(变量名可以自定义)有一个作用域,它的作用于在当前的这个循环中2. names 是被遍历的数组或对象3.我们在标签文本中使用插值表达式根据遍历数组的每个元素的变量element获取对应数据--><!--需求：遍历names数组--><li v-for="element in names">{{element}}</li><!--需求：遍历对象student--><!--1.stu 表示对象中的每组数据 :张三 232.student表示遍历的对象名--><li v-for="stu in student">{{stu}}</li><!--类似于普通for循环(了解)--><!--需求：遍历names数组--><!--1.element表示数组的元素2.index表示数组中的索引--><li v-for="(element,index) in names">元素:{{element}},索引:{{index}}</li><!--需求：遍历对象student--><!--结果：元素:张三,索引:name元素:23,索引:age注意：在vue中使用v-for遍历对象时，使用普通for循环遍历，索引是对象中的key或者变量--><li v-for="(element,index) in student">元素:{{element}},索引:{{index}}</li></ul></div>
</body>
<script src="js/vue.js"></script>
<script>new Vue({el:"#div",data:{//数组names:["张三","李四","王五"],//对象student:{name:"张三",age:23}}});
</script>
</html>

内容小结

1.列表渲染主要用来遍历容器或者对象

2.使用格式：掌握

类似于增强for：
<li v-for="元素 in 容器名或者对象名">{{元素}}
</li>

说明：取出列表渲染中的元素使用插值表达式。

3.使用格式：了解

<li v-for="(元素,索引) in 容器名或者对象名">{{元素}}
</li>

说明：如果遍历的是对象，那么会将对象中的key作为索引返回。

7.事件绑定 v-on:事件名或者@事件名(重点)

内容讲解

【1】格式

<标签名 v-on:事件名="调用的是vue中的js函数"></标签名>
简写：掌握
<标签名 @事件名="调用的是vue中的js函数"></标签名>
说明：
1.在vue中绑定的事件名都是将原生js的事件名去掉on:click  blur...

【2】需求：给视图绑定事件

【3】代码实现

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件绑定</title>
</head><body><div id="div"><div>{{name}}</div><!--v-on：为 HTML 标签绑定事件--><button onclick="fn();">以前方式_单击_改变div的内容</button><!--1.v-on:click="change();" 给当前标签即视图绑定一个单击事件，在事件的属性值中直接调用vue中的函数change()--><button v-on:click="change();">单击_改变div的内容</button><button v-on:dblclick="change();">双击_改变div的内容</button><button @click="change();">简写_改变div的内容</button></div>
</body>
<script src="js/vue.js"></script>
<script>let ve = new Vue({el:"#div",data:{name:"黑马程序员"},methods:{change(){this.name = "传智播客";}}});//定义原生js函数function fn() {//调用vue中的函数changeve.change();}
</script>
</html>

内容小结

1.vue的事件绑定：

 <button v-on:事件名="调用vue中的函数">xxx</button>
简写： 经常使用<button @事件名="调用vue中的函数">xxx</button>

2.vue中使用的事件名是将原生js中的事件名中的on给去掉

8.表单绑定v-model(重点) 非常重要

内容讲解

【1】v-model表单绑定作用：

可以实现双向数据绑定：

1）vue中的data数据更改，然后视图中的显示内容也会随着改变
2）视图中的内容改变，vue中的data数据也会随着改变

单向数据绑定：

vue中的data数据更改，然后视图中的显示内容也会随着改变

【2】v-model表单绑定实现双向数据绑定的原理：

MVVM模型(Model,View,ViewModel)：是MVC模式的改进版
在前端页面中，JS对象表示Model，页面表示View，两者做到了最大限度的分离。
将Model和View关联起来的就是ViewModel，它是桥梁。
ViewModel负责把Model的数据同步到View显示出来，还负责把View修改的数据同步回Model。

在这里插入图片描述

【3】

在vue中实现双向数据绑定使用表单绑定：v-model.

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单绑定</title>
</head>
<body><div id="div"><form autocomplete="off"><!--单向绑定--><!--:value="username" 表示给当前input标签绑定value属性，username是vue中data的key-->姓名_单向绑定：<input type="text" name="username" :value="username"><br><!--双向绑定1.v-model="username":表示给当前input标签进行双向数据绑定，显示到输入框中，直接根据key即username获取value-->姓名_双向绑定：<input type="text" name="username" v-model="username"><br>年龄：<input type="number" name="age" v-model="age">性别:<input type="text" name="gender" v-model="gender"></form>{{username}}<hr></div>
</body>
<script src="js/vue.js"></script>
<script>new Vue({el:"#div",data:{username:"张三",age:23,gender:"男"}});
</script>
</html>

内容小结

1.表单绑定：v-model可以实现双向数据绑定。

2.双向数据绑定：

在这里插入图片描述

vue中的data数据改变，视图也会随着改变 --- 单向绑定
视图改变，vue中的data中的数据也会改变

3.使用格式：

姓名_双向绑定：<input type="text" name="username" v-model="data中的变量名">

9.指令小结

1.文本插值：将data中的变量名表示的值解析到文本中

注意：可以解析html标签

<div v-html="data中的变量名"></div>
<div v-html="username"></div>
实现效果：
<div>锁哥</div>
data:{username:"锁哥"
}

2.绑定属性：

<input v-bind:属性名="data中的变量名"/> 可以绑定任意属性
简写：使用较多
<input :属性名="data中的变量名" />

3.条件渲染：

<li v-if="条件表达式">文本1</li>
<li v-else-if="条件表达式">文本2</li>
....
<li v-else>文本</li><li v-show="条件表达式">文本</li>
如果条件表达式为true则显示文本，为false则给标签添加css样式即display:none 隐藏

4.列表渲染：

<li v-for="元素 in 容器或者对象名">{{元素}}
</li><li v-for="(元素,索引) in 数组名或者对象名">{{元素}}
</li>

5.事件绑定：

<button v-on:事件名="调用vue中的函数">单击
</button>
简写：经常使用,去掉原生js的事件名中的on
<button @事件名="调用vue中的函数">单击
</button>

6.表单绑定 ：实现双向数据绑定。视图改变，data数据改变。data数据改变，视图也改变。

<input v-model="data中的变量名"/>

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【C++】 解决 C++ 语言报错：Memory Leak

【C++】 解决 C++ 语言报错：Memory Leak

文章目录 引言 内存泄漏&#xff08;Memory Leak&#xff09;是 C 编程中常见且严重的内存管理问题之一。当程序分配了内存而没有正确释放&#xff0c;导致内存无法被重新利用时&#xff0c;就会发生内存泄漏。这种错误会导致程序占用越来越多的内存&#xff0c;最终可能导致系…
阅读更多...
vscode 生成项目目录结构 directory-tree 实用教程

vscode 生成项目目录结构 directory-tree 实用教程

1. 安装插件 directory-tree 有中文介绍&#xff0c;极其友好&#xff01; 2. 用 vscode 打开目标项目 3. 快捷键 Ctrl Shift p&#xff0c;输入 Directory Tree 后回车 会在 README.md 文件的底部生成项目目录&#xff08;若项目中没有 README.md 文件&#xff0c;则会自动创…
阅读更多...
恢复机制-数据库系统中的故障（事务故障、系统故障、介质故障）、一致性错误、窃取但不强制的缓冲区管理策略

恢复机制-数据库系统中的故障（事务故障、系统故障、介质故障）、一致性错误、窃取但不强制的缓冲区管理策略

一、引言 数据库管理系统DBMS的事务处理技术实现的一个主要功能部分就是恢复机制&#xff0c;恢复机制完成的功能就是对发生故障后系统中事务的更新结果进行数据恢复&#xff0c;保证事务的原子性和持久性&#xff0c;从而进一步保证数据库的一致性。 数据库系统与其他计算机系…
阅读更多...
Pytest--安装与入门

Pytest--安装与入门

pytest是一个能够简化成测试系统构建、方便测试规模扩展的框架&#xff0c;它让测试变得更具表现力和可读性–模版代码不再是必需的。只需要几分钟的时间&#xff0c;就可以对你的应用开始一个简单的单元测试或者复杂的功能测试。 1. 安装pytest pip install -U pytest检查版…
阅读更多...
MaxKB开源知识库问答系统发布v1.3.0版本，新增强大的工作流引擎

MaxKB开源知识库问答系统发布v1.3.0版本，新增强大的工作流引擎

2024年4月12日&#xff0c;1Panel开源项目组正式发布官方开源子项目——MaxKB开源知识库问答系统&#xff08;github.com/1Panel-dev/MaxKB&#xff09;。MaxKB开源项目发布后迅速获得了社区用户的认可&#xff0c;成功登顶GitHub Trending趋势榜主榜。 截至2024年7月4日&…
阅读更多...
【Mathematica14.0】快速从下载安装到使用

【Mathematica14.0】快速从下载安装到使用

目录 1.简介 2.下载安装 下载 安装 3.一小时掌握mathematica使用 单元模式 内置函数 符号表达式 迭代器 赋值 通配符及查找替换 函数定义 匿名函数&#xff08;拉姆达表达式&#xff09; 函数映射 函数式与运算符 函数自定义选项 图形可视化 交互式界面 数值…
阅读更多...
【ROS2】Ubuntu 24.04 源码编译安装 Jazzy Jalisco

【ROS2】Ubuntu 24.04 源码编译安装 Jazzy Jalisco

目录 系统要求 系统设置 设置区域启用所需的存储库安装开发工具 构建 ROS 2 获取 ROS 2 代码使用 rosdep 安装依赖项安装额外的 RMW 实现&#xff08;可选&#xff09;在工作区构建代码 设置环境 尝试一些例子 下一步 备用编译器 Clang保持最新状态 故障排除 卸载 系统要求 当前…
阅读更多...
长沙（市场调研公司）源点 企业如何决定是否需要开展市场调研？

长沙（市场调研公司）源点 企业如何决定是否需要开展市场调研？

长沙源点调研咨询认为&#xff1a;对于一个特定问题&#xff0c;管理者在面临几种解决问题的方案时&#xff0c;不应该凭直觉草率开展应用性市场调研。事实上&#xff0c;首先需要做的决策是是否需要开展调研。在下述情况下&#xff0c;最好不要做调研&#xff1a; *缺乏资源。…
阅读更多...
查询工资级别的个数＞20的个数，并且按工贷级别降序

查询工资级别的个数＞20的个数，并且按工贷级别降序

SELECT COUNT(*), grade_level FROM employees e JOIN job_grades g ON e.salary BETWEEN g.lowest_sal AND g.highest_sal GROUP BY grade_level HAVING COUNT(*) > 20 ORDER BY grade_level DESC; 为什么需要GROUP BY而不是仅仅ORDER BY&#xff1f; 聚合数据&#xff1a…
阅读更多...
【ARMv8/v9 GIC 系列 5.1 -- GIC GICD_CTRL Enable 1 of N Wakeup Function】

【ARMv8/v9 GIC 系列 5.1 -- GIC GICD_CTRL Enable 1 of N Wakeup Function】

请阅读【ARM GICv3/v4 实战学习 】 文章目录 GIC Enable 1 of N Wakeup Function基本原理工作机制配置方式应用场景小结GIC Enable 1 of N Wakeup Function 在ARM GICv3（Generic Interrupt Controller第三代）规范中，引入了一个名为"Enable 1 of N Wakeup"的功能。…
阅读更多...
SQLyog脚本无限试用重置脚本

SQLyog脚本无限试用重置脚本

文章目录 引言脚本(win)必要操作、说明 引言 SQLyog 需要po jie&#xff0c;但是网上的没看到很好使的&#xff0c;直接下的官方。能处理14天试用也是很ok的。 脚本(win) echo offREM SQLyog注册表key&#xff0c;可能跟你的不一样&#xff0c;如果不一样&#xff0c;请替换…
阅读更多...
Another Redis Desktop Manager工具自定义解析数据

Another Redis Desktop Manager工具自定义解析数据

自定义解析数据,支持多种程序终端输出 /Users/admin/go/src/baobao_all/ws_server/baobao/main_test/encipher_tool_redis/redis_tool {VALUE}/bin/bash -c "/Users/admin/Downloads/redis_tool {VALUE}"写个go程序解析数据 package mainimport ("encoding/jso…
阅读更多...
鸿蒙：1.入门

鸿蒙：1.入门

概述 简介 鸿蒙操作系统&#xff08;HarmonyOS&#xff09;是华为公司发布的一款智能终端系统&#xff0c;是基于微内核的面向全场景的分布式操作系统。它致力于提供更加安全、高效、低延迟、低功耗的操作体验&#xff0c;可通过技术手段对应用程序和设备进行智能协同&#xf…
阅读更多...
每日复盘-20240705

每日复盘-20240705

今日关注&#xff1a; 20240705 六日涨幅最大: ------1--------300391--------- 长药控股 五日涨幅最大: ------1--------300391--------- 长药控股 四日涨幅最大: ------1--------300391--------- 长药控股 三日涨幅最大: ------1--------300391--------- 长药控股 二日涨幅最…
阅读更多...
Windows的管理工具

Windows的管理工具

任务计划程序&#xff1a;这是一个用来安排任务自动运行的工具。你可以在这里创建新的任务&#xff0c;设定触发条件&#xff0c;并指定任务的操作。 事件查看器&#xff1a;这是一套日志记录和分析工具&#xff0c;&#xff0c;你可以了解到系统的工作状况&#xff0c;帮助诊…
阅读更多...
React+TS 从零开始教程（4）：useEffect

React+TS 从零开始教程（4）：useEffect

上一节传送门&#xff1a;ReactTS 从零开始教程&#xff08;3&#xff09;&#xff1a;useState 源码链接&#xff1a;https://pan.quark.cn/s/c6fbc31dcb02 上一节&#xff0c;我们已经学会了React的第一个Hook&#xff1a;useState。 这一节&#xff0c;我们要学习的是另一…
阅读更多...
房屋租赁管理小程序的设计

房屋租赁管理小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;中介管理&#xff0c;房屋信息管理&#xff0c;房屋类型管理&#xff0c;租房订单管理&#xff0c;租房信息管理 微信端账号功能包括&#xff1a;系统首页&#xff0c;房屋信息&am…
阅读更多...
手写SpringMVC之调度器DispatcherServlet

手写SpringMVC之调度器DispatcherServlet

DispatcherServlet&#xff1a;分发、调度 根据上一节&#xff0c;已经实现了将controller的方法添加到容器中&#xff0c;而DispatcherServlet的作用就是接收来自客户端的请求&#xff0c;然后通过URI的组合&#xff0c;来找到对应的RequestMapping注解的方法&#xff0c;调用…
阅读更多...
JS+CSS+HTML项目-中国国家图书馆

JS+CSS+HTML项目-中国国家图书馆

页面做的不多&#xff0c;CSS效果请看哔哩哔哩
阅读更多...
SpringBoot整合Dubbo的快速使用教程

SpringBoot整合Dubbo的快速使用教程

目录 一、什么是Dubbo? 二、SpringBoot整合Dubbo 1、父工程引入依赖 2、各个Dubbo服务子模块引入依赖 3、服务提供者 &#xff08;1&#xff09;启动类添加注解EnableDubbo &#xff08;2&#xff09;服务类添加注解DubboService &#xff08;3&#xff09;配置文件…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023