欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 前端技术 > vue >内容正文

vue

Vue creatElement

发布时间：2025/6/16 vue 72 豆豆
生活随笔 收集整理的这篇文章主要介绍了 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的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。