vue div链接_Vue 两个版本的区别和使用方法

最新推荐文章于 2024-08-15 22:20:14 发布

知乎老王

最新推荐文章于 2024-08-15 22:20:14 发布

阅读量234

点赞数

文章标签： vue div链接

本文链接：https://blog.csdn.net/weixin_33598481/article/details/113450368

版权

本文介绍了Vue的完整版与只含运行时版本的区别，完整版包含编译器，体积较大，可直接处理HTML模板；而运行时版不包含编译器，需要配合vue-loader和webpack使用。通过示例展示了如何在CodeSandbox上创建和编辑Vue项目，并指出导出项目可选择EXPORT TO ZIP功能。

摘要由CSDN通过智能技术生成

Vue的两个版本

在vue的中文文档里，可以看到

完整版是指vue.js或者没有注释的vue.min.js，只含运行时版本指runtime.js/runtime.min.js。这个两个版本引入时，注意区别后缀，不要引入错误。

这两个版本最大的区别是，完整版(vue.js)有compiler(编译器），非完整版（vue.runtime.js)没有compiler，所以完整版的体积比非完整版的体积大30%-40%。

完整版可以通过compiler把视图上的HTML转化为DOM节点，完整版的视图可以写在HTML里面或者template选项里面；非完整版中的HTML只是字符串，不能从HTML中获取视图，但是结合webpack引入vue-loader，就可把vue文件里的HTML转化为h函数，从而实现完整版的功能，又因为体积更小，能给用户更好的体验。

使用方法

完整版template使用方法，写在HTML或者js里

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

非完整版的render使用方法

new Vue( {
   render(h) {
       return h('div', this.hi)
    }
})

如何用 http://codesandbox.io 写 Vue 代码

https://codesandbox.io/codesandbox.io

打开链接，注意，如果登录的话，每个账户最多创建50个项目；不登录可以创建无限个项目，所以推荐不不登录:)

点击create sandbox之后，会出现大概如下的界面，然后选择vue

然后就可以开始快乐写代码了！

写完如果要导出的话，我只找到了EXPORT TO ZIP 这个方法