vue多浏览器标签传参_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 元素的，不再需要编译器。

3. 二者优缺点

完整版

优点：

1. 可以在 html 文件中直接写 Vue 语句，可读性强些

缺点：

1. 体积比非完整版大
2. 耦合性太大，在 html 文件中夹杂 vue 语法，导致各类型文件融合到一块，耦合性大

非完整版

优点：

1. 体积小，非完整版的体积比完整版小了30%多
2. 耦合性低，模块化强

缺点：

1. 使用不方便

总结

目前 Vue 的使用基本都是非完整版，@vue/cli引入 和 webpack引入 的vue文件都是非完整版。

关于http://codesandbox.io

这里介绍一个在线写 vue项目 的网站，就是 代码沙盒 ，该网站创建的 vue项目 是使用 @vue/cli 配置的环境，因此使用的是非完整版的 vue文件 。

另外，不要登陆该网站可以无限次免费使用，如果登录了就只能免费使用50个项目就要收费了。

该网站写的项目可下载下来，在 File -> export to ZIP