每个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. ubuntu 下安装 navicat 12

    一.去官网下载navicat112_premium_cs_x64 for linux版本二.用tar解压安装包三.navicat解压即可用,直接进入解压后的目录,然后用‘./’运行start_navi ...

  2. LeetCode Weekly Contest 121

    上周因为感冒没有刷题,两个星期没有刷题,没手感了,思维也没有那么活跃了,只刷了一道,下个星期努力. 984. String Without AAA or BBB Given two integers  ...

  3. ATS 相关

    启动命令 /usr/local/CCTS/bin/trafficserver   start |stop | restart 清盘 /usr/local/CCTS/bin/traffic_server ...

  4. 剑指offer 09:变态跳台阶

    题目描述 一只青蛙一次可以跳上1级台阶,也可以跳上2级……它也可以跳上n级.求该青蛙跳上一个n级的台阶总共有多少种跳法. /* f(n-1) = f(n-2) + f(n-3) + ... + f(0 ...

  5. 无法启动iis express web 服务器

    删除项目文件夹下的隐藏文件夹 (.vs)文件

  6. python+selenium测试

    网址http://blog.csdn.net/u011541946/article/category/6788788/1

  7. [原]osg模型动画|骨骼动画

    参考源码:osg的官方例子:osganimationviewer 首先制作一个带骨骼动画的模型  demo.FBX 这里面我们做了两个骨骼动画:1.open   2.close 下面开始在osg中使用 ...

  8. 关于虹软人脸识别SDK的接入

    背景: 虹软的人脸识别还是不错的,在官方注册一个账号,成为开发者,下载SDK的jar包,在开发者中心,找一个demo就可以开始做了,安装里边的逻辑,先看理解代码,然后就可以控制代码,完成自己想要的功能 ...

  9. 第 10 章 容器监控 - 078 - Docker 最常用的监控方案

    Docker 最常用的监控方案 当 Docker 部署规模逐步变大后,可视化监控容器环境的性能和健康状态将会变得越来越重要. Docker 自带的几个监控子命令: ps .top .stats 功能更 ...

  10. structure

    https://wenku.baidu.com/view/a82b12d62dc58bd63186bceb19e8b8f67c1cef04.html?sxts=1541829436140