html 转成vue_vue两个版本的区别和使用方法

vue的两个版本

1.完整版：vue.js通过编译器compiler把视图上的HTML转化为DOM节点、转化成HTML内容，

完整版的视图是写在HTML里面或者template选项里，由于有 compiler(编译器)的存在，完整版运行时：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。

2.非完整版：vue.runtime.js 非完整版中的html只是字符串，且不能从html中获取视图，但是可以结合webpack，通过webpack内的vue-loader,将其转成h()函数，用户下载的js文件体积变小了。

非完整版的视图是写在render里的，是用h函数来创建标签。非完整版运行时：当使用 vue-loader 或 vueify 的时候，*.vue 文件内部的模板会在构建时预编译成 JavaScript。你在最终打好的包里实际上是不需要编译器的，所以只用运行时版本即可。

// 不需要编译器
new Vue({
 render (h) {
   return h('div', this.hi)
 }
})
// 需要编译器
new Vue({
 template: '<div>{{ hi }}</div>'
})

特点比较

1.完整版有compiler（编译器用来将模板字符串编译成为 JavaScript 渲染函数的代码），这导致完整版体积更大。

2.非完整版没有compiler的，所以体积更小，要比完整版体积小大概30%。compiler约占体积30%

配置

从 webpack 引入,

完整版需要配置 alias；非完整版 是默认配置;

从 @vue/cli 引入

完整版需要额外配置；非完整版 是默认配置。

template 和 render 怎么用

templete是视图的内容，可以直接包含html内容，常直接放在视图层，用在完整版就直接把html显示在视图，template: “ {{n}} ”

render是非完整版常用的，常把视图写在rander函数中，用h来创造标签，templete的内容放在vue文件中，vue-loader可以把内容被转换成render(h){h(‘div’)}，render函数为render:h=>h(demo)

附图一张

总结

虽然有两个版本，但现在前端基本是不会用完整版的，平时使用默认都是代码体积小的非完整版，因为编译器的脏活交给vue-loader去做了。

选择非完整版的理由如下：
1.保证用户体验，用户下载的JS文件体积更小，但只支持h函数 （内置的h函数，最好用h）
2.保证开发体验，开发者可直接在vue文件里写HTML标签，而不写 h函数
3.活让loader做，vue-loader 会把vue文件里的HTML转为h函数,这样我们就不用写太多麻烦的 h函数就可做到和完整版一样的事,还更节约文件大小,提升用户体验。