1.ref

  ref可以直接访问元素,而不需要使用querySelector或者其他dom节点的原生方法。

  <div ref = "box"></div>

  在js中,这个原生会被存到this.$ref这个对象中,对应的键名就是为这个元素的ref属性设置的值  使用this.$ref.box访问这个元素

  在组件中这个属性尤为有用。同一组件的代码可能在页面中出现多次,这从根本上不能为组件内的元素添加唯一类名而使用querySelector来选择该元素,相比之下ref只包含当前组件内部元素引用,总是指向该组件内的对应元素。

2.生命周期

  例:如果将一个函数设置为一个组件或vue实例的created属性,他会在组件创建完成时调用。

  8个主要生命周期钩子:beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。每个的作用这里不做过多的说明。

  注意点:在vue2.0中,mounted钩子触发时并不能保证元素已经被添加到DOM上。想要保证元素被添加可以使用vue.nextTick()方法,也是使用this.$nextTick()调用,并同时传入一个回调函数

    在回调函数中添加需要在元素被添加到DOM之后运行的代码

VUE基础回顾6的更多相关文章

  1. 自定义指令 VUE基础回顾7

    vue除了有v-if等内置指令,我们也可以创建自定义指令. 例:我们可以实现一个可以每隔一秒闪烁的节点,类似于<blink>标签的行为.添加一个指令类似于添加一个过滤器,可以将他传入vue ...

  2. 一、VUE基础回顾1

    1.v-if和v-show v-if 和v-show都可以显示和隐藏元素: 区别:(1)v-if初始值为false那么这个元素不会被渲染 ,v-show不管初始值为何值都会被渲染 (2)v-if是控制 ...

  3. 动画 VUE基础回顾8

    过渡和动画 使用<transition> 组件包裹 例: <transition name="fade"> <div v-if="true& ...

  4. VUE基础回顾2

    1.响应式 vue修改了每个添加到data上的对象,当该对象发生变化时vue会收到通知,从而实现响应式.对象的每个属性都会被替换为getter,setter方法. 有两种方式实现data对象的监听 ( ...

  5. vue基础回顾 router

    vue-router 1. 底层原理 hash 或者h5 histroy(有兼容性) 2. 使用的时候Vue需要引入VueRouter Vue.use(VueRouter) //VueRouter 底 ...

  6. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch

    回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...

  7. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期

    回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...

  8. Vue基础之插值表达式的另一种用法!附加变量的监听!

    Vue基础之插值表达式的另一种用法!附加变量的监听! 讲这个之前我们先回顾一下原来的用法! <body> <!-- Vue.js的应用可以分为两个重要的组成部分 一个是视图! 另一个 ...

  9. Vue基础之Vue的模板语法

    Vue基础之Vue的模板语法 数据绑定 01 数据绑定最常见的形式就是使用插值表达式(两个大括号!)[也就是小胡子语法!mustache] <body> <!-- Vue.js的应用 ...

随机推荐

  1. 小米手机root

    目录 概念 解锁流程 root流程 如何Root? 关于supersu 关于twrp 关于Magisk Manager ref: 申请开发板流程 线刷教程 小米手机root 概念 解锁: 使手机可以刷 ...

  2. PHP 简易网页访问统计

    传统的网页访问统计,已经有很多,如 51la.百度统计.站长统计 一般都需要引用JS,在你的网页内嵌入JS,这个操作存在风险,并且不可控. 可以考虑使用 [img src.css src.link h ...

  3. linux编译qt

    1.使用QtCreator新建工程,windows和linux都可以,这样才有.pro文件 2.在linux中进入工程目录,生成makefile: /home/5.9.2/gcc_64/bin/qma ...

  4. IIS部署FLASK网站

    在 Windows 平台部署基于 Python 的网站是一件非常折腾的事情,Linux/Unix 平台下有很多选择,本文记录了 Flask 部署到 IIS 的主要步骤,希望对你有所帮助. 涉及工具和平 ...

  5. 微服务, 架构, 服务治理, 链路跟踪, 服务发现, 流量控制, Service Mesh

    微服务, 架构, 服务治理, 链路跟踪, 服务发现, 流量控制, Service Mesh 微服务架构   本文将介绍微服务架构和相关的组件,介绍他们是什么以及为什么要使用微服务架构和这些组件.本文侧 ...

  6. 【bat】实现数组,for循环取数据

    1.数组对象 @echo off set objLength=2 set obj[0].name=test1 set obj[0].password=1234 set obj[1].name=test ...

  7. mysql新增用户无法授权!? 解决方案

    先上解决方法  :) 创建用户cat 密码 CREATE USER '; 修改user表中的注册用户cat update user set host='%' where user='cat'; 授权: ...

  8. 一致性hash算法应用场景、详解与实现(JAVA)

    一.概述 在分布式环境下,开发者通常会遇到一些分布存储的场景,例如数据库的分库分表(比如用户id尾号为1的放入数据库1,id尾号为2的放入数据库2):又如分布式缓存数据的获取(比如根据ip地址进行缓存 ...

  9. PHP表单select中有0选项的处理

    <div class="layui-inline"> <label class="layui-form-label">是否锁定</ ...

  10. 分布式事务的 N 种实现

    转自:http://myfjdthink.com/2019/04/26/%E5%88%86%E5%B8%83%E5%BC%8F%E4%BA%8B%E5%8A%A1%E7%9A%84-n-%E7%A7% ...