炫意html5
最早CSS3和HTML5移动技术网站之一

组件实例 $el 详解

this指向组件实例,$el用于获取Vue实例挂载的DOM元素,在mounted生命周期中才有效,之前的钩子函数内无效。如下代码所示,Vue脚手架中,$el指向当前组件template模板中的根标签。

<template>
<div>
<h1 @click="fn()">
Lorem, ipsum
</h1>
</div>
</template>
<script>
export default {
mounted () {
// this.$el只在mounted中才有效
console.log('this:', this) // 打印this指向组件实例。
console.log('this.$el:', this.$el) // 打印这个vue组件的dom对象
this.$el.style.color = 'red'
},
methods: {
fn () {
console.log('test_this.$el:', this.$el) // <div>...</div>
}
}
}
</script>

控制台输出:

炫意HTML5 » 组件实例 $el 详解

Java基础教程Android基础教程