<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../vue.js"></script>
</head>
<body>
<div id="root">
<!--
1.定义一个v-big指令，和v-text功能类似，但会吧绑定数值放大10倍
2.定义一个v-fbing指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点
定义语法：
1.局部指令
new Vue({ new Vue({
directives:{指令名:配置对象} directives{指令名：回调函数}
}) })
2.全局指令
Vue.directive(指令名:配置对象) Vue.directive(指令名,回调函数)
二。配置对象中常用三个回调
bind：指令与元素成功绑定时
inserted：指令所在元素被插入页面时
update：指令所在模板被重新解析
三。备注
注意：v-content命名问题：如果有多个单次名称的时候，
v-content-Number(需要用这种方法进行写入) vue中：'content-number' 用引号括起来 注意：不能大写
-->
<!-- 1 -->
<h2>当前值: <span v-text="n"></span> </h2>
<h3>请输入内容:<span v-content-number="n"></span></h3>
<!-- <h3>请输入内容:<span v-content="n"></span></h3> -->
<button @click="n++">点击后值相加</button>
<hr>
<!-- 2 -->
<input type="text" v-fbind:value="n">
</div>
<script>
Vue.config.productionTip=false
//全局使用（find）
Vue.directive('fbind',{
bind(element,binding){
element.value = binding.value
},
//指令所在元素被插入页面时
inserted(element,binding){
element.focus()//首次获取焦点
},
//指令所在模板被重新解析
update(element,binding){
element.value = binding.value
element.focus()//一直获取焦点
}
})
//全局使用（v-content）
Vue.directive('content-number',function(element,binding){
console.log(element,binding,this)//this指向window
element.innerText = binding.value * 10
})
new Vue({
el:'#root',
data:{
n:1
},
//只能在局部中使用，如果需要在全局使用
directives:{
//content函数何时被调用：1.指令与元素成功绑定时，2、指令所在模板被重新解析
//写法1
// content(element,binding){
// console.log(element,binding)
// element.innerText = binding.value * 10
// },
//或者这样写
// 'content-number'(element,binding){
// console.log(element,binding,this)//this指向window
// element.innerText = binding.value * 10
// },
//局部
// fbind:{
// //指令与元素成功绑定时
// bind(element,binding){
// element.value = binding.value
// },
// //指令所在元素被插入页面时
// inserted(element,binding){
// element.focus()//首次获取焦点
// },
// //指令所在模板被重新解析
// update(element,binding){
// element.value = binding.value
// element.focus()//一直获取焦点
// }
// }
}
})
</script>
</body>
</html>
