vue实现将某个dom元素或组件挂载到根节点

在写手机端的时候经常用到tab，tab切换一般都是transition滑动的，如果此时我们用position:fixed定位会发现，元素定位并不是我们想象中的相对浏览器定位，这是因为fixed定位会被拥有transition属性的元素影响。

为了结果这个问题，我们需要将元素变成相对于浏览器定位，这个时候我们就要将这个需要定位的dom元素挂载到根节点下，实现方式如下

import hello from "@/components/HelloWorldvue";

mounted(){

    thisappendCompToRoot(hello);

},

appendCompToRoot(component) { 

    //component 参数为组件名

      var instance = new Vue({

        el: documentcreateElement("div"),

        render: h => h(component)

      });

      documentbodyappendChild(instance$el);

}

 <div class="home">    

        <h1>home</h1>   

         <div id="mountDiv" ref="mountDiv">      

                <img src="logopng" alt />   

         </div> 

 </div> 

 mounted() {

    thisappendDomToRoot(documentquerySelector("#mountDiv"), "#container");

 },

appendDomToRoot(el, selector) {

    //el 为要 *** 作的dom元素，selector为要插入的根节点的选择器，为空的话，直接插入到body中 

      var container;

      if (selector) {

        container = documentquerySelector(selector);

      }

      if (!container) {

        container = documentbody;

      }

      containerappendChild(el);

    },

<teleport to="#app">

      <div id="mountDiv" ref="mountDiv">

            <img src="logopng" alt />

      </div>

</teleport>

javaScript 框架

简化Dom的 *** 作

响应式数据驱动

简单的vue程序：

1导入开发版本的vueis

2创建vue实例对象，设置el属性和data属性

3使用简介的模版语法把数据渲染到页面上

vue实例可以使用双标签挂载，不能使用HTML和BODy来进行

v-text 设置标签的文本值 (覆盖标签中全部的内容 {{}} el只会替换相应的值)

v-html (1内容中有html结构会被解析成标签 2设置元素的innerHTML)

注：解析文本使用 v-text 解析hml使用v-html

v-on(1为元素绑定事件，2事件名不需要写on,3指令可以简写@ 4绑定的方法定义在methods属性中5方法内部可以通过this关键字访问定义data中的数据)

计数器（创建实例v-on事件和方法绑定，实时更改数据）

v-show(1根据元素的真假切换元素的显示状态 2原理是修改元素的display实现元素的隐藏)

v-if(1根据表达式的真假切换元素的显示状态 2本质是 *** 作dom 3表达式的值是true时，元素存在于dom树中，为否是从dom树中移除)

注：v-show和v-if的区别：

v-show：只是改变了display属性的 *** 作

v-if：改变的是dom数

实际情况 频繁切换的使用v-show

v-bind (1为元素绑定属性 2完整写法v-bind:属性名 3简写的话可以只写:属性名)

切换（1用数组来存放元素 2用v-on来绑定事件 3用v-bing来修改元素的属性）

v-for(1根据数据生成列表 2v-for长和)

v-on (补充)（1时间绑定的方法写成函数调用的形式，可以传入自定义参数

2定义方法时定义形参数来接受传入的实参

3通过修饰符可以对事件进行限制）

例如：@keyupenter

v-model(1便捷的设置和获取表单元素的值

2绑定的数据会和表单元素值相关联

3 表单的 数据=绑定的数据)

记事本实战演练(1增加 2删除 3隐藏 4清空 )

注：shift()函数删除的是数组中的第一个元素 使用splice删除指定的某个元素

vue3router页面挂载不上可以进行重启。检查Appvue文件中是否有标签，若无添加上。检查路由文件中import路径是否正确。以上两个问题解决之后，页面刷新依旧挂载失败。通过Chrome插件vue-devtools检查发现初始界面About能成功挂载，而嵌套的login和register挂载失败，也就是说router-view未显示，建议重启软件。

以上就是关于vue实现将某个dom元素或组件挂载到根节点全部的内容，包括:vue实现将某个dom元素或组件挂载到根节点、【Vue】vue基础知识一（本地数据 *** 作）、vue3router页面挂载不上等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！