Vue常用的指令都有哪些?

简介: 常用指令:1、v-model 多用于表单元素实现双向数据绑定 (同angular中的ng-model)2、v-for格式: v-for="字段名in(of)数组json"循环数组或json(同angular中的ng repeat),需要注意从vue2开始取消了$index3、v-show

常用指令:

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 的形式使用。

相关文章
|
3天前
|
JavaScript
vue学习(3)模板语法
vue学习(3)模板语法
32 11
|
3天前
|
存储 JavaScript 前端开发
vue学习(2)
vue学习(2)
189 65
|
3天前
|
JavaScript 算法 前端开发
vue学习(1)
vue学习(1)
191 62
|
2天前
|
JavaScript
vue学习(4)数据绑定
vue学习(4)数据绑定
13 10
|
2天前
|
JavaScript 前端开发
vue学习(6)
vue学习(6)
15 9
|
2天前
|
JavaScript 开发者
vue学习(5)
vue学习(5)
13 7
|
3天前
|
JavaScript
vue键盘事件
vue学习(11)键盘事件
|
1天前
|
JavaScript
VUE中el-input阻止冒泡防止触发父级事件
VUE中el-input阻止冒泡防止触发父级事件
|
1天前
|
JavaScript
vue学习(9)事件处理
vue学习(9)事件处理
11 2
|
1天前
|
JavaScript
vue学习(8)数据代理
vue学习(8)数据代理
7 1