vue(属性)课后总结

Vue属性：

• $props
• $options
• $el
• $root

$options示例：

<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示例:

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

$root示例:

 <div id="app">
  <my-component></my-component>
</div>
<script src="./vue.js"></script>
<script>
  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"
  })
</script>