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- ...
随机推荐
- selenium+python自动化81-html报告优化（饼图+失败重跑+兼容python2&3）【转载】
优化html报告 为了满足小伙伴的各种变态需求,为了装逼提升逼格,为了让报告更加高大上,测试报告做了以下优化: 测试报告中文显示,优化一些断言失败正文乱码问题 新增错误和失败截图,展示到html报告里 ...
- k8s的chart学习（下）
1.开发自己的chart Kubernetes 给我们提供了大量官方 chart,不过要部署微服务应用,还是需要开发自己的 chart,下面就来实践这个主题. 1.1创建 chart 执行 helm ...
- redis设置慢查询日志
Redis 的慢查询日志功能用于记录执行时间超过给定时长的命令请求, 用户可以通过这个功能产生的日志来监视和优化查询速度. 1.redis生命周期 慢查询发生在第3阶段 2.两个配置 2.1.slow ...
- 极光推送配置(Android Studio),亲测有效
进行到这里就可以接收到通知了,但是如果你还想根据接收的消息做点什么 step8: public class MyReceiver extends BroadcastReceiver { private ...
- flutter 极光推送
一.配置极光开发者 1.注册极光开发者 https://www.jiguang.cn/push 2.创建应用 二.创建APP 1.添加依赖 pubspec.yaml 添加: flutter_jpus ...
- IActionResult
- 2017中国大学生程序设计竞赛 - 女生专场A【模拟】
A HDU - 6023 [题意]:求AC题数和总时长. [分析]:模拟.设置标记数组记录AC与否,再设置错题数组记录错的次数.罚时罚在该题上,该题没AC则不计入总时间,AC则计入.已经AC的题不用再 ...
- Android学习--持久化(三) SQLite & LitePal
SQLite & LitePal 自己做为一个iOS开发,看到安卓这一块的时候,那中浓烈的熟悉味道更加强烈,SQLite这种轻量级的关系型数据库的使用在移动端相差不多,iOS有FMDB,And ...
- 8、Flask实战第8天：add_url_rule和app.route原理
之前我们使用@app.route这个装饰器来把视图函数和url绑定 @app.route('/') def hell_world(): return 'hello world' 而且我们可以通过url ...
- 【kmp算法】uva11475 Extend to Palindrome
就把每个串倒过来,和原串匹配,看最后能匹配多少就行. #include<cstring> #include<algorithm> #include<cstdio> ...