machinecat520
/
zj-Exercise


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义指令</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
        需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。
        自定义指令总结：
        一、定义语法：
        1、局部指令
                new Vue({
                    directives:{指令名:配置对象}
                })
                或
                new Vue({
                    directives{指令名:回调函数}
                })
        2、全局指令
                Vue.directive(指令名:配置对象)或Vue.directive(指令名:回调函数)
        二、配置对象中常用的3个回调：
            1、bind：指令与元素成功绑定时调用。
            2、inserted：指令坐在元素被插入页面时调用
            3、update：指令所在模板结构被重新解析时调用
        三、备注
            1、指令定义时不加v-，但使用时要加v-
            2、指令名如果是多个单词，要使用kebab-case命名方式（即user-name），
            不要用camelClass命名（即userName）

     -->
    <!-- 准备一个容器 -->
    <div id="root">
        <h2>{{name}}</h2>
        <h2>当前的n值是：<span v-text="n"></span></h2>
        <!-- <h2>放大10倍后的n值是：<span v-big-number="n"></span></h2> -->
        <h2>放大10倍后的n值是：<span v-big="n"></span></h2>
        <button @click="n++">点我n+1</button>
        <hr />
        <input type="text" v-fbind:value="n">
    </div>
</body>
<script>
    Vue.config.productionTip = false    //阻止 vue 在启动时生成生产提示

    // 定义全局指令
    // Vue.directive('fbind', {
    //     // 指令与元素成功绑定时（一开始）调用
    //     bind(element, binding) {
    //         element.value = binding.value
    //     },
    //     // 指令所在元素被插入页面时调用
    //     inserted(element, binding) {
    //         element.focus()
    //     },
    //     // 指定所在的模板被重新解析时调用
    //     update(element, binding) {
    //         element.value = binding.value
    //         element.focus()
    //     }
    // })

    // Vue.directive('big',function(element, binding){
    //     element.innerText = binding.value * 10
    // })

    new Vue({
        el: '#root',
        data: {
            name: '尚硅谷',
            n: 1
        },
        directives: {
            // 写起来麻烦，但是能处理很多细节上的问题
            // big:{
            //     k:v,
            //     k:v,
            //     k:v
            // }

            // 当有多个单词时，在结构中使用“-”进行连接，在定义函数时，需要添加单引号进行包裹
            // 'big-number'(element,binding){
            //     element.innerText = binding.value*10
            // },
            big(element, binding) {
                console.log('big', this) //此处的this是Window
                // big函数何时会被调用？
                // 1、指令与元素成功绑定时（一开始）。2、指令所在的模板被重新解析时。
                // innerText:获取元素里的文本内容
                element.innerText = binding.value * 10
                // console.log(element,binding.value)
                // 验证a是否是DOM
                // console.dir(a)
                // console.log(a instanceof HTMLElement)
            },
            fbind: {
                // 常用函数有三个
                // 指令与元素成功绑定时（一开始）调用
                bind(element, binding) {
                    console.log('fbind-bind', this)  //此处的this是Window
                    // console.log(element,binding)
                    element.value = binding.value
                },
                // 指令所在元素被插入页面时调用
                inserted(element, binding) {
                    console.log('fbind-inserted', this)  //此处的this是Window
                    // console.log(element,binding)
                    element.focus()
                },
                // 指定所在的模板被重新解析时调用
                update(element, binding) {
                    console.log('fbind-update', this)    //此处的this是Window
                    // console.log(element,binding)
                    element.value = binding.value
                    element.focus()
                }
            }
        }
    })
</script>

</html>