CSS与style的绑定
css的绑定:
<div class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
或:
<div v-bind:class="[{ active: isActive }, 'text-danger']"></div>
data: {
isActive: true,
hasError: false
}
////////第一种 渲染结果为: <div class="static active"></div>(active,'text-danger'为CSS类名)
<div v-bind:class="classObject"></div>
data: {
classObject: {
active: true,
'text-danger': false
}
}
///////第二种 渲染结果同上
<div v-bind:class="classObject"></div>
data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}
/////第三种 用计算属性的值绑定
内联样式的绑定:
////同上面一样有对象写法
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30 //这里没单引号
}
或更简洁的:
<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px' //这里有单引号
}
}
也可以将值与计算属性(computed)绑定
/////也可以与数组绑定 方法也css一样
(样式)属性名有浏览器兼容问题时 vue会自动侦测并添加前缀
属性值有兼容问题时 :
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
这样 vue只会返回浏览器能识别的最后一个值
最后提醒:重复使用的样式可以将其自定义为组件,提高代码整洁度
条件渲染
//使用
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
//与组件结合
<template v-if="Math.random() > 0.5">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
//v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
//细节
<template v-if="isNameLogin">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>
//key的作用:在这个模板中vue的优化机制会识别到条件中 lable与input是可重用的,不加key导致切换
//isNameLogin值时 lable,input不会从新渲染(看效果来决定是否添加)
//是否显示元素也可以用v-show指令 v-show指令只是改变元素的display样式(所以v-show不能用于自定义模板上) 渲染是肯定要做的 看效果选择v-if 与 v-show
列表渲染
<ul id="example-2">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
var example2 = new Vue({
el: '#example-2',
data: {
parentMessage: 'Parent',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
//其中index是可选参数'(item, index) in items'中'in'可改为'of'
迭代对象:
<div v-for="(value, key, index) in object">
{{ index }}. {{ key }}: {{ value }}
</div>
new Vue({
el: '#v-for-object',
data: {
object: {
firstName: 'John',
lastName: 'Doe',
age: 30
}
}
})
//其中一个第二个参数为key 第三个为index都是可选参数
items也可以为整数或计算属性
vue重新渲染数组的优化机制是:直接利用已有的相同元素进行修改样式(少的再补,多的就删) 当数组数据项位置改变时就可能不适用这种方式 这时我们给每个数据项添加"id_diy" 再
<div v-for="item in items" :key="item.id">
<!-- 内容 -->
</div>
这样Vue就会根据id_diy来跟踪数组渲染出来的Dom节点
数组跟新检测问题
vue会观察数组的push(),pop(),shift(),unshift(),splice(),sort(),reverse()方法 并更新视图
而有些方法如filter(),concat(),和slice()这些方法不会改变原数组 只是返回一个新数组 从而导致视图不更新,可以将返回值赋给原数组,从而更新视图
注意,由于javascript的限制，Vue 不能检测以下变动的数组：
- 当你利用索引直接设置一个项时，例如：
vm.items[indexOfItem] = newValue - 当你修改数组的长度时，例如：
vm.items.length = newLength
<!-- 实现值的修改 -->
// Vue.set,vue.$set也一样
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)
<!-- 直接缩短数组 -->
vm.items.splice(newLength)
对象更新检测问题
同样由于javascript的限制,Vue 不能检测对象属性的添加或删除
可以用Vue.set(object, key, value)
当你需要用Object.assign() 或_.extend()添加多个新属性时 可以调用这些方法再将返回值赋给原对象
事件处理
vue提供了事件修饰来设置事件的行为,按键修饰来确定按键的状态(按下,松开)与各个按键(<input @keyup.alt.67="clear">:alt+c松开状态)
表单输入绑定
用v-model指令把输入与属性绑定起来 输入可以为radio,checkbox,text,select 当这些值改变绑定的属性的值也会改变,v-model还可以加'.lazy'(change改变属性值而不是input),'.number','trim'修饰符