vue 完整版叫 vue.js

vue 运行时版叫 vue.runtime.js

区别在哪

vue.js 有编译器(compile), 可以直接从 html or template 里得到视图。把含有 vue 指令的 html、template 字符串变成真实的 dom 节点。

template 用法

new Vue({
  template: `<div>{{n}}</div>`,
});

vue.runtime.js 没有 compile。所以体积更小 （比完整版小 30%）。但是不能直接 html or template 里得到视图， 需要用 js 去构建视图。如下

new Vue({
  render(h) {
    return h("div", [this.n, h("button", { on: { click: this.add } })]);
  },
  methods: {
    add() {
      this.n++;
    },
  },
});

直接用 render 太麻烦了吧，所以配合 webpack 用，通过 vue-loader 把 .vue 文件编译成 render 可用的对象

<div> {{ n }}</div>;
//  ↓  vue loader
h("div", this.n);

codesandbox.io 创建 Vue 项目

直接开始写代码

file -> export to ZIP 可以到处压缩包 在本地写