vue mxgraph渲染xml页面_Vue的两个版本

Vue.js分为两个版本，简单来说就是一个是完整版vue.js，一个是非完整版vue.runtime.js：

1. HTML的书写位置不同

完整版：

完整版的HTML书写的位置有两个，一个是直接在 *.html 文件中使用 Vue 语法，如下所示：

index.html文件

main.js文件

另外一个位置是写在Vue实例创建时的template选项里，并且该部分内容会完全覆盖html文件中对应的位置，而不是仅仅包含在里面，因此也要加上对象的外层<div id="app"> </div>如下所示：

index.html文件

main.js文件

非完整版：

非完整版的HTML的书写位置也有两种方式，一个是直接写在 Vue 实例创建时的 render() 函数选项里，遵循createElement函数传参创建元素的形式。如下所示：

index.html文件

main.js文件

这样的render函数里面创建 html元素的方法是不是看起来/写起来都很麻烦，因此，Vue 的作者就帮助我们以更简单明了的方式提供了 *.vue 文件，通过 vue-loader 在文件编译时将 *.vue 文件转化成对应的 render() 函数里的复杂的创建语法，相比起来，*.vue 文件的语法就清晰明了多了，如下所示：

index.html文件

demo.vue文件

main.js文件

补充：大部分情况下 createElement 会写成 h，都是创建元素的意思，即 render(h) 和 render(createElement) 是一样的，写 h 更简单些。在 .vue 文件中的 <template></template> 标签里面的内容不是 HTML 语法，是 XML 语法，因此应遵循 XML 的语法标准。XML 和 HTML 语法差不多，但是 XML 相比于 HTML 要更严格一些，比如在 XML 中有闭合标签一说，且单标签必须闭合，如 <input/> ，但在 HTML 中单标签不闭合是正确的、最新的语法。同时还有一个区别是在 XML 中当标签内没有内容时可直接 / 闭合，如 <div/> ，但在 HTML 中，则不行。严格的 XML 语法比松散的 HTML 语法相比起来更容易编译，因此 Vue 就选择了 XML 语法

2. 是否有 compiler 和 vue-loader

完整版

完整版是一定要有 compiler 即编译器的，编译器的作用就是将 Vue 语句在编译时还原成 html 元素才能在浏览器上渲染出来，完整版的 Vue 是通过编译器来实现的，因此完整版有 compiler 。

由于完整版没有用到 *.vue文件，因此不含有 vue-loader。

非完整版

非完整版用到了 *.vue文件，而 vue-loader 就是将*.vue文件翻译成 render() 函数里元素创建语法的。因此非完整版用到了 vue-loader ，但是没有用到 compiler 即编译器，因为 render() 函数就是渲染 html 元素的，不再需要编译器。