![Vue.js 3.0从入门到精通(视频教学版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/154/44510154/b_44510154.jpg)
上QQ阅读APP看书,第一时间看更新
4.4.2 created和mouted
在使用Vue的过程中,经常需要对一些数据做初始化处理,常用的方法是在created与mounted钩子函数中处理。
created是在实例创建完成后立即调用。在这一步,实例已完成了数据观测、属性和方法的运算,以及watch/event事件回调。然而,挂载阶段还没开始,$el属性目前不可见。所以不能操作DOM元素,多用于初始化一些数据或方法。
mounted是在模板渲染成HTML后调用,通常是初始化页面完成后,再对HTML的DOM节点进行一些需要的操作。
【例4.9】created与mounted函数的应用(源代码\ch04\4.9.html)。
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P63_164915.jpg?sign=1738895271-boOpnQXwqdAu20MAGM8tOlbF9MxVdoBs-0-fddc0d9d530693a36e132d0abc2a27db)
在浏览器中运行程序,效果如图4-11所示,单击“确定”按钮,页面加载完成效果如图4-12所示。
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P64_18959.jpg?sign=1738895271-FegAzoqC0hRv6YUpk5pLYXQhPviJDrRK-0-f5be5008621242e380639909b14ee3da)
图4-11 页面效果
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P64_18960.jpg?sign=1738895271-NaXYDOzA6XyJ4BC47zXD8LpCoPzSS1aQ-0-11239d33dca27e1ff93747b74f1e576e)
图4-12 单击“确定”按钮后效果