房屋网站模板,抖音的电子商务网站建设,新手seo入门教程,所有娱乐场网址平台前些天发现了一个巨牛的人工智能学习网站#xff0c;通俗易懂#xff0c;风趣幽默#xff0c;忍不住分享一下给大家。点击跳转到教程。
一、什么是生命周期#xff1f; 用通俗的语言来说#xff0c;就是Vue中实例或者组件从创建到消灭中间经过的一系列过程。虽然不太严谨…前些天发现了一个巨牛的人工智能学习网站通俗易懂风趣幽默忍不住分享一下给大家。点击跳转到教程。
一、什么是生命周期 用通俗的语言来说就是Vue中实例或者组件从创建到消灭中间经过的一系列过程。虽然不太严谨但是也基本上可以理解。 通过一系列实践现在把所有遇到的问题整理一遍今天记录一下created和mounted的区别 二、created和mounted区别
created:在模板渲染成html前调用即通常初始化某些属性值然后再渲染成视图。 mounted:在模板渲染成html后调用通常是初始化页面完成后再对html的dom节点进行一些需要的操作。 官方图解如下: 我们从图中看两个节点created:在模板渲染成html前调用即通常初始化某些属性值然后再渲染成视图。 mounted:在模板渲染成html后调用通常是初始化页面完成后再对html的dom节点进行一些需要的操作。 其实两者比较好理解通常created使用的次数多而mounted通常是在一些插件的使用或者组件的使用中进行操作比如插件chart.js的使用: var ctx document.getElementById(ID);通常会有这一步而如果你写入组件中你会发现在created中无法对chart进行一些初始化配置一定要等这个html渲染完后才可以进行那么mounted就是不二之选。下面看一个例子用组件。 三、例子
Vue.component(demo1,{data:function(){return {name:,age:,city:}},template:ulli idname{{name}}/lili{{age}}/lili{{city}}/li/ul,created:function(){this.name唐浩益this.age 12this.city 杭州var x document.getElementById(name)//第一个命令台错误console.log(x.innerHTML);},mounted:function(){var x document.getElementById(name)//第二个命令台输出的结果console.log(x.innerHTML);}});var vm new Vue({el:#example1}) 可以看到输出如下 可以看到都在created赋予初始值的情况下成功渲染出来了。 但是同时看console台如下 可以看到第一个报了错实际是因为找不到idgetElementById(ID) 并没有找到元素原因如下 在created的时候视图中的html并没有渲染出来所以此时如果直接去操作html的dom节点一定找不到相关的元素 而在mounted中由于此时html已经渲染出来了所以可以直接操作dom节点故输出了结果“唐浩益”。 以上就是我自己总结的mounted和mounted的区别写的比较简陋记录下来加深印象。 --------------------- 转自https://blog.csdn.net/xdnloveme/article/details/78035065
