vue.js的插入dom节点方式

最新推荐文章于 2024-07-03 17:18:15 发布
最新推荐文章于 2024-07-03 17:18:15 发布
阅读量3.1w 收藏 12
点赞数 3
分类专栏： vue.js学习记录2 文章标签： vue.js javascript dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_20353887/article/details/52374738
版权 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://npmcdn.com/vue/dist/vue.js"></script>
</head>
<body>
 <div id="app">
 </div>
<script>
 var MyComponent = Vue.extend({
   template: '<div>Hello World</div>'
 })
 var myAppendTo = Vue.extend({
   template:'<p>appendTo</p>'
 })
 var myBefore = Vue.extend({
   template:'<p>before</p>'
 })
 var myAfter = Vue.extend({
   template:'<p>after</p>'
 })
// 创建并挂载到 #app (会替换 #app)
 new MyComponent().$mount('#app')
// 手动挂载
 new myAppendTo().$mount().$appendTo('#app');//appendTo
 new myBefore().$mount().$before('#app');//before
 new myAfter().$mount().$after('#app');//after
</script>
<!--说明-->
<!--1.对比jquery的dom节点的插入方式，vue.js的插值需要使用先new创建一个实例然后通过$mount()-->
<!--2.手动挂载到dom节点中，然后使用$appendTo/$before/$after等方法进行插值。-->
<!--3.这种操作dom的思想其实并不是vue提倡的方式，而vue提倡的方式是通过操作数据来完成你想要的结果-->
<!--4.vue的思想是这个dom已经存在，通过判断可以控制它显示隐藏-->
<!--5.所以使用vue的时候，要试着转变一下使用jquery的时候那种思想就像api提供的这种方法 (v-if)-->
<ul>
 <li v-if="ok">显示</li>
 <li v-else>隐藏</li>
</ul>
<!--6.也可以通过(v-show)来控制显示隐藏-->
<ul>
  <li v-show="ok">显示</li>
</ul>
<!--6.(v-if和v-show的区别)-->
<!--在切换 v-if 块时，Vue.js 有一个局部编译/卸载过程，因为 v-if 之中的模板也可能包括数据绑定或子组件。-->
<!--v-if 是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。-->
<!--v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。-->
<!--相比之下，v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。-->
<!--一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，-->
<!--如果在运行时条件不大可能改变 v-if 较好。-->
</body>
</html>

 

编号90015478
关注
  • 3
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
利用vue.js插入dom节点的方法
12-29
本文主要介绍的是vue.js插入dom节点的方法，下面话不多说，来看看详细的介绍吧。 html代码： js代码： var MyComponent = Vue.extend({ template: 'Hello World' }) var myAppendTo = Vue.extend({ template:'appendTo' }) var myBefore = Vue.extend({ template:'before' }) var myAfter = Vue.extend({ templ
vue.js插入dom节点的方式
weixin_33700350的博客
01-19 3172
html代码： <div id="app"></div> js代码： var MyComponent = Vue.extend({ template: '<div>Hello World</div>' }) var myAppendTo = Vue.extend({ templat...
vue3将自定义组件插入指定dom
子期
06-05 465
vue3 通过纯 js 的方式，往会被刷新节点的 div 中插入自定义组件
VUE自定义新增、复制、删除dom元素
最新发布
编程不过是一门失传艺术的别名，这门艺术的名字叫做“思考”
07-03 396
实现思路：定义一个数量和一个数组，然后使用循环遍历展示内容，新增或删除时只需要改变定义的数量，然后删除对应数组元素即可。功能需求，能灵活新增或删除一个dom元素，在此dom元素中还存在能灵活新增、删除的dom元素。点击新增策略，能新增整个策略dom。
前端爬坑之路——VUE动态添加DOM节点
weixin_46472377的博客
03-04 1万+
在实际项目当中大家一定也会遇到动态添加一行新的DOM节点，例如： 点击添加动态生成一行，我拿到时，很常规的想到 v-html 通过str +=<p>内容</p>添加，但里面有element-ui 会自动过滤掉了显示不出来（具体我已经试过），然后跳出思维，换一种方式实现 通过 v-for=“item in num” ,添加 num +=1 ，就完美的解决，自动更新新的...
Vue Render函数创建DOM节点代码实例
10-15
主要介绍了Vue Render函数创建DOM节点代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
jquery的DOM节点操作(创建和插入元素节点)
qq_45308912的博客
11-24 1847
1.创建元素节点 2.插入节点 动态创建新元素节点后，需要执行插入或追加操作，否则不会在页面显示出来。 按照元素的层次关系来分，可以分为内部和外部两种方法 元素内部插入子节点 元素内部插入子节点有两种方式，推荐使用红框框的方式 元素外部插入子节点 元素内部插入子节点也有两种方式，推荐使用红框框的方式 ...
vue动态添加/删除dom元素
m0_71349739的博客
01-10 4741
vue的思想是通过数据操作dom，所以我们根据data中的数据进行对dom的遍历，从而操作数据就可以对vue进行一个动态的添加或者删除啦！
Vue.js 2.0窥探之Virtual DOM到底是什么？
12-02
比如，一个虚拟DOM节点可能如下所示： ```javascript let domNode = { tag: 'ul', attributes: { id: 'myId' }, children: [...] }; ``` 当需要更新时，开发者可以先在虚拟DOM上进行操作，如`domNode.children....
vue.js树形插件，自定义添加编辑删除树形结构菜单
05-13
Vue.js是一款轻量级的前端JavaScript框架，以其易用性、灵活性和强大的功能深受开发者喜爱。在构建复杂的用户界面时，树形结构是常见的数据展示形式，尤其在管理层次结构数据时，如组织架构、文件系统等。Vue.js中有...
vue-append:vue-append，类似于v-html指令，但可以调用javascript函数
05-25
附加值 vue-append，类似于v-html指令，但可以调用javascript函数 安装 npm install vue-append --save # or yarn add vue-append ES6模块 通过npm作为vue-append可用。 import VueAppend from 'vue-append' Vue . use ( VueAppend ) 普通JS var VueAppend = require ( 'vue-append' ) Vue . use ( VueAppend ) 直接包含 您也可以直接在[removed]标记中添加它。 它将自动安装自身，并添加一个全局VueAppend 。 事件 附加的 如果html append，脚本已下载且没有抛出错误，则将触发appended事件。 附加器 如果在添加html时抛出错误，则将触发a
vue3动态创建组件，挂载到dom 节点上，修复版本
天天的博客
12-12 1万+
// 将组件挂在到节点上！ const creatComp = (comp:Component,prop:Object)=>{ var app = createApp(comp,{ ...prop }) var divEle = document.createElement("div") // 让我们节点挂在到一个dom元素上 document.body.appendChild(divEle) app.mount(divEle) .
vue.js对事件添加的dom怎么渲染
qq_23999487的博客
07-11 3021
&lt;div id="app"&gt;    &lt;button v-on:click="addNewElement()"&gt;Add Element&lt;/button&gt;     &lt;br /&gt;&lt;/div&gt;     &lt;script&gt;    new Vue({    el: '#app',    data: {        
vue 动态添加click_vue，在模块中动态添加dom节点，并监听
weixin_34195649的博客
12-30 6037
vue向数组中动态添加数据vue中数据更新通过v-model实现,向数组中添加数据通过push()实现,向shortcuts数组中动态添加newShortcut对象中的title和action this.shortcuts.p ...jquery动态添加DOM节点1.append()方法:向每个匹配的元素内部添加元素 appendTo()方法:将所有匹配的元素追加的指定的元素中 vue中动态添...
【vue】vue 如何获取并操作DOM元素
热门推荐
Java_gaohao的博客
01-26 1万+
vue 如何获取并操作DOM元素
vue之JS数组操作
lihua130427的博客
10-15 1631
原生JS数组操作 变异方法 (mutation method)，顾名思义，会改变原始数组。 非变异 (non-mutating method) 方法，则不会改变原始数组。 ①末尾添加-push，会改变原始数组，返回值为数组更新后的新数组长度。代码如下 var arry=[111,,222,333,444,555] var arry_push=arry.push(9,20,30); cons...
vue中的虚拟dom转化为真实dom
simple5960的博客
04-18 1332
1.创建虚拟节点Vnode的函数 createVNode() 2.在render中创建虚拟节点VNodes 3.在createApp中把得到的虚拟节点挂载到根节点上去 首先是写一个创建虚拟dom的函数 function createVNode(tag,props,children) { return {tag,props,children} } 然后在根组件中render函数中创建虚拟dom return createVNode("div",{ id:"app
vue3如何动态添加组件到dom中（jsx,h(),render）
csl125的博客
12-14 2545
vue3 jsx 动态添加组件到dom元素中
vue.js的插入dom节点
04-12
Vue.js提供了一些指令用于操作DOM，其中最基本的是v-bind和v-model。v-bind指令用于将数据绑定到HTML属性，v-model指令用于将表单输入绑定到数据。另外，Vue.js还提供了一些常用的DOM操作指令，包括v-show、v-if、v-else、v-for等等，可以很方便地实现动态的DOM操作。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值