vue中的for循環以及自定義指令解讀
vue for循環及自定義指令
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>
在指令對象中,可以隻用this來獲取一些有用的參數:
this.el
: 指令綁定的元素this.vm
:指令的上下文viewModelthis.expression
: 指令的表達式this.arg
:指令的參數this.name
: 指令的名字this.modifiers
:一個對象,指令的修飾符this.descriptor
: 一個對象,指令的解析結果
vue自定義指令動態參數
通過自定義指令中的修飾符的key作為值,更改顯示的顏色
動態指令參數
當參數是動態的時候。
main.js
//當參數的值是動態的時候 Vue.directive('color2', { bind: function(el, binding) { el.style.color = binding.value; } }) Vue.directive('color3', { bind: function(el, binding) { el.style.color = binding.arg; } })
template.vue中
<template> <div class="demo"> <!-- value --> <p v-color2='purpleUser'><i class="el-icon-user-solid"></i></p> <p v-color2='redUser'><i class="el-icon-user-solid"></i></p> <p v-color2='greenUser'><i class="el-icon-user-solid"></i></p> <!-- arg --> <p v-color3:[purpleUser]><i class="el-icon-user-solid"></i></p> <p v-color3:[redUser]><i class="el-icon-user-solid"></i></p> <p v-color3:[greenUser]><i class="el-icon-user-solid"></i></p> </div> </template> <script> export default { data() { return { purpleUser: 'purple', redUser: 'red', greenUser: 'green' } }, created() {}, methods: {} } </script> <style lange='scss' scoped> p { display: inline-block; font-size: 40px; } </style>
參數是靜態的,將key的值作為value,改變顏色
main.js
Vue.directive('color', { bind: function(el, binding) { const color = Object.keys(binding.modifiers)[0]; //將key的值作為value,改變顏色,Object.keys獲取key的值; el.style.color = color; } })
template.vue中
<template> <div class="demo"> <p v-color.purple><i class="el-icon-user-solid"></i></p> <p v-color.red><i class="el-icon-user-solid"></i></p> <p v-color.green><i class="el-icon-user-solid"></i></p> </div> </template> <script> export default { data() { return {} }, created() {}, methods: {} } </script> <style lange='scss' scoped> p { display: inline-block; font-size: 40px; } </style>
以上的方法,最終實現效果是一樣的。
好瞭,這些僅為個人經驗,希望能給大傢一個參考,也希望大傢多多支持WalkonNet。
推薦閱讀:
- vue的自定義指令傳參方式
- vue2.x與vue3.x中自定義指令詳解(最新推薦)
- Vue如何使用CSS自定義變量
- 詳解Vue自定義指令及使用
- vue 自定義指令directives及其常用鉤子函數說明