之前在公司做项目,一直感觉用ref来定位dom节点挺方便的.但是期间遇到了一个问题,就是在mounted(){}钩子里面使用this.$refs.xxx,打印出来的却是undefined? 于是我就对比了一下之前使用ref定位的.vue文件,发现了他们之间的区别. 我们要想知道为什么会定位不到某个DOM节点,我们首先要理解mounted(){}这个钩子函数是用来做什么的. 下面是vue官方给出的vue生命周期(部分),正如官方所说的一样,一开始不必先理解,不过随这你的学习与使用,他的参考价值会越…

找到这篇文章,写得不错,记录一下.https://www.jianshu.com/p/090937a480b5…

vm._render 生成虚拟dom 我们知道在挂载过程中, $mount 会调用 vm._update和vm._render 方法,vm._updata是负责把VNode渲染成真正的DOM,vm._render方法是用来把实例渲染成VNode,这里的_render是实例的私有方法,和前面我们说的vm.render不是同一个,先来看下vm._render定义,vm._render是通过renderMixin(Vue)挂载的,定义在src/core/instance/render.js: // 简…

vue中我们会频繁操作各种数据,但有时候发现修改完数据以后,dom并未更新? 比如有一个数组对象: obj = [{'name': 'joy'},{'name': 'bowen'}] 我要循坏插入某个属性,或者修改某个属性的值: for (let i=0; i<obj.length; i++) { obj[i].year = '20'}发现数组可以修改成功,但是dom元素不会更新,这是为什么呢? 原因:vue监听对象的变化,但是无法监听对象自身属性的改变,所以无法更新dom,除非我们更新这个数组…

例如:vue-fullscreen <template> <div class="Test"> <fullscreen ref="fullscreen" @change="fullscreenChange" > <el-button @click="toggle">全屏</el-button> something </fullscreen> </di…

<template> <div id="app"> <h2>{{msg}}</h2> <input type="text" v-model='msg' /> <button v-on:click="getMsg()">获取表单里面的数据get</button> <button v-on:click="setMsg()">设置表单的数…

<template> <div id="app"> <h2>{{msg}}</h2> <input type="text" v-model='msg' /> <button v-on:click="getMsg()">获取表单里面的数据get</button> <button v-on:click="setMsg()">设置表单的数…

1.和vue的生命周期有关,必须要在从mounted开始拿,才能拿得到里面的Dom元素 2.想在element ui 对话框打开后取dom时,应该使用$nextTick,而不是直接使用this.$refs. imgLocal2: console.log('this.$refs.imgLocal2外面', this.$refs.imgLocal2); setTimeout(() => { console.log('this.$refs.imgLocal2 setTimeout', this.$re…

<template> <div id="app"> <!-- 双向数据绑定(必须在表单里面使用) m:model v:view mvvm:model改变会影响视图,视图改变会影响model --> <h2>{{msg}}</h2> <input type="text" v-model="msg" /> <button v-on:click="getMsg()&…

好家伙, 引子: jQuery简化了程序员操作DOM的过程 vue 优势:MVVM 在vue中,程序员不需要操作DOM.程序员只需要把数据维护好即可!(数据驱动视图) 那么若要在vue中操作dom,这时就要用到"ref"了, 1.什么是ref引用, ref用来辅助开发者在不依赖与jQuery的情况下,获取DOM元素或组件的引用 每个vue中的组件实例上,都包含一个$refs对象,里面存储着对应额DOM元素或组件的引用. 默认情况下,组件的$refs指向一个空对象. 好了,现在我又要开始…