vue中的dom节点和window对象
window对象
首先window对象是浏览器下的默认对象，也就是全局对象，在没有明确指向的时候this指向window。即使切换路由，window对象里面的属性和方法依旧会保留。因此可以在控制栏直接输入this、window、self都可以直接打印window对象。window对象很很多默认的方法和属性。
一切全局变量和方法都是window的属性和方法，也就是只要没有指定作用域就会赋值给window。
<script type="text/javascript"> var name = "chunlynn"; this.sex = "man"; // 这里的this就是隐式的window对象，相当于 sex = "man"; age = 27; </script>
像这种name、this、age都挂载到了window对象上，成为了window对象的属性。
即使用了框架，比如vue，jQuery，也只是在window下挂载一个对象，比如引入jQuery之后就会在全局挂载一个$的对象。还是可以直接通过window调用全局属性和方法。
在vue中，因为用webpack打包，每个vue都是单独的模块，所以需要window._this=1 这样才能够引入window对象。而且需要定义在相应的script中。这样就可以在控制台直接用_this得到这个变量。
dom元素
vue中最好不要直接操作dom元素的。因为vue是用虚拟dom树就行插入的。
首先数据发生改变，就会经过 Data 处理，然后Dep会发出通知(notify)，告诉 Watcher 有数据发生了变化，接着 Watcher 会传达给渲染函数跟他说有数据变化了，可以渲染视图了(数据驱动视图)，进而渲染函数执行render 方法去更新 VNODE，也就是我们说的虚拟DOM，最后虚拟DOM根据最优算法，去局部更新需要渲染的视图。
vue中对dom节点的操作一般是用ref来完成的。ref 加在普通的元素上，用this.$refs.name 获取到的是dom元素，和原生的document.get(ID)获得的dom元素一样，拥有这个dom元素的默认属性，像innertext这种，而ref 加在组件上，用this.$refs.name 获取到的是vue组件实例，可以使用组件的所有属性和方法。此时的结果是一个字典序列，可以直接this.$refs.name[用到的属性]来获取并且更改。
但是ref的对象是一个for循环的数组，里面每一个元素就是vue对象，也是字典序列。这里因为ref的对象是一个li，所以每一个元素都是li对象。
ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。
如果是自定义的组件，甚至可以通过ref调用emit(A)来实现@ A="实现A"的方法。其实子组件包括第三方组件的api，也就是组件真正实现的地方定义的方法和属性，都可以在用ref获得这个组件的方法后，自己模拟实现。
获取dom节点的3种方式
vue本来无需操作DOM来更新界面，而且Vue也不推荐我们直接操作DOM，但是我们非要拿到DOM操作DOM怎么办，那也是有方法的，而且不止一种方法
方式一：（事件源）
<body>
<div id="aa">
<input type="button" value="点击" v-on:click='fun'/>
</div>
<script>
new Vue({
el:'#aa',
methods:{
fun:function(event){
console.log(event.target);
}
}
})
</script>
</body>输出结果
当然也可以在方法中传参进去：
<body>
<div id="aa">
<input type="button" value="点击" v-on:click='fun($event.target)'/>
</div>
<script>
new Vue({
el:'#aa',
methods:{
fun(x){
console.log(x);
}
}
})
</script>
</body>方式二：（使用ref）
<body>
<div id="aa">
<input ref='name' type="button" value="点击" v-on:click='fun'/>
</div>
<script>
new Vue({
el:'#aa',
methods:{
fun(){
console.log(this.$refs.name);
}
}
})
</script>
</body>输出结果：
方式三：（自定义全局指令）
<body>
<div id="aa">
<input type="button" value="点击" v-get/>
</div>
<script>
Vue.directive("get",{
bind:function(el){
console.log(el);
}
})
new Vue({
el:'#aa'
})
</script>
</body>这里不用点击，就可以获取元素，好像在谷歌显示不友好，
在火狐显示会好点
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue :src 文件路径错误问题的简单解决方法，本文分步骤给大家介绍的非常详细，感兴趣的朋友跟随脚本之家小编一起学习吧2018-05-05
这篇文章主要介绍了Vue组件实现卡片动画倒计时示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要给大家介绍了基于vue通用表单解决方案的思考与分析，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-03-03
axios的封装和api接口的统一管理，其实主要目的就是在帮助我们简化代码和利于后期的更新维护，在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，本文就给大家介绍一下axios封装与api接口封装管理,需要的朋友可以参考下2023-06-06
跳转到指定URL,向history栈添加一个新的纪录,点击后退会返回至上一个页面,这篇文章给大家介绍vue如何跳转到其他页面,包括无参跳转和带参跳转,本文结合实例代码给大家介绍的非常详细,需要的朋友参考下吧2023-10-10
基本上后台管理系统都需要有多页签的功能，但是因为一些脚手架项目基本都把这个功能给集成好了，导致在学习或者修改的时候不知道该如何下手。今天这篇文章就来聊一聊，vue-element-admin项目是如何实现多页签功能的2022-09-09
这篇文章主要介绍了Vue Components 数字键盘的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
本文主要介绍了vue中v-if失效原因及解决方法,一般v-if失效都是和绑定变量有关,下面就来具体介绍一下,感兴趣的可以了解一下2023-09-09
axios是用来做数据交互的插件，最近正在学习axios，所以想着整理成笔记方便大家和自己参考学习，下面这篇文章主要跟大家介绍了关于Axios使用方法的相关资料，需要的朋友们下面来一起看看吧。2017-07-07
在Vue中,有多种方式可以实现模糊查询,这篇文章主要介绍了5种vue中的常用方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2023-08-08
最新评论