生命周期中mounted和created的区别。
一、什么是生命周期?
二、created和mounted区别?
三、例子
- <span style="font-size:14px;">Vue.component("demo1",{
- data:function(){
- return {
- name:"",
- age:"",
- city:""
- }
- },
- template:"<ul><li id='name'>{{name}}</li><li>{{age}}</li><li>{{city}}</li></ul>",
- created:function(){
- this.name="唐浩益"
- this.age = "12"
- this.city ="杭州"
- var x = document.getElementById("name")//第一个命令台错误
- console.log(x.innerHTML);
- },
- mounted:function(){
- var x = document.getElementById("name")/</span>/第二个命令台输出的结果<span style="font-size:14px;">
- console.log(x.innerHTML);
- }
- });
- var vm = new Vue({
- el:"#example1"
- })</span>
可以看到输出如下:
而在mounted中,由于此时html已经渲染出来了,所以可以直接操作dom节点,故输出了结果“唐浩益”。
以上就是我自己总结的mounted和created的区别,写的比较简陋,记录下来,加深印象。
转自 https://blog.csdn.net/xdnloveme/article/details/78035065
生命周期中mounted和created的区别。的更多相关文章
- Vue生命周期中mounted和created的区别
参考链接:https://blog.csdn.net/xdnloveme/article/details/78035065
- Android Activity 生命周期中onStart()和onResume()的区别
首先了解Activity的四种状态 Running状态:一个新的Activity启动入栈后,它在屏幕最前端,处于栈的最顶端,此时它处于可见并可和用户交互的激活状态.Paused状态:当Activity ...
- Singleton单例模式是最简单的设计模式,它的主要作用是保证在程序执行生命周期中,使用了单类模式的类仅仅能有一个实例对象存在。
...
- vue新手入坑之mounted和created的区别(生命周期)
这几个月用vue框架新做了一个项目,也算是边学习边实践吧.学习中也看过一些别人的开源项目,起初对mounted和created有一些疑惑,查询相关资料发现,这和vue的生命周期有关,在此也就做一个总结 ...
- vue生命周期中created和mounted的区别
created在渲染页面之前使用,通常是用来渲染页面 mounted通常是在渲染页面之后,用来操作dom节点 通常情况下使用created比较多,使用mounted相对少一些,一些情况使用mounte ...
- vue生命周期-mounted和created的区别
详情请查看:https://blog.csdn.net/xdnloveme/article/details/78035065 自己做个总结: beforeCreate 创建之前:已经完成了 初始化事件 ...
- Servlet生命周期中的service方法分析
问题ServletLifeCycle中的service方法内,有super.service(request, response); 会执行this.doGet(HttpServletRequest r ...
- 在Activity的生命周期中,会被系统回调的方法
onCreate(Bundle savedStatus):创建Activity时被回调.onStart():启动Activity时被回调.onRestart():重新启动Activity时被回调.on ...
- vue生命周期中update的具体用法
在页面上 改变元数据data中数据,并且导致页面重新渲染时,才会进入update周期
随机推荐
- macOS关闭修改扩展名的提示
关闭 defaults write com.apple.finder FXEnableExtensionChangeWarning -bool false; killall Finder 开启 def ...
- vscode 远程编辑文件
操作 安装扩展 remote-vscode 配置ssh 转发: 添加 RemoteForward 52698 127.0.0.1:52698 到 ~/.ssh/config: # Read more ...
- 添加Mybatis
- 顺序表元素位置倒置示例c++实现
#include <iostream> #define MAXSIZE 100 using namespace std; void reverse(int a[],int n)//对数组元 ...
- HGOI 20191106 题解
Problem A 旅行者 有$n$种转移装置,每种转移装置本质相同,每种装置可以前进$a_i$单位,但只有$b_i$个. 从初始坐标为$0$出发,途中不能经过$c_1,c2,...,c_m$中的任 ...
- Financial Management(SDUT 1007)
Problem Description Larry graduated this year and finally has a job. He's making a lot of money, but ...
- shell tail 命令
#显示最后两行 tail -n - filename > newfilename #从开头显示到倒数第二行 head -n - filename > newfilename
- LIUNX 安装 nginx
安装依赖 yum install gcc yum install pcre-devel yum install zlib zlib-devel yum install openssl openssl- ...
- LVS集群之IP TUN模式以及网站压力测试
今天来看一下LVS的第三种模式IP TUN. TUN方式,是通过给数据包加上新的IP头部来实现,这个可以跨整个广域网. 环境: 主机名 IP 系统 角色 tiandong63 RIP:192.168. ...
- axios 是如何封装 HTTP 请求的
原载于 TutorialDocs 网站的文章<How to Implement an HTTP Request Library with Axios>.译者:zhangbao90shttp ...