Vue creatElement
生活随笔
收集整理的這篇文章主要介紹了
Vue creatElement
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
1、傳統(tǒng)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">文本內(nèi)容</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', {//動態(tài)綁定class，同:class class: {'show': this.show},//普通html特性 attrs: {id: 'element'},//給div綁定click事件 on: {click: this.handleClick}},'文本內(nèi)容')},data: function() {return {show: true}},methods: {handleClick: function() {console.log("clicked")}}});var app = new Vue({el: '#app'})</script></body></html>
區(qū)別：templat的寫法可讀性強，簡潔。所以需要在合適的場景使用Render函數(shù)，否則會增加負擔。
總結(jié)
以上是生活随笔為你收集整理的Vue creatElement的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 超过 150 个最佳机器学习，NLP 和
- 下一篇： VirtualBox虚拟机导出导入实践