两个版本理解

非完整版（运行时版本）vue.runtime.js

• 不支持从html获取视图。
• 不支持template，需通过webpack的工具vue-loader 将组件，预编译template模板编译为render函数。
• 没有complier编译器，因此代码体积会比完整版小40%。‘html’ 转化成节点。

完整版vue.js

• 支持从html获取视图。
• 支持template。
• 有complier编译器，而complier可以将字符串

总结：总是使用非完整版，然后配合vue-loader和vue单文件组件。好处是：

• 保证用户体验，用户下载的js文件体积更小，但只支持render函数参数h去渲染；
• 保证开发体验，开发者可以直接在vue文件里写HTML标签，而不用自己写h函数（h等同于createElement）
• 脏话让loader去做，vue-loader把vue文件里的html转为h函数。

template 和 render使用

template

template是vue创建实例时传入对象的一个选项，template内容是在完整版下可被编译器编译渲染的，但里面的内容会覆盖掉挂载节点，如果节点内原本有内容，那么将会被清空和替换。所以如果是使用完整版vue，要么在public/index.html里写内容，要么就使用template选项，二者选其一。

render

render是在非完整版下实现渲染的方法，它是将已经被编译器编译好的对象渲染对视图上。它可以渲染经过import导入并经过vue-loader处理的组件，也可以直接写一些待渲染对象：

render(h) {
    return h('div',[this.n,h('button',{on:{click:this.add}},'+1')])
},

Vue中的 Render 函数有一个参数，这个参数是一个函数通常叫做 h

h可以称为 createElement

Render函数将返回值放到HTML中

h函数中有3个参数

• 第一个参数（必要参数）：主要用于提供DOM的html内容，类型可以是字符串、对象或函数
• 第二个参数（类型是对象，可选）：用于设置这个DOM的一些样式、属性、传的组件的参数、绑定事件之类
• 第三个参数（类型是数组，数组元素类型是VNode，可选）：主要是指该结点下还有其他结点，用于设置分发的内容，包括新增的其他组件。注意，组件树中的所有VNode必须是唯一的

还可以使用 codesandbox.io 创建 Vue 项目

1. 打开 codesandbox.io/ 不登录可以创建很多文件，登录的话只能创建50个
2. 点击Create SandBox 选择Vue

还可以下载到本地，下载解压包即可