快速了解Vue的两个版本和使用方法

223 阅读1分钟

两个版本对应的文件名

分别是vue.js(完整版)vue.runtime.js(非完整版)

区别(如图所示)

  • 完整版里有编辑器compiler,有占位符或其他比较复杂的Vue语句时,可以通过分析DOM节点来修改,但是代码体积会比非完整版的大30%。可以从HTML或template直接得到视图

  • 非完整版里没有编辑器compiler,体积更小,功能更弱。可以通过webpack里的vue-loader来render翻译

最佳实践

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

思路:

1 保证用户体验,用户下载的JS文件体积更小,但只支持h函数

2 保证开发体验,开发者可直接在vue文件里写HTML标签,而不写h函数

3 脏活loader做,vue-loader把vue文件里的HTML转化为h函数

用错了会怎么样

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

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

template 和 render 怎么用:

vue完整版 template的使用方法:

直接写在Html上或者JS上

// 需要编译器
new Vue({
  template: '<div>{{ hi }}</div>'
})

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

render函数接收一个参数h,这个参数是vue传的;用这个参数去创建实例(可以参照上图)

// 不需要编译器
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

如何用 codesandbox.io 写 Vue 代码:

1、进入codesandbox.io(建议不要登录,否者只能创建50个项目)

2、选择vue项目选项

3、直接点击第三个V形图标创建vue项目,右边可以实时预览

4、可以导出ZIP