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 中后,它会被自动聚焦:

javascript 复制代码
<script setup>
// 在模板中启用 v-focus
const vFocus = {
  mounted: (el) => el.focus()
}
</script>

<template>
  <input v-focus />
</template>

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

相关推荐
奇舞精选6 分钟前
从零开始实现Vue3+WebAssembly万级数据表格开发流程
vue.js·webassembly
xptwop1 小时前
05-ES6
前端·javascript·es6
Heo1 小时前
调用通义千问大模型实现流式对话
前端·javascript·后端
IT布道2 小时前
解决angular与jetty websocket 每30s自动断连的问题
websocket·angular.js·jetty
前端小巷子2 小时前
深入 npm 模块安装机制
前端·javascript·面试
深职第一突破口喜羊羊3 小时前
记一次electron开发插件市场遇到的问题
javascript·electron
cypking3 小时前
electron中IPC 渲染进程与主进程通信方法解析
前端·javascript·electron
西陵3 小时前
Nx带来极致的前端开发体验——借助playground开发提效
前端·javascript·架构
Britney⁺♛&?ꪶꪫꪜꫀ4 小时前
Vue2上
vue.js·npm
江城开朗的豌豆4 小时前
Element UI动态组件样式修改小妙招,轻松拿捏!
前端·javascript·vue.js