不同版本的 Vue

Vue 常见的版本有Vue.js, Vue.min.js, Vue.runtime.js,Vue.runtime.min.js 这四种，其实整体分为完整版和非完整版，其中的Vue.min.js 官方名称为“生产环境的完整版”，主要是压缩了代码，获得了一个更小的体积，带来了比完整版开发环境更快的速度。

完整版和非完整版（Vue.runtime.*.js) 的区别。

• 特点，是否含有编译器（compiler），完整版同时包含编译器和运行时的版本，而非完整版本（也就是运行时版本）不含有编译器。
• 视图，完整版的视图写在 HTML 或 template 中，非完整版写在 render 函数中，用 h(这个是作者写好的) 来创建标签。
• 外部引入，使用 webpack，@Vue/cli 引入 Vue，默认都是非完整版本，使用完整版都需要额外配置。

template 和 render

• 使用完整版的template

new window.Vue({
  el: "#app",
  template: `
    <div @click="add">{{n}} <button>+1</button></div>
  `,
  data: {
    n: 0
  },
  methods:{
    add(){
      this.n += 1
    }
  }

其中，el 指向的就是容器，data 用于存储数据供指定容器使用。

一般使用完整版执行后都还有下载 Vue.js.devtools 和生产提示，第一个提示自行谷歌商店下载即可。另外一个提示可以使用 Vue.config.productionTip = false; 取消提示，默认为 true。

• 使用非完整版的 render

new window.Vue({
  el: "#app",
  render(h){
    return h("div", [this.n, h("button", {on:{click: this.add}}, "+1")])
  },
  data: {
    n: 0
  },
  methods:{
    add(){
      this.n += 1
    }
  }
})

codesandbox.io 写 Vue

这个在线网站https://codesandbox.io/提供了很多在线的框架使用，Vue，React，Angular等等。 提示，千万别急着登录，登录之后，创建的项目有所限制，但是不登录就可以一直创建，缺点就是不能保存，只能导出到本地。