9. 模板引用
虽然 Vue 的声明性渲染模型为你抽象了大部分对 DOM 的直接操作,但在某些情况下,我们仍然需要直接访问底层 DOM 元素。要实现这一点,我们可以使用特殊的 ref attribute挂载结束后引用都会被暴露在 this.$refs之上
/**
* 内容改变:{{ 模板语法 }}
* 属性改变:v-bind:指令
* 事件:v-on:click
* 如果没有特别的需求,不要操作DOM
*/
<script>
export default {
data() {
return {
content: '内容'
}
},
methods:{
getElementHandle(){
//innerHTML:原生的JS属性
console.log(this.$refs.container.innerHTML='哈哈哈')
console.log(this.$refs.username.value)
}
}
}
</script>
{{ content }}