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