<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-text="msg"></h1>
<h1 v-text-danger="msg"></h1>
用户名:<input type="text" v-bind-blue="username"/>
</div>
<div id="app2">
<h1 v-text-danger="msg"></h1>
<h1 v-hehe-haha="msg"></h1>
</div>
<script>
// 函数式定义全局
Vue.directive('text-danger',function(element,binding)
{
element.innerText = binding.value;
element.style.color = 'red';
});
// 对象式定义全局
Vue.directive('hehe-haha',{
bind(element,binding){
element.innerText = binding.value;
},
inserted(element,binding){
element.parentNode.style.backgroundColor = 'yellow';
},
update(element,binding){
element.innerText = binding.value;
}
});
const vm = new Vue({
el : "#app",
data : {
msg : "Hello",
username : "Jack"
},
directives : {
// 指令名字,v-是不用写的
// 官方建议的自定义指令最好全部小写
// 如果多个单词,最好-进行衔接
// 这个方法会有两个参数,
'text-dangered' : function(element,binding)
{
// 第一个参数是它出现在的dom元素
// 是它真实的dom元素
console.log(element);
element.innerText = binding.value;
element.style.color = 'red';
// 第二个是绑定对象,也可以称呼这个为指令对象,他就是我们给标签添加的指令
// 我们需要重点用这个绑定对象
// 也可以称呼第二个为标签与指令之间确定关系的对象
console.log(binding);
// 函数有两个调用时机
// 第一次调用是指令和标签绑定的时候会调用一次
// 模板被重新解析的时候也会再次调用
},
// 'bind-blue' : function(element,binding)
// {
// element.value = binding.value;
// // 这个绑定是在内存级别的绑定,页面上没有这么一个东西
// // 实际的dom树上更加不会有,所以你可以读取他自己,但是获取不了父元素
// // 就会在null上设置就会报错了
// // 这种方式就叫做函数式
// // element.parentNode.style.backgroundColor = 'blue';
// // 对象式控制更细致,函数是更粗狂
// }
// 对象式写法
'bind-blue' : {
// 这个是局部的,不是全局的另一个vue实例用不了的
// 这个对象中的三个方法名字不能随便写
// 这三个函数后期会被框架自动调用的
// 特定的节点执行特定的函数,我们称之为钩子函数
// 而且他们都有这两个对象作为局部变量,或称形参
bind(element,binding)
{
// 元素与指令初次绑定,自动调用bind方法
element.value = binding.value;
},
inserted(element,binding)
{
element.parentNode.style.backgroundColor = 'blue';
// 元素被插入到页面后,这个函数自动被调用
// 这个时候就意味着网页的真实的dom树上已经有这个节点和他的父节点存在了
},
update(element,binding)
{
element.value = binding.value;
// 模板重新被解析的时候,这个方法会被调用
}
}
}
});
const vm1 = new Vue({
el : "#app2",
data : {
msg : "Hi"
}
});
</script>
</body>
</html>