vue学习记录（数据绑定、class，style绑定）

vue数据绑定：

<span>message{{msg}}</span>

绑定的数据对象上的msg发生该改变，插值随之改变。

<span v-once>message{{msg}}</span> 执行一次性的插值。

js语法表达式可以插入在双括号中（不要在表达式中访问自定义的全局变量，可以使用MATH 、 DATE这一类）

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

指令：v- 指令的作用是当表达式发生改变，响应式改变DOM。

<p v-if="seen">现在你看到我了</p>

有些指令可以有属性

<a v-bind:href="url"></a>
<a :href="url"></a>

<a v-on:click="doSomething">
<a @click="doSomething">

计算属性：（计算的初始值在data里，计算后的值写在computed里）

<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: {
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

以上代码可以用方法写在methods中，两者实现出来效果一样，计算属性走缓存，方法会执行一次。
class与style绑定：
对象语法：

<div v-bind:class="{ active: isActive }"></div>

active 这个 class 存在与否取决于 isActive 是否为 truthy

<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

data: {
  isActive: true,
  hasError: false
}

上下两种写法得到一样的结果

<div v-bind:class="classObject"></div>

data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

还可以给class添加需要计算的计算属性（计算属性写在cocomputed里）

数组语法：

<div v-bind:class="[activeClass, errorClass]"></div>

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

与下方对象语法效果一样

<div v-bind:class="{active:isactiveClass, text-danger:iserroClass}"></div>

data: {
    isactiveClass:true,
    iserroClass:true
}

在数组语法中也可以插入对象语法

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

当在组建中添加class时，不会覆盖根元素的class，在基础上添加。
对象语法添加style

<div v-bind:style="styleObject"></div>

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}