dom查找、指令修饰符、自定义指令（vue2）

1.dom查找

1.1 方法

在vue的生命周期函数之一mounted中就可以通过dom查找来找到页面上你想要的元素；

在vue的mounted中是通过this.$refs获取你在页面中有ref属性的标签的对象集合；

在此this.$refs对象中属性名是标签中ref属性的属性值，对象中的属性值则是dom节点；

1.2 代码

1.2.1 html代码

 <div id="app">
        <button ref="myBtn">123</button>
        <div ref="myDiv">456</div>
    </div>

1.2.2 js代码

new Vue({
            el:'#app',
            data:{
            
            },
            methods:{
            },
            mounted() {
                // vue通过ref属性获取dom节点,在渲染完毕之后获取dom节点
                console.log(this.$refs); //获取的是设置ref属性的标签的集合对象
                console.log(this.$refs.myDiv); //div对象
                
            },
        })

2.指令修饰符

2.1 常用的指令修饰符

指令修饰符是标签中的属性名打点使用指令修饰符

常用的指令修饰符：trim lazy number stop prevent enter

了解的指令修饰符：prop capture self middle once

2.2 代码及每个指令修饰符的介绍

        <!-- 1.number用于双向绑定，使表单数据自动转化成数字类型(主要使count是文本型的数字) -->
        <input type="text" v-model.number="count">{{count+10}}

        <!-- 2.trim用于双向绑定,把输入框文本内容前面和结尾的空格符合去掉 -->
        <input type="text" v-model="count"> ={{count}}=

        <!-- 3.prevent阻止默认事件 -->
        <a href="https://dangzihei.github.io" @click="count++">党子黑</a>
        <br>

        <!-- 4.stop阻止事件传播 默认事件传播是冒泡，点击子节点，子节点触发点击事件之后，触发父节点的点击事件 -->
        <button @click="count--">
            父<span @click.stop="count--">子</span>
        </button>

        <br>
        <!-- 5.once用于事件绑定,让事件只触发一次 -->
        <button @click.once="count++">
            {{count}}
        </button>

        <!-- 6.1 .enter 指定enter键触发 -->
        <br>
        <input type="text" @keydown.enter="key">

        <!-- 6.2 .ctrl.c 指定ctrl+c键触发 -->
        <br>
        <input type="text" @keydown.ctrl.c="key">

        <!-- 6.3 .ctrl.alt.c(顺序不固定) 指定ctrl+alt+c键触发 -->
        <br>
        <input type="text" @keydown.ctrl.alt.c="key">

        <!-- 7.prop() -->
        <!-- 能在标签结构上显示的属性 attribute,但是通过div.id=10方式添加的属性不会显示在标签结构上,这样的属性称为property -->
        <!-- 通过v-bind绑定的属性可以在标签结构上显示 -->
        <div v-bind:data="count" id="d1">123</div>
        <div v-bind:data.prop="count" id="d2">345</div>

        <!-- 8 capture 让父子元素的事件在挖洞过程中进行(捕获)
            默认情况 父子元素绑定事件 在冒泡过程进行执行。
        capture 捕获-->
        <button @click.capture="father">
            父
            <span @click="child">子</span>
        </button>

        <!-- 9. self只能有元素本身触发事件，不能由子元素冒泡触发 -->
        <button @click.self="father">
            父
            <span @click="child">子</span>
        </button>
        <br>
        <!-- 10 middle 点击鼠标滚轮触发-->
        <button @click.middle="count++">{{count}}</button>
        <br>
        <!-- 11 lazy 输入框失去焦点的时候触发  -->
        <input type="text" v-model.lazy="count">

3.自定义指令

自定义指令：需要对底层dom操作时候，并且vue内置指令不能满足现在需要功能 或则整合一些第三方的时候，可以使用自定义指令；

3.1自定义全局指令的方法和代码演示

3.1.1 全局指令实现方法

全局组件：使用Vue.directive()方法，此方法中第一个参数是指令名(定义时不要加v-前缀，使用的时候得加上),第二个参数是,指令配置对象,对象中包含指令的钩子函数;

bind() 钩子函数指令是在使用其自定义的指令绑定给一个元素的时候触发,初始化指令的时候

update()是指令值被更改的时候触发；

bind、uodate等在自定义指令的对象中的钩子函数都有两个参数；

第一个参数是绑定的元素对象,第二个参数是一个对象;对象中的value代表的是指令值；expression是最初的指令值,oldValue是上一次的指令

3.1.2 全局指令代码

// 全局指令 参数1 指令名(定义不要加v-前缀，使用的时候得加上) 参数2 指令配置对象包含指令的钩子函数,
// 第一个参数el代表绑定的元素对象
Vue.directive('color', {
    // bind指令在指令绑定给一个元素的时候触发,初始化指令的时候
    bind(el, binding) {
        // el参数是绑定的元素对象,binding.value代表的是指令值
        console.log(el);
        console.log(binding);
        el.style.color = binding.value;
    },
    // update指令在指令值被修改的时候触发
    update(el, binding) {
        // binding.expression是最初的指令值，binding.oldValue是上一次的指令
        console.log(binding);
        el.style.color = binding.value;
    },
})

3.2 自定义局部指令的方法和代码演示

3.2.1 局部指令实现方法

局部指令直接在new Vue中添加directives对象字段；

对象的函数名是指令名；

对象中的两个参数与上相同，第一个是绑定的元素，第二个是对应的指令值对象

3.2.2 局部指令代码

new Vue({
    el: '#app',
    data: {
        show: true,
        red: 'red',
        count: 100
    },
    methods: {

    },
    // 局部指令
    directives: {
        font(a, b) {
            console.log(a,b);
            // 代表指令初始化钩子函数bind和更新的钩子函数update
            a.style.fontSize = b.value + 'px';
        }
    }
})