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