第三章Vue-计算机属性的基本使用

最新推荐文章于 2024-07-24 22:25:19 发布

玲宝12138

最新推荐文章于 2024-07-24 22:25:19 发布

阅读量756

点赞数

分类专栏： vue 文章标签： vue

原文链接：https://www.bilibili.com/video/BV15741177Eh?p=51&spm_id_from=pageDriver

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Vue-计算机属性的基本使用

1、计算机属性

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1XZwnVZk-1627007163636)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\image-20210721080341966.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wbUeFolZ-1627007163639)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\image-20210720173616860.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8oiLbWea-1627007163642)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\image-20210720173659392.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZNLyqrBE-1627007163644)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\image-20210721080939516.png)]$

2、计算属性的setter和getter

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6r3kpbJR-1627007163645)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\image-20210721081835273.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pzXPBVa0-1627007163646)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\image-20210721084255370.png)]$

3、计算属性的缓存

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qhKHWuOi-1627007163647)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\image-20210721085318376.png)]$

methods和computed两者区别：methods若多次调用则每次调用都运行一次，computed若多次调用则只会调用一次，因为有缓存。所以性能相比用computed会更好

4、注：var没有块级作用域，let、const有块级作用域

5、const的使用和注意点

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JgaCVStl-1627007163647)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\image-20210721095839042.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sYlcN5T9-1627007163648)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\image-20210721100134023.png)]$

6、对象增强写法

（a）属性的增强写法

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AGREFZTl-1627007163648)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\image-20210721100841631.png)]$

（b）函数的增强写法

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h8f4U7p7-1627007163649)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\image-20210721101019899.png)]$

注：TypeScript和flow 在编译期间就进行检测类型语法错误

7、事件监听

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BLeaYFJW-1627007163650)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\image-20210721102041443.png)]$

7-1 v-on基础

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lCz9y629-1627007163650)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\image-20210721102116336.png)]$

7-2 v-on参数传递

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ljM8bbQc-1627007163651)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\image-20210721102750498.png)]$

7-3 v-on修饰符

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4gM0cuC6-1627007163651)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\image-20210721112943593.png)]$

7-4 v-if 和v-else-if和v-else的使用

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1ERpaTzB-1627007163652)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\image-20210721115644623.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4BaHvGZo-1627007163652)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\image-20210721115849581.png)]$

7-5 v-show与v-if的区别

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YZPabgZN-1627007163653)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\image-20210721143549123.png)]$

7-6 v-for遍历数组和对象

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bzwv4r7D-1627007163654)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\image-20210721144628280.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kHMljxyL-1627007163655)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\image-20210721144647643.png)]$

7-7 组件的key属性

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RaCu6h3Y-1627007163656)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\image-20210721144813135.png)]$

8、登录切换小案例

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bcHYQrDy-1627007163657)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\image-20210721120014520.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jZXtocW8-1627007163657)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\image-20210721120520490.png)]$

9、登录切换input复用问题

vue会自动复用类似的dom，若定义了key，若key不同，则不会进行复用。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eRntwV0t-1627007163658)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\image-20210721133902322.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CAEleCf9-1627007163659)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\image-20210721143459460.png)]$

10、数组中响应式方法

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-K71fOo76-1627007163660)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\image-20210721150402916.png)]$

如何直接修改位置上的元素，不是响应式的修改。就是修改完立刻修改到页面上

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uekj4L5O-1627007163661)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\image-20210721151747483.png)]$

玲宝12138

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
第三章Vue-计算机属性的基本使用

Vue-计算机属性的基本使用1、计算机属性2、计算属性的setter和getter3、计算属性的缓存methods和computed两者区别：methods若多次调用则每次调用都运行一次，computed若多次调用则只会调用一次，因为有缓存。所以性能相比用computed会更好4、注：var没有块级作用域，let、const有块级作用域5、const的使用和注意点6、对象增强写法（a）属性的增强写法（b）函数的增强写法注：TypeScript和flow 在编译期间就
复制链接

扫一扫