vue?filters和directives訪問(wèn)this的問(wèn)題詳解
vue filters和directives訪問(wèn)this
記錄一次奇葩的需求。
要求自定義一個(gè)指令,點(diǎn)擊后能跳轉(zhuǎn)指定路由。
directives和filters壓根就沒(méi)法訪問(wèn)this。
腦袋都想破了。
不廢話了,上代碼。
<template> <div> <div v-join="(divData, that)">tag標(biāo)簽</div> <p>{{divData}}</p> <p>{{divData | sum(that)}}</p> </div> </template> <script> export default { name: 'Main', data(){ return { divData:'傳入的值', that: this, filtersData: '過(guò)濾器的值' } }, filters: { sum(val, that){ return `${val}和${that.filtersData}` } }, directives: { join: { inserted(el, binding){ }, bind(el, binding){ console.log('------2') el.addEventListener('click', function(){ binding.value.that.$router.push({ path: '/aside' }) }) } } } } </script>
解決方案是在data中定義一個(gè)that變量指向this,再將這個(gè)變量當(dāng)做參數(shù)傳進(jìn)directives,在directives內(nèi)部就可以訪問(wèn)到this了,filters同理。
directives所遇小bug
自己在利用vue寫(xiě)todoList的時(shí)候遇到一個(gè)小bug,記錄一下
寫(xiě)個(gè)指令,當(dāng)雙擊進(jìn)行編輯todo,讓其自動(dòng)聚焦,結(jié)果效果如下,
代碼如下:
directives: { focus(el,bindings) { if(bindings.value) { el.focus(); } } }
<input v-focus="todo == t" type="text" v-show="todo == t" v-model="todo.title" @blur="reset" @keyup.13="reset" >
多方查找原因,把自定義v-focus指令放末尾,就好了,代碼如下:
<input type="text" v-show="todo == t" v-model="todo.title" @blur="reset" @keyup.13="reset" v-focus="todo == t">
是否自定義指令都應(yīng)放后面呢?這就需要以后驗(yàn)證了
完整代碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css"> <style> .del{ text-decoration: line-through; color: #ccc!important; } </style> </head> <body> <div id="app"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="panel panel-warning"> <div class="panel-heading"> <input type="text" v-model="value" class="form-control" @keydown.enter="add"> </div> <div class="panel-body"> <ul class="list-group"> <li class="list-group-item" @dblclick="change(todo)" v-for="(todo,index) in todos" :key="index"> <div v-show="todo != t" :class="{del: todo.isSelected}"> <input type="checkbox" v-model="todo.isSelected">{{todo.title}} <button class="pull-right btn btn-danger btn-xs" @click="remove(index)">⨂</button> </div> <input type="text" v-show="todo == t" v-model="todo.title" @blur="reset" @keyup.13="reset" v-focus="todo == t"> <!-- 下面是錯(cuò)誤代碼,可以把上面的注釋掉打開(kāi)下面的對(duì)比下 --> <!-- <input v-focus="todo == t" type="text" v-show="todo == t" v-model="todo.title" @blur="reset" @keyup.13="reset" > --> </li> </ul> </div> <div class="panel-footer"> <ul class="nav nav-pills"> <li role="presentation" class="active"><a href="#">全部</a></li> <li role="presentation"><a href="#">已完成</a></li> <li role="presentation"><a href="#">未完成</a></li> </ul> </div> </div> </div> </div> </div> </div> <script src="../node_modules/vue/dist/vue.js"></script> <script> let vm = new Vue({ el:'#app', data:{ todos:[], hash:'complete',//路徑切換時(shí) 獲取的hash值 value:'',// 輸入框中需要增加的內(nèi)容, t:''//當(dāng)前點(diǎn)擊的那一個(gè) }, created(){ //當(dāng)vue創(chuàng)建時(shí)執(zhí)行的方法 //如果storage有 就用這里的值 沒(méi)有就是空數(shù)組 this.todos = JSON.parse(localStorage.getItem('todos')) || [{isSelected:true,title:'晚上回去睡覺(jué)'}]; }, watch:{ //watch默認(rèn) 只監(jiān)控一層,例如 todos 可以監(jiān)控?cái)?shù)組的變化,監(jiān)控不到對(duì)象的變化 todos:{ handler(){ localStorage.setItem('todos',JSON.stringify(this.todos)); }, deep:true } }, methods:{ addTodo(){ let todo = {isSelected:false,title:this.value}; this.todos.push(todo); this.value = ''; }, remove(todo){ this.todos = this.todos.filter(item=>todo!==item); }, change(todo){ //todo代表的是我當(dāng)前點(diǎn)擊的是哪一個(gè),存儲(chǔ)當(dāng)前點(diǎn)擊的這一項(xiàng) this.t = todo; }, reset(){ this.t = ''; } }, computed:{ lists(){ if(this.hash === 'complete'){ return this.todos; } if(this.hash === 'finish'){ return this.todos.filter(item=>item.isSelected) } if(this.hash === 'unfinish'){ return this.todos.filter(item=>!item.isSelected) } }, total(){ //求出數(shù)組中為false的個(gè)數(shù) //將數(shù)組中的true全部干掉,求出剩余l(xiāng)ength return this.todos.filter(item=>!item.isSelected).length; } }, directives:{ //指令,就是操作dom focus(el,bindings){ //bindings中有一個(gè)value屬性 代表的是指令對(duì)應(yīng)的值v-auto-focus="值" if(bindings.value){ el.focus(); } //console.log(el,bindings); } } }); let listener = () => { let hash = window.location.hash.slice(1) || 'complete'; //如果打開(kāi)頁(yè)面沒(méi)有hash默認(rèn)是全部 vm.hash = hash; }; listener(); //頁(yè)面一加載 就需要獲取一次hash值,否則可能導(dǎo)致 回到默認(rèn)hash window.addEventListener('hashchange',listener,false); </script> </body> </html>
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- Vue3實(shí)現(xiàn)全局loading指令的示例詳解
- vue全局注冊(cè)自定義指令防抖解析
- vue全局自定義指令和局部自定義指令的使用
- Vue全局自定義指令Modal拖拽的實(shí)踐
- vue全局自定義指令-元素拖拽的實(shí)現(xiàn)代碼
- vue directive定義全局和局部指令及指令簡(jiǎn)寫(xiě)
- 對(duì)Vue2 自定義全局指令Vue.directive和指令的生命周期介紹
- vue3的自定義指令directives實(shí)現(xiàn)
- vue 自定義指令directives及其常用鉤子函數(shù)說(shuō)明
- vue通過(guò)指令(directives)實(shí)現(xiàn)點(diǎn)擊空白處收起下拉框
- 詳解vue + vuex + directives實(shí)現(xiàn)權(quán)限按鈕的思路
- vue全局指令文件 directives詳解
相關(guān)文章
el-table表格點(diǎn)擊該行任意位置時(shí)也勾選上其前面的復(fù)選框
本文主要介紹了在el-table組件中實(shí)現(xiàn)雙擊表格某一行任意位置自動(dòng)勾選復(fù)選框的功能,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2025-02-02Vue實(shí)現(xiàn)Echarts圖表寬高自適應(yīng)的實(shí)踐
本文主要介紹了Vue實(shí)現(xiàn)Echarts圖表寬高自適應(yīng)的實(shí)踐,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-11-11Vue動(dòng)態(tài)組件component的深度使用說(shuō)明
這篇文章主要介紹了Vue動(dòng)態(tài)組件component的深度使用說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04Vue簡(jiǎn)易版無(wú)限加載組件實(shí)現(xiàn)原理與示例代碼
這篇文章主要給大家介紹了關(guān)于Vue簡(jiǎn)易版無(wú)限加載組件實(shí)現(xiàn)原理與示例代碼的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-07-07vue踩坑記之npm?install報(bào)錯(cuò)問(wèn)題解決總結(jié)
當(dāng)你跑起一個(gè)項(xiàng)目的時(shí)候,第一步需要先安裝依賴npm install,下面這篇文章主要給大家介紹了關(guān)于vue踩坑之npm?install報(bào)錯(cuò)問(wèn)題解決的相關(guān)資料,需要的朋友可以參考下2022-06-06Vue3對(duì)比Vue2的優(yōu)點(diǎn)總結(jié)
vue3解決了vue2的一些缺陷與弊端,學(xué)習(xí)新的技術(shù)是很有必要的,本文總結(jié)了一些vue3的優(yōu)點(diǎn),希望各位能盡快轉(zhuǎn)入vue3的使用中2021-06-06Vue filter 過(guò)濾當(dāng)前時(shí)間 實(shí)現(xiàn)實(shí)時(shí)更新效果
這篇文章主要介紹了Vue filter 過(guò)濾當(dāng)前時(shí)間 實(shí)現(xiàn)實(shí)時(shí)更新效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12Vue路由跳轉(zhuǎn)方式區(qū)別匯總(push,replace,go)
vue項(xiàng)目中點(diǎn)擊router-link標(biāo)簽鏈接都屬于聲明式導(dǎo)航。vue項(xiàng)目中編程式導(dǎo)航有this.$router.push(),this.$router.replace(),this.$router.go()???????。這篇文章主要介紹了Vue路由跳轉(zhuǎn)方式區(qū)別匯總(push,replace,go)2022-12-12