Vue.js 笔记04

发布于 2020-05-26  313 次阅读


关键词:内置指令,方法与事件,修饰符

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+点击时才会触发


何为BS?B-big,S-shui。