本文已参与「新人创作礼」活动，一起开启掘金创作之路
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
new Vue()返回的是一个封装对象，封装了对这个对象的所有操作。 vue的js有两个版本，不同版本的使用场景和方法不同。
- 完整版：同时包含编译器和运行时的版本
- 运行时：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。
// 完整版，需要编译器
new Vue({
template:'<div>{{ hi }}</div>'
})
// 运行时版，不需要编译器
new Vue({
render (h) {
return h('div', this.hi)
}
})
编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码
以下建立在初始化一个vue项目的基础上：
Vue完整版（vue.js）的使用： 引用：cdn引入vue.js或vue.min.js（压缩版），在index.html用script引入对应地址即可。引入后即可在mian.js打印出window.Vue
console.log(window.Vue); // 结果是：ƒ gn(e){this._init(e)}
接下来，如何让index.html中的<div id="app"> {{n}} </div> 里面的n显示成实际数值？
（1）在main.js里写：
new window.Vue({
el: "#app",
data: {
n: 0
}
}) // 必须写window.Vue不然会报错
则客户端在碰到这个js代码时会用编译器去识别这个html内容，把容器"#app"里面的n变成0。
运行时（vue.runtime.common.js）的使用： 引入：cdn引入vue.runtime.js或vue.runtime.min.js（压缩版）
console.log(window.Vue);
// 一样可以打印出一个函数， ƒ Vue (options) {
// if (!(this instanceof Vue)
// ) {
// warn('Vue is a constructor and should be called with the `new` keyword');
// }
// this._init(options);
// }
但不支持直接从页面中获取视图，需要用render(){}函数创建
new window.Vue({
el: "#app",
render(h) {
console.log(h) // 打印出来发现是个createElements函数， ƒ (a, b, c, d) { return createElement(vm, a, b, c, d, true); }
return h("div", this.n)
},
data: {
n: 0
}
}) // 页面可以显示0了，注意return
即vue的作者尤雨溪在render函数里封装了一个创建节点函数。通过js创建节点加载到页面上（这是正常的js操作了）
二者区别： 完整版需要识别js里面的html语言并编译，因而完整版需要有一个编译器。导致完整版的体积比运行时版本大30%。 但是为了用户方便，使用的体积小，一般我们都使用运行时版本。
更多区别引用别人总结的一张图：
如何解决程序员书写简便和用户使用轻快的矛盾？ 如果我们的package.json里有vue-loader，能够自动把完整版在build的时候加载成运行时版本，就解决了这个矛盾。而实际也就是这么解决的！ 那么程序员可以在.vue结尾的vue文件中写在完整版环境可以运行的代码：即在template里面写要View内容，script里面写Controller和Model内容，style里面写css内容。然后在main.js里面引入这个vue文件，并用render函数创建节点。在build的时候，经vue.loader加载后，就能变成vue.runtime.js能识别的内容了。
如何快速创建一个vue项目呢？ 使用codesanbox.io：codesandbox.io/index2 1、不要登录哦！因为登录了只能创建50个免费项目了，不登录可以创建无数个 2、点击Craete a Sandbox. ，选择vue，就创建好啦 3、左边是文件目录，右边是预览，接下来就可以自由创作了~ 4、支持文件导出成压缩包的
