vue经典入门系列

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

回到顶部