自己的网站怎么接广告,网站建设捌金手指下拉二八,动态设计参考网站,免费企业网页VUE的生命周期 上图是实例生命周期的图表#xff0c;需要注意以下几个重要时期#xff1a; 创建期#xff1a;beforeCreated、created 挂载期#xff1a;beforeMount、mounted 更新期#xff1a;beforeUpdate、updated 销毁期#xff1a;beforeUnmount、unmounted 生命周…VUE的生命周期 上图是实例生命周期的图表需要注意以下几个重要时期 创建期beforeCreated、created 挂载期beforeMount、mounted 更新期beforeUpdate、updated 销毁期beforeUnmount、unmounted 生命周期函数的应用
应用1:通过 ref 获取元素DOM结构
templatep refname渲染/p
/templatescriptexport default {beforeMount() { //渲染前console.log(beforeMount函数:)console.log(this.$refs.name)},mounted() { //渲染后console.log(mounted函数:)console.log(this.$refs.name)}}
/script应用2:模拟网络请求渲染数据
一般在页面的css样式呈现后,才显现数据所以将数据放在页面渲染后即mounted函数中
templateulli v-for(item,index) in banner :keyindexh3{{item.title}}/h3p{{item.content}}/p/li/ul
/templatescriptexport default {data(){return{banner:[]}},mounted() { // 页面渲染后console.log(this.banner)this.banner [{title:我在爱尔兰,content:爱尔兰是一个西欧的议会共和制国家},{title:一个人的东京,content:东京是日本国的首都是亚洲第一大城市世界第二大城市全球最大的经济中心之一}]console.log(this.banner)}}
/scriptstyle scoped/style
