vue 框架学习（4）指令和计算属性computed

努力马斯克

于 2024-04-03 12:14:22 发布

阅读量939

点赞数 13

分类专栏： 2024年程序员学习文章标签： vue.js 学习前端

本文链接：https://blog.csdn.net/m0_60452293/article/details/137340439

版权

2024年程序员学习专栏收录该内容

332 篇文章 1 订阅

订阅专栏

本文详细介绍了Vue.js中v-if、v-show的使用和区别，强调了v-if的条件渲染特性、惰性加载，以及v-for循环、v-on绑定事件和v-model双向绑定的应用。还探讨了计算属性与方法的区别以及Vue模板编译的注意事项。

摘要由CSDN通过智能技术生成

2.4 v-if 和 v-show的使用、区别

使用

v-if是我们常用的判断表达式使用，可以根据表达式的值在DOM中生成或移除一个元素。

v-show和v-if有同样的展示效果，但是v-show不是生成或移除一个元素，是直接生成一个 style=“display:none”来隐藏标签或者是html。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8awJVLT5-1612767664021)(README_files/1.jpg)]

2.5 v-if vs v-show 区别

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

2.6 v-if / v-else-if / v-else的使用

v-if / v-else-if / v-else 其实是多个条件判断使用，满足那个条件就展示那个数据或者HTML，这个我感觉这个界面判断方式有点不好，如果通过写一个函数，写好判断逻辑在界面展示会更好，这样的界面会更加简洁，没有那么多逻辑，界面仅仅是一个展示，设计太多逻辑，会加大重写负担

2.7 v-for

当我们需要把一个数组或者一个对象循环显示的时候，这时候我们可以使用v-for，使用v-for要使用特定语法“ alias in expression”

2.8 v-on

v-on 绑定事件监听器

用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

简单使用

…

<a @click=“doSomething”>…

<a @[event]=“doSomething”> …

传参

方式：无参数，DOM对象，参数，参数和DOM对象

按钮2

按钮2 原生DOM对象

按钮3

按钮4

2.9 事件修饰符

stop - 调用 event.stopPropagation()。

prevent - 调用 event.preventDefault()。

capture - 添加事件侦听器时使用 capture 模式。

self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。

{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。

native - 监听组件根元素的原生事件。

once - 只触发一次回调。

left - (2.2.0) 只当点击鼠标左键时触发。

right - (2.2.0) 只当点击鼠标右键时触发。

middle - (2.2.0) 只当点击鼠标中键时触发。

passive - (2.3.0) 以 { passive: true } 模式添加侦听器

2.10 v-bind

你好

2.11 v-model

v-model指令放input、select、textarea三个元素上，会创建双向绑定，就是input、select、textarea上的值改变了会把v-model的data改变，反之v-model的data改变会改变input、select、textarea上的值

v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：

1.v-bind绑定一个value属性

2.v-on指令给当前元素绑定input事件

####修饰符：

.lazy - 取代 input 监听 change 事件

.number - 输入字符串转为有效的数字

.trim - 输入首尾空格过滤

2.12 v-pre

v-pre 跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

比如这个就会直接输出“{{message}},你好”，不会把{{message}}直接转译操作

2.13 v-cloak

v-cloak 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

实际情况：Vue的Mustache语法翻译可能可以延迟的情况，延迟的情况下我们写的{{data}}}就出现一个没有翻译的“{{data}}”,在界面上展示出就会不友好，这时候就需要可以使用v-cloak指令，这个指令就是当数据未解析完成时会渲染什么样式,当数据渲染出来之后v-cloak的样式就失效了

使用v-cloak的注意情况

在实际项目中，我们常通过 @import 来加载 css 文件.

@import “style.css”

而 @import 是在页面 DOM 完全载入后才会进行加载，如果我们将 [v-cloak] 写在 @import 加载的 css 文件中，就会导致页面仍旧闪烁。

为了避免这种情况，我们可以将 [v-cloak] 写在link 引入的 css 中，或者写一个内联 css 样式，这样就得到了解决。

2.14 v-one

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。就是后面最修改data的值，也不会改变之前的值

第五节：Vue的计算属性使用

一、什么是计算属性

如果我们要把data这两个值拼接一起显示的时候，我之前的写法就是这个直接使用两个插值文本或者是表达式来实现效果

其实Vue的设计初衷就是为了把界面的逻辑最简单化，太多的逻辑放在界面上，后续如果修改起来会难以维护，这时候Vue给了我们更好的一个功能可以显示这个问题就是计算属性 computed。

看下面的列子，说明一下计算属性使用，其实计算属性就是相当于一个属性，只是多了一层运算步骤。

在例子中 name3就是我们说的计算属性，它的值是通过data的name1和name2值处理得到的。vue的计算属性有一个很好的地方就是计算属性使用的data值，会形成绑定，就说你在计算属性用了那个data的值计算，如果data的值改变了，计算属性的计算值也会跟着改变，不需要做其他操作，都是响应式的