我们在vue1.0时,我们通常自己创造一些指令(例如v-zhou)写,那么我们vue-cli怎么写自己自定义指令呢?
下面我将介绍写法
方法/步骤
-
第一步在你自己的组件(a.vue) 引入vue
代码如下:
import Vue from 'vue'
具体代码:
<template>
</template>
<script>
import Vue from 'vue'
</script>
<style>
</style>
-
第二步 引入之后,你再模板里面申明,你自定义指令的名字。例如v-zhou
代码:
<div v-zhou="color" >
百度
</div>
具体代码:
<template>
</template>
<script>
import Vue from 'vue'
</script>
<style>
</style>
-
第三步 你 引入你需要data属性,例如你定义指令是像bootstrap一样将button按钮变色,那么你必须再data里面声明代码如下:
export default {
data(){
return {
num:123,
color:"green"
}
}
-
第四步 你得考虑自定义指令要生效必须依赖vue的
Vue.directive指令代码如下:
Vue.directive('zhou',function(el,binding){
el.style="color:"+binding.value;
})
注:这里el一般为固定的写法,照抄即可,binding也基本差不多
这句代码的意思就是通过binging来获得上面data里面color值,而el.style指的就是你的值赋予css颜色样式的
具体代码:
<template>
<div v-zhou="color" >
百度
</div>
</template>
<script>
import Vue from 'vue'
Vue.directive('zhou',function(el,binding){
el.style="color:"+binding.value;
})
export default {
data(){
return {
num:123,
color:"red"
}
}
}
</script>
<style>
</style>
注:当你cnpm run dev输出查看百度是否变绿,如果是则成功。