Vue.js 笔记04

关键词：内置指令，方法与事件，修饰符

Vue.js的指令是带有特殊前缀"v-"的HTML特性，它绑定一个表达式，并将一些特性应用到DOM上

基本指令

v-cloak

v-cloak不需要表达式，它会在Vue实例结束编译时从绑定的HTML元素上移除，常和css的 display:none; 配合使用，可以用来解决初始化慢而导致的页面闪动，在具有工程化的项目里则不再需要它

<style>
	[v-cloak]{
		display: none;
	}
</style>
<div id="app" v-cloak>
	{{message}}
</div>

v-once

v-once也是一个不需要表达式的指令，作用是定义它的元素或组件只被渲染一次。首次渲染后，不会再随数据的变化而重新渲染，成为了一个静态内容

<div id="app">
	<span v-once>{{message}}</span>
</div>

条件渲染指令

v-if、v-else-if、v-else

与JavaScript条件语句的if、else、else if类似，Vue.js的条件指令可以根据表达式的值在DOM中渲染或销毁元素/组件

<div id="app">
	<p v-if='status === 1'>当status为1时显示该行</p>
	<p v-else-if='status === 2'>当status为2时显示该行</p>
	<p v-else>其余情况显示这一行</p>
</div>

表达式的值为真时，当前元素/组件及其所有子节点将被渲染，为假时则被移除

并且，Vue在渲染元素时，处于效率考虑，会尽可能地复用已有的元素而并非全部重新渲染，如果你不想要用上这个特性，可以使用Vue.js提供的key属性，它可以让你自己决定是否要复用元素，key的值必须是唯一的，例如

<div id="app">
	<template v-if='status === 1'>
		<label>用户名</label>
		<input placeholder="输入用户名 " key="name-input" />
	</template>
	<template v-else>
		<label>邮箱</label>
		<input placeholder="输入邮箱 " key="mail-input" />
	</template>
</div>

这样，当status发生变化时，input框里的内容都会随之改变，去掉key属性则会导致input框被复用，内容不发生改变

v-show

v-show和v-if的用法基本一致，但v-show改变的是元素的CSS属性display，而v-if改变的是元素是否存在。当v-show的表达式值为false时，它会添加元素的内联样式 display:none; 用来隐藏该元素。

因此，v-if才是真正意义上的条件渲染。

v-for

当需要遍历一个数组或枚举一个对象时，需要用到列表渲染指令v-for。它的表达式需要结合in来使用，类似item in items的形式，例如：

<div id="app">
	<ul>
		<li v-for="book in books">{{book.name}}</li>
	</ul>
</div>
<script>
	var vm = new Vue({
		el:'#app',
		data:{
			books:[
				{name:'Vue.js实战'},
				{name:'ES6从入门到入土'},
				{name:'我爱CSS'}
			]
		}
	})
</script>

在表达式中，books是数据，book是当前数组元素的别名，循环出的每个<li>内的元素都可以访问到对应的当前数据book。

v-for的表达式支持一个可选参数作为当前项的索引，例如：

<div id="app">
	<ul>
		<li v-for="(book,index) in books">{{index}}----{{book.name}}</li>
	</ul>
</div>

在例子中，括号里的第二项index会被渲染为当前项的对应数组下标（索引），渲染结果如下：

除了数组外，对象的属性也是可以遍历的，例如

<div id="app">
	<span v-for="value in user">{{value}}</span>
</div>
<script>
	var vm = new Vue({
		el:'#app',
		data:{
			user:{
				name:'bswaterb',
				gender:'男',
				age:20
			}
		}
	})
</script>

渲染结果为

遍历对象属性时，有两个可选参数，分别是键名和索引:

<div id="app">
	<ul>
		<li v-for="(value,key,index) in user">
			{{index}}-{{key}}:{{value}}
		</li>
	</ul>
</div>

渲染结果为：

v-for还可以用来迭代整数

<div id="app">
	<span v-for="n in 10">{{n}}</span>
</div>

渲染后会输出从1到10的整数

当修改数组时，Vue会检测到数据变化，所以用v-for渲染的视图也会立即更新。
但如果通过索引直接设置项，例如vm.books[3]={...}或vm.books.length=1，Vue是不能检测到的，也不会触发视图更新。

Vue包含了一组观察数组变异的方法，使用它们改变数组也会触发视图更新

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

还有一些方法不会改变原数组，例如

filter()
concat()
slice()

它们返回的是一个新数组

过滤与排序

当不想改变原数组，而想通过一个数组的副本来做过滤或排序的显示时，可以使用计算属性来返回过滤或排序后的数组，例如：

<div id="app">
	<ul>
		<li v-for="book in filterBooks">{{book.name}}</li>
	</ul>
</div>
<script>
	var vm = new Vue({
		el:'#app',
		data:{
			books:[
				{name:'Vue.js实战'},
				{name:'ES6从入门到入土'},
				{name:'我爱CSS'}
			]
		},
		computed:{
			filterBooks(){
				return this.books.filter(function(book){
					return book.name.match(/从入门到入土/);
				})
			}
		}
	})

如这个例子，filter()中会匹配books.name的值中含有“从入门到入土”关键字的项，将它们返回。此时，计算属性filterBooks依赖books，但是不会修改books

方法与事件

基本用法

<div id="app">
	点击次数:{{counter}}
	<button @click="counter++">点我+1</button>
</div>

或

<div id="app">
	点击次数:{{counter}}
	<button @click="addCounter">点我+1</button>
</div>
<script>
	var vm = new Vue({
		el:'#app',
		data:{
			counter:0
		},
		methods:{
			addCounter(){
				this.counter++;
			}
		}
	})
</script>

第一种写法直接在@click中使用javaScript语句，第二种写法则是调用methods中的函数

可以在方法中添加参数，并在调用处附上参数值以达到方法复用的效果

<div id="app">
	点击次数:{{counter}}
	<button @click="addCounter(1)">点我+1</button>
	<button @click="addCounter(10)">点我+10</button>
</div>
<script>
	var vm = new Vue({
		el:'#app',
		data:{
			counter:0
		},
		methods:{
			addCounter(value){
				this.counter+=value;
			}
		}
	})
</script>

修饰符

在@绑定的事件后加小圆点"."，再跟一个后缀来使用修饰符，Vue支持以下修饰符：

.stop 阻止单击事件冒泡
.prevent 阻止事件不再重载页面
.capture 添加事件侦听器时使用事件捕获模式
.self 只当事件发生在该元素本身触发时触发回调
.once 只触发一次

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

<input @keyup.13 = 'submit' />只有在keyCode是13时才会调用submit

也可以自定义配置具体按键

Vue.config.keyCodes.f1 = 112;

定义完成后，使用@keyup.f1即会监控keyCode为112的按键

除了某个keyCode外，Vue还提供了一些快捷名称

.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right

这些按键修饰符也可以组合使用，或和鼠标一起配合使用：

.ctrl
.alt
.shift
.meta (MacOS下是Command键，Windows下是win键)

例如：

<input @keyup.shift.83 = 'handleSave' />同时按下shift和s才会触发
<input @keyup.ctrl = 'doSomething' />按住ctrl+点击时才会触发