Vue学习第三周 v-bind,v-on

v-bind修改class与style

通过使用v-bind，修改html元素属性。

绑定data中的boolean类型的数据，控制class是否添加。

<div :class="{ ‘active’: isActice}"></div>

data:{
	isActive:true
}

绑定computed属性，返回复杂逻辑。

<div :class="classes"></div>

computed:{
	classes :function(){
		reutrn {
			active:this.isActive && !this.error,
			‘text-tail’ : this.error && this.error.type === ’fail’
		}
	}
}

绑定一个Object类型的对象，或者使用method也可以。

绑定数组

<div :class="[activeCls,errorCls]"></div>
data:{
	activeCls:’active’,
	errorCls:’error’
}

使用三元表达式切换

<div :class="[isActive?activeCls:’’,errorCls]"></div>

数组结合对象语法

<div :class="[{‘active’:isActive},errorCls]"></div>

在组件上直接使用class或者:class样式会直接添加在根元素上修改style的写法与class类似。
vue1.0+的版本时，可以直接在属性中写双括号表达式（不写v-bind），vue2.0不行了。

内置指令

V-cloak

这个指令不需要表达式，一般与css联用防止页面数据加载慢导致双括号表达式一闪而过（但是这种情况好像很少遇到，估计是因为我用的都是webpack或者vue-route，没有html元素导致的）。

<div id="app" v-cloak>
{{message}}
</div>
<script>
var app = new Vue({
	el:"#app",
	data:{
		message:’这是一段文本’
	}
});
</sctipt>

CSS中添加
[v-cloak] {
  display: none;
}

v-once

也是一个不需要表达式的指令。定义大的元素只渲染一次，不随着数据的变化而重新渲染。可以用于提高页面性能，节省不必要的开支。

<div>
<span v-once>{{message}}</span>
</div>

条件指令

v-if v-else v-else-if
逻辑与其他的语言里面的if判断类似
这里值得一提的主要是vue渲染元素会尽可能的复用元素，而不是重新渲染。要防止复用需要给元素定义唯一的key.

<template v-if="type ===’name’">
	<input placeholder="输入用户名"/>
</template>
<template v-else>
	<input placeholder="输入邮箱"/>
</template>

这里没定义key，当if判断切换时，输入框中的输入内容不会改变，除非加上唯一的key.

<input placeholder="输入用户名" key="name-input"/>

v-show

展示或隐藏元素。相当于修改display:none或者display:block。页面元素会被生成，但是通过css进行隐藏或展示。当条件会被频繁切换的时候，使用v-show更加节约性能。v-if会导致元素创建或者删除，性能开销比较大。

列表渲染

v-for

渲染列表

使用in或者of从列表中获取元素 item in items 或者 item of items。

<li  v-for=" book in books">{{ book.name }}</li>

data:{
	books:[
		{name : a },
		{name : b },
		{name : c}
		]
}

当需要获取元素下标的时候可以加上括号，括号中第一个元素是对象，第二个元素是索引
(item,index) in items
这里vue1和vue2两个版本有点差异。
vue1的括号中第一个元素是索引，第二个元素是对象(index, item) in items
vue1的时候如果只定义了一个元素，那么内部的表达式中可以使用$index来获取元素下标，如：

<div v-for="item in items">
{{item}} {{$index}}
</div>

但是vue2的时候取消了$index的用法。

渲染对象（map）

当只定义了一个元素的时候，该元素对应value值

<span v-for="value in user">
{{value}}
</span>

有两个可选参数key和index分别是键与索引

<span v-for="(value, key, index) in user">
{{index}}  {{key}}  {{value}}
</span>

渲染数字

<span v-for= “ n in 10">
</span>

这里会输出
1 2 3 4 5 6 7 8 9 10

数组更新
当数据变化，v-for的视图也会变化。
改变原始数组的方法:
push,pop,shift,unshift,slice,sort,reverse
返回一个新数组的方法:
filter,concat,slice

var app=new Vue({
el:"#app",
data:{
	books:[
		{name:’A’},
		{name:’B’}
	]
}
});
app.books = app.books.filter(function(item){
	return item.name.match(/A/);
})

渲染生成的结果就会将不含A的元素给过滤掉。
Vue在检测数组变化的手不会渲染整个列表，会最大化的复用DOM元素。可以放心使用新数组替代旧数组。但是有两种数组变化Vue检测不到：
1、通过索引直接修改值 app.books[3]={…}
2、修改数组的长度 app.books.length=3
处理第一种变化可以使用Vue自带的set方法进行插值操作

Vue.set(app.books,3,{name:'C'})

当使用webpack，在组建中插值。则使用$set方法

this.$set(app.books,3,{name:'C'})

第二种变化可以使用slice方法来实现效果。

过滤与排序
当原数组不想变，可以只用计算属性或者过滤器来返回数据。
方法与事件
@click调用methods中的方法，可以不加括号。原生的DOM事件可以通$event传入到方法中。

<div @click="test($event)"></div>

methods:{
	test:function(event){
		event.preventDefault();
	}
}

或者是在v-on绑定的事件后加修饰符来控制

<!--  阻止事件冒泡   -->
<a @click.stop="test"></a>

<!--   提交事件不重新加载页面  -->
<form @click.prevent="test"></form>

<!--   多个修饰符联用  -->
<a @click.stop.prevent="test"></a>

<!--   只有修饰符  -->
<a @click.prevent></a>

<!--  添加事件侦听器时使用事件捕获模式   -->
<a @click.capture="test"></a>

<!--  只当事件在该元素本身（而不是子元素）触发时触发回调   -->
<a @click.self="test"></a>

<!--  只加载一次  -->
<a @click.once="test"></a>

在表单元素上监昕键盘事件时，还可以使用按键修饰符

<!--- 当键入keyCode是13的时候调用submit方法 -->
<input @keyup.13="submit">
<!---也可以自定义按键名 -->
Vue.config.keyCodes.fl = 112;

除了具体的某个keyCode外， Vue 还提供了一些快捷名称，以下是全部的别名：
• .enter
• .tab
• .delete （捕获“删除”和“退格”键）
• .esc
• .space
• .up
• .down
• .left
• .right
这些按键修饰符也可以组合使用，或和鼠标一起配合使用：
• .ctrl
• .alt
• .shift
• .meta (Mac下是Command键， Windows下是窗口键）