vue经典入门系列
半年前系统的看完vue的资料,现在对它做一个入门级的分享。说实话vue的中文资料太多了,不做展开。讨论之前我们还是先复习一下之前章节《js模块化规约》
目录
前言-为何要选择VUE
1. 名称解释
1.1. MVVM
1.2. SPA
1.3. SSR
2. vue-cli
3. Vue-devtools
前言-为何要选择VUE
目前最火的MVVM前端框架,对比Angular,React有哪些优势?
- Vue.js更轻量,gzip后大小资源20k+
- Vue.js更容易上手,学习曲线平稳
- 吸取两家之长,借鉴啦angular的指令和react的组件化
- 想了解更多
1. 名称解释
1.1. MVVM
MVVM模式和MVC模式一样,主要目的是分离视图(View)和模型(Model),有几大优点:
l 低耦合。视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的"View"上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变
l 可重用性。你可以把一些视图逻辑放在一个ViewModel里面,让很多view重用这段视图逻辑
l 独立开发。开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计,使用Expression Blend可以很容易设计界面并生成xml代码
l 可测试。界面素来是比较难于测试的,而现在测试可以针对ViewModel来写。
详细参考:https://cn.vuejs.org/v2/guide/reactivity.html
思考:前端框架为何会有辣么多流行MVVC框架?
1.2. SPA
SPA:就是俗称的单页应用(SinglePage Web Application)
在移动端,特别是hybrid方式的H5应用中,性能问题一直是痛点。使用SPA,没有页面切换,就没有白屏阻塞,可以大大提高 H5 的性能,达到接近原生的流畅体验,说白了就是争夺前端渲染罢了。
1.3. SSR
服务器端渲染
https://ssr.vuejs.org/zh/
2. vue-cli
vue-cli是vue.js的脚手架(命令行小工具),用于自动生成vue.js模板工程的。
$npm install -gvue #全局安装vue
$npm install -gwebpack #全局安装webpack
$npm install -gvue-cli #全局安装vue-cli
$vue –help #vue-cli命令帮助
$vue list #vue支持的项目模板
$vue init webpackprojectName #生成项目名为projectName的(webpack)模板
3. Vue-devtools
Vue 的官方调试工具https://github.com/vuejs/vue-devtools
如何快速编写一款vue组件,请参阅另一篇《组件篇》
以上是 vue经典入门系列 的全部内容, 来源链接: utcz.com/z/376648.html