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动态生成dom并且绑定,以及简单的操作生成的dom属性
  • s502414680
  • s502414680
  • 2017年04月18日 20:21
  • 4497

Vuejs(14)——在v-for中,利用index来对第一项添加class

(1)在v-for中,利用index来对第一项添加class index来源于v-for,i表示遍历的数组的元素,index表示索引。   由于index从0开始,因此如果要指定第一项有activ...
  • qq20004604
  • qq20004604
  • 2016年09月26日 11:21
  • 7316

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

问题描述:排除数据的插入方式,假如存在两组数据,每两组为一个对象,那么如果要加载下一个对象时应该怎么去插入呢?...
  • u010568344
  • u010568344
  • 2017年07月15日 17:41
  • 2356

vue.js实现点击事件

--> 当前 北京 历史选择 {{ history }} 热门城市 ...
  • c_lam_e
  • c_lam_e
  • 2017年10月25日 16:19
  • 544

Vue实现动态创建和删除数据

Vue实现动态创建和删除数据
  • fengshiying
  • fengshiying
  • 2017年08月04日 18:46
  • 1804

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

在组件上添加动态属性 this.$set(this.data,"obj",value');大概是这样
  • zgrkaka
  • zgrkaka
  • 2017年03月22日 21:24
  • 8416

vue和Jquery差别之动态添加删除元素

vue和jquery都是耳熟能详的,我就不多赘述了,直接上正餐吧 为了展示他们在动态添加删除元素的区别,我分别用他们写了同一个功能的小例子。这个例子要求要在输入框中输入字符串,按回车键后增加...
  • u013036483
  • u013036483
  • 2016年03月29日 22:16
  • 601

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

本文转载自:众成翻译 译者:QAQMiao 链接:http://www.zcfy.cc/article/1436 原文:https://medium.com/js-dojo/what...
  • qq_23980427
  • qq_23980427
  • 2017年01月17日 10:17
  • 5179

Vue 创建组件的两种方法

创建组件方法var child=Vue.extend({})var parent=Vue.extend({})Vue.extend() 全局方法 生成构造器,创建子类使用基础 Vue 构造器,创建...
  • cofecode
  • cofecode
  • 2017年07月07日 10:30
  • 1816

vue.js中组件的创建和使用方法

vue.js中创建组件有三个步骤:创建组件构造器,注册组件以及使用组件。下边以实际例子说明组件的定义及使用方法。同时提供了使用语法糖的简单写法的例子...
  • u013910340
  • u013910340
  • 2017年05月26日 09:33
  • 6255
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:vue.js的插入dom节点方式
举报原因:
原因补充:

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