vue.js的插入dom节点方式

原创 2016年08月31日 00:42:17

<!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>


版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

Vue中怎么动态的去插入DOM节点呢?

问题描述:排除数据的插入方式,假如存在两组数据,每两组为一个对象,那么如果要加载下一个对象时应该怎么去插入呢?

在Vue组件上动态添加和删除属性

在组件上添加动态属性 this.$set(this.data,"obj",value');大概是这样

精选:深入理解 Docker 内部原理及网络配置

网络绝对是任何系统的核心,对于容器而言也是如此。Docker 作为目前最火的轻量级容器技术,有很多令人称道的功能,如 Docker 的镜像管理。然而,Docker的网络一直以来都比较薄弱,所以我们有必要深入了解Docker的网络知识,以满足更高的网络需求。

vue单一组件下动态修改数据时的全部重渲染

今天在学习vue的过程中,发现一个有趣的现象 在某一组件下的某一数据通过点击事件被动态修改的时候,对应view中的数据同步的进行了修改,没错,这不是废话吗,vue的一大特色就是数据的双向绑定。可有趣...

vue动态生成dom并且自动绑定

vue动态生成dom并且绑定,以及简单的操作生成的dom属性

vue动态组件整理

通过使用保留的  元素,动态地绑定到它的 is 特性,我们让多个组件可以使用同一个挂载点,并动态切换: Html里面的代码: Vue实例的代码: var vm=new Vue({     ...

Vue.js 2.0新增的虚拟DOM是怎么回事?

本文转载自:众成翻译 译者:QAQMiao 链接:http://www.zcfy.cc/article/1436 原文:https://medium.com/js-dojo/what...

vue指令以及dom操作

“AngularJS 通过被称为 指令 的新属性来扩展 HTML。AngularJS 通过内置的指令来为应用添加功能。AngularJS 允许你自定义指令。” 这是我最初接触“指令”这个词。还记得...

在vue中获取dom元素

在vue中可以通过给标签加ref属性,就可以在js中利用ref去引用它,从而操作该dom元素,以下是个例子,可以当做参考 DEMO export de...

vuejs使用指南(一)

前言 最近在写一个项目,然后由于采用的前后端分离传递数据,页面的渲染由前端来完成,于是就想说试一下vuejs,因为实在是不想用jq的dom操作,jq的dom操作对于页面的节点增加和删除,我感觉还好。...

vue.js--删除列表中的一行

splice(index,num,item1,item2,...,itemX) 方法向/从数组中添加/删除项目,然后返回被删除的项目。 注:index--规定添加/删除项目的位置     ...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)