vue常用指令

迷雾吧

于 2023-02-07 10:48:40 发布

阅读量75

点赞数

文章标签： vue.js Powered by 金山文档

本文链接：https://blog.csdn.net/m0_74948153/article/details/128914785

版权

指令

是带有 v- 前缀的特殊属性

v-bind 动态绑定属性

v-on:click 绑定事件

v-for 遍历

v-model 双向绑定表单 (修饰符)

v-cloak 防止表达式闪烁

v-text 不会解析标签，和 {{ }} 一样的

v-html 会解析标签

v-if 动态创建/删除

v-show 动态显示/隐藏

注：

v-cloak

给模板内的元素添加v-cloak属性后，元素在vue没有加载完的时候就有这个属性，当vue加载完成后这个属性就消失了，所以我们可以给这个属性设置css样式为隐藏

v-bind的语法：

<p v-bind:属性名="data中的变量">hhahahahaha</p>

简化： <p :属性名="data中的变量">hhahahahaha</p>

v-text语法：

v-html语法：

v-cloak：

语法：

插值表达式: {{}} 存在的问题，网速不好的情况下，页面隐约有显示{{}}的效果（解决方案 v-cloak）

区别一：

v-html : 可以解析标签

v-text: 不可以解析标签

{{}} : 不可以解析标签

区别二：

{{}}只会覆盖{{}}所在位置的代码

v-html ：会覆盖标签以内所有的内容

v-text：会覆盖标签以内所有的内容

v-on语法：

v-on:事件名称= '少量的js代码（比如赋值语法等）'

v-on:事件名称= '函数名'

v-on:事件名称= '函数名(参数)'

简化： @事件名称= '函数名(参数)'

v-on事件对象：在vue中如何获取事件对象

1. 无参时，定义函数的第一个形参位置就是事件对象

2. 有参时，在函数调用的最后一个参数书写一个$event（必须是它）代表事件对象

v-on修饰符：

v-on:事件名称.stop= '函数名' 阻止事件冒泡

v-on:事件名称.prevent= '函数名(参数)' 阻止默认行为

v-on:事件名称.once= '函数名(参数)' 一次性事件

按键修饰符：针对于键盘事件

v-on:keyup.enter= '函数名'

@keyup.enter= '函数名'

@keyup.13（键码）= '函数名'

@keyup.esc= '函数名'

v-show语法：

v-if语法：

v-if，v-show来控制模板里元素的显示和隐藏，值为true就显示，为false就隐藏

v-show='变量'

v-if='变量'

v-show和v-if相同点，用于显示和隐藏的

原理：

v-show控制显示和隐藏的原理：控制元素的display：none和display:block

v-if控制显示和隐藏的原理：控制dom元素的创建和删除

性能消耗：

大量的操作dom会引起页面的重绘，很耗费性能【获取元素添加元素删除元素】

v-if：在每一次切换都会消耗性能

v-show：初始显示，消耗一次性能

使用的时候：

频繁的切换显示隐藏使用v-show

不频繁的切换显示隐藏使用v-if

安全性能（在后面vue项目中权限管理）

v-if 更加安全

v-show 不安全

v-if的其他用法：

<body>

</div>

</body>

new Vue({

el: "#app",

data: {

num: 8

}

})

</script>

v-for语法：

语法1：v-for='n of num' n是循环变量 n从1开始，一直到num

v-for='n in num' n是循环变量 n从1开始，一直到num

语法2: v-for = "item of arr" :key="一个唯一的标识"

v-for = "item in arr"

语法3： v-for = "item in obj" :key="一个唯一的标识"

vue2中，v-for的优先级高于v-if

一般情况下，不会v-if和v-for放到一起，分开写

说明：看html结构，所以先循环v-for了4次，再v-if

v-model的实现原理

v-model代替了 v-bind:value和@input=''

num和输入框的内容进行双向绑定

num变：输入框的值变化

输入框的值变化: num变化

v-model用于不同的表单控件时

1. 下拉列表： v-model绑定在 select标签上它绑定的变量的值就是选中的那一项

2. 复选框 v-model绑定在 input标签上

如果绑定的值的类型是非数组，绑定的变量的值就是checked，有一个选中checked=true

如果绑定的值的类型是数组，绑定的变量的值就是value的值

3. 单选框 v-model绑定在 input标签上

绑定的值的类型是字符串, 绑定的变量的值就是value的值

迷雾吧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
vue常用指令

如果绑定的值的类型是非数组，绑定的变量的值就是checked，有一个选中checked=true。绑定的值的类型是字符串, 绑定的变量的值就是value的值。插值表达式: {{}} 存在的问题，网速不好的情况下，页面隐约有显示{{}}的效果（解决方案 v-cloak）如果绑定的值的类型是数组，绑定的变量的值就是value的值。一般情况下，不会v-if和v-for放到一起，分开写。v-if，v-show来控制模板里元素的显示和隐藏，值为true就显示，为false就隐藏。
复制链接

扫一扫