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

Vue常用的指令都有哪些?都有什么作用?什么是自定义指令?

常用指令:

1、v-model 多用于表单元素实现双向数据绑定 (同angular中的ng-model)

2、v-for格式: v-for="字段名in(of)数组json"循环数组或json(同angular中的ng repeat),需要注意从vue2开始取消了$index

3、v-show

4、v-hide 隐藏内容 (同angular中的ng-hide) 显示内容 (同angular中的ng-show)

5、v-if 显示与隐藏 (dom元素的删除添加 同angular中的ng-if默认值为false) v else-if 必须和 v-if 连用v-else 必须和 v-if 连用 不能单独使用 否则报错 模板编译错误

6、v-bind 动态绑定作用: 及时对页面的数据进行更改

7、v-on:click 给标签绑定函数,可以缩写为@, 例如绑定一个点击函数 函数必须写在 methods里面

8、v-text 解析文本

9、v-html解析html标签

10、v-bind:class 三种绑定方法1、对象型'{red:isred}'2、三元型 'isred?"red":"blue"'3、 数组型 '[{red:"isred"},{blue:"isblue"}]'

11 、v-once 进入页面时只渲染一次不在进行渲染

12、v-cloak 防止闪烁

13 、v-pre 把标签内部的元素原位输出

自定义指令:

除了 Vue 内置的一系列指令  之外,Vue 还允许你注册自定义的指令。

一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。钩子函数会接收到指令所绑定元素作为其参数。下面是一个自定义指令的例子,当一个 input 元素被 Vue 插入到 DOM 中后,它会被自动聚焦:

<script setup>
// 在模板中启用 v-focus
const vFocus = {mounted: (el) => el.focus()
}
</script><template><input v-focus />
</template>

在 <script setup> 中,任何以 v 开头的驼峰式命名的变量都可以被用作一个自定义指令。在上面的例子中,vFocus 即可以在模板中以 v-focus 的形式使用。

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • SSRF学习笔记
  • WordPress原创插件:自定义文章标题颜色
  • 【ESP8684————固件烧录说明、调试记录(1)】
  • OWASP ZAP:一款功能强大的开源Web安全扫描工具
  • 硬件工程师笔面试真题汇总
  • freertos的学习cubemx版
  • Web前端:HTML篇(四)头部head标签与样式表的导入
  • c语言第四天笔记
  • 萝卜快跑:自动驾驶的先锋与挑战
  • unity基础问题
  • 后端开发刷题 | 笔试
  • 【React】详解样式控制:从基础到进阶应用的全面指南
  • react中如何mock数据
  • Dav_笔记10:Using SQL Plan Management之4
  • 实战:Redis实现排行榜、点赞和关注功能的基本操作
  • cookie和session
  • C学习-枚举(九)
  • Fabric架构演变之路
  • iOS 系统授权开发
  • Js基础知识(四) - js运行原理与机制
  • Linux编程学习笔记 | Linux IO学习[1] - 文件IO
  • MySQL-事务管理(基础)
  • PHP 小技巧
  • scrapy学习之路4(itemloder的使用)
  • vuex 学习笔记 01
  • 纯 javascript 半自动式下滑一定高度,导航栏固定
  • 记录:CentOS7.2配置LNMP环境记录
  • 前嗅ForeSpider采集配置界面介绍
  • 如何邀请好友注册您的网站(模拟百度网盘)
  • 想使用 MongoDB ,你应该了解这8个方面!
  • 学习ES6 变量的解构赋值
  • 一个完整Java Web项目背后的密码
  • 用quicker-worker.js轻松跑一个大数据遍历
  • 在GitHub多个账号上使用不同的SSH的配置方法
  • 怎么把视频里的音乐提取出来
  • 曾刷新两项世界纪录,腾讯优图人脸检测算法 DSFD 正式开源 ...
  • ​ 轻量应用服务器:亚马逊云科技打造全球领先的云计算解决方案
  • ​​​​​​​ubuntu16.04 fastreid训练过程
  • # Pytorch 中可以直接调用的Loss Functions总结:
  • $.ajax,axios,fetch三种ajax请求的区别
  • (1)STL算法之遍历容器
  • (BFS)hdoj2377-Bus Pass
  • (TipsTricks)用客户端模板精简JavaScript代码
  • (草履虫都可以看懂的)PyQt子窗口向主窗口传递参数,主窗口接收子窗口信号、参数。
  • (论文阅读23/100)Hierarchical Convolutional Features for Visual Tracking
  • (七)Knockout 创建自定义绑定
  • (三)Honghu Cloud云架构一定时调度平台
  • (删)Java线程同步实现一:synchronzied和wait()/notify()
  • (十)Flink Table API 和 SQL 基本概念
  • (四)汇编语言——简单程序
  • (原)本想说脏话,奈何已放下
  • (转)chrome浏览器收藏夹(书签)的导出与导入
  • (转)负载均衡,回话保持,cookie
  • .NET 中选择合适的文件打开模式(CreateNew, Create, Open, OpenOrCreate, Truncate, Append)
  • .Net程序帮助文档制作