精华内容
参与话题
问答
  • vue.js中created方法作用

    万次阅读 2017-05-22 16:08:13
    这是它的一个生命周期钩子函数,就是一个vue实例被生成后调用这个函数。...一般可以在created函数中调用ajax获取页面初始化所需的数据。 实例生命周期 每个 Vue 实例在被创建之前都要经过一系列的初始化过程

     这是它的一个生命周期钩子函数,就是一个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 是否有“控制器”的概念?答案是,没有。组件的自定义逻辑可以分布在这些钩子中。

    生命周期图示

    下图说明了实例的生命周期。你不需要立马弄明白所有的东西,不过以后它会有帮助。

    Lifecycle


    展开全文
  • Vue进阶(三十六):vue.js中created方法的使用详解

    万次阅读 多人点赞 2019-01-30 14:36:54
    这次给大家带来vue.js中created方法的使用详解,使用vue.js中created方法的注意事项有哪些,下面就是实战案例,一起来看一下。这是它的一个生命周期钩子函数,就是一个vue实例被生成后调用这个函数。一个vue实例被...

    这次给大家带来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)
    }
    })
    

    也有一些其它的钩子,在实例生命周期的不同阶段调用,如 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:"<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"
     })
    

    可以看到输出如下:

    可以看到都在created赋予初始值的情况下成功渲染出来了。

    但是同时看console台如下:

    可以看到第一个报了错,实际是因为找不到id,getElementById(ID) 并没有找到元素,原因如下:

    在created的时候,视图中的html并没有渲染出来,所以此时如果直接去操作html的dom节点,一定找不到相关的元素

    而在mounted中,由于此时html已经渲染出来了,所以可以直接操作dom节点,故输出了结果“唐浩益”。

    相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

    推荐阅读:

    Angular4的router使用详解

    webpack的4.0打包优化如何实现

    展开全文
  • Vue生命周期中mounted和created的区别

    万次阅读 多人点赞 2018-04-18 08:30:08
    通过一系列实践,现在把所有遇到的问题整理一遍,今天记录一下created和mounted的区别:二、created和mounted区别?官方图解如下:我们从图中看两个节点:created:在模板渲染成html前调用,即通常初始化某些属性值,...

    一、什么是生命周期?

    用通俗的语言来说,就是Vue中实例或者组件从创建到消灭中间经过的一系列过程。虽然不太严谨,但是也基本上可以理解。
    通过一系列实践,现在把所有遇到的问题整理一遍,今天记录一下created和mounted的区别:

    二、created和mounted区别?

    官方图解如下:

    我们从图中看两个节点:
    created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。
    mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。
    其实两者比较好理解,通常created使用的次数多,而mounted通常是在一些插件的使用或者组件的使用中进行操作,比如插件chart.js的使用: var ctx = document.getElementById(ID);通常会有这一步,而如果你写入组件中,你会发现在created中无法对chart进行一些初始化配置,一定要等这个html渲染完后才可以进行,那么mounted就是不二之选。下面看一个例子(用组件)。

    三、例子

    [javascript] view plain copy
    1. <span style="font-size:14px;">Vue.component("demo1",{  
    2.         data:function(){  
    3.             return {  
    4.                 name:"",  
    5.                 age:"",  
    6.                 city:""  
    7.             }  
    8.         },  
    9.         template:"<ul><li id='name'>{{name}}</li><li>{{age}}</li><li>{{city}}</li></ul>",  
    10.         created:function(){  
    11.             this.name="唐浩益"  
    12.             this.age = "12"  
    13.             this.city ="杭州"  
    14.             var x = document.getElementById("name")//第一个命令台错误  
    15.             console.log(x.innerHTML);  
    16.         },  
    17.         mounted:function(){  
    18.             var x = document.getElementById("name")/</span>/第二个命令台输出的结果<span style="font-size:14px;">  
    19.             console.log(x.innerHTML);  
    20.         }  
    21.     });  
    22.     var vm = new Vue({  
    23.         el:"#example1"  
    24.     })</span>  
    可以看到输出如下:

    可以看到都在created赋予初始值的情况下成功渲染出来了。
    但是同时看console台如下:

    可以看到第一个报了错,实际是因为找不到id,getElementById(ID) 并没有找到元素,原因如下:
    在created的时候,视图中的html并没有渲染出来,所以此时如果直接去操作html的dom节点,一定找不到相关的元素

    而在mounted中,由于此时html已经渲染出来了,所以可以直接操作dom节点,故输出了结果“唐浩益”。


    转自 https://blog.csdn.net/xdnloveme/article/details/78035065

    展开全文
  • Vue生命周期中mounted和created的区别

    万次阅读 多人点赞 2017-09-19 21:55:03
    通过一系列实践,现在把所有遇到的问题整理一遍,今天记录一下created和mounted的区别: 二、created和mounted区别? 官方图解如下: 我们从图中看两个节点: created:在模板渲染成html前调用,即通常...

    一、什么是生命周期?

    用通俗的语言来说,就是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:"<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")//第二个命令台输出的结果
                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中created、mounted等方法整理

    万次阅读 多人点赞 2018-05-09 16:17:11
    created:html加载完成之前,执行mounted:html加载完成后执行methods:事件方法执行watch:watch是去监听一个值的变化,然后执行相对应的函数。computed:computed是计算属性,也就是依赖其它的属性计算所得出最后的...
  • Vue生命周期中mounted和created的区别

    千次阅读 2018-05-06 18:03:13
    通过一系列实践,现在把所有遇到的问题整理一遍,今天记录一下created和mounted的区别:二、created和mounted区别?官方图解如下:我们从图中看两个节点:created:在模板渲染成html前调用,即通常初始化某些属性值,...
  • created :处于loading结束后,还做一些初始化,实现函数自执行(data数据已经初始化,但是DOM结构渲染完成,组件没有加载) beforemount:处于组件创建完成,但未开始执行操作 mounted :处于发起后端请求,获取...
  • vue请求数据放在created好还是mounted里好 建议放在createdcreated:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的...
  • <p>I have: <p><strong>Model</strong></p> <pre><code>public function ...<p>But it returns null, when in fact every row in my table has a created_at datetime. What is going wrong here? </div>
  • IMP-00041: Warning: object created with compilation warnings IMP-00041: Warning: object created with compilation warnings  "CREATE FORCE VIEW "QBJMES"."SMY_FILE6"
  • 在使用C#调用qt的dll时,第一次调用的一般没事,第二,三次就会出现Widgets must be created in the GUI thread。 这是我用的qt中的代码 BOOL WINAPI DllMain( HINSTANCE hInstance, DWORD dwReason, LPVOID /*...
  • 通过OCP集群创建Hitchhiker时有时启动失败容器显示事件信息:Pod sandbox changed, it will be killed and re-created.。如图所示: 出现该问题的现象是:在当前namespace下创建第一个Hitchhiker可以正常启动(容器...
  • created:在模板渲染成html前调用,即通常初始化某些属性值,...如:数据初始化一般放到created里面,这样可以及早发请求获取数据, 如果有依赖dom必须存在的情况,就放到mounted(){this.$nextTick(() => { /* co...
  • vue的created函数中,方法的执行顺序

    万次阅读 2019-03-20 21:55:51
    vue的created钩子函数中,方法的执行顺序 情景:vue框架中通常在created钩子函数里执行访问数据库的方法,然后返回数据给前端,前端data中定义全局变量接收数据 但是如果你在created中执行了好几个访问数据库的函数...
  • JPA: 方案一:(不支持主动传值) 1.在启动类上添加@...3.在字段上添加@CreatedBy、@CreatedDate、@LastModifiedBy、@LastModifiedDate 方案二:(支持传值,不传则默认当前人、当前时间) 1、自...
  • created:function(){ function classfy(index){ switch(index){ case 0:dishes = this.bigDishes.recommend; break; case 1:dishes = this.bigDishes.specile; break; case ...
  • 但是注意,全局vue.js不强制刷新或者重启时只创建一次,也就是说,created()只会触发一次; activated():在vue对象存活的情况下,进入当前存在activated()函数的页面时,一进入页面就触发;可用于初始化页面数据等...
  • vue 子组件 created 方法不执行问题

    万次阅读 2019-05-10 16:15:29
    近期做了一个项目 里面有一个树形菜单,将数据写在 js (死数据)中,所有的东西都能够正常执行(i 标签,子节点,父节点),但是当在请求接口文件或者请求后台数据的时候,发现引入的子组件的created方法不执行,...
  • 我们在做项目时,通常会在组件created()钩子函数中请求后端接口,得到数据后渲染视图,这样可以达到切换到对应页面,即可显示后端数据。 问题: vue生命周期created()前做了什么? 我们可以看到,官网上给出的是,...
  • Only the original thread that created a view hierarchy can touch its views 翻译过来:只有创建这个view的线程才能操作这个view 在使用Volley的时候这个问题就不怎么会遇到了,那是因为无论是...

空空如也

1 2 3 4 5 ... 20
收藏数 980,066
精华内容 392,026
关键字:

created