VUE基础回顾6
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的更多相关文章
- 自定义指令 VUE基础回顾7
vue除了有v-if等内置指令,我们也可以创建自定义指令. 例:我们可以实现一个可以每隔一秒闪烁的节点,类似于<blink>标签的行为.添加一个指令类似于添加一个过滤器,可以将他传入vue ...
- 一、VUE基础回顾1
1.v-if和v-show v-if 和v-show都可以显示和隐藏元素: 区别:(1)v-if初始值为false那么这个元素不会被渲染 ,v-show不管初始值为何值都会被渲染 (2)v-if是控制 ...
- 动画 VUE基础回顾8
过渡和动画 使用<transition> 组件包裹 例: <transition name="fade"> <div v-if="true& ...
- VUE基础回顾2
1.响应式 vue修改了每个添加到data上的对象,当该对象发生变化时vue会收到通知,从而实现响应式.对象的每个属性都会被替换为getter,setter方法. 有两种方式实现data对象的监听 ( ...
- vue基础回顾 router
vue-router 1. 底层原理 hash 或者h5 histroy(有兼容性) 2. 使用的时候Vue需要引入VueRouter Vue.use(VueRouter) //VueRouter 底 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch
回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期
回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...
- Vue基础之插值表达式的另一种用法!附加变量的监听!
Vue基础之插值表达式的另一种用法!附加变量的监听! 讲这个之前我们先回顾一下原来的用法! <body> <!-- Vue.js的应用可以分为两个重要的组成部分 一个是视图! 另一个 ...
- Vue基础之Vue的模板语法
Vue基础之Vue的模板语法 数据绑定 01 数据绑定最常见的形式就是使用插值表达式(两个大括号!)[也就是小胡子语法!mustache] <body> <!-- Vue.js的应用 ...
随机推荐
- 【java编程】vo、po、dto、bo、pojo、entity、mode如何区分
Java Bean:一种可重用组件,即“一次编写,任何地方执行,任何地方重用”.满足三个条件 类必须是具体的和公共的 具有无参构造器 提供一致性设计模式的公共方法将内部域或暴露成员属性 VO valu ...
- Failure [DELETE_FAILED_INTERNAL_ERROR]之后rm apk卸载
版权声明:本文为博主原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/heng615975867/arti ...
- 支付宝小程序开发——H5跳转到小程序(获取小程序页面的链接)
前言: 这个问题支付宝小程序官方文档并没有专门说明,钉钉群的官方技术支持给了个开发者社区的帖子,详见:如何跳转小程序. 如果配置的页面没有参数还好,不会出问题,如果有参数,很可能配出来的链接无法正常获 ...
- MQTT研究之EMQ:【EMQX使用中的一些问题记录(4)】
最近比较忙,有些关于EMQ的使用问题,没有时间记录了,趁这个周末抽点时间,将最近遇到的,觉得比较有价值的一个问题,分享给大家吧. 这里是针对前面的一篇博客,做的一个深入研究,关于订阅系统总线判断设备上 ...
- redhat 6安装python 3.7.4报错ModuleNotFoundError: No module named '_ctypes' make: *** [install] Error 1
问题描述: 今天在测试环境中,为了执行脚本,安装下python3命令,在执行make install的时候报错: ModuleNotFoundError: No module named '_ctyp ...
- 《Effective Java》第2章 对所有对象都通用的方法
第10条:覆盖equals时,请遵守通用约定 1.使用==来比较两个对象的时候,比较的是两个对象在内存中的地址是否相同(两个引用指向的是否为同一个对象):Object中定义的equals方法也是这样比 ...
- Android Studio Error:Execution failed for task ':app:compileDebugJavaWithJavac' 根本解决方法
造成这种异常的原因有很多.具体的还是要去终端编译,查看到底是什么地方出错了,然后具体问题具体分析. 终端进入项目的根目录,然后输入命令 gradlew compileDebugJavaWithJava ...
- 自定义程序启动脚本加入到supervisord下管理
ubuntu14.04 系统,直接通过apt-get安装即可 apt-get install supervisord 官网:http://www.supervisord.org/ 主配置文件 这个配置 ...
- shell基础知识7-字段分隔符与迭代器
什么是内部字段分隔符 内部字段分隔符(Internal Field Separator,IFS)是shell脚本编程中的一个重要概念.在处理 文本数据时,它的作用可不小. 作为分隔符,IFS有其特殊用 ...
- java html实体转义
public static void main(String[] args) { String str = " -<->-&-"-'" ...