<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>自定义指令</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<!--
需求1 定义一个 v-big 指令 和 v-text 功能类似，但是会把绑定数值放大10倍
需求2 定义一个 v-fbind指令，和v-bind功能类似，但是可以让其所绑定的input元素默认获取焦点
-->
<h2 v-pre>vue 其实很简单</h2>
<h2 v-once>初始化的n值{{n}}</h2>
<h1>当前n的值<span v-text="n"></span></h1>
<h1>放大10倍数后n的值<span v-big="n"></span></h1>
<button @click="n++">点我加上n+1</button>
<input v-fbind:value="n" />
</div>
<script type="text/javascript">
new Vue({
el: "#root", //el用于指定当前vue实例为那个容器服务，但通常为css选择器字符串
data: {
n: 1,
},
directives: {
//big函数何时会被调用 1.指令与元素成功绑定（一上来）2. 指令所在的模板被重新解析时
big(element, binding) {
// 判断是不是dom 节点
//console.dir(element);
//console.log(element instanceof HTMLElement);
element.innerText = binding.value * 10;
},
fbind: {
// 指令与元素成功绑定时间 （一上来）
bind(element, binding) {
console.log("bind");
element.value = binding.value;
},
//指令所在元素被插入页面时
inserted(element, binding) {
element.focus();
console.log("inserted");
},
//指令所在的模板被重新解析的时候
update(element, binding) {
console.log("upadte");
element.value = binding.value;
},
},
},
});
</script>
</body>
</html>