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- ...
随机推荐
- MYSQL 的异常CRASH事件处理
检查问题的过程****************************************************************************************** ps ...
- php7使用curl
/** * @param string $url * @return mixed */ public function doGet($url) { //初始化 $ch = curl_init(); c ...
- CF 1006B Polycarp's Practice【贪心】
Polycarp is practicing his problem solving skill. He has a list of n problems with difficulties a1,a ...
- [BZOJ2823][BZOJ1336][BZOJ1337]最小圆覆盖(随机增量法)
算法介绍网上有很多,不解释了. 给出三点坐标求圆心方法:https://blog.csdn.net/liyuanbhu/article/details/52891868 记得先random_shuff ...
- 【kmp算法】hdu4763 Theme Section
kmp中next数组的含义是:next[i]表示对于s[0]~s[i-1]这个前缀而言,最大相等的前后缀的长度是多少.规定next[0]=-1. 迭代for(int i=next[i];i!=-1;i ...
- 【枚举】【权值分块】bzoj1112 [POI2008]砖块Klo
枚举长度为m的所有段,尝试用中位数更新答案. 所以需要数据结构,支持查询k大,以及大于/小于 k大值 的数的和. 平衡树.权值线段树.权值分块什么的随便呢. #include<cstdio> ...
- [CF865C]Gotta Go Fast
题目大意: 一个游戏关卡有$n(n\le50)$个任务,若在$m$秒内按顺序完成所有任务则算作通过当前关卡.每个关卡有三个属性$a_i,b_i,p_i(1\le a_i<b_i\le100,80 ...
- Spring整合jdbc-jdbc模板对象
1,Spring 中封装了一个可以操作数据库的对象(JDBCTemplate:jdbc模板),这个对象封装了JDBC技术 2,与DBUtil中的QueryRunner对象非常相似 3,操作 (1)导包 ...
- yum出现的“UnicodeDecodeError: 'ascii' codec”问题解决
新装了CentOS 6.5系统,打算使用yum安装程序是出现了如下错误: Loading mirror speeds from cached hostfile Traceback (most rece ...
- Android中使用File文件进行数据存储
Android中使用File文件进行数据存储 上一篇学到使用SharedPerences进行数据存储,接下来学习一下使用File进行存储 我们有时候可以将数据直接以文件的形式保存在设备中, 例如:文本 ...