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>