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

今天终于进入vue的学习了，我们来说说vue两个版本的区别和使用方法吧。

两个版本对应的文件名

两个版本分别是完整版和运行时版(非完整版)

完整版 / 非完整版

• 有compiler(编译器) / 没有compiler
  

compiler占40%体积

• 视图写在HTML里或者template选项里 / 写在render函数里，用h来创建标签

h是写好了传给render的，h可以改成任意的名字

• cdn引入：vue.js / vue.runtime.js

文件名不同，生产环境后缀为.min.js

• webpack引入：需要配置alias / 默认使用非完整版
• @vue/cli引入：需要额外配置 / 默认使用非完整版
  

最佳实践：总是使用非完整版，然后配合vue-loader和vue文件，此举思路：

• 可以保证用户体验，用户下载的JS文件体积更小，但是只支持h函数
• 保证开发体验，开发者可以在vue文件里写HTML标签，不写h函数
• 脏活用loader做，vue-loader会把vue文件里的HTML转为h函数，这样就可以不写h函数得到h函数

template 和 render 怎么用

vue一般使用template来创建HTML，然后在有的时候，我们需要使用javascript来创建html，这时候我们需要使用render函数。

• 完整版vue一般使用template来创建HTML,template是一个替换挂载的元素模板，使用html的方式做渲染

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

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

new Vue({
  el: "#app",
  render(h) {
    return h(Demo);
  },
});

如何用 codesandbox.io 写 Vue 代码

首先先进入网页，右上角create sandbox创建一个vue沙盒。
要想导出文件可以登录之后左上角file->export to ZIP
左下角External resources 一栏则可以自定义引入外部的静态资源
基础功能大概是这样，右上角蓝色按钮embed->share还可以和别人共享自己的代码，这是一个很好的在线代码编辑器