vue学习--模板语法+计算属性和侦听器

一.插值

文本，原始HTML,Attribute,js表达式

二.指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute。

指令的参数：<a v-bind:href="url">...</a> herf就是v-bind指令的参数。

动态参数：<a v-bind:[attributeName]="url"> ... </a> 就是从实例中动态的获取参数的值。

动态参数的两个约束：

1.对动态参数的值的约束：任何其它非字符串类型的值都将会触发一个警告。

2.对动态参数表达式的约束：空格和引号无效。例如<a v-bind:['foo' + bar]="value"> ... </a>

在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写：

如<a v-bind:[someAttr]="value"> ... </a>  只对 someattr生效。

修饰符：

<formv-on:submit.prevent="onSubmit">...</form>  

prevent是 submit事件的修饰符。


三. 缩写

 

主要是指令的缩写 如：

<a v-bind:href="url">...</a>  缩写为 <a :href="url">...</a>

<a v-on:click="doSomething">...</a> 缩写为 <a @click="doSomething">...</a>

四.计算属性


就是 不要把逻辑写在html文本输出中，写在实例中

完整的例子如下：

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})
计算属性vs方法
计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值
假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。
如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代

计算属性vs监听属性 （watch）
记住计算属性好用就行了

计算属性的setter 目前看来没啥用
侦听器：当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。（后面再研究吧 有点复杂）