Vue.js 和 Vue.runtime.js完整版可直接将内容写在HTML中查看视图效果，或用template渲染到H

Vue官方中文文档：

Vue有两个版本：

完整版：vue.js、vue.min.js（运行时版+编译器）（编译器：将模板字符串编译成为JS渲染函数的代码）
运行时版：vue.runtime.js、vue.runtime.min.js（用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码）

vue-cli 创建的 vue 项目，默认的配置是 vue.runtime.js 版本
后缀为.min.js的是生产版

完整版(vue.js)和运行时版(vue.runtime.js)的区别：

比较项	vue.js	vue.runtime.js	评价
特点	有编译器(compiler)	无编译器	编译器占40%的体积
视图	写在HTML里或者写在template里	写在render函数里，用h创建标签	h是vue内置的回调函数
CDN引入	vue.js	vue.runtime.js	文件名不同，生产环境后缀都为.min.js (vue.min.js/vue.runtime.min.js)
webpack引入	需配置alias	默认使用此版本	vue作者配置的
@vue/cli引入	需要额外配置	默认使用此版本	vue作者配置的

完整版可直接将内容写在HTML中查看视图效果，或用template渲染到HTML。
运行时版无法直接实现页面渲染，需要利用 render 里的 h 函数来创建 HTML 节点，vue.js的webpack引入和@vue/cli 引入都默认使用此版本。
运行时版最大的意义就在于体积小。
单文件组件：由于h函数的参数比较复杂，可以使用vue-loader把vue文件里的HTML转为h函数。

template和render

template

类型：string
详细：一个字符串模板作为 Vue 实例的标识使用。模板将会替换挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发插槽。
其他：只适用于vue的完整版中，与el属性配合使用。

用template在页面中显示一个0

index.html

<body>
  <div id="app"></div>
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</body>

main.js

new Vue({
  // 元素 element
  el: '#app',
  template: `
    <div>{{n}}</div>
  `,
  data: {
    n: 0
  }
})

render

类型：function
详细：接收一个回调函数h（h为vue中内置的回调函数），h包含两个参数。第一个参数为渲染的dom对象名（字符串），第二个参数为dom内的内容。例如：render(h){ h('div','hello vue') }

用render在页面中显示一个0

index.html

<body>
  <div id="app"></div>
</body>

main.js

new Vue({
  // 元素 element
  el: '#app',
  render(h){
      // 创建一个div 里面是 n
    return h('div', this.n)
  },
  data: {
    n: 0
  }
})

单文件组件

我们有一种两全其美的方法：

使用 webpack 的 vue-loader。（注意：我们在使用 vue-cli 时，它已经帮我们配置好了这个加载器。）

我们在写组件的时候，在 build 时这个加载器会自动帮我们编译为 render 函数的方法来构造。

这样，用户下载产品时只需要下载体积小的非完整版，而开发人员编写代码时，也不需要使用 render 方法去构造元素。

↓↓↓以下代码用单文件组件的方法实现点一下“+1”按钮数字+1的功能↓↓↓：

html

<body>
  <div id="app"></div>
</body>

创建一个vue文件。

Demo.vue

<template>
  <div class="demo">
    {{n}}
    <button @click="add">+1</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      n: 0
    };
  },
  methods: {
    add() {
      this.n += 1;
    }
  }
};
</script>

<style scoped>
.demo{
    color:blue;
}
</style>

在 template 中写视图相关，在 script 中写视图之外的所有内容，在 style 中写 CSS相关。

vue-loader 就可以把这些变为一个对象。

在js中引入：

main.js

import Vue from 'vue'
import Demo from './Demo.vue'

new Vue({
  render(h) {
    return h(Demo)
  }
}).$mount('#app')

这样 class为"demo" 的 div 就替换掉了 id为"app"的 div。并且 div 里有 n 和 button。

这也叫做 Vue 单文件组件。

在codesandbox中使用Vue

地址：codesandbox.io
点击右上角create sandbox
创建 Vue (选中vue-cli)
保存
选择 File > Export to ZIP，即可导出代码到 zip 压缩文件