自定义指令
除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。 v-xxx
html+css的复用的主要形式是组件
自定义指令的注册
//局部注册,只能在当前页面使用
<template>
<div>
<!-- <input type="text" v-gfocus> -->
<input type="text" v-focus>
</div>
</template>
<script>
// 目标: 创建 "自定义指令", 让输入框自动聚焦
// 1. 创建自定义指令
// 全局 / 局部
// 2. 在标签上使用自定义指令 v-指令名
// 注意:
// inserted方法 - 指令所在标签, 被插入到网页上触发(一次)
// update方法 - 指令对应数据/标签更新时, 此方法执行
export default {
data(){
return {
colorStr: 'red'
}
},
directives: {
focus: {
inserted(el){
el.focus()
}
}
}
}
</script>
<style>
</style>
//全局注册
//在main.js用 Vue.directive()方法来进行注册, 以后随便哪个.vue文件里都可以直接用指令
// 全局指令 - 到处"直接"使用
//gfocus:表示自定义名，使用 v-gfocus
Vue.directive("gfocus", {
inserted(el) {
el.focus() // 触发标签的事件方法
}
})
全局注册自定义指令, 哪里都能用, 局部注册, 只能在当前vue文件里用
自定义指令---传值
//需求: 定义color指令-传入一个颜色, 给标签设置文字颜色
//main.js定义处修改一下
/*
binding：一个对象，包含以下 property：
name：指令名，不包括 v- 前缀。
value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
vnode：Vue 编译生成的虚拟节点
*/
Vue.directive('color',{
//inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
inserted(el,binding){
el.style.color=binding.value
},
//update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有
update (el,binding) {
el.style.color=binding.value
}
})
//App.vue页面修改
<template>
<div>
<h1 v-color='strColor' @click="changeColor">自定义指令,点击改变颜色</h1>
</div>
</template>
<script>
export default {
data () {
return {
strColor:'blue'
}
},
methods: {
changeColor(){
this.strColor='red'
// console.log(123);
}
}
}
</script>
