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. 【WPF】通过修改dataGrid的cell的style,改变选中行失去焦点时的颜色

    <Style TargetType="{x:Type DataGridCell}"> <Style.Triggers> <Trigger Proper ...

  2. 深度相机Astra Pro测试教程

    最近在微信群内,很多群友在群友的推荐下,购买了Astra pro的深度相机,价格地道,物超所值!群友反馈积极,所以这里出一波简单的教程.   以下内容知识抛砖引玉,主要讲解windows下和Ubunt ...

  3. Python - Django - 中间件 process_exception

    process_exception(self, request, exception) 函数有两个参数,exception 是视图函数异常产生的 Exception 对象 process_except ...

  4. 【转】Notepad++如何设置行高

    Notepad++行高没有提供正式的设置方法,但可以通过一个 hack 来调整: 在[设置]「Style Configurator」对话框(中文是「语言格式设置」)里选择语言的地方选第一项「Globa ...

  5. Zabbix主动模式与被动模式的区别——最简单的解释

    一直搞不清楚Zabbix的主动模式和被动模式的差别,网上看到别人博客里的解释都是云里雾里的,完全搞不清.知道偶然看到了以下这个解释.就基本上明白了. Zabbix的主动模式和被动模式都是相对agent ...

  6. MacbookPro15 2019 闪屏雪花现象方案汇总

    1. 系统偏好设置,显示器,关闭 "自动调节亮度" "原彩显示",即取消勾选. 2. 系统偏好设置,节能,关闭 "自动切换图形卡模式",即取 ...

  7. Linux 就该这么学 CH03 管道符、重定向和环境变量

    0 概述 1 输入输出重定向 重定向技术有5种模式: 标准覆盖输出重定向 标准追加输出重定向 错误覆盖输出重定向 错误追加输出重定向 输入重定向 输入重定向是将文件导入到命令中. 输出重定向是将输入到 ...

  8. html遮罩层实现

    html文件内容如下 <!--调出子窗口按钮--> <button class="add" onclick="addClick();"> ...

  9. 更改ubuntu桌面环境

    1.修改桌面环境 update-alternatives --config x-session-manager 2.卸载某一种ppa源下面的软件 sudo apt-get install ppa-pu ...

  10. gtest入门

    介绍 gtest是谷歌开发的用来做C++单元测试的测试框架 基本概念 使用gtest,你就需要写断言(assertions),用来检查一个表达式是否为true.断言的结果有三个:正确.非致命错误.致命 ...