Vue使用小细节点

动态class绑定：
<div class="setting-theme-item" v-for="(item, index) in themeList" :key="index"
    @click="setTheme(index)">
    <div class="preview" :style="{background: item.style.body.background}"
    :class="{'no-border':item.style.body.background !=='#fff'}"></div>
    <div class="text" :class="{'selected': index===defaultTheme.}"> {{item.name}} </div>
</div>
添加text 平级别的css
.text {
    flex: 0 0 20px;
    font-size: 30px;
    color: #ccc;
    &.selected {
        color: #333;
    }
}

----------------Vue的插值表达式，不仅能使用变量，还能使用js表达式，如下----------------

<div>{{name + ' Lee'}}</div>
<div v-text="name + ' Lee'"></div>
<div v-html="name + ' Lee'"></div>

--------------------------------

计算属性，方法，侦听器
var vm = new Vue({
	el: '#app',
	data: {
		firstName: 'Dell',
		lastName: 'Tom',
		fullName: 'Dell Tom'
	},
	watch: {
		// 当firstName改变，修改fullName的值
		firstName：function() {
			this.fullName = this.firstName + ' ' + this.lastName;  
		},
		lastName: function () {
			this.fullName = this.firstName + ' ' + this.lastName;  
		}
	}
	// 计算属性:有缓存机制(当依赖的元素，没有改变就不会再重新计算，用之前计算的结果，提高性能)
	computed: {
		fullName: function() {
			return this.firstName + ' ' + this.lastName  
		}
	},
	// computed属性的get set方法的添加
	computed: {
		fullName: {
			get: function() {
				return this.firstName + ' ' + this.lastName  
			},
			set: function(value) {
				// 改变相关联的值
				var arr = value.split(" ")
				this.firstName = arr[0]
				this.lastName = arr[1]
			}
		}
	}
})

Vue style样式的绑定（对象，数组2种形式）

Vue的 css样式绑定
// 1.class的对象绑定
// div上面有个class，class的名字是activated，
它到底现不现实取决于数据里面的isActivated变量
<div @click='handleDivClick'
	:class="{activated: isActivated}">
	Hello Tom
</div>

// 2.class和数组相绑定
div 元素上会显示一个class，显示的class是activated变量的内容
<div id="app">
    <div @click='handleDivClick'
         :class="[activated, activatedOne]">
         Hello Tom
    </div>
</div>
<script>
	var app = new Vue({
		el: '#app',
		data: {
			activated: "",
			 activatedOne: "activated-one"
		},
		methods: {
			handleDivClick() {
				this.activated = (this.activated === 'activated'? "": 'activated')
			}
		}
	})
</script>

// 3.style改变样式
<div id="app">
	<div :style="styleObj" @click="handlerDivClick">
		Hello Jim
	</div>
</div>
<script>
	var app = new Vue({
		el: '#app',
		data: {
			styleObj: {
				color:'black'
			}
		},
		methods: {
			handlerDivClick() {
				this.styleObj.color =  this.styleObj.color==='black'? 'red': 'black';
			}
		}
	})
// 使用数组的形式
<div :style="[styleObj, {fontSize: '40px'}]" @click="handlerDivClick">
	Hello Jim
</div> 

条件渲染注意点：

条件渲染：v-if，v-show
v-if
v-else-if
v-else 一定要挨着，中间不能有其他的元素

页面会尽量复用里面的dom，使用key值的形式，可以避免这个问题。
    <div id="app">
        <div v-if="show">
            用户名：<input key='username'>
        </div> 
        <div v-else>
            邮箱：<input key='email'>
        </div> 
    </div>

 数组的遍历和对象属性的遍历

数组循环：
v-for条件循环, 带上key（唯一的一个值，尽量不使用index）
<div v-for='(item, index) in list' 
	:key='item.id'>
	{{item}}
<div>
数组遍历的方法：
pop 删除最后一项
push 增加一条
shift  第一项删除掉
unshift 往数组第一项，加一点内容
splice 截取数组
sort 排序
reverse 数组取反。

// 删除一条，并增加一条
vm.list.splice(1, 2, {id:'333', text:"TomCat"})

// 改变引用地址，修改列表内容，直接让list引用，指向另外一个数组。
template模板占位符，当列表有多个元素显示，使用template，可以减少div的层级。
template不会被真正渲染到页面上。
<template v-for="(item, index) of list" :key="item.id">
	<div>{{item.text}}</div>
	<span>{{item.price}}</div>
</template>


对象属性的循环：
data: {
	userInfo: {
		name: 'Tom',
		age: 22,
		gender: "male",
		salary:12000
	}
}
<div v-for='(item,key, index) of userInfo' >
	{{item}} --{{key}}--{{index}}
<div>

--Vue的set方法---

Vue的set方法
data: {
	userInfo: {
		name: 'Tom',
		age: 22,
		gender: "male",
		salary:12000
	}
}
<div v-for='(item,key, index) of userInfo' >
	{{item}} --{{key}}--{{index}}
<div>

Vue.set(vm.userInfo, 'address', 'BeiJing')
vm.$set(vm.userInfo, 'address', 'TianJing')

数组的set方法
data: {
	userInfo: [1,2,3,4]
}
Vue.set(vm.userInfo, 1, 5)
vm.$set(vm.userInfo, 2, 16)