码迷,mamicode.com
首页 > Web开发 > 详细

vue的vue.runtime.js和vue.js

时间:2020-07-20 10:52:59      阅读:150      评论:0      收藏:0      [点我收藏+]

标签:通过   运行   new   zip   vue   用法   压缩   专注   区别   

vue的俩种版本

  • 完整版:vue.js
  • 运行版:vue.runtime.js

俩者区别主要有:
技术图片

template和render的用法

说白了,完整版支持template语法,而运行版不支持template语法。
1、template的使用

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

这时候,Vue需要将template的内容与index.html合并到一起,而template里面可能含有一些vue专有语法,比如v-if、v-for。这时候,就需要编译器将其转换成普通的html,然后将其替换到index.html的指定位置上。

早期MVC、MVVM类型的前端框架,都是为了将复杂的逻辑拆分开来,然后通过某种方法将其转换成html。这有点类似模版引擎。

2、render用法

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

在render方法中,只有在构建的时候,才会将其编译成JavaScript。在你最终打好的包里,是完整的html,并不需要编译器再次编译里。

3、render的助手
如果我们人工的去写render方法,是有点反人类的。所以,vue提供里vue-loader。它可以自动将.vue文件转换到render方法,这样我们就不需要再去写render方法里。我们只需要专注写.vue文件即可。

在codesandbox中使用Vue

  • 地址:codesandbox.io
  • 点击右上角create sandbox
  • 创建 Vue (选中vue-cli)
  • 保存
  • 选择 File > Export to ZIP,即可导出代码到 zip 压缩文件

vue的vue.runtime.js和vue.js

标签:通过   运行   new   zip   vue   用法   压缩   专注   区别   

原文地址:https://www.cnblogs.com/fourther/p/13343074.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!