1、Vue是什么
Vue (读音 /vjuː/,类似于view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
2、引入Vue
直接用<script>
引入
直接下载并用<script>
标签引入,Vue会被注册为一个全局变量。
开发版本 : 包含完整的警告和调试模式
生产版本 :删除了警告,33.30KB min+gzip
在开发环境下不要使用压缩版本,不然你就失去了所有常见错误相关的警告!
#CDN
完整版引入:
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
非完整版引入:
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.runtime.min.js"></script>
命令行工具 (CLI)
Vue 提供了一个官方的 CLI,为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验,以及生产环境可用的构建版本。更多详情可查阅
Vue CLIcli.vuejs.org![25035d573374e349a0f2cea4fa71ca70.png](https://i-blog.csdnimg.cn/blog_migrate/205db4af3c2e993155329b7a7f9bb572.jpeg)
3、两种Vue的区别
1、文件名:
完整版:vue.js
只包含运行时版:vue.runtime.js
- 完整版:同时包含编译器和运行时的版本。
- 编译器:用来将模板字符串编译成为 JavaScript 渲染函数的代码。
- 运行时:用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。
2、文件大小:
运行时版本(没有compiler)相比完整版(有compiler)体积要小大约 30%,所以应该尽可能使用这个版本。
3、完整版vs只包含运行时版
- 完整版:视图写在 HTML里或者 template选项里。由于有 compiler(编译器)的存在,完整版运行时:用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。
- 只包含运行时版:视图写在render函数里面,用h函数来创建标签。由于没有 compiler(编译器),需要使用vue-loader ,把vue文件里面的HTML转成h函数。
完整版(template渲染HTML):
const vm=new Vue({
el:'#app',
data:{
n:0
},
template:`
<div>{{n}}
<button @click='add'>+1</button>
</div>
`,
methods:{
add(){
this.n+=1
}
}
只包含运行时版本(render渲染HTML):
const vm=new Vue({
el:'#app',
data:{
n:0
},
methods:{
add(){
this.n+=1
}
},
render(h){
return h('div',[this.n,h('button',{on:{click:this.add}},'+1')])
}
})
![8d29f2c52e4154142a44d66ab5ff705e.png](https://i-blog.csdnimg.cn/blog_migrate/d31691eeb72219bdb8f2073657d4766b.jpeg)
两个版本的不同写法生成同一个效果:点击+1,左边的数字能够+1。
从代码逻辑来看第一种方式更适合新手,但是第二种版本因为体积小,更适合生产。
![df43d81942f03328a1fede8aa8693d8f.png](https://i-blog.csdnimg.cn/blog_migrate/15eeae1c84ed458cb90ba92421fadd2b.jpeg)
总结:
总是使用非完整版,配合vue-loader和vue文件
1、保证用户体验,用户下载的JS文件体积更小,但只支持h函数
2、保证开发体验,开发者可直接在vue文件里写HTML标签,而不写h函数
template与render函数对比
template----html的方式做渲染
render----js的方式做渲染 render(提供)是一种编译方式
render里有一个函数h,这个h的作用是将单文件组件进行虚拟DOM的创建,然后再通过render进行解析。
h就是createElement()方法:createElement(标签名称,属性配置,children) template也是一种编译方式,但是template最终还是要通过render的方式再次进行编译。区别:
- render渲染方式可以让我们将js发挥到极致,因为render的方式其实是通过createElement()进行虚拟DOM的创建。逻辑性比较强,适合复杂的组件封装。
- template是类似于html一样的模板来进行组件的封装。
- render的性能比template的性能好很多
- render函数优先级大于template
- 使用template理解起来相对容易,但灵活性不足;自定义render函数灵活性高,但对使用者要求较高。
codesandbox 写 Vue 代码
搜索codesandbox.io打开,选择用vue创建项目
![1a6e831aff1a6c431e777b0dc50170d7.png](https://i-blog.csdnimg.cn/blog_migrate/ea8ffee49b83c6f3194006acffa30f91.jpeg)
右边的是实时预览非常方便
![2d82c6653ae83cb25ac645bc471e337b.png](https://i-blog.csdnimg.cn/blog_migrate/84d4f155a2c8e1baacd61122af3e4ec2.jpeg)
并且可以导出ZIP,方便下载到本地。
谢谢观看~,有错误请指出谢谢~~