这是它的一个生命周期钩子函数,就是一个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节点,故输出了结果“唐浩益”。

以上就是我自己总结的mounted和mounted的区别,写的比较简陋,记录下来,加深印象。

总结

以上所述是小编给大家介绍的vue.js中created方法作用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

created写法_vue.js中created方法作用相关推荐

  1. vue在created调用点击方法_vue.js中created方法的使用详解

    这次给大家带来vue.js中created方法的使用详解,使用vue.js中created方法的注意事项有哪些,下面就是实战案例,一起来看一下. 这是它的一个生命周期钩子函数,就是一个vue实例被生成 ...

  2. js中getBoundingClientRect的作用及兼容方案

    js中getBoundingClientRect的作用及兼容方案 1.getBoundingClientRect的作用 getBoundingClientRect用于获取某个html元素相对于视窗的位 ...

  3. JS中toFixed()方法的问题及解决方案

    JS中toFixed()方法的问题及解决方案 参考文章: (1)JS中toFixed()方法的问题及解决方案 (2)https://www.cnblogs.com/gushen/archive/201 ...

  4. js中toFixed方法的两个坑

    js中toFixed方法的两个坑 toFixed返回结果是string,后续使用它计算会错误 toFixed返回结果可能出现负零-0.00 toFixed返回结果是string,后续使用它计算会错误 ...

  5. Js中fetch方法

    Js中fetch方法 fetch()方法定义在Window对象以及WorkerGlobalScope对象上,用于发起获取资源的请求,其返回一个Promise对象,这个Promise对象会在请求响应后被 ...

  6. 【转载】JS中bind方法与函数柯里化

    原生bind方法 不同于jQuery中的bind方法只是简单的绑定事件函数,原生js中bind()方法略复杂,该方法上在ES5中被引入,大概就是IE9+等现代浏览器都支持了(有关ES5各项特性的支持情 ...

  7. 前端开发:JS中join()方法的使用总结

    前言 在前端开发过程中,对数组的数据进行处理也是比较常见的操作之一,而且对数组进行操作的频率远远大于对 对象进行操作,因此在开发过程中对于数组里面的数据进行处理是一项比较重要的技能,尤其是对于刚入行的 ...

  8. js中eval方法的使用

    2.js中eval方法的使用 eval可以执行传入的字符串,比如:eval("console.log('eval test!')"),控制台直接会输出"eval test ...

  9. JS中sort方法排序

    JS中sort方法排序 一.数字排序(string类型) 二.数字排序(string类型和number类型) 三.混合排序(string.number和字母) 四.函数排序 五.数组对象排序 一.数字 ...

最新文章

  1. TensorRT-8量化分析
  2. 一段java代码是如何执行的?
  3. 【c语言】输入一个4位数,求四位数中各位数相加之和
  4. datatable复制一行数据到本表
  5. java引用其他类的数据头文件_Java 实现数据表与简单Java类映射转换
  6. A-ID and password
  7. Golang基本数据类型的相互转换
  8. Python3之requests模块
  9. 常用的python模块
  10. 信用指數旁的星星表示什麼?
  11. 神剧《切尔诺贝利》引发的技术思考:如何避免下一次核灾难?
  12. CDays-3 习题一 (处理命令行参数)及相关内容解析。Python getopt 简介
  13. 人工智能英语演讲总结,持续更新~
  14. CC++期末课程设计——产品管理系统(源代码+详细注释)
  15. 网络验证系统BSPHP二次开发 自定义加密解密开发
  16. 我所理解的CPU中断
  17. DC/OS的基本思想——为什么说他是数据中心操作系统
  18. Python实现FFT及IFFT
  19. android 隐藏文本,Android使用facebook隐藏库加密plaint文本
  20. php 五行查询,五行查询,五行缺什么查询,生辰八字五行查询,金木水火土命查询表...

热门文章

  1. Python模拟汉诺塔问题移动盘子的过程
  2. Linux 线程如何实现同步与互斥
  3. php7 phpunit,Make phpunit catch php7 TypeError
  4. 力扣1047. 删除字符串中的所有相邻重复项(JavaScript)
  5. python3 asyncio_asyncio--python3未来并发编程主流、充满野心的模块
  6. flink source 同步_Flink面试题
  7. qml入门学习(七):单独文件自定义组件
  8. 时间复杂度和空间复杂度探究
  9. takephoto 框架_GitHub - Smecking/TakePhoto: 一款用于在Android设备上获取照片(拍照或从相册、文件中选择)、裁剪图片、压缩图片的开源工具库...
  10. java getreturntype_Java Method getGenericReturnType()方法