当前位置: 首页 > news >正文

第十七节——指令

一、概念

在Vue.js中,指令(Directives)是一种特殊的语法,用于为HTML元素添加特定的行为和功能。指令以v-作为前缀,通过在HTML标签中使用这些指令来操作DOM,修改元素的属性、样式或行为。

Vue.js提供了一组内置的指令,如v-model、v-bind、v-if、v-for等。此外,你也可以自定义指令来满足特定的需求。

二、常见指令

1、v-model

用于实现表单元素与Vue实例数据的双向绑定。

2、v-bind

用于动态地将Vue实例的数据绑定到HTML元素的属性或表达式。

3、v-if / v-else / v-else-if

根据条件控制元素的显示与隐藏。

4、v-for

用于根据数据源循环渲染元素列表。

5、v-on / @

用于监听DOM事件,并在触发时执行Vue实例中的方法。

6、v-show

根据条件控制元素的显示与隐藏,通过修改元素的CSS属性display。

7、v-text

将Vue实例的数据绑定到元素的文本内容。

8、v-html

将Vue实例的数据作为HTML内容动态渲染到元素中

三、v-model

1、概念

v-model指令在Vue.js中用于实现表单元素与Vue实例数据的双向绑定。当使用v-model指令绑定一个表单元素时,它会在底层自动为元素添加一个value属性和一个input事件监听器

2、绑定过程

对于表单元素(如<input>、<textarea>、<select>),v-model会将value属性与Vue实例中的一个数据属性进行绑定。

在初始化时,Vue会根据v-model指令的绑定值(通常是Vue实例的一个属性)将表单元素的初始值赋给该属性。

当用户与绑定了v-model的表单元素进行交互(输入、选择等)时,元素的input事件会被触发。

Vue会捕获到该事件,并根据表单元素的类型(<input>的type属性)来获取新的值。

Vue会将新的值赋给绑定的数据属性,实现从表单元素到Vue实例数据的单向绑定。

同时,Vue会将绑定的数据属性的值反过来赋给表单元素的value属性,实现从Vue实例数据到表单元素的单向绑定。

这样,无论是表单元素的值变化还是Vue实例数据的变化,都会相互影响,实现了双向绑定

3、例子

<template><div><div>{{ msg }}</div><!-- <input type="text" :value="msg" @input="inputChange" /> --><!-- 监听表单控件变化,同步每次变化的值到value上--><input type="text" v-model="msg" /><button @click="msg = '张三'">填入张三</button></div>
</template><script>
export default {data() {return {arr: [1, 2, 3],isRed: false,px: 100,msg: "aaa",};},methods: {inputChange(event) {this.msg = event.target.value;},},
};
</script><style scoped>
.red {color: red;
}
</style>

4、自定义组件使用v-model

子组件

<!-- CustomInput.vue -->
<script>export default {props: ["modelValue"],emits: ["update:modelValue"],};
</script><template><input:value="modelValue"@input="$emit('update:modelValue', $event.target.value)"/></template>

父组件

<template><div>{{ a }}<LearnA v-model="a"></LearnA></div>
</template><script>import LearnA from "./../learn-a.vue";export default {components: {LearnA,},data() {return {a: 1,};},};
</script>

四、自定义指令(了解)

1、概念

在Vue中,你可以使用自定义指令来扩展和修改现有的DOM元素行为。自定义指令是一种在HTML元素上绑定自定义行为的方式,它们可以用于处理交互、动态样式、事件监听等。

2、生命周期

在指令定义中指定相应的钩子函数。自定义指令可以定义多个钩子函数,每个钩子函数在指令的生命周期中扮演不同的角色。以下是一些常用的钩子函数:

bind: 只调用一次,在指令第一次绑定到元素时调用,可以在这里进行初始设置。

inserted: 当被绑定的元素插入到DOM中时调用。

update: 在组件的VNode更新时调用,但可能发生在其子VNode更新之前。

componentUpdated: 在组件的VNode及其子VNode全部更新后调用。

unbind: 只调用一次,在指令与元素解绑时调用

3、例子

全局指令

在入口文件处,增加v-color指令根据传入的参数改变字体颜色

app.directive("color", {mounted(el, binding) {el.style.color = binding.value;console.log(el, binding);},
});
局部指令
<template><div><input type="text" v-focus="true" /><div v-color="`green`">全局指令变红</div></div>
</template><script>
export default {directives: {/*** 对象的key是指令的名字* 指令 不需要 v- 开头* 但是使用的时候 必须要v- 开头*/focus: {/**** @param {*} el 当前的dom节点* @param {*} binding 相关传值*/mounted(el, binding, vnode, prevVnode) {// console.log(el, binding);el.focus();},},},
};
</script>

相关文章:

第十七节——指令

一、概念 在Vue.js中&#xff0c;指令&#xff08;Directives&#xff09;是一种特殊的语法&#xff0c;用于为HTML元素添加特定的行为和功能。指令以v-作为前缀&#xff0c;通过在HTML标签中使用这些指令来操作DOM&#xff0c;修改元素的属性、样式或行为。 Vue.js提供了一组…...

优雅的 Dockerfile 是怎样炼成的?

Docker 简介 目前&#xff0c;Docker 主要有两个形态&#xff1a;Docker Desktop 和 Docker Engine。 Docker Desktop 是专门针对个人使用而设计的&#xff0c;支持 Mac&#xff08;已支持arm架构的M系芯片&#xff09; 和 Windows 快速安装&#xff0c;具有直观的图形界面&a…...

2023-2024 中国科学引文数据库来源期刊列表(CSCD)

文章目录 CSCD来源期刊遴选报告2023-2024 中国科学引文数据库来源期刊列表&#xff08;CSCD&#xff09; CSCD来源期刊遴选报告 2023-2024 中国科学引文数据库来源期刊列表&#xff08;CSCD&#xff09;...

【3D图像分割】基于Pytorch的VNet 3D图像分割5(改写数据流篇)

在这篇文章&#xff1a;【3D 图像分割】基于 Pytorch 的 VNet 3D 图像分割2&#xff08;基础数据流篇&#xff09; 的最后&#xff0c;我们提到了&#xff1a; 在采用vent模型进行3d数据的分割训练任务中&#xff0c;输入大小是16*96*96&#xff0c;这个的裁剪是放到Dataset类…...

WebSocket Day02 : 握手连接

前言 握手连接是WebSocket建立通信的第一步&#xff0c;通过客户端和服务器之间的一系列握手操作&#xff0c;确保了双方都支持WebSocket协议&#xff0c;并达成一致的通信参数。握手连接的过程包括客户端发起握手请求、服务器响应握手请求以及双方完成握手连接。完成握手连接后…...

c#的反编译工具ISPY和net reflector 使用比较

我有一份Asp.net程序需要修改&#xff0c;但没有源码&#xff0c;只有dll&#xff0c;需要使用反编译工具回复源码&#xff0c;尝试使用了市面上的两种主流的工具ISPY和net reflector &#xff0c;最终用ISPY恢复了源码。 比较 ISPY 恢复的代码和实际有差距&#xff0c;但还能…...

基于LDA主题+协同过滤+矩阵分解算法的智能电影推荐系统——机器学习算法应用(含python、JavaScript工程源码)+MovieLens数据集(四)

目录 前言总体设计系统整体结构图系统流程图 运行环境模块实现1. 数据爬取及处理2. 模型训练及保存3. 接口实现4. 收集数据5. 界面设计 系统测试相关其它博客工程源代码下载其它资料下载 前言 前段时间&#xff0c;博主分享过关于一篇使用协同过滤算法进行智能电影推荐系统的博…...

方阵行列式与转置矩阵

1.转置矩阵&#xff1a;格式规定&#xff1a;如果矩阵A为n阶方阵&#xff0c;那么A的T次方为矩阵A的转置矩阵&#xff0c;即将矩阵A的行与列互换。 2.转置矩阵的运算性质&#xff1a; 1.任何方阵的转置矩阵的转置矩阵为方阵自身。 2.多个矩阵的和的转置矩阵等于多个转置矩阵的…...

【Java 进阶篇】Java Cookie共享:让数据穿越不同应用的时空隧道

在Web开发中&#xff0c;Cookie是一种常见的会话管理技术&#xff0c;用于存储和传递用户相关的信息。通常&#xff0c;每个Web应用都会在用户的浏览器中设置自己的Cookie&#xff0c;以便在用户与应用之间保持状态。然而&#xff0c;有时我们需要在不同的应用之间共享Cookie数…...

甘特图组件DHTMLX Gantt用例 - 如何拆分任务和里程碑项目路线图

创建一致且引人注意的视觉样式是任何项目管理应用程序的重要要求&#xff0c;这就是为什么我们会在这个系列中继续探索DHTMLX Gantt图库的自定义。在本文中我们将考虑一个新的甘特图定制场景&#xff0c;DHTMLX Gantt组件如何创建一个项目路线图。 DHTMLX Gantt正式版下载 用…...

克里金插值matlab代码

% 克里金插值示例 clc; clear; % 生成模拟数据 x linspace(0, 10, 11); y linspace(0, 10, 11); [X, Y] meshgrid(x, y); Z sin(sqrt(X.^2 Y.^2)) 0.1 * randn(size(X)); % 设置克里金参数 nugget 0.1; % 块金值 range 1; % 范围 sill 1; % 基台值 azimuth …...

【LeetCode】23. 合并 K 个升序链表

题目链接&#xff1a;23. 合并 K 个升序链表 题目描述&#xff1a; 数据范围&#xff1a; **思考&#xff1a;**这题实际上就是合并两个有序列表的进阶版&#xff0c;只不过这里变成了合并K个&#xff0c;那么这里我们显然就知道&#xff0c;核心的合并两个有序列表的思路不…...

2023年【熔化焊接与热切割】免费试题及熔化焊接与热切割考试总结

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 熔化焊接与热切割免费试题参考答案及熔化焊接与热切割考试试题解析是安全生产模拟考试一点通题库老师及熔化焊接与热切割操作证已考过的学员汇总&#xff0c;相对有效帮助熔化焊接与热切割考试总结学员顺利通过考试。…...

为什么要学中文编程?它能有哪些益处?免费版编程工具怎么下载?系统化的编程教程课程怎么学习

一、为什么要学习这个编程工具&#xff1f;能给自己带来什么益处&#xff1f; 1、不论在哪里上班&#xff0c;都不是铁饭碗&#xff1a;现在全球经济低迷&#xff0c;使得很多企业倒闭&#xff0c; 大到知名国企小到私营企业&#xff0c;大量裁员。任何人都无法保证自己现在的…...

数据分析实战 - 2 订单销售数据分析(pandas 进阶)

题目来源&#xff1a;和鲸社区的题目推荐&#xff1a; 刷题源链接&#xff08;用于直接fork运行 https://www.heywhale.com/mw/project/6527b5560259478972ea87ed 刷题准备 请依次运行这部分的代码&#xff08;下方4个代码块&#xff09;&#xff0c;完成刷题前的数据准备 …...

测试服务器端口是否开通,计算退休时间

本案例知识点 netstat -tuln | grep 80 nestat 目前主机打开的网络服务端口&#xff0c;-tuln目前主机启动的服务&#xff0c;如图 报错说参数太多&#xff0c;仔细检查发现if后的中括号内&#xff0c;变量少双引号导致&#xff0c;改完之后运行显示22,25端口开放&#xff0…...

Prometheus接入AlterManager配置企业微信告警(基于K8S环境部署)

文章目录 一、创建企业微信机器人二、配置AlterManager告警发送至企业微信三、Prometheus接入AlterManager配置四、部署PrometheusAlterManager(放到一个Pod中)五、测试告警 注意&#xff1a;请基于 PrometheusGrafana监控K8S集群(基于K8S环境部署)文章之上做本次实验。 一、创…...

11.1 Linux 设备树

一、什么是设备树&#xff1f; 设备树(Device Tree)&#xff0c;描述设备树的文件叫做 DTS(DeviceTree Source)&#xff0c;这个 DTS 文件采用树形结构描述板级设备&#xff0c;也就是开发板上的设备信息&#xff1a; 树的主干就是系统总线&#xff0c; IIC 控制器、 GPIO 控制…...

万宾科技管网水位监测助力智慧城市的排水系统

以往如果要了解城市地下排水管网的水位变化&#xff0c;需要依靠人工巡检或者排查的方式&#xff0c;这不仅加大了人员的工作量&#xff0c;而且也为市政府带来了更多的工作难题。比如人员监管监测不到位或无法远程监控等情况&#xff0c;都会降低市政府对排水管网的管理能力&a…...

Glide transform CircleCrop()圆图,Kotlin

Glide transform CircleCrop()圆图&#xff0c;Kotlin import android.os.Bundle import android.widget.ImageView import androidx.appcompat.app.AppCompatActivity import com.bumptech.glide.load.resource.bitmap.CircleCropclass MainActivity : AppCompatActivity() {o…...

深入剖析AI大模型:大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

Zustand 状态管理库:极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库&#xff0c;特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

五年级数学知识边界总结思考-下册

目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解&#xff1a;由来、作用与意义**一、知识点核心内容****二、知识点的由来&#xff1a;从生活实践到数学抽象****三、知识的作用&#xff1a;解决实际问题的工具****四、学习的意义&#xff1a;培养核心素养…...

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

多种风格导航菜单 HTML 实现(附源码)

下面我将为您展示 6 种不同风格的导航菜单实现&#xff0c;每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

Qt 事件处理中 return 的深入解析

Qt 事件处理中 return 的深入解析 在 Qt 事件处理中&#xff0c;return 语句的使用是另一个关键概念&#xff0c;它与 event->accept()/event->ignore() 密切相关但作用不同。让我们详细分析一下它们之间的关系和工作原理。 核心区别&#xff1a;不同层级的事件处理 方…...

Linux安全加固:从攻防视角构建系统免疫

Linux安全加固:从攻防视角构建系统免疫 构建坚不可摧的数字堡垒 引言:攻防对抗的新纪元 在日益复杂的网络威胁环境中,Linux系统安全已从被动防御转向主动免疫。2023年全球网络安全报告显示,高级持续性威胁(APT)攻击同比增长65%,平均入侵停留时间缩短至48小时。本章将从…...

深入解析光敏传感技术:嵌入式仿真平台如何重塑电子工程教学

一、光敏传感技术的物理本质与系统级实现挑战 光敏电阻作为经典的光电传感器件&#xff0c;其工作原理根植于半导体材料的光电导效应。当入射光子能量超过材料带隙宽度时&#xff0c;价带电子受激发跃迁至导带&#xff0c;形成电子-空穴对&#xff0c;导致材料电导率显著提升。…...