5.21笔记

$options:获取的是vue实例中的选项,包含自定义选项

    <div id='app'>
        <button @click="chk">查看</button>
        <h1>{{base}}</h1>
        <h3>{{noBase}}</h3>
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            customOption:'我是自定义选项',
            data:{
                base:"我是基础数据"
            },
            methods:{
                chk(){
                    console.log(this.$options);
                    console.log(this.$options.el);
                }
            },
            created(){
                this.noBase=this.$options.customOption
            }
        })
    </script>

$el:访问vue实例的根DOM元素

    <div id="app"></div>
    <script src="js/vue.js"></script>
    <script>
       var vm= new Vue({
            el:"#app"
        })
        console.log(vm.$el);
        vm.$el.innerHTML='<div>我是被替换的div标签</div>'
    </script>

$root获取根vue实例

        Vue.component('my-component',{
            template:`
                <div>
                    <button @click="chk">查看根vue实例</button>
                </div>
            `,
            methods:{
                chk(){
                    console.log(this.$root);
                    console.log(this.$root===vm.$root);
                }
            }
        })
       var vm= new Vue({
            el:"#app"
        })