每个Vue实例被创建后都要经历初始化过程。在这个过程中也会运行一些叫做生命周期钩子的函数，方便用户在不同阶段进行不同的代码实现。

1.Created

　　在实例创建完成后立即执行的函数。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script type="text/javascript" src="js/vue.js"></script>

    </head>

    <body>

    </body>

    <script>

        var vm = new Vue({

            data: {

                mess: "Hellow"

            },

            created: function() {

                console.log(this.mess);

            }

        })

    </script>

</html>

这里可以看见当输出了我们data里面的mess。这里出现的this是指向调用它的 Vue 实例，在这里他指向的是vm

2.生命周期图示（图片来自Vue教程）

Vue中的钩子的更多相关文章

  1. vue中的钩子函数的理解

    接下来我们对几个钩子函数进行解释 beforeCreated:这个钩子函数实在vue实例创建后,触发的.这个时候还没有进行data里的数据监听和事件的初始化 其实大家很多时候都会在created钩子函 ...

  2. 【转】vue中的钩子函数。。

    前言 在vue开发SPA应用的过程中,多数情况下我们需要解决一个问题 就是在路由跳转的过程中需要更新你SPA应用的 title , 这一节不说其他,就展示如何使用 vue-router 的 导航钩子  ...

  3. vue中的钩子函数

    什么是vue的钩子函数? Vue 实例在被创建时,会经过一系列的初始化过程,初始化过程中会运行一些函数,叫做生命周期钩子函数,通过运用钩子函数,用户在可以在Vue实例初始化的不同阶段添加自己的代码,以 ...

  4. [Vue]vue中各选项及钩子函数执行顺序

    在vue中,实例选项和钩子函数和{{}}表达式都是不需要手动调用就可以直接执行的. 一.生命周期图示 二.vue中各选项及钩子函数执行顺序 1.在页面首次加载执行顺序有如下: beforeCreate ...

  5. vue中父子组件钩子的执行顺序

    我们已经非常熟悉单个的vue组件的生命周期执行顺序了,但是,如果有嵌套组件,父子组件的生命周期的执行顺序是什么? 当父子组件在加载的时候,执行的先后顺序为 父beforeCreate -> 父c ...

  6. Vue 中的生命周期和钩子函数

    生命周期: beforeCreate:el 和 data 并未初始化 (此方法不常用) created:完成了 data 数据的初始化,el的初始化未完成.用来发送ajax beforeMount:( ...

  7. vue中使用keepAlive组件缓存遇到的坑

    项目开发中在用户由分类页category进入detail需保存用户状态,查阅了Vue官网后,发现vue2.0提供了一个keep-alive组件. 上一篇讲了keep-alive的基本用法,现在说说遇到 ...

  8. Vue.js-11：第十一章 - Vue 中 ref 的使用

    一.前言 在之前的前端开发中,为了实现我们的需求,通常采用的方案是通过 JS/Jquery 直接操纵页面的 DOM 元素,得益于 Jquery 对于 DOM 元素优异的操作能力,我们可以很轻易的对获取 ...

  9. vue 中监测滚动条加载数据（懒加载数据）

    vue 中监测滚动条加载数据(懒加载数据) 1:钩子函数监听滚动事件: mounted () { this.$nextTick(function () { window.addEventListene ...

随机推荐

  1. OGG 18.1 for mysql远程捕获测试

    Ogg18.1 remote capture要求mysql为5.7版本,只能从linux远程捕获mysql on windows or linux,且不支持DDL捕获.支持远程mysql为commun ...

  2. java eclipse war包的二次开发方法

    有实际项目在跑的war包,却没有源码,苦于想查看源码,身处运维组为研发组看不起,拿不到源码,只能自己来反编译了. 只要你细心点,其实在解压war包后,可以看到文件夹中,已经存在了jsp文件,但是却没有 ...

  3. vue-cli webpack浅析

    一直对脚手架的webpack配置很感兴趣. 长话短说,先从npm start开始. 打开package.json 找到scripts 可以看到start 运行的是dev, dev 又是从 build/ ...

  4. Varnish 初识

    基础 Varnish Cache是​​一种Web应用程序加速器,也称为缓存HTTP反向代理.您将它安装在任何HTTP的服务器前面,并将其配置为缓存内容.Varnish Cache非常非常快.它通常可以 ...

  5. 基于OpenCV做“三维重建”（0）-- OpenCV3.2+VIZ6.3.0在vs2012下的编译和使用

    一.问题提出         ViZ对于显示3维的效果图来说,非常有帮助:我在使用OpenCV进行双目测距的过程中,有一些参数希望能够通过可视化的方法显示出来,所以参考了这方面相关的资料.做了一些实验 ...

  6. 利用策略模式实现了同一接口的多个Servicel实现类，如何同时注入Controller

    解决方法如上图,通过给实现类起别名,并在controller中,通过@Qualifier注解获取不同的实现类,之前没有这样写,会出现这样的情况: 通过@autowired注解注入dao层时为空,会报空 ...

  7. jQuery Validate和Thymeleaf相关

    jQuery Validate https://www.cnblogs.com/liuhongfeng/p/5135676.html https://www.cnblogs.com/linjiqin/ ...

  8. linux 查看命令总结

    1.tail -f -n 200 cat.log 2.使用less命令 less all.2018092510.0.log 打开log文件,默认显示100行记录. 输入/CustGroupListSe ...

  9. golang协程踩坑记录

    1.主线程等待多个协程执行完毕后,再执行下面的程序.golang提供了一个很好用的工具. sync.WaitGroup下面是个简单的例子. 执行结果: 2.主线程主动去结束已经启动了的多个协程.执行结 ...

  10. Amazon 刷单的几种方式及安全性？

    刷单需要注意的几个点 1.通过关键词,找产品.不要直接通过连接或者ASIN购买,容易被亚马逊监控. 2.添加购物车时最好添加同类产品表现好的三个到购物车,关联同类产品.在页面多浏览一下,多打开几个同类 ...