VUE教程09 DOM获取和组件渲染

DOM获取

Vue不推荐我们直接操作DOM, 但是在企业开发中有时候我们确实需要拿到DOM操作DOM
那么如果不推荐使用原生的语法获取DOM, 我们应该如何获取DOM?
在Vue中如果想要拿到DOM元素我们可以通过ref来获取,ref使用方式：

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

   我是段落</>

2. 在使用的地方通过 this.$refs.xxx获取,例如this.$ref.myppp
3. ref添加到DOM元素上, 拿到的就是DOM元素，ref添加到组件上, 拿到的就是组件

<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>
<script>
    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: {
        }
    });
</script>

render方法

Vue渲染组件的两种方式

1. 先定义注册组件, 然后在Vue实例中当做标签来使用，这种方式不会覆盖Vue实例控制区域
2. 先定义注册组件, 然后通过Vue实例的render方法来渲染，这种方式会覆盖Vue实例控制区域

<div id="app">
<!--    <one></one>-->
</div>
<template id="one">
    <div>
        <p>我是组件222</p>
    </div>
</template>
<script>
    Vue.component("one", {
        template: "#one"
    });
    // 这里就是MVVM中的View Model
    let vue = new Vue({
        el: '#app',
        render: function(createElement){
            let html = createElement("one");
            return html;
        },
        // 专门用于监听数据变化的
        watch: {
        },
        // 这里就是MVVM中的Model
        data: {
        },
        // 专门用于存储监听事件回调函数
        methods: {
        },
        // 专门用于定义计算属性的
        computed: {
        },
        // 专门用于定义局部组件的
        components: {
        }
    });
</script>