我的Vue之旅(3)
2020-10-24
程序员节快乐哈!
因为有相当一部分内容都是相互穿插的,今天也就不写那么多重复的Demo了,直接写一下对所学内容的理解吧。
-
插值
关于插值这一块其实也没啥说的,文本插值都是最熟悉不过的了,对于对象Data中的值,在HTML中直接用双花括号{{}}
包起了就可以了,不管里头是什么花里胡哨的东西,最终都被解释成文本。而如果我们希望一些特殊情况下,例如应用一段HTML代码,
而不是单纯被解析成文本,这个时候就需要用到v-html指令,这样引用后的值就等价于真正的HTML元素了,而不是单纯被输出在页面上
的文本。对于标签元素的属性,例如id, name等等的值,就不能用{{}}来给它们赋值,这个时候需要使用到v-bind指令来给对应的属性
进行赋值。关于赋值呢,其实也可以使用javaScript语句,如果逻辑不是太复杂的话,太复杂的话就是用函数了。 -
指令
指令后接参数的话通过冒号连接,例如v-bind:id="xxx", v-on:click="doSomeThing"。而动态参数的话,是通过一对方括号括起来的
如v-bind[somAttr]="xxx", 这个someAttr可以是Data中的一个property,也可以是一段JS逻辑
。修饰符的话,就是以简单后缀了,针对某系特定情况下的绑定 -
缩写
v-bind: ==> :
v-on: ==> @
接着说说计算属性 , 计算属性本身其实还是函数嘛。不过这个函数有点意思就是,如果它的计算结果不变,那么它是不需要像method中定义的
方法一样重新执行一遍,它直接就从缓存中把结果取出来。这样的好处就是如果某一结果需要多次引用,但计算量比价大的话,用计算属性是比较好的,
对于同一个结果,它只计算一下,剩下的引用都是从缓存中加载。计算熟悉的定义会用到关键字computed, 然后就是自己写函数了,它的绑定其实和property一样。
而监听器watch就是为了更加灵活的来响应数据的变化了,当某一个propterty发生变化了,做什么样的处理。对于这样的情况
使用监听器是比较舒服的,对,舒服。就是这种处理方式很贴近人的思维,写起来也是很顺手的,不用考虑复杂的逻辑关系。