Vue creatElement
1、传统template写法
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>Vue</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head> <body>
<div id="app" v-cloak>
<ele></ele>
</div> <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script> <script type="text/javascript">
Vue.component('ele', {
template: `
<div id="element" :class="{show:show}" @click="handleClick">
文本内容
</div>
`,
data: function() {
return {
show: true
}
},
methods: {
handleClick: function() {
console.log("clicked")
}
}
})
var app = new Vue({
el: '#app'
})
</script>
</body> </html>
2、Render写法
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>Vue</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head> <body>
<div id="app" v-cloak>
<ele></ele>
</div> <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script> <script type="text/javascript">
Vue.component('ele', {
render: function(createElement) {
return createElement(
'div', {
//动态绑定class，同:class
class: {
'show': this.show
},
//普通html特性
attrs: {
id: 'element'
},
//给div绑定click事件
on: {
click: this.handleClick
}
},
'文本内容'
)
}, data: function() {
return {
show: true
}
},
methods: {
handleClick: function() {
console.log("clicked")
}
}
});
var app = new Vue({
el: '#app'
})
</script>
</body> </html>
区别：templat的写法可读性强，简洁。所以需要在合适的场景使用Render函数，否则会增加负担。
Vue creatElement的更多相关文章
- vue render函数
基础 vue推荐在绝大多数情况下使用template来创建你的html.然而在一些场景中,你真的需要javascript的完全编程能力.这就是render函数.它比template更接近编译器 < ...
- vue中Runtime-Compiler和Runtime-only的区别
一.选择Runtime-Compiler和Runtime-only不同模式的时候main.js文件的区别 二.vue程序运行过程 1.解析: 第一步,当把vue模板template传给Vue实例 ...
- Vue开发中的常用技巧（持续更新）
1. 监听子组件的生命周期例如有父组件Parent和子组件Child,如果父组件监听到子组件挂载mounted就做一些逻辑处理,常规写法可能如下: // Parent.vue <Child @m ...
- vue的生命函数周期以及钩子函数的详解
首先我们先附上官网的图 图中展现出的是vue整个生命周期以及钩子函数 1- beforeCreate(创建前) 2- created(创建完成) 3- beforeMount(挂载前) 4- mo ...
- Vue.js 和 MVVM 小细节
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
- wepack+sass+vue 入门教程（三）
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- wepack+sass+vue 入门教程（二）
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- wepack+sass+vue 入门教程（一）
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
- Vue + Webpack + Vue-loader 系列教程（2）相关配置篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...
随机推荐
- docker从零开始网络（五）null网络
禁用容器的网络连接 预计阅读时间: 1分钟 如果要完全禁用容器上的网络堆栈,可以--network none在启动容器时使用该标志.在容器内,仅创建环回设备.以下示例说明了这一点. 1.创建容器. [ ...
- Python 进阶 之 函数对象
Python的世界里,万物皆对象,函数当然也是: 首先要定义一个函数: def add(a,b): print a+b 其次定义一个字典来引用该函数: dic = {"add":a ...
- 通过Eclipse生成可运行的jar包
本来转自http://www.cnblogs.com/lanxuezaipiao/p/3291641.html 我是个追新潮的人,早早用上了MyEclipse10.最近需要使用Fat jar来帮我对一 ...
- MySQL InnoDB MVCC深度分析
关于MySQL的InnoDB的MVCC原理,很多朋友都能说个大概: 每行记录都含有两个隐藏列,分别是记录的创建时间与删除时间 每次开启事务都会产生一个全局自增ID 在RR隔离级别下 INSERT -& ...
- Codeforces 691C. Exponential notation
题目链接:http://codeforces.com/problemset/problem/691/C 题意: 给你一个浮点数,让你把这个数转化为 aEb 的形式,含义为 a * 10b, 其中 a ...
- hdu6162（树链剖分）
hdu6162 题意 给出一颗带点权的树,每次询问一对节点 \((u, v)\),问 \(u\) 到 \(v\) 的最短路径上所有节点权值在 \([c1, c2]\) 区间内的和. 分析 树链剖分,那 ...
- Typora
Typora BB in front 如果你是一个佛(lan)系(duo),内心文艺的程序员,并且你对其他Markdown编辑器的使用效果感觉不是很好的话,可以来了解一下该软件Typora. What ...
- 线段树【p4879】ycz的妹子
Description 机房神犇yczycz有n个青梅竹马,她们分别住在1~n号城市中.小时候的她们美丽可爱,但是由于女大十八变,有些妹子的颜值发生了变化,但是十分重感情的\(ycz\)神犇不忍心抛弃 ...
- POJ3026 Borg Maze(Prim)(BFS)
Borg Maze Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 12729 Accepted: 4153 Descri ...
- HTML5无刷新实现跳转页面技术
window.onpopstate window.onpopstate是popstate事件在window对象上的事件句柄. 每当处于激活状态的历史记录条目发生变化时,popstate事件就会在对应w ...