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- ...
随机推荐
- Selenium2+python自动化76-Chrome配置加载【转载】
转至博客:上海-悠悠 一.加载Chrome配置 chrome加载配置方法,只需改下面一个地方,username改成你电脑的名字(别用中文!!!) '--user-data-dir=C:\Users\u ...
- 详解Python中的__new__、__init__、__call__三个特殊方法(zz)
__new__: 对象的创建,是一个静态方法,第一个参数是cls.(想想也是,不可能是self,对象还没创建,哪来的self)__init__ : 对象的初始化, 是一个实例方法,第一个参数是self ...
- [BZOJ2661][BeiJing wc2012]连连看 费用流
2661: [BeiJing wc2012]连连看 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 1349 Solved: 577[Submit][ ...
- [BZOJ3027][Ceoi2004]Sweet 容斥+组合数
3027: [Ceoi2004]Sweet Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 135 Solved: 66[Submit][Status] ...
- G - Rescue 【地图型BFS+优先队列（有障碍物）】
Angel was caught by the MOLIGPY! He was put in prison by Moligpy. The prison is described as a N * M ...
- hdu6127
hdu6127 题意 二维平面上存在一些点,每个点都有权值,任意两点组成的线段的权值为这两点权值的乘积,选定一条经过原点的直线,问怎样使得它经过的线段的权值之和最大. 分析 题目等价于用一条直线将平面 ...
- pthread条件变量
pthread条件变量等待条件有两种方式:无条件等待pthread_cond_wait()和计时等待pthread_cond_timedwait(),其中计时等待方式如果在给定时刻前条件没有满足,则返 ...
- PL SQL 基础
Oracle之PL/SQL学习笔记 自己在学习Oracle是做的笔记及实验代码记录,内容挺全的,也挺详细,发篇博文分享给需要的朋友,共有1w多字的学习笔记吧.是以前做的,一直在压箱底,今天拿出来整 ...
- [BZOJ 3152] 组合子逻辑
Link: BZOJ 3152 传送门 Solution: 喜闻乐见,gyz出的语文题,题意要看半小时 题意:使用最少的括号将序列分割,对于每个括号中的序列,设最左边的数为$num$,序列中元素个数为 ...
- [UOJ300]吉夫特
直接上lucas定理,可以得到$\binom nm=1$等价于$m$是$n$的子集(二进制) 因为数字两两不同,所以设$f_i$表示以$i$开头的满足要求的序列有多少个,转移就是$f_i\gets f ...