第十七节——指令

一、概念

在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>

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

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

相关文章

地理信息系统原理-空间数据结构(7)

​四叉树编码 1.四叉树编码定义 四叉树数据结构是一种对栅格数据的压缩编码方法&#xff0c;其基本思想是将一幅栅格数据层或图像等分为四部分&#xff0c;逐块检查其格网属性值&#xff08;或灰度&#xff09;&#xff1b;如果某个子区的所有格网值都具有相同的值&#xff0…

Linux----------------Shell重定向输入输出

&#xff08;一&#xff09; 标准输入 以键盘读取用户输入的数据&#xff0c;然后再把数据拿到 Shel程序中使用。 标准输出 Shell 程序产生的数据&#xff0c;这些数据一般都是呈现到显示器上供用户浏览查看 输入输出重定向 输入方向就是数据从哪里流向程序。数据默认从键…

Flink SQL Over 聚合详解

Over 聚合定义&#xff08;⽀持 Batch\Streaming&#xff09;&#xff1a;**特殊的滑动窗⼝聚合函数&#xff0c;拿 Over 聚合 与 窗⼝聚合 做对⽐。 窗⼝聚合&#xff1a;不在 group by 中的字段&#xff0c;不能直接在 select 中拿到 Over 聚合&#xff1a;能够保留原始字段…

【使用Python编写游戏辅助工具】第五篇:打造交互式游戏工具界面:PySide6/PyQT高效构建GUI工具

前言 这里是【使用Python编写游戏辅助工具】的第五篇&#xff1a;打造交互式游戏工具界面&#xff1a;PySide6/PyQT高效构建GUI工具。本文主要介绍使用PySide6来实现构建GUI工具。 在前面&#xff0c;我们实现了两个实用的游戏辅助功能&#xff1a; 由键盘监听事件触发的鼠标连…

IntelliJ IDEA 2023 最新版如何试用?IntelliJ IDEA 2023最新版试用方法及验证ja-netfilter配置成功提示

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…

文件上传学习笔记

笔记 文件上传 文件上传是指将本地图片&#xff0c;视频&#xff0c;音频等文件上传到服务器&#xff0c;供其它用户浏览或下载的过程 文件上传前端三要素 : file表单项 post方式 multipart/from-data 服务端接收文件 : 用spring中的API : MultipartFile 要想文件名唯一 …

[极客大挑战 2019]Http 1

题目环境&#xff1a; 看起来挺花里胡哨的 F12查看源代码寻找隐藏文件 这是啥子呀&#xff0c;果然防不胜防 点击隐藏文件Secret.php 它不是来自这个地址的请求 报头&#xff1a;https://Sycsecret.buuoj.cn 需要抓包&#xff0c;在抓包前了解部分数据包参数 GET:到 Host:来自 …

Mysql my.cnf配置文件参数详解

Linux 操作系统中 MySQL 的配置文件是 my.cnf&#xff0c;一般会放在 /etc/my.cnf 或 /etc/mysql/my.cnf 目录下。 如果你使用 rpm 包安装 MySQL 找不到 my.cnf 文件&#xff0c;可参考如下&#xff1a; 第一步&#xff1a; 通过cd命令 cd /usr/share/mysql 来到这个目录&#…

ElementUI 自定义 Tree 树形控件背景

在 template 中 <div class"container"><el-tree :data"treeList" :props"defaultProps" accordion node-click"handleNodeClick" /> </div> 在 script 中 treeList: [{ id: "-1", label: "区域选…

由于flutter_app依赖于flutter_swiper>=0.0.2,不支持零安全,版本解决失败。

参考 dart3.0使用flutter_swiper报错记录 flutter_swiper package - All Versions从官网的信息可以看到 Dart3版本不兼容 最小兼容的Dart SDK版本需要2.0 Flutter SDK 版本列表Flutter SDK 版本列表 - Flutter 中文文档 - Flutter 中文开发者网站 - Flutter 说明&#xff1a;因…

算法:Java构建二叉树并递归实现二叉树的前序、中序、后序遍历

先自定义一下二叉树的类&#xff1a; // Definition for a binary tree node. public class TreeNode {int val;TreeNode left;TreeNode right;TreeNode() {}TreeNode(int val) { this.val val; }TreeNode(int val, TreeNode left, TreeNode right) {this.val val;this.left…

Python和SQLite游标处理多行数据

如果您需要处理多行数据&#xff0c;使用游标或其他适当的方法是更好的选择。以下是一些处理多行数据的方法&#xff1a; 使用游标&#xff1a;游标可以逐行处理查询结果&#xff0c;这对于大量数据或需要逐行处理的场景非常有用。以下是一个使用Python和SQLite的游标示例&…

对Java的多线程的理解

说说对Java线程的理解 下面是AI的回答 Java线程就是Java程序里面可以同时运行多个任务。Java提供了几种创建和管理线程的方式&#xff0c;其中一种是继承Thread类&#xff0c;另一种是实现Runnable接口或Callable接口。jdk5提供了线程池&#xff0c;可以更方便地创建、启动和终…

理解springboot那些过滤器与调用链、包装或封装、设计模式相关等命名规范,就可以读懂80%的springboot源代码,和其他Java框架代码

紧接上面《 理解springboot那些注册与回调、监控与统计等命名规范,就可以读懂70%的springboot源代码》、《 理解springboot那些约定俗成的框架类名、全局context等命名规范,就可以读懂一半springboot的源代码》2篇文章,此片将汇总springboot那些过滤器与调用链、包装或封装…

springboot面试题

Springboot核心注解是那几个&#xff1f;由那几个注解组成 启动类Application 上面的注解 SpringbootApplication 由一下三个注解组合 SpringbootConfiguration: 组合了Configuration注解&#xff0c;实现配置文件的功能 EnableSAutoConfiguration: 打开自动配置功能。 Compo…

【多线程】龟兔赛跑

package org.example;public class Race implements Runnable {//胜利者private static String winner;Overridepublic void run() {for(int i0;i<100;i){boolean flag gameOver(i);//如果flag>100,结束比赛if(flag){break;}System.out.println(Thread.currentThread().g…

Adobe After Effects 2024(Ae2024)在新版本中的升级有哪些?

After Effects 2024是Adobe公司推出的一款视频处理软件&#xff0c;它适用于从事设计和视频特技的机构&#xff0c;包括电视台、动画制作公司、个人后期制作工作室以及多媒体工作室。通过After Effects&#xff0c;用户可以高效且精确地创建无数种引人注目的动态图形和震撼人心…

DAY43 完全背包理论基础 + 518.零钱兑换II

完全背包 有N件物品和一个最多能背重量为W的背包。第i件物品的重量是weight[i]&#xff0c;得到的价值是value[i] 。每件物品都有无限个&#xff08;也就是可以放入背包多次&#xff09;&#xff0c;求解将哪些物品装入背包里物品价值总和最大。 完全背包和01背包问题唯一不同…

[SSD综述1.7] SSD接口形态: SATA、M.2、U.2、PCIe、BGA

依公知及经验整理,原创保护,禁止转载。 专栏 《SSD入门到精通系列》 <<<< 返回总目录 <<<< 前言 犹记得当年Windows 7系统体验指数中,那5.9分磁盘分数,在其余四项的7.9分面前,似乎已经告诉我们机械硬盘注定被时代淘汰。势如破竹的SSD固态硬盘,彻…

ChatGPT 的 Text Completion

该章节我们来学习一下 “Text Completion” &#xff0c;也就是 “文本完成” 。“Text Completion” 并不是一种模型&#xff0c;而是指模型能够根据上下文自动完成缺失的文本部分&#xff0c;生成完整的文本。 ⭐ Text Completion 的介绍 Text Completion 也称为文本自动补全…