vue在created调用点击方法_vue.js中created方法的使用详解
这次给大家带来vue.js中created方法的使用详解,使用vue.js中created方法的注意事项有哪些,下面就是实战案例,一起来看一下。
这是它的一个生命周期钩子函数,就是一个vue实例被生成后调用这个函数。一个vue实例被生成后还要绑定到某个html元素上,之后还要进行编译,然后再插入到document中。每一个阶段都会有一个钩子函数,方便开发者在不同阶段处理不同逻辑。
一般可以在created函数中调用ajax获取页面初始化所需的数据。
实例生命周期
每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如,实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ,然后在数据变化时更新 DOM 。在这个过程中,实例也会调用一些 生命周期钩子 ,这就给我们提供了执行自定义逻辑的机会。例如,created 这个钩子在实例被创建之后被调用:var vm = new Vue({
data: {
a: 1
},
created: function () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a)
}
})
// -> "a is: 1"
也有一些其它的钩子,在实例生命周期的不同阶段调用,如 mounted、 updated 、destroyed 。钩子的 this 指向调用它的 Vue 实例。一些用户可能会问 Vue.js 是否有“控制器”的概念?答案是,没有。组件的自定义逻辑可以分布在这些钩子中。
生命周期图示
下图说明了实例的生命周期。你不需要立马弄明白所有的东西,不过以后它会有帮助。
补充:
Vue生命周期中mounted和created的区别
一、什么是生命周期?
用通俗的语言来说,就是Vue中实例或者组件从创建到消灭中间经过的一系列过程。虽然不太严谨,但是也基本上可以理解。
通过一系列实践,现在把所有遇到的问题整理一遍,今天记录一下created和mounted的区别:
二、created和mounted区别?
官方图解如下:
我们从图中看两个节点:
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:"
- {{name}}
- {{age}}
- {{city}}
",
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")//第二个命令台输出的结果
console.log(x.innerHTML);
}
});
var vm = new Vue({
el:"#example1"
})
可以看到输出如下:
可以看到都在created赋予初始值的情况下成功渲染出来了。
但是同时看console台如下:
可以看到第一个报了错,实际是因为找不到id,getElementById(ID) 并没有找到元素,原因如下:
在created的时候,视图中的html并没有渲染出来,所以此时如果直接去操作html的dom节点,一定找不到相关的元素
而在mounted中,由于此时html已经渲染出来了,所以可以直接操作dom节点,故输出了结果“唐浩益”。
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
vue在created调用点击方法_vue.js中created方法的使用详解相关推荐
- created写法_vue.js中created方法作用
这是它的一个生命周期钩子函数,就是一个vue实例被生成后调用这个函数.一个vue实例被生成后还要绑定到某个html元素上,之后还要进行编译,然后再插入到document中.每一个阶段都会有一个钩子函数 ...
- vue 怎么在html显示为回车_vue.js中怎么换行?
vue.js中怎么换行?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 在页面中经常会遇到自定义文本,如果文本过长就需要换行,在HTML中可以通过 标签换 ...
- vue watch 经常监听不到_Vue.js中 watch(深度监听)的最易懂的解释
FullName: {{fullName}} FirstName: newVue({ el:'#root', data: { firstName:'Dawei', lastName:'Lou', fu ...
- linux zcat 使用方法,Linux系统中zcat命令的知识详解
Linux系统中的zcat命令不同于cat命令,它不用解压缩文件就能显示压缩包文件的内容,那么下面由学习啦小编为大家整理了linux系统中zcat命令的知识详解,希望对大家有帮助! Linux系统中z ...
- vue怎么实现右键二级菜单_vue中如何自定义右键菜单详解
在所编辑的页面,需要添加右键菜单的元素,绑定contextmenu事件,如下: v-for="item in resourceList" :key="item.id&qu ...
- Java调用SMSLib用单口短信猫发送短信详解
技术园地 当前位置:短信猫网站主页 > 技术园地 > [转载]Java调用SMSLib用单口短信猫发送短信详解 发布时间:2017/02/09 点击量:620 SMSLib是Apache的 ...
- C语言中三个数比较大小详解——三种方法
C语言中三个数比较大小详解--三种方法 方法一:if-else法 方法二:函数法 方法三:三目运算符法 C语言中比较三个数的大小有很多方法,以下是我总结的三种方法: 首先我定义 int a = 1 ...
- php 如何封装类库,ThinkPHP里的import方法用于类库导入的封装实现实例详解
ThinkPHP里的import方法用于类库导入的封装实现实例详解 分类:PHP_Python| 发布:佚名| 查看: | 发表时间:2014/7/1 import方法是ThinkPHP框架用于类库导 ...
- php调用linux摄像头,Linux_Linux中开发USB摄像头驱动详解,USB摄像头以其良好的性能和低 - phpStudy...
Linux中开发USB摄像头驱动详解 USB摄像头以其良好的性能和低廉的价格得到广泛应用.同时因其灵活.方便的特性,易于集成到嵌入式系统中.但是如果使用现有的符合Video for Linux标准的驱 ...
最新文章
- 蓝云公布2019云生态战略,如何解决企业上云关键问题?
- mysql的数据类型以及性能优化
- 部署IPV6有什么好处?
- after markup mount - how is converted source code got executed
- 【Java】编写Java GUI应用程序,完成从键盘输入矩形的长和宽,求矩形的周长和面积并输出结果的功能...
- java 保存和读取本地文件
- php提交表单并发送邮件,php提交表单发送邮件的方法
- Apollo学习笔记(一):canbus模块与车辆底盘之间的CAN数据传输过程
- 拉格朗日插值法总结模板(1~n)
- [ActionSprit 3.0] FMS安装与测试
- 安卓手机远程连接linux系统,电脑(Linux/Windows)使用SSH远程登录安卓(Android)手机实现无线传输和管理文件(图文详解)-Go语言中文社区...
- android开发方法数,Android方法数methods超过65536详解
- 带你白嫖程序带宽限制命令Trickle
- 一次设置,终生屏蔽cdsn
- 因计算机而强大在线读,读书分享会丨《因计算机而强大:计算机如何改变我们的思考与学习》...
- 时钟芯片PCF8563应用
- location.href表示当前访问的网址url
- 软加密网上激活解决方案
- 解决win10 64位系统可用2.99g
- Node.js安装以及idea配置Vue脚手架
热门文章
- Android 广告秘籍
- 2016android市场占有率,Newzoo:2016年国内手游收入近100亿美元(附国内五大安卓渠道装机率)...
- 互联网公司招聘,你需要注意这四点
- 面试官: 说一下前端组件设计的原则
- 艺赛旗RPA离线识别普通验证码
- python编程计算圆面积和周长_vb编程计算圆周长面积
- matlab tstart,ttbox25102012 一款利用matlab编写的射线追踪程序,易改易用。 238万源代码下载- www.pudn.com...
- 实验三+163+张玉洁
- 论文领读|基于 VQVAE 的长文本生成
- 深度干货:史上最全的市场推广渠道大全(附攻略和技巧)