我的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发生变化了，做什么样的处理。对于这样的情况

使用监听器是比较舒服的，对，舒服。就是这种处理方式很贴近人的思维，写起来也是很顺手的，不用考虑复杂的逻辑关系。

Github:  https://github.com/jvxiao/vue-road