Vue.js 笔记03

关键词：v-bind 及 class 与 style 绑定

回顾一下之前写的v-bind实例：

<div id="app">
    <a v-bind:href="url">链接</a>
    <img v-bind:src="imgUrl">
</div>
<script>
    var vm = new Vue({
        el:'#app',
            data:{
                url:'https://www.github.com',
                imgUrl:'http://xx.xx/img.png'
            }
    })
</script>

上面这个例子中，链接href和图片src属性都被动态设置了，当数据变化时，就会重新渲染
元素样式名称css和内联样式style的动态绑定是最常见的数据绑定需求，Vue.js中，增强了对class以及style的绑定

绑定class的几种方法

对象语法

<div id="app">
    <div :class="{'active':isActive}"></div>
    <div class="active"></div>
</div>
<script>
    var vm = new Vue({
        el:'#app',
            data:{
                isActive:true
            }
</script>

当:class内的表达式各项为真时，对应的类名会加载。
根据以上语句，最终的渲染结果应是

<div class="active"></div>

对象中也可以传入多个属性，来动态切换class，:class可以和普通class共存

<div id="app">
	<div class="static" :class="{'active':isActive,'error':isError}"></div>
</div>
<script>
	var vm = new Vue({
		el:'#app',
		data:{
			isActive:true,
			isError:false
		}
	})
</script>

以上语句渲染结果为

<div class="static active"></div>

当:class的表达式过长或逻辑复杂时，还可以绑定一个计算属性，例如

<div id="app">
	<div :class="classes"></div>
</div>
<script>
	var vm = new Vue({
		el:'#app',
		data:{
			isActive:true,
			error:null
		},
		computed:{
			classes(){
				return {
					active: this.isActive && !this.error,
					'text-fail':this.error && this.error.type === 'fail'
				}
			}
		}
	})

(啊这，缩进丑的一批）

除了计算属性，还可以直接绑定一个Object类型的数据，或者用类似计算属性的methods方法

数组语法

当需要应用多个class时，可以使用数组语法，给:class绑定一个数组，应用一个class列表：

<div id="app">
	<div :class="[activeCls,errorCls]"></div>
</div>
<script>
	var vm = new Vue({
		el:'#app',
		data:{
			activeCls:'active',
			errorCls:'error'
		}
        })
</script>

渲染后，结果为

<div class="active error"></div>

也可以使用三元表达式来根据条件切换class，例如

<div id="app">
	<div :class="[isActive ? activeCls : '' , errorCls]"></div>
</div>
<script>
	var vm = new Vue({
		el:'#app',
		data:{
			isActive:true
			activeCls:'active',
			errorCls:'error'
		}
         })
</script>

还可以继续套娃，比如在数组语法中使用对象语法

<div id="app">
	<div :class="[{'active':isActive} , errorCls]"></div>
</div>

来一个最狠的终极套娃

<div id="app">
	<div :class="classes"></div>
</div>
<script>
	var vm = new Vue({
		el:'#app',
		data:{
			size:'large',
			disabled:true
		},
		computed:{
			classes(){
				return [
					'btn',
					{
						['btn'+this.size]:this.size !== '',
						['btn-disabled']:this.disabled
					}
				];
			}
		}
	})
</script>

以上示例中的样式btn会始终应用，当数据size不为空时，会应用样式前缀btn-，后加size的值；当数据disabled为真时，会应用btn-disabled样式

在组件上使用

ps:这里依赖Vue的组件相关内容，如果还未接触这部分内容，可以先跳过。

如果直接在自定义组件上使用class或:class，样式规则会直接应用到这个组件的根元素上，例如声明一个简单的组件：

<script>
	Vue.component('my-component',{
		template:'<p class="article">一些文本</p>'
	});
</script>

在调用这个组件时，应用对象语法或数组语法给组件绑定class，以对象语法为例：

<div id="app">
	<my-component :class="{'active':isActive}"></my-component>
</div>

假如isActive为真，则组件渲染结果为

<p class="article active">一些文本</p>

这种用法仅适用于自定义组件的最外层是一个根元素，否则无效。若不满足这个条件或需要给具体的子元素设置类名，则需要使用组件的props来传值。这些用法同样适用于下一节中绑定内敛样式style的内容。

绑定内联样式

使用v-bind:style（即:style）可以给元素绑定内联样式，方法与:class类似，也有对象语法和数组语法，例如

<div id="app">
	<div :style="{'color':color,'fontSize':fontSize+'px'}">文本</div>
</div>
<script>
	var vm = new Vue({
		el:'#app',
		data:{
			color:'red',
			fontSize:14
		}
	})
</script>

CSS属性名称使用驼峰命名(camelCase)或短横分隔(kebab-case)命名

直接写一长串CSS不便于阅读和维护，所以一般都写在data或computed里，以data为例重写上面这个例子：

<div id="app">
	<div :style="styles">文本</div>
</div>
<script>
	var vm = new Vue({
		el:'#app',
		data:{
			styles:{
				color:'red',
				fontSize:14+'px'
			}
		}
	})
</script>

应用多个样式对象时，可使用数组语法

<div :style="[styleA,styleB]">文本</div>

实际上:style的数组语法不常用，因为往往可以都写进一个对象里，较常用的应是计算属性

另外，使用:style时，Vue.js会自动给特殊的CSS属性名称增加前缀，
比如 transform