博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Vue中计算属性、侦听、过滤、自定义指令、ref的操作
阅读量:4542 次
发布时间:2019-06-08

本文共 1097 字,大约阅读时间需要 3 分钟。

1.计算属性

{
{get}}

     我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而,不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值;多次调用,计算属性会立即返回之前的计算结果,而不必再次执行函数。

2.使用侦听器

        
{
{msg}}

    我们发现,与计算属性相比,侦听器并没有优势;也不见得好用,直观上反而比计算属性的使用更繁琐;虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。

3.过滤器的使用

局部过滤器:

    
{
{msg|myf|nu}}

全局过滤器:

    
{
{msg|myf|nu}}

过滤器要被添加到操作值得后面,使用 管道符 | 分割;vue会自动将操作值,以实参的形式传入过滤器的方法中;

4.自定义指令

前面我们学过 v-on 、v-model、v-show 等指令,在操作 dom 时使用了 ref 属性,其实之前学过的指令也是操作dom 的一种方式,但有时,这些指令并不能满足我们的需求,因此 vue 允许我们自定义指令来操作 dom

    

123131321

5.ref的使用

在学习 jq 时,我们首要任务就是学习选择的使用,因为选择可以极其方便帮助我们获取节点查找dom,因为我们要通过dom展示处理数据。而在Vue中,我们的编程理念发生了变化,变为了数据驱动dom;但有时我们因为某些情况不得不脱离数据操作dom,因此vue为我们提供了 ref 属性获取dom节点;

    

211113131

但是在项目开发中,尽可能不要使用ref,因为从一定程度上,ref 违背的mvvm设计原则;

转载于:https://www.cnblogs.com/shineguang/p/10891235.html

你可能感兴趣的文章
PAT甲级——A1049 Counting Ones
查看>>
PAT甲级——A1050 String Subtraction
查看>>
PAT甲级——A1021 Deepest Root
查看>>
PAT甲级——A1051 Pop Sequence
查看>>
PAT甲级——A1022 Digital Library
查看>>
PAT甲级——A1052 Linked List Sorting
查看>>
PAT甲级——A1026 Table Tennis
查看>>
PAT甲级——A1055 The World's Richest
查看>>
PAT甲级——A1036 Boys vs Girls
查看>>
PAT甲级——A1057 Stack
查看>>
PAT甲级——A1038 Recover the Smallest Number
查看>>
PAT甲级——A1058 A+B in Hogwarts
查看>>
PAT甲级——A1042 Shuffling Machine
查看>>
PAT甲级——A1063 Set Similarity
查看>>
PAT甲级——A1047 Student List for Course
查看>>
PAT甲级——A1054 The Dominant Color
查看>>
PAT甲级——A1075 PAT Judge
查看>>
PAT甲级——A1056 Mice and Rice
查看>>
PAT甲级——A1080 Graduate Admission
查看>>
PAT甲级——A1060 Are They Equal
查看>>