<meta name="keywords" content="华夏棋牌,javascript,created,vue.js" />
华夏棋牌 > web前端 > js教程 > 注释

vue.js中created措施的应用详解

原创 2018-04-08 17:36:38 0 17292
赞助会员专享特权
此次给年夜家带来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的差异:

2、created和mounted差异?

官方图解以下:

华夏棋牌我们从图中看两个节点:

created:在模板衬着成html前挪用,即通常初始化某些属性值,然后再衬着成视图。

mounted:在模板衬着成html后挪用,通常是初始化页面完成后,再对html的dom节点阻拦一些须要的操作。

着实二者较量好明确,通常created应用的次数多,而mounted通常是在一些插件的应用或许组件的应用中阻拦操作,好比插件chart.js的应用: var ctx = document.getElementById(ID)华夏棋牌;通常会有这一步,而假定你写入组件中,你会发现在created中没法对chart阻拦一些初始化妆备,一定要等这个html衬着完后才可以阻拦,那么mounted就是不二之选。下面看一个例子(用组件)。

3、例子

<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>

可以看到输入以下:

华夏棋牌可以看到都在created授予初始值的情形下告成衬着出来了。

但是同时看console台以下:

华夏棋牌可以看到第一个报了错,现实是由于找不到id,getElementById(ID) 并没有找到元素,启事以下:

在created的时间,视图中的html并没有衬着出来,以是此时假定直接去操作html的dom节点,一定找不到相关的元素

华夏棋牌而在mounted中,由于此时html曾经衬着出来了,以是可以直接操作dom节点,故输入了效果“唐浩益”。

信托看了本文案例你曾经控制了措施,更多精彩请关注php中文网其它相关文章!

推荐浏览:

Angular4的router应用详解

webpack的4.0打包优化若何完成

以上就是vue.js中created措施的应用详解的详细内容,更多请关注php中文网其它相关文章!

php中文网最新课程二维码
  • 相关标签:javascript created vue.js
  • 本文原创宣布php中文网 ,转载请注明出处,谢谢您的尊重!
  • 相关文章


  • 原生javascript完因素享到同伙圈功效 支持ios和android_javascript手艺
  • jQuery链式挪用与show知识浅析_jquery
  • JS完成登录页面记着密码和enter键登录措施推荐_javascript手艺
  • BootstrapTable与KnockoutJS相联络完成增删改查功效【一】_javascript手艺
  • vue.js中created措施的应用详解
  • 网友议论

    文明上彀理性语言,请遵守 新闻议论服务协定

    我要议论

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国际最盛行的中文PHP开发框架,也是您Web项目的最好选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架知识泉源,将...

    • 2017-05-16 12:03:57
    • 点击数(173959)

    独孤九贱(4)_PHP视频教程

    华夏棋牌江湖传言:PHP是天下上最好的编程语言。真的是这样吗?这个梗现实是从哪来的?学会本课程,你就会明确了。 华夏棋牌-万豪棋牌电玩城-微信娱乐棋牌出品的PHP入门系统教授修养视频,完全从初学者的角度出发,绝不玩虚的,一切以适用、有用...

    • 2017-03-20 22:47:17
    • 点击数(170103)

    独孤九贱(1)_HTML5视频教程

    华夏棋牌《php.cn原创html5视频教程》课程特点:php中文网原创滑稽段子系列课程,以恶弄,段子为主题气焰气焰的php视频教程!轻松的教授修养气焰气焰,杂乱的教授修养形式,让同砚们在不知不觉中,学会了HTML知识。 ...

    • 2017-03-13 10:15:11
    • 点击数(137390)

    ThinkPHP5实战之[教授修养治理系统]

    本套教程,以一个真实的黉舍教授修养治理系统为案例,手把手教会您怎样在一张白纸上,从零泉源,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    • 2017-07-24 16:48:56
    • 点击数(130756)

    PHP入门视频教程之一周学会PHP

    华夏棋牌一切盘算机语言的学习都要从根原泉源,《PHP入门视频教程之一周学会PHP》不只是PHP的基础部门更主要的是PHP语言的焦点手艺,是学习PHP必须控制的内容,任何PHP项目的完成都离不开这部门的内容,通...

    • 2016-11-16 14:54:14
    • 点击数(130134)

    作者信息

    相关视频教程

  • javascript低级视频教程
  • jquery 基础视频教程
  • javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程
  • 相关视频章节