Vue2 基础技术总结一

前置技能

• ES6 语法规范
• ES6 模块化
• 包管理器
• 原型、原型链
• 数组常用方法
• axios
• promise

VUE2 简介

一套用于构建用户界面的渐进式 js 框架。后起之秀，生态完善，已然成为国内前端工程师必备技能。

• 组件化模式，提高代码复用率、且让代码更好维护。
• 声明式编码，让编码人员无需直接操作 DOM，提高开发效率。
• 使用虚拟 DOM+优秀的

前端工程化

• 模块化：js 模块化、css 模块化、资源模块化。
• 组件化：复用现有的 UI 结构、样式、行为。
• 规范化：目录结构的划分、编码规范化、接口规范化、文档规范化、GIT 分支管理。
• 自动化：自动化构建、自动部署、自动化测试。

前端工程化，是指在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。 目前主流的前端工程化解决方案是 webpack。主要功能是它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览端 javascript 的兼容性、性能优化等强大功能。 好处是程序员把工作重心放在功能开发实现上，提高了前端开发效率和项目的可维护性。

路由

• 路由 router 就是个对应关系。
• 前端路由指 Hash 地址与组件之间的对应关系。URL 中#后面的字符串都是 Hash。
• 后端路由指 请求方式、请求地址与 function 处理函数之间的对应关系。
• 路由工作方式
  • 用户点击页面上的路由链接。
  • URL 地址栏中的 Hash 值发生了变化。
  • 前端路由监听到了 Hash 地址的变化。
  • 前端路由把当前 Hash 地址对应的组件渲染到浏览器中。
• SPA 与前端路由。SPA 指的是一个 web 网站只有唯一的一个 HTML 页面，所有组件的展示与切换都在这唯一的一个页面完成。此时，不同组件之间的切换需要通过前端路由来实现。

created(){
// 只要当前的APP组件一创建，就立即监听window.onhashchange事件
window.onhashchange = () => {
  console.log('监听到了 hash 地址的变化'，location.hash)
  switch (location.hash){
    case '#/home':
      this.comName = 'Home'
      break
    case '#/movie':
      this.comName = 'Movie'
      break
    case '#/about':
      this.comName = 'About'
      break
    }
  }
}

vue-router 基本用法

• vue-router 是 vue.js 官方给出的路由方案。只能应用于 vue 项目，能够轻松的管理 SPA 项目中组件的切换。
• vue-router 安装和配置步骤
  • npm install vue-router。
  • 创建路由模块。
  • 导入并挂载路由模块。
  • 声明路由链接和占位符。