## Vue 两个版本的区别完整版：对应的文件名：vue.js ，vue.min.js 支持从html获取视图支持template 有compiler编译器非完整版：对应的文件名：vue.runtime.js ，vue.runtime.min.js 不支持从html获取视图不支持template，需要通过vue-loader 将组件中的template模板编译为render函数没有compiler编译器,体积会比完整版小30% ## template的用法 ### 第一种方式： ```` new Vue({ el: "#app", template: `

文本1

文本2

文本3

` }) ```` ![](//static.xiedaimala.com/xdml/image/4bff426e-91a4-4d91-aeb7-0e710bf7db8b/2020-4-15-20-10-59.png) 需注意的是，template中至少要有一个根元素，不能是纯文本，否则会报错 ```` new Vue({ el: "#app", template: '文本' }) ```` ![](//static.xiedaimala.com/xdml/image/4bff426e-91a4-4d91-aeb7-0e710bf7db8b/2020-4-15-20-4-33.png) 如果存在多个同级元素，没有根元素时，只会显示第一个元素 ```` new Vue({ el: "#app", template: `

文本1

文本2

文本3

` }) ```` ![](//static.xiedaimala.com/xdml/image/4bff426e-91a4-4d91-aeb7-0e710bf7db8b/2020-4-15-20-14-17.png) ### 第二种方式： ```` new Vue({ el: "#app", template: '#demo1' }) ```` ### 第三种方式： ```` new Vue({ el: "#app", template: '#demo2' }) ```` ## render的用法 ```` new Vue({ el: "#app", render: function (h) { return h( 'div', { class: { 'style1': true, 'style2': true }, style: { color: '#fff', background: 'red' }, on: { click: function () { console.log('render函数') } } }, ['元素文本', h('div', '子元素文本')] ) } }) ```` ![](//static.xiedaimala.com/xdml/image/4bff426e-91a4-4d91-aeb7-0e710bf7db8b/2020-4-15-20-52-43.png) render函数有一个回调函数该函数有3个参数第一个参数：可以是一个 HTML 标签字符串，组件选项对象，或者解析上述任何一种的一个 async 异步函数，必填，类型：{String | Object | Function} 第二个参数：包含模板相关属性，用于设置模板元素的属性或者事件，可选，类型：{Object} 第三个参数：设置模板元素文本，或者创建子节点类型：{String | Array} ## 用 codesandbox.io 写 Vue 代码 ![](//static.xiedaimala.com/xdml/image/4bff426e-91a4-4d91-aeb7-0e710bf7db8b/2020-4-15-21-12-17.png) 点击Create a Sandbox, it’s free按钮 ![](//static.xiedaimala.com/xdml/image/4bff426e-91a4-4d91-aeb7-0e710bf7db8b/2020-4-15-21-13-4.png) 选择vue即可 ![](//static.xiedaimala.com/xdml/image/4bff426e-91a4-4d91-aeb7-0e710bf7db8b/2020-4-15-21-14-1.png)

标签模版2