Vue 两个版本的区别和使用方法

1、两个版本对应的文件名：

分别是vue.js（完整版）和vue.runtime.js（非完整版）。

两者区别：

最佳实践：

总是使用非完整版，配合vue-loader和vue文件

思路：

1. 保证用户体验，用户下载的JS文件体积更小，但只支持h函数
2. 保证开发体验，开发者可直接在vue文件里写HTML标签，而不写h函数
3. 脏活loader做，vue-loader把vue文件里的HTML转化为h函数

如果vue.js错用成vue.runtime.js：无法将HTML编译成视图；

如果vue.runtime.js错用成vue.js：代码体积变大，因为vue.js有编译HTML的功能。

2、template 和 render 怎么用：

vue完整版 template的使用方法：直接写在Html上或者JS上

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

vue非完整版 render的使用方法：

render函数接收一个参数h，这个参数是vue传的；用这个参数去创建实例

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

3、如何用 codesandbox.io 写 Vue 代码：

1、进入codesandbox.io（建议不要登录，否者只能创建50个项目）；

2、选择vue项目选项；

3、稍等一会就会生成一个全新的vue项目；

4、可以更改任何内容，是一个可实时预览的环境；

5、可以导出ZIP。