阅读 59

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

1.两个版本对应的文件名

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

完整版/非完整版

  • 有compiler(编译器),compiler占40%体积/没有compiler
  • 视图写在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函数。

2. template和render怎么用

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

  • 完整版vue一般使用template来创建HTML,template是一个替换挂载的元素模板,使用HTML的方式渲染
<template>
<div>
    {{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);
    }
})
复制代码

3. 如何使用codesandbox.io 写Vue代码

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

文章分类
前端
文章标签