初探Vue

298 阅读1分钟

Vue一开始采用了MVC框架,V(视图)是Vue的重点,M和C则被简化。

Vue将在2020年发布3.0版本,过去的1.0版本是MVVM框架,在2.0版本后就不是MVVM框架(看似是MVVM框架),在3.0版本就完全不是MVVM框架了。

Vue完整版与运行时版的区别

  1. Vue完整版文件名为 vue.js 和 vue.min.js , 后者是压缩版,取消了注释和警告,适合在生产环境下使用。
  2. Vue运行时版文件名为 vue.runtime.js 和 vue.runtime.min.js, 后者是压缩版,取消了注释和警告,适合在生成环境下使用。

个人建议选择运行时版版,配合vue-loader和vue文件。

原因:

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

template 和 render 怎么用

//template (完整版使用)
// 需要编译器
new Vue({
  template: '<div>{{ hi }}</div>'
})
//render (完整版与运行时版使用)
// 不需要编译器
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

使用codesandbox.io写Vue代码

  1. 点击进入codesandbox.io主页
  2. 在主页选择create a Sandbox
  3. 然后选择vue开始撸代码

note: Sandbox 使用的是运行时版