vue的dom是什么,vue通过什么属性获取DOM元素
本文主要介绍了vue中的dom节点和窗口对象，具有很好的参考价值。希望对你有帮助。如有错误或不足之处，请不吝赐教。
目录
窗口对象dom元素获取dom节点的三种方式方式1:(事件源)方式2:(使用ref)方式3:(自定义全局指令)
window对象
首先，窗口对象是浏览器下的默认对象，也就是全局对象。当没有显式点时，此点指向窗口。即使路由被切换，窗口对象中的属性和方法也将保留。所以可以直接在控制栏输入this，window，self，就可以直接打印window对象了。窗口对象有许多默认的方法和属性。
所有的全局变量和方法都是window的属性和方法，也就是只要没有指定作用域，就会赋给window。
脚本类型=文本/javascript
var name= chunlynn
this.sex= man//这里这个是隐式窗口对象，相当于sex=‘man’；
年龄=27；
/脚本
诸如name、this和age之类的名称被安装在窗口对象上，并成为窗口对象的属性。
即使使用vue、jQuery等框架，也只是在window下挂载一个对象。例如，引入jQuery后，将全局挂载一个$ object。也可以直接通过窗口调用全局属性和方法。
在vue中，因为每个vue都是与webpack打包在一起的独立模块，所以它需要window。_this=1引入窗口对象。并且需要在相应的脚本中定义。所以你可以在控制台用_this直接得到这个变量。
dom元素
最好不要在vue中直接操作dom元素。因为vue是用虚拟dom树插入的。
首先数据发生了变化，会被数据处理，然后Dep会通知Watcher数据发生了变化，然后Watcher会传达给渲染函数，告诉他数据发生了变化，视图可以渲染了(数据驱动视图)，然后渲染函数会执行render方法更新VNODE，也就是我们所说的虚拟DOM。最后，虚拟DOM将根据最优算法更新要在本地呈现的视图。
vue中对dom节点的操作一般是用ref来完成的。将ref添加到普通元素中，由此获得的dom元素。$refs.name与native document.get(ID)获得的dom元素相同，它具有这个dom元素的默认属性，比如innertext，而ref是添加到组件中的，以及由此获得的vue组件实例。$refs.name可以使用组件的所有属性和方法。此时的结果是一个字典序列，可以直接通过这个得到并改变。$refs.name[已用属性]。
但是ref的对象是for循环的数组，里面的每个元素都是vue对象和字典序列。因为这里ref的对象是一个li，所以每个元素都是一个li对象。
dom呈现完成后，ref需要可用。当使用它时，确保dom已经被渲染。例如，在生命周期mounted(){} hook中调用它，或者在此。$nextTick(()={})。
如果是自定义组件，甚至可以通过ref调用emit(A)来实现@ A= implement a 的方法。子组件其实包括第三方组件的API，也就是在组件实际实现的地方定义的方法和属性，用ref获取这个组件的方法后可以自己模拟实现。
获取dom节点的3种方式
Vue本来是不需要操作DOM来更新界面的，而且Vue也不建议我们直接操作DOM，但是如果非要得到DOM才能操作DOM呢？方法是有的，而且不止一种。
方式一：（事件源）
身体
div id=aa
type= button value= click v-on:click= fun /
/div
脚本
新Vue({
埃尔： #aa ，
方法：{
乐趣：功能(事件){
console.log(事件.目标)；
}
}
})
/脚本
/body
输出结果
当然，它也可以传递到方法中：
身体
div id=aa
type= button value= click v-on:click= fun($ event . target)/
/div
脚本
新Vue({
埃尔： #aa ，
方法：{
乐趣(十){
控制台。log(x)；
}
}
})
/脚本
/body
方式二：（使用ref）
身体
div id=aa
输入ref=name type=button value=点击v-on:click=fun/
/div
脚本
新Vue({
埃尔： #aa ，
方法：{
fun(){
console.log(这个参考文献。姓名)；
}
}
})
/脚本
/body
输出结果：
方式三：（自定义全局指令）
身体
div id=aa
输入类型=按钮值=点击v-get/
/div
脚本
Vue.directive(get ，{
绑定：函数(el){
控制台。日志(El)；
}
})
新Vue({
艾尔：" #aa "
})
/脚本
/body
这里不用点击，就可以获取元素，好像在谷歌显示不友好，
在火狐显示会好点
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。