vue学习 vue中Dom操作

mounted生命周期函数

<template>
<div>
    <div>Vue 中Dom操作</div>
    <div>---------------</div>

    <div ref="head" id="head"></div>

</div>
</template>

<script>
export default {
    data(){
        return{

        }
    },

    // vue是虚拟dom，一般不能直接操作dom，mounted是在dom挂载之后
    mounted(){
        //Dom 已经生成

        // 在需要使用 jquery，bootstrap等框架对真实dom进行操作时，执行函数放在 mounted函数内
        // jquery 操作dom
        // $('#head').html('123')

        // 原生js操作dom
        // document.getElementById('head')......

        // vue操作dom
        this.$refs.head.innerHTML = 'hello world';


    }
}
</script>