两个版本对应的文件名

1. 完整版的 vue.min.js 特点：有compiler， 视图：写在HTML里面或者template选项，cdn引入：vue.js, webpack引入：需要配置 alias, @vue/cli：需要额外配置

script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.min.js"></script>`

2. 不完整版的 vue.puntime.min.js 特点：没有compiler, 视图：写在render函数里 用h创建标签，cdn引入：vue.runtime.js，webpack引入：默认使用非完整版，@vue/cli引入：默认使用非完整版 <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.runtime.min.js"></script>

3. 评价：完整版比非完整版大40%左右的体积，总是用非完整版，然后配合vue-loader和vue文件

template 和 render 怎么用

1. template 的使用 VUE一般使用template来创建HTML，然后在有的时候，我们需要使用javascript来创建html，

<div id="app>  
    {{n}}
<div>

new Vue({
    el: '#app',
    template: `
        <div>{{n}}</div>
    `
    data:{
     n: 0
    }
 // 页面就会显示 0 

2.render 非完整版，配合vue-loader 和 vue 文件

// 创建 Demo.vue 文件
    <template>
    <div class="red">
        {{n}}
        <button @click="add">+1</button>
    </div>
</template>
<script>
export default {
    data(){
        return{
            n:0
        }
    },
    methods:{
        add(){
            this.n +=1
        }
    }
}
</script>
<style scoped>
.red{
    color: red;
    }
</style>

// 引入 Demo 文件
import Demo from './Demo.vue'

new Vue({
    el: 'app',
    render(h){
        h(Demo)
    }
    

Vue中的Render函数中有一个参数，这个参数是一个函数通常我们叫做h。其实这个h叫做createElement。Render函数将createElement的返回值放到了HTML中

createElement这个函数中有3个参数

第一个参数（必要参数）：主要用于提供DOM的html内容，类型可以是字符串、对象或函数

第二个参数（类型是对象，可选）：用于设置这个DOM的一些样式、属性、传的组件的参数、绑定事件之类

第三个参数（类型是数组，数组元素类型是VNode，可选）：主要是指该结点下还有其他结点，用于设置分发的内容，包括新增的其他组件。注意，组件树中的所有VNode必须是唯一的

教读者如何用 codesandbox.io 写 Vue 代码

1. 打开 codesandbox.io/ 不登录可以创建很多文件 登录的话只能创建50个

2. 点击Create SandBox 选择Vue

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