Vue.directive 自定義指令的問題小結(jié)
更新時間：2018年03月04日 14:11:19 作者：文方草
這篇文章主要介紹了Vue.directive 自定義指令的問題小結(jié),需要的朋友可以參考下
1.今天復(fù)習一下Vue自定義指令的代碼，結(jié)果出現(xiàn)一個很無語的結(jié)果，先貼代碼。
2.
<div id="example" v-change-by="myColor"></div>
<script src="vue.min.js"></script>
<script>
new Vue({
el:"#example",
data:{
msg:"",
myColor:"#000"
}
});
Vue.directive("change-by",{
bind:(el,binding)=>{
el.style.background=binding.value;
}
});
</script>
3.結(jié)果打開頁面，一片空白，寬高都有設(shè)置，div并沒有變黑。檢查代碼怎么都是對的，沒有語法錯誤。然后考慮到是不是vue.min.js文件的問題，然后從官網(wǎng)下載了開發(fā)版，用vue.js。結(jié)果有驚喜的發(fā)現(xiàn)。
4.原來生產(chǎn)版本vue.min.js不支持報錯，真的神坑！
5.終于理解了原因，然后很重要一點就是指令要寫在vue實例化對象前面，要不然會報錯 Failed to resolve directive；最后貼出正確順序代碼
<div id="example" v-change-by="myColor"></div>
<script>
Vue.directive("change-by",{
bind:(el,binding)=>{
el.style.background=binding.value;
}
});
new Vue({
el:"#example",
data:{
msg:"",
myColor:"#000"
}
});
</script>
6.最后輸出頁面，完美...小問題，要注意。
總結(jié)
以上所述是小編給大家介紹的Vue.directive 自定義指令的問題小結(jié)，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于vuex使用方法的相關(guān)資料,主要內(nèi)容包括Vuex的安裝和配置,以及如何在.vue文件中引入和使用Vuex狀態(tài),作者還分享了一種在模塊中存儲狀態(tài)的建議方法,并提供了具體的代碼示例,需要的朋友可以參考下2024-10-10
眾所周知Axios是一個基于promise的HTTP庫,可以用在瀏覽器和 node.js中,下面這篇文章主要給大家介紹了關(guān)于vue2中使用axios及axios攔截器的配置的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-05-05
這篇文章主要為大家介紹了Vue3+vueuse實現(xiàn)放大鏡示例過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了Vue 計算屬性 computed，一般情況下屬性都是放到data中的，但是有些屬性可能是需要經(jīng)過一些邏輯計算后才能得出來，那么我們可以把這類屬性變成計算屬性，下面我們來看看具體實例,需要的朋友可以參考一下2021-10-10
這篇文章主要介紹了vue-cli4.0多環(huán)境配置變量與模式詳解,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-12-12
這篇文章主要介紹了加速vue組件渲染之性能優(yōu)化，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
粘貼可用的element-ui validateField局部校驗
這篇文章主要為大家介紹了粘貼可用element-ui中validateField局部校驗示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
vue中的rules表單校驗規(guī)則使用方法示例詳解 :rules=“rules“
這篇文章主要介紹了vue中的rules表單校驗規(guī)則使用方法示例詳解 :rules=“rules“,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-11-11
這篇文章主要為大家詳細介紹了Vue和原生JS中如何使用自定義字體,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以了解下2024-01-01
Vue ElementUI實現(xiàn):限制輸入框只能輸入正整數(shù)的問題
這篇文章主要介紹了Vue ElementUI實現(xiàn):限制輸入框只能輸入正整數(shù)的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07