Vue2.X Vue获取DOM

写在前面： 此博客记录自己学习vue学习笔记，如有侵权，联系删！
学习来源： Vue + Vue-Cli 快速入门教程
李南江老师各平台账号：

• 微博：极客江南
• 微信公众号：李南江
• 腾讯课堂： 李南江
• 网易云课堂：李南江

Vue特殊特性
Vue特点: 数据驱动界面更新, 无需操作DOM来更新界面
也就是说Vue不推荐我们直接操作DOM, 但是在企业开发中有时候我们确实需要拿到DOM操作DOM
那么如果不推荐使用原生的语法获取DOM, 我们应该如何获取DOM?
在Vue中如果想要拿到DOM元素我们可以通过ref来获取

ref使用
1、在需要获取的元素上添加ref属性. 例如:

我是段落</>
2、在使用的地方通过 this.$refs.xxx获取,例如this.$ref.myppp

ref特点
ref添加到元素DOM上, 拿到的就是元素DOM
ref添加到组件上, 拿到的就是组件

html代码：

<div id="app">
    <button @click="myFn">我是按钮</button>
    <p ref="myppp">我是原生的DOM</p>
    <one id="myOne" ref="myOne"></one>
</div>

组件代码：

<template id="one">
    <div>
        <p>我是组件</p>
    </div>
</template>

vue代码：

Vue.component("one", {
 template: "#one",
    data: function(){
        return {
            msg: "知播渔"
        }
    },
    methods: {
        say(){
            console.log("say");
        }
    },
});
// 这里就是MVVM中的View Model
let vue = new Vue({
    el: '#app',
    // 专门用于监听数据变化的
    watch: {
    },
    // 这里就是MVVM中的Model
    data: {
    },
    // 专门用于存储监听事件回调函数
    methods: {
        myFn(){
            // 注意点: 如果是通过原生的语法来获取元素, 无论是原生的元素还是自定义的组件, 拿到的都是原生的元素
            // 注意点: 并且VUE官方并不推荐我们这样获取
            // console.log(document.querySelector("p"));
            // console.log(document.querySelector("#myOne"));

            // 在Vue中如果想获取原生的元素或者获取自定义的组件, 可以通过ref来获取
            // 注意点: ref如果是添加给元素的元素, 那么拿到的就是元素的元素
            //         ref如果是添加给自定义的组件, 那么拿到的就是自定义的组件
            console.log(this.$refs);
            console.log(this.$refs.myppp);
            console.log(this.$refs.myOne);
            console.log(this.$refs.myOne.msg);
            console.log(this.$refs.myOne.say);
        }
    },
    // 专门用于定义计算属性的
    computed: {
    },
    // 专门用于定义局部组件的
    components: {
    }
});