<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>自定义指令</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>当前的n值是<span v-text="n"> </span></h2>
<h2>放大十倍后的n值是<span v-big="n"></span></h2>
<button @click="n++">点我n++</button>
</div>
<script>
new Vue({
el:"#root",
data:{
n:1,
},
directives:{
//函数式，big函数的调用时机
//1.指令与元素成功绑定时（一上来）
//2.指令所在的模板被重新解析时
big(element,binding){
element.innerText=binding.value*10;
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>自定义指令</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
1.需求1 ，定义一个v-big 指令，和v-text类似，将n放大十倍
2.需求2 ，定义一个v-fbind指令，和bind功能类似，但可以让其他绑定的input元素获得焦点
-->
<div id="root">
<h2>当前的n值是<span v-text="n"> </span></h2>
<h2>放大十倍后的n值是<span v-big="n"></span></h2>
<button @click="n++">点我n++</button>
<br>
<input type="text" v-fbind:value="n">
</div>
<script>
new Vue({
el:"#root",
data:{
n:1,
},
directives:{
//函数式，big函数的调用时机
//1.指令与元素成功绑定时（一上来）
//2.指令所在的模板被重新解析时
big(element,binding){
element.innerText=binding.value*10;
},
// fbind(element,binding){
// element.value=binding.value;
// element.focus();
// }
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>