<body>
<!--
目前已经学过的的vue指令：
1.插值表达式 {{message}}
2.v-if = 'flag'指令将根据表达式 flag(true或flase) 的值的真假来插入/移除 <p> 元素。
3.v-show
4.v-bind 缩写 : ul 为百度网址 <pre><a v-bind:href="url">点击前往百度</a></pre> 实例：v-bind 指令将该元素的 href 属性与表达式 url 的值绑定
5.v-on 缩写 @ 它用于监听 DOM 事件
6.v-model 指令来实现双向数据绑定
-->
<script src='./libs/vue.js'></script>
<div id='app'>
<input type="text" id="text" v-focus v-color="mycolor">
</div>
<script>
// 在vue中自定义指令，分为两种，1.全局指令，2.私有指令
// 自定义指令，在定义时不需要加v-前缀，但是在绑定时，必须加上v-前缀
// 1.全局指令,
Vue.directive("focus",{
// 指令定义对象可以提供如下几个钩子函数 (均为可选)
// bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
// inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)
// update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有
// componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
// unbind：只调用一次，指令与元素解绑时调用。
inserted:function(el){
// el是一个形参，el代表的是你这条指令所绑定的那个DOM元素，原生的DOM对象
el.focus();
}
});
// 指令简写
// Vue.directive("focus",function(el){
// 如果只想在bind和update上注册指令，那么就可以使用这种简写的方式
// el.focus();
// })
Vue.directive("color",{
// 指令钩子函数会被传入以下参数：
// el：指令所绑定的元素，可以用来直接操作 DOM。
// binding：一个对象，包含以下 property：
// name：指令名，不包括 v- 前缀。
// value：指令的绑定值，
// expression 字符串形式的指令表达式。
bind:function(el,binding){
el.style.color = binding.value;
console.log(binding.name)
console.log(binding.value)
console.log(binding.expression)
// binding.name 就是我们定义的这个全局指令的指令名 color
// binding.value 他的值 就是我们mycolor的值，red
// binding.expression 字符串形式的指令表达式。就是我们的 mycolor
}
})
var vm = new Vue({
el:"#app",
data:{
msg:"输入姓名",
mycolor :'red'
}
// 这个是私有指令，directive是全局指令
directives:{
'color':function(el,binding){
el.style.color = binding.value;
}
}
})
</script>
</body>