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>