一、vue生命周期简单介绍

var App={

  template:'',

  data(){

  },

  beforeCreated:function(){

    //不能操作数据,只是初始化了事件等。。

  },

  created:function(){

    //可以操作数据

  },

  beforeMount:function(){

    //new vue发生装载,替换<div id='app'></div>之前

  },

  mouonted:function(){

    //装载数据之后

  }

}

二、vue在组件的dom部分,任意的标签中写 ref='xxx'属性,在组件对象中就可以通过this.$refs.xxx的方式,获取到元素

三、希望vue渲染dom到页面后,执行的操作,比如让input获取焦点

  this.$nextTick(function(){

    //操作逻辑

  })

:git上有开发的项目作为例子,有兴趣的可以下载学习。源代码已上传git:Git地址,也可以扫码加入QQ交流群

                                                                                

vue教程(四)--其他实用用法补充的更多相关文章

  1. vue第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法)

    第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法) #课程目标 了解 vue 框架的特点 掌握创建 vue 实例 掌握 data ...

  2. 手把手教从零开始在GitHub上使用Hexo搭建博客教程(四)-使用Travis自动部署Hexo(2)

    前言 前面一篇文章介绍了Travis自动部署Hexo的常规使用教程,也是个人比较推荐的方法. 前文最后也提到了在Windows系统中可能会有一些小问题,为了在Windows系统中也可以实现使用Trav ...

  3. vue教程1-08 交互 get、post、jsonp

    vue教程1-08 交互 get.post.jsonp 一.如果vue想做交互,引入: vue-resouce 二.get方式 1.get获取一个普通文本数据: <!DOCTYPE html&g ...

  4. vue教程1-06 v-bind属性、class和style

    vue教程1-06 属性.class和style 一.属性 属性: v-bind:src="" width/height/title.... 简写: :src="&quo ...

  5. day 83 Vue学习四之过滤器、钩子函数、路由、全家桶等

    Vue学习四之过滤器.钩子函数.路由.全家桶等   本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤 ...

  6. CRL快速开发框架系列教程四(删除数据)

    本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...

  7. C#微信公众号开发系列教程四(接收普通消息)

    微信公众号开发系列教程一(调试环境部署) 微信公众号开发系列教程一(调试环境部署续:vs远程调试) C#微信公众号开发系列教程二(新手接入指南) C#微信公众号开发系列教程三(消息体签名及加解密) C ...

  8. 无废话ExtJs 入门教程四[表单:FormPanel]

    无废话ExtJs 入门教程四[表单:FormPanel] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在窗体里加了个表单.如下所示代码区的第28行位置,items:form. ...

  9. TFS(Team Foundation Server)敏捷使用教程(四):工作项跟踪(1)

    工作项跟踪(1) 可跟踪性是软件过程的重要能力,TFS主要是以工作项来实现过程的可跟踪性.曾有人问:"你们实际项目里的工作项是怎么样的?能不能让我们看看?"我也一直很好奇别的公司T ...

随机推荐

  1. 减少Qt编译时间暨简单Qt裁剪

    本站所有文章由本站和原作者保留一切权力,仅在保留本版权信息.原文链接.原文作者的情况下允许转载,转载请勿删改原文内容, 并不得用于商业用途. 谢谢合作.原文链接:减少Qt编译时间暨简单Qt裁剪 编译一 ...

  2. linux dll hell--链接库real name, soname, link name

    DLL hell 是指 Windows 系统上动态库的新版本覆盖旧版本,且新版本不能兼容旧版本的问题. 例如:装新软件,但原有的软件运行不起来了.   Linux 系统下也同样面临着和 Windows ...

  3. java.lang.Integer cannot be cast to java.lang.String

    错误原因是类型转换! 说Integer 类型不能转成String类型.  解决办法: 将错误中的(String)强制转换类型修改为    object.toString() toString方法是Ja ...

  4. 3022Java_运算

    运算 1.运算符分类 算术运算符 二元运算符 +,-,*,/,% 一元运算符 ++,-- 赋值运算符   = 扩展运算符 +=,-=,*=,/= 关系运算符 >,<,>=,<= ...

  5. 原生js封装轮播图

    个人实际开发中用到的效果问题总结出来便于自己以后开发查看调用,如果也适用其他人请随意拿走勿喷就行! 原生js对于思路要求比较高,在js代码我都写有备注,足够理解并使用,即使是小白或者刚入行的程序员也比 ...

  6. Xmanager 5远程连接CentOS7图形化界面

    1.安装Xmanager 5下载链接:https://pan.baidu.com/s/1JwBk3UB4ErIDheivKv4-NA提取码:cw04 双击xmgr5_wm.exe进行安装 点击‘下一步 ...

  7. 爱,死亡和机器人(Love,Death&Robots)

    从我自己的角度来讲,我真的是很喜欢这部短片,奇幻,科幻,喜剧交叉在一起构成了这18部短片.精彩绝伦,我只能这么去形容. 但是有没有不足呢?客观的来说,也存在不足,过度的吹捧使得有些人神话了它,认为立意 ...

  8. 使用JMH做Benchmark基准测试

    目录 BenchMark介绍 开始前的步骤 例子 代码 报告 注解介绍 @BenchmarkMode @OutputTimeUnit @Iteration @WarmUp @State @Fork @ ...

  9. POJ 3155:Hard Life(最大密度子图)

    题目链接 题意 给出n个人,和m对有冲突的人.要裁掉一些人,使得冲突率最高,冲突率为存在的冲突数/人数. 思路 题意可以转化为,求出一些边,使得|E|/|V|最大,这种分数规划叫做最大密度子图. 学习 ...

  10. python爬虫登陆问题

    根据腾讯课堂网页登陆问题进行解说(需要安装谷歌浏览器): 1.导入库 import requests from selenium import webdriver 2.根据腾讯课堂链接,进入页面,获取 ...