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 相关问题积累
VUE问题积累 1.组件三种挂载方式自动挂载 var app3 = new Vue({el: '#app-3',data: {seen: true} }) 手动挂载 // 可以实现延迟按需挂载 &l ...
vue面试题、react面试题大全、ES6等....
自己整理的一些面试题: 1.promise是用来做什么的? 答:它是一个对象,用来传递异步操作的信息. 2.promise三个状态? Pending:进行中,Resolved:已完成,Reject:已 ...
第四部分：Vue高级应用
4.1 脚手架的使用 4.1.1 关于不同版本Vue的区别 vue.js 与 vue.runtime.xxx.js的区别 vue.js是完整版的Vue,包含:核心功能 + 模板解析器 vue.runt ...
Vue笔记_03_使用Vue脚手架
Vue笔记_03_使用Vue脚手架第三章使用Vue脚手架初始化脚手架说明具体步骤项目文件分析 pack-lock-json assets文件夹 components文件夹 main.js ...
canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...
vue实现文件上传功能
代码如下所示: <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
win10 4步快速安装vue
1 安装nvm-windows 在这里下载安装nvm,目的是在同一台电脑中管理多个 Node 版本建议采取默认安装路径安装 2 安装nodejs 以管理员模式打开命令行,然后输入 nvm list ...
前端Vue学习之路(五)插件的使用
vant插件使用这里我们是用的语法是vue2.0 所以是 npm i vant -S 用法 1.按需引入的话找到package.json文件添加以下内容 plugins:[['import', ...
前端Vue学习之路(四)axios请求数据
axios 1.增加新知识 2.旧方案 3.新方案(一) 4.为什么要用拦截器 (新方案二) 1.增加新知识假如每个组件都引用axios,后期如果axios库不再维护了,那每个组件都要改动所以封装 ...

Vue creatElement

Vue creatElement相关推荐

最新文章

热门文章