vue for循环以及自定义指令_vue 循环中使用自定义指令-优快云博客

本文链接：https://blog.youkuaiyun.com/xkshihaoren/article/details/100867498

v-for

1.v-for用来循环的数组怎么发生变化可以被vue检测到：

push、pop、shift、unshift、splice、sort、reverse等方法可以被检测到
vue对于这些方法的处理是重写了这些方法，并在最后会触发一次notify方法来通知这个array已经发生变化
vue还增加了两个方法来观测array的变化：

$set:如果直接设置array中的元素，不会触发视图的变化
	this.selectArray[1] = 'newValue'  // 不会触发视图变化
	this.selectArray.$set(1, 'newValue') // 会触发视图变化
	
$remove:是splice的语法糖，用来从目标元素中查找并且删除这个元素
	let itemIndex = this.selectArray.indexOf(selectItem)
	this.selectArray.splice(itemIndex,1) // 删除这个元素
	this.selectArray.$remove(selectItem) // 同样效果，不用查找index

vue不能检测到下面数组的变化：

使用索引设置元素：
	this.selectArray[1] = 'newValue'
	解决办法：使用$set方法

修改数据的长度：
	this.selectArray.length = 0
	解决方法：使用空数组来替换：this.selectArray = []

2.使用v-for遍历对象

使用别名
<li v-for = "(key,value) in obj"> {{key}}-{{value}}</li>

不使用别名,使用$key
<li v-for = "value in obj"> {{$key}}-{{value}} </li>

注意：es5无法检测到对象增加新属性，所以vue提供了三个方法来监视对象属性：
$add(key,value)
$set(key,value)
$delete(key)

自定义指令

Vue.directive('directiveName',{
	// 这里就是指令对象的内部
	// 可以使用this来获取有用的参数
	bind: () => {
		//  准备工作：添加事件处理器等
		dom.addEventListener........
	},
	update: (oldVal,newVal) => {
		// 值更新的时候的工作
		//  初始化的时候也会被调用
	},
	unbind: () => {
		// 清理工作，比如接触bind添加的事件处理器
	}

})
或
Vue.directive('directiveName',(value) => {
	// 代替update函数
})

// 使用指令
<div directiveName="argumentValue"></div>