前端基础知识

vue

前端三要素

  • HTML(结构):超文本标记语言(Hyper Text Markup Language)，决定网页的结构和内容
  • CSS(表现):层叠样式表(Cascading Style Sheets)，设定网页的表现样式
  • JavaScript(行为):是一种弱类型脚本语言，其源代码不需经过编译，而是由浏览器解释运行， 用于控制网页的行为

表现层(CSS)

  • CSS 层叠样式表是一门标记语言，并不是编程语言，因此不可以自定义变量，不可以引用等，换句话说就是不具备任何语法支持，它主要缺陷如下:
    • 语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器;
    • 没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护;
  • 这就导致了我们在工作中无端增加了许多工作量。为了解决这个问题，前端开发人员会使用一种称之为 【CSS 预处理器】 的工具，提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护 性。大大提高了前端在样式上的开发效率。

什么是 CSS 预处理器?

  • CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的 特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行 CSS 的编码工作。转化成通俗易 懂的话来说就是“用一种专门的编程语言，进行 Web 页面样式设计，再通过编译器转化为正常的 CSS 文 件，以供项目使用”。

常用的 CSS 预处理器有哪些:

  • SASS:基于 Ruby，通过服务端处理，功能强大。解析效率高。需要学习 Ruby 语言，上手难度高 于 LESS。
  • LESS:基于 NodeJS，通过客户端处理，使用简单。功能比 SASS 简单，解析效率也低于 SASS，但 在实际开发中足够了，所以我们后台人员如果需要的话，建议使用 LESS。

行为层(JavaScript)

  • JavaScript 一门弱类型脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字 符代码发送给浏览器由浏览器解释运行。

JavaScript 框架

jQuery库

  • 大家最熟知的 JavaScript 库，优点是简化了 DOM 操作，缺点是 DOM 操作太频繁，影响前端性能;在 前端眼里使用它仅仅是为了兼容 IE6、7、8;

Angular

  • Google 收购的前端框架，由一群 Java 程序员开发，其特点是将后台的 MVC 模式搬到了前端并增加了模 块化开发的理念，与微软合作，采用 TypeScript 语法开发;对后台程序员友好，对前端程序员不太友 好;最大的缺点是版本迭代不合理(如:1代 -> 2代，除了名字，基本就是两个东西;已推出了 Angular6)

React

  • Facebook 出品，一款高性能的 JS 前端框架;特点是提出了新概念 【虚拟 DOM】 用于减少真实 DOM 操作，在内存中模拟 DOM 操作，有效的提升了前端渲染效率;缺点是使用复杂，因为需要额外学习一 门 【JSX】 语言;

Vue

  • 一款渐进式 JavaScript 框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态 管理等新特性。其特点是综合了 Angular(模块化) 和 React(虚拟 DOM) 的优点;

Axios

  • 前端通信框架;因为 Vue 的边界很明确，就是为了处理 DOM，所以并不具备通信能力，此时就需要额 外使用一个通信框架与服务器交互;当然也可以直接选择使用 jQuery 提供的 A JAX 通信功能;

JavaScript 构建工具

  • Babel:JS 编译工具，主要用于浏览器不支持的 ES 新特性，比如用于编译 TypeScript
  • WebPack:模块打包器，主要作用是打包、压缩、合并及按序加载

UI 框架

  • Ant-Design:阿里巴巴出品，基于 React 的 UI 框架
  • ElementUI、iview、ice:饿了么出品，基于 Vue 的 UI 框架
  • Bootstrap:Twitter 推出的一个用于前端开发的开源工具包
  • AmazeUI:又叫“妹子 UI”，一款 HTML5 跨屏前端框架
  • Layui:轻量级框架

iView

ElementUI

ICE

  • 飞冰是阿里巴巴团队基于 React/Angular/Vue 的中后台应用解决方案，在阿里巴巴内部，已经有 270 多 个来自几乎所有 BU 的项目在使用。飞冰包含了一条从设计端到开发端的完整链路，帮助用户快速搭建 属于自己的中后台应用。
  • [官网地址] https://alibaba.github.io/ice
  • [Github] https://github.com/alibaba/ice

VantUI

AtUI

  • at-ui 是一款基于 Vue 2.x 的前端 UI 组件库，主要用于快速开发 PC 网站产品。 它提供了一套 npm + webpack + babel 前端开发工作流程，CSS 样式独立，即使采用不同的框架实现都能保持统一的 UI 风 格
  • [官网地址] https://at-ui.github.io/at-ui/#/zh
  • [Github] https://github.com/at-ui/at-ui

CubeUI

MVVM模式

什么是MVVM模式?

  • MVVM(Model-View-ViewModel)是一种软件架构设计模式，由微软 WPF(用于替代 WinForm，以 前就是用这个技术开发桌面应用程序的)和 Silverlight(类似于 Java Applet，简单点说就是在浏览器上 运行的 WPF) 的架构师 Ken Cooper 和 Ted Peters 开发，是一种简化用户界面的事件驱动编程方式。 由 John Gossman(同样也是 WPF 和 Silverlight 的架构师)于 2005 年在他的博客上发表。
  • MVVM 源自于经典的 MVC(Model-View-Controller)模式。MVVM 的核心是 ViewModel 层，负责转 换 Model 中的数据对象来让数据变得更容易管理和使用，其作用如下:
    • 该层向上与视图层进行双向数据绑定
    • 向下与 Model 层通过接口请求进行数据交互

为什么要使用 MVVM

  • MVVM 模式和 MVC 模式一样，主要目的是分离视图(View)和模型(Model)，有几大好处:
    • 低耦合: 视图(View)可以独立于 Model 变化和修改，一个 ViewModel 可以绑定到不同的 View 上，当 View 变化的时候 Model 可以不变，当 Model 变化的时候 View 也可以不变。
    • 可复用: 你可以把一些视图逻辑放在一个 ViewModel 里面，让很多 View 重用这段视图逻辑。
    • 独立开发: 开发人员可以专注于业务逻辑和数据的开发(ViewModel)，设计人员可以专注于页 面设计。
    • 可测试: 界面素来是比较难于测试的，而现在测试可以针对 ViewModel 来写。

View:

  • View 是视图层，也就是用户界面。前端主要由 HTML 和 CSS 来构建，为了更方便地展现 ViewModel 或者 Model层的数据，已经产生了各种各样的前后端模板语言，比如 FreeMarker、 Thymeleaf 等等，各大 MVVM 框架如 Vue.js，AngularJS，EJS 等也都有自己用来构建用户界面的内置 模板语言。

Model:

  • Model 是指数据模型，泛指后端进行的各种业务逻辑处理和数据操控，主要围绕数据库系统展开。这里的难点主要在于需要和前端约定统一的 接口规则

ViewModel:

  • ViewModel 是由前端开发人员组织生成和维护的视图数据层。在这一层，前端开发者对从后端获取的 Model 数据进行转换处理，做二次封装，以生成符合 View 层使用预期的视图数据模型。
  • 需要注意的是 ViewModel 所封装出来的数据模型包括视图的状态和行为两部分，而 Model 层的数据模 型是只包含状态的。
    • 比如页面的这一块展示什么，那一块展示什么这些都属于视图状态(展示)
    • 页面加载进来时发生什么，点击这一块发生什么，这一块滚动时发生什么这些都属于视图行为(交互)
  • 视图状态和行为都封装在了 ViewModel 里。这样的封装使得 ViewModel 可以完整地去描述 View 层。 由于实现了双向绑定，ViewModel 的内容会实时展现在 View 层，这是激动人心的，因为前端开发者再 也不必低效又麻烦地通过操纵 DOM 去更新视图。
  • MVVM 框架已经把最脏最累的一块做好了，我们开发者只需要处理和维护 ViewModel，更新数据视图就 会自动得到相应更新，真正实现 事件驱动编程 。
  • View层展现的不是 Model 层的数据，而是 ViewModel 的数据，由 ViewModel 负责与 Model 层交互，这就完全解耦了 View 层和 Model 层，这个解耦是至关重要的，它是前后端分离方案实施的重要一环。

vue简介

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架，发布于 2014 年 2 月。与其它 大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上 手，还便于与第三方库(如:vue-router，vue-resource，vuex)或既有项目整合。

MVVM 模式的实现者

  • Model:模型层，在这里表示 JavaScript 对象
  • View:视图层，在这里表示 DOM(HTML 操作的元素)
  • ViewModel:连接视图和数据的中间件，Vue.js 就是 MVVM 中的 ViewModel 层的实现者
  • 在 MVVM 架构中，是不允许 数据 和 视图 直接通信的，只能通过 ViewModel 来通信，而 ViewModel 就是定义了一个 Observer 观察者。
    • ViewModel 能够观察到数据的变化，并对视图对应的内容进行更新
    • ViewModel 能够监听到视图的变化，并能够通知数据发生改变
    • Vue.js 就是一个 MVVM 的实现者，他的核心就是实现了 DOM 监听 与 数据绑定

为什么要使用 Vue.js

  • 轻量级，体积小是一个重要指标。Vue.js 压缩后有只有 20多kb (Angular 压缩后 56kb+，React 压缩后 44kb+)
  • 移动优先。更适合移动端，比如移动端的 Touch 事件
  • 易上手，学习曲线平稳，文档齐全
  • 吸取了 Angular(模块化)和 React(虚拟 DOM)的长处，并拥有自己独特的功能，如:计算属 性
  • 开源，社区活跃度高
  • ……

第一个Vue程序准备

  • vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所 有兼容 ECMAScript5 的浏览器。

开发版本

CDN

 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

  • Vue.js 的核心是实现了 MVVM 模式，她扮演的角色就是 ViewModel 层，那么所谓的第一个应用程序就 是展示她的 数据绑定 功能

  • el:'#vue':绑定元素的 ID

  • data:{message:'Hello Vue!'}:数据对象中有一个名为 message 的属性，并设置了初始值 Hello Vue!

  • 将数据绑定到页面元素(视图层)

  •   <div id="vue">
      {{message}}
  </div>

基础语法

我们对于基础语法，说白了就是实现元素赋值，循环，判断，以及事件响应即可!

v-bind

  • v-bind 特性被称为指令。指令带有前缀 v- ，以表示它们是 Vue 提供的特殊特性。
  • 除了使用插值表达式{{}}进行数据渲染，也可以使用 v-bind指令，它的简写的形式就是一个冒号(😃

v-if 系列

  • v-if
  • v-else-if
  • v-else

v-for

<div id="vue">
    <li v-for="item in items">
        {{ item.message }}
		</li> 
</div>
  • items 是数组，item是数组元素迭代的别名。和Thymeleaf模板引擎的语法和这个十分的相似!

v-on

  • v-on 监听事件:

    • 事件有Vue的事件、和前端页面本身的一些事件!我们这 click 是vue的事件，可以绑定到Vue中的 methods 中的方法事件!

    •   <script>
  var vm = new Vue({
      el: "#app",
      data: {
          message: "bbb"
      },
      methods: { //方法必须定义在vue 的methods 对象中
          sayHi: function () {
              alert(this.message);
          }
  
      }
  });
  </script>

v-model

  • 双向数据绑定
    • Vue.js 是一个 MVVM 框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发 生变化的时候，数据也会跟着同步变化。这也算是 Vue.js 的精髓之处了。
    • 值得注意的是，我们所说的数据双向绑定，一定是对于 UI 控件来说的，非 UI 控件不会涉及到数据双向 绑定。对于我们处理表单，Vue.js 的双向数据绑定用起来就特别舒服了。
    • 可以用 v-model 指令在表单 < input>、< textarea> 及 < select> 元元素上创建双向数据绑定。它 会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它 负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

组件

什么是组件

  • 组件是可复用的 实例，说白了就是一组可以重复使用的模板，跟 JSTL 的自定义标签、 Thymeleaf 的 等框架有着异曲同工之妙。通常一个应用会以一棵嵌套的组件树的形式 来组织:
  • 使用 Vue.component() 方法注册组件:
  • Vue.component():注册组件
  • my-component-li:自定义组件的名字
  • template:组件的模板

使用 props 属性传递参数

  • 默认规则下 props 属性里的值不能为大写:
  • v-for="item in items" :遍历 Vue 实例中定义的名为 items 的数组，并创建同等数 量的组件;
  • v-bind:item="item" :将遍历的 item 项绑定到组件中 props 定义的名为 item 属 性上;
  • = 号左边的 item 为 props 定义的属性名，右边的为 item in items 中遍历的 item 项的值;

计算属性

  • 计算属性的重点突出在 属性 两个字上(属性是名词)，首先它是个 属性 其次这个属性有 计 算 的能力(计算是动词)，这里的 计算 就是个函数;简单点说，它就是一个能够将计算结果缓存 起来的属性(将行为转化成了静态的属性)，仅此而已;可以想象为缓存!
  • 注意:methods 和 computed 里的东西不能重名
  • methods:定义方法，调用方法使用 currentTime1()，需要带括号;
  • computed:定义计算属性，调用属性使用 currentTime2，不需要带括号;this.message 是为了 能够让 currentTime2 观察到数据变化而变化;
  • 如果在方法中的值发生了变化，则缓存就会刷新!可以在控制台使用vm.message="liun" 改变下数据的值，再次测试观察效果!
  • 调用方法时，每次都需要进行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变 化的呢?此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点，计算属性的主 要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销;

插槽

  • 在 Vue 中我们使用 元素，作为承载分发内容的出口，作者称其为 插槽，可以应用在组合组 件的场景中;
  • 比如准备制作一个待办事项组件(todo)，该组件由待办标题(todo-title)和待办内容(todo-items) 组成，但这三个组件又是相互独立的，该如何操作呢?

自定义事件

  • 数据项在 Vue 的实例中，但删除操作要在组件中完成，那么组件如何才能删除 Vue 实例中的数据呢?此时就涉及到参数传递与事件分发了，Vue 为我们提供了自定义事件的功能很好 的帮助我们解决了这个问题;使用 this.$emit('自定义事件名', 参数)，

逻辑理解

Axios

什么是Axios

  • Axios 是一个开源的可以用在浏览器端和nodejs的异步通信框架，她的主要作用就是实现 A JAX 异步通信，其功能特点如下:
    • 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求
    • 支持 Promise API [ JS中链式编程 ] 拦截请求和响应 转换请求数据和响应数据
    • NodeJS的异步通信框架，她的主要作用就是实现 A JAX 异
    • 取消请求
    • 自动转换 JSON 数据
    • 客户端支持防御 XSRF(跨站请求伪造)
  • GitHub:https://github.com/axios/axios
  • 中文文档:http://www.axios-js.com/

为什么要使用 Axios

  • 由于vue.js 是一个 视图层框架 并且作者(尤雨溪)严格准守 SoC (关注度分离原则)，所以 vue.js 并不包含 A JAX 的通信功能，为了解决通信问题，作者单独开发了一个名为vue-respurce的插件，不过在进入 2.0 版本以后停止了对该插件的维护并推荐了axios 框架。少用 jQuery，因为它操作Dom太频繁!
  • 在这里使用了 v-bind 将 a:href 的属性值与 Vue 实例中的数据进行绑定
  • 使用 axios 框架的 get 方法请求 A JAX 并自动将数据封装进了 Vue 实例的数据对象中
  • 我们在data中的数据结构必须要和 Ajax 响应回来的数据格式匹配!

Vue的生命周期

  • 官方文档:https://cn.vuejs.org/v2/guide/instance.html#生命周期图示
  • Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载 DOM、渲染→更 新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创建到销毁的过 程，就是生命周期。
  • 在 Vue 的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册 JS 方法，可以让我们 用自己注册的 JS 方法控制整个大局，在这些事件响应方法中的 this 直接指向的是 Vue 的实例。

路由

  • Vue.js 路由允许我们通过不同的 URL 访问不同的内容。
  • 通过 Vue.js 可以实现多视图的单页Web应用(single page web application，SPA)
  • Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反 掌。包含的功能有:
    • 嵌套的路由/视图表
    • 模块化的、基于组件的路由配置
    • 路由参数、查询、通配符
    • 基于 Vue.js 过渡系统的视图过渡效果
    • 细粒度的导航控制
    • 带有自动激活的 CSS class 的链接
    • HTML5 历史模式或 hash 模式，
    • 在 IE9 中自动降级 自定义的滚动条行为

路由模式与404

Vue-Cli

什么是vue-cli

  • vue-cli 官方提供的一个脚手架,用于快速生成一个 vue 的项目模板
  • 预先定义好的目录结构及基础代码，就好比咱们在创建 Maven 项目时可以选择创建一个骨架项目，这 个骨架项目就是脚手架,我们的开发更加的快速;
  • 主要的功能 :
    • 统一的目录结构
    • 本地调试
    • 热部署
    • 单元测试
    • 集成打包上线
  • Project name:项目名称，默认 回车 即可
  • Project description:项目描述，默认 回车 即可
  • Author:项目作者，默认 回车 即可
  • Install vue-router:是否安装 vue-router，选择 n 不安装(后期需要再手动添加)
  • Use ESLint to lint your code:是否使用 ESLint 做代码检查，选择 n 不安装(后期需要再手动添 加)
  • Set up unit tests:单元测试相关，选择 n 不安装(后期需要再手动添加)
  • Setup e2e tests with Nightwatch:单元测试相关，选择 n 不安装(后期需要再手动添加)
  • Should we run npm install for you after the project has been created:创建完成后直接初始 化，选择 n，我们手动执行;运行结果!

Vue-cli目录结构

  • build 和 config:WebPack 配置文件
  • node_modules:用于存放 npm install 安装的依赖文件
  • src: 项目源码目录
  • static:静态资源文件
  • .babelrc:Babel 配置文件，主要作用是将 ES6 转换为 ES5
  • .editorconfig:编辑器配置
  • eslintignore:需要忽略的语法检查配置文件
  • .gitignore:git 忽略的配置文件
  • .postcssrc.js:css 相关配置文件，其中内部的 module.exports 是 NodeJS 模块化语法
  • index.html:首页，仅作为模板页，实际开发时不使用
  • package.json:项目的配置文件
    • name:项目名称
    • version:项目版本
    • description:项目描述
    • author:项目作者
    • scripts:封装常用命令
    • dependencies:生产环境依赖
    • devDependencies:开发环境依赖
posted @ 2021-02-20 11:05  流年りゅう  阅读(228)  评论(0)    收藏  举报