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'  }}