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

168 阅读1分钟

Vue的两个版本

我们使用Vue的时候,有两个不同的版本,它们分别是Vue完整版(vue.js)和Vue非完整版(vue.runtime.js)

  • 两个版本的区别

最佳实践:总是使用非完整版,然后配合vue-loader和vue文件

思路:

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

template 和 render 怎么用

vue完整版 template的使用 直接写html标签

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

vue非完整版 render的使用

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

codesandbox 写 Vue 代码

codesandbox 官网//codesandbox.io/ 直接create sandbox 创建代码沙盒 选择vue就可以创建一个项目