vue-js

第一章 vue 基础

初识 Vue.js

Vue.js 安装

• 方式一：直接 CDN 引入

<!-- 开发环境版本，包含了有帮助的命令行警告 --> 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

• 方式二：下载和引入

开发环境 https://vuejs.org/js/vue.js 
生产环境 https://vuejs.org/js/vue.min.js

• 方式三：NPM 安装
  后续通过 webpack 和 CLI 的使用，我们使用该方式。

Hello Vuejs 解析

• 引入 vue.js
  

• 调用 new Vue()创建 vue 实例

  const app = new Vue()

• 挂载 vue 实例

  el: ‘#app’

• 使用 vue

  在 html 的模板语法 {{}} 中取出 vue 实例定义的数据

<bady>
  <div id="app">
    <h2>{{message}}</h2>
    <h1>{{name}}</h1>
  </div>
<div>{{message}}</div>
<script src="../js/vue.js"></script> 
<script>
    const app = new Vue({
        el: '#app', // 用于挂载要管理的元素
        data: { // 定义数据
            message: '你好啊, 李银河!',
            name: 'coderwhy'
        }
    })
</script>
</bady>

Vue 中的 MVVM

• View 层：视图层
  在前端开发中，通常就是 DOM 层，主要的作用是给用户展示各种信息

• Model 层：数据层
  数据可以是固定的，也可以是来自服务器的

• VueModel 层：视图模型层（vue 实例）
  视图模型层是 View 和 Model 沟通的桥梁
  实现数据绑定，将 Model 的改变实时反应到 View 中
  实现 DOM 监听，可以监听到 DOM 发生一些事件(点击、滚动、touch 等)，并在需要的情况下改变数据
  

创建 Vue 实例的基本要素

创建 Vue 实例的时候，需要定义 vue 对象的基本要素，包含三个选项

• e l

  • 作用：决定之后 Vue 实例会管理哪一个 DOM

  • 类型：string | HTMLElemen

• data

  • 作用：Vue 实例对应的数据对象
  • 类型：Object | Function （组件当中 data 必须是一个函数）

• methods

  • 作用：定义属于 Vue 的一些方法，可以在其他地方调用，也可以在指令中使用
  • 类型：{[key: string]: Function }

基础语法

插值操作

作用：将 data 中的文本数据，插入到 HTML 中，mustache 语法中, 不仅仅可以直接写变量, 也可以写简单的表达式

• v-once

  表示元素和组件只渲染一次，不会随着数据的改变而改变。
  

• v-html

  该指令后面往往会跟上一个 string 类型，将 string 的 html 解析出来并渲染

• v-text

  v-text 通常情况下，接受一个 string 类型
  

v-pre

• v-pre 用于跳过这个元素和它子元素的编译过程，直接显示原本的 Mustache 语法。

• 比如下面的代码：

  • 第一个 h2 元素中的内容会被编译解析出来对应的内容
  • 第二个 h2 元素中会直接显示{{message}}

属性绑定 v-bind

v-bind 动态绑定属性基础用法

• 内容可以通过插值操作动态控制，属性也可以动态绑定
  比如动态绑定 a 元素的 href 属性，img 元素的 src 属性
• 语法糖：简写 v-bind 为一个冒号“：”

v-bind 动态绑定 class

• 对象语法：class 后面跟的是对象

  

• 数组语法：

v-bind 动态绑定 style

• 在写 CSS 属性名的时候，比如 font-size

• • 我们可以使用驼峰式 (camelCase) fontSize
  • 或短横线分隔 (kebab-case，记得用单引号括起来) ‘font-size’

• 绑定 class 有两种方式：

• 对象语法
  
  

• 数组语法
  
  

计算属性 computed

• 在模板中可以直接通过插值语法显示一些 data 中的数据，也可以对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示，计算属性是有缓存的，不是每次调用都重新计算一遍，效率更高

• 计算属性的复杂用法
  

关键字：var , let , const

• js 中 var 定义的变量没有没有块级作用域，let 定义的变量有块级作用域
• const 修饰的标识符为常量, 不可以再次赋值，在 ES6 开发中, 优先使用 const, 只有需要改变某一个标识符的时候才使用 let
  

事件监听 v-on

• v-on 基本使用

  语法糖：v-on:click 可以写成 @click

• v-on 参数

  • 鼠标点击的时候，浏览器会自动产生一个 event 对象，event 对象默认自动传参

  

  • 如果传递的参数是 event 对象，不需要声明变量 event
    

  • 如果参数是自定义参数，并且需要传 event 对象，则需要声明参数和显示声明 $event 对象
    

• v-on 修饰符
  

条件判断

v-if、v-else-if、v-else

• 条件渲染

v-show

v-for 遍历数组

表单绑定 v-model

• Vue 中使用 v-model 指令来实现表单元素和数据的双向绑定
  

• v-model 原理

  v-model 其实是一个语法糖，它的背后本质上是包含两个操作：

• • 1.v-bind 绑定一个 value 属性

  • 2.v-on 指令给当前元素绑定 input 事件

• v-model：radio
  

• v-model：checkbox

• v-model：select

• v-model 修饰符

第二章 组件化开发

组件化基本使用

组件的使用步骤

1. 调用 Vue.extend()创建组件构造器：

• 调用 Vue.extend()创建组件构造器 myComponent

• 通常在创建组件构造器时，传入 template 自定义组件的模板

• 该模板就是在使用到组件的地方，要显示的 HTML 代码

2. 调用 Vue.component()注册组件：

• 调用 Vue.component()将组件构造器 myComponent 注册为组件，并定义组件的标签名称

• 注册组件需要传递两个参数：1、注册组件的标签名 2、组件构造器

3. 组件必须挂载在某个 Vue 实例下，否则不生效

• 在 HTML 中使用已经注册的组件标签名

全局组件和局部组件

• 通过调用 Vue.component()注册组件时，组件的注册是全局的，全局组件可以在任意 Vue 实例下使用
• 组件注册在某个实例中, 就是局部组件
  
  

父组件和子组件

父组件中注册子组件，root 组件中注册父组件，root 组件中一样可以使用子组件的模板

注册组件语法糖

语法糖注册把创建组件构造器、注册组件合并为一步操作

模板的分离写法

• Vue 提供了两种方案来定义 HTML 模块内容：

• • 使用<script>标签

• 使用<template>标签
  

** 组件数据的存放 **

• 组件自己的数据存放在哪里?

• • 组件对象有一个 data 属性(也可以有 methods 等属性)
  • data 属性必须是一个函数
  • 函数返回一个对象，对象内部保存着数据

父子组件数据传递

• 如何进行父子组件间的通信？

• 父传子：props

• • props 的值有两种方式：

  • • 字符串数组，数组中的字符串就是传递时的名称。
    • 对象，对象可以设置传递时的类型，也可以设置默认值等
      

• 子传父：自定义事件

• • 自定义事件的流程：

  • • 在子组件中，通过 $emit()来发射事件

    • 在父组件中，通过 v-on 来监听子组件事件
      

父子组件对象访问

• • 父组件访问子组件

    • • 使用 $children 或 $refs reference(引用)
        
        

• • 子组件访问父组件

    • • 使用 $parent
        

组件化高级

slot 插槽

• 插槽作用：封装组件

• 插槽的基本使用 <slot></slot>，如果在标签内添加修改的内容，渲染时会添加上修改的内容，如图 1 
  如果标签内指明属性要修改的内容，渲染时会取代原有的内容，换成修改的的内容，如图 2
  

编译作用域

第三章 前端模块化

理解前端模块化

• 管理模块的引用，模块复用
• 常见的模块化规范：CommonJS、AMD、CMD，ES6-Modules

模块导出导入的用法

• CommonJS（了解）
  

• ES6-Modules（重点）

  • export 基本使用
    

  • 导出函数或类
    

  • export default

    • default 可以导出模块时不定义模块名，让导入者自己命名模块名
    • export default 在同一个模块中只能存在一个

  

  • import 使用

    • 导入文件，在使用之前需要在 HTML 代码中引入两个 js 文件，并且类型需要设置为 module

• 导入对象

• 用“*”一次导入模块中的所有对象，一般需要给 * 取一个模块名，方便后续使用

第四章 webpack

理解 Webpack

• 本质上 webpack 是一个现代的 JavaScript 应用的静态模块打包工具

• webpack 其中一个核心就是可进行模块化开发，并且处理模块间的依赖关系

• JavaScript 文件，CSS、图片、json 文件，在 webpack 中都可以当做模块使用

• webpack 可对 JavaScript 文件，CSS、图片、json 文件等资源模块进行打包合并成一个或多个包(Bundle)

• 在打包的过程中，还可以对资源进行处理，如压缩图片，将 scss 转成 css，将 ES6 语法转成 ES5 语法，将 TypeScript 转成 JavaScript 等操作，最终形成浏览器能识别的脚本
  

安装 webpack

• 安装 webpack

  • 安装 webpack 前需要安装 Node.js，Node.js 自带了软件包管理工具 npm

  • npm install webpack -g (不指定版本，-g 全局安装)

    npm install webpack@3.6.0 -g（指定版本，如 3.6.0）

    npm install -D webpack （-D 是开发环境中使用的，-S 是生产环境中使用的）

  

• 配置 webpack

  • 一般在终端安装的是全局 webpack，如果项目需要的 webpack 版本和全局安装的不一致，可以在项目目录中指定依赖的版本 webpack 进行局部安装

  

  • 配置 webpack.config.js

    • 在项目目录下执行 npm init 命令可以自动生成 package.json
      
      

    • package.json 是项目依赖的 node 环境，以后需要什么环境可以在这里单独配置，更新依赖后需要在项目目录下执行 npm install 更新依赖
      

      • 自定义 webpack 启动配置
        

webpack 的基本使用

• src 下的 js 文件互相引用模块，执行 webpack src/main.js dist/hundle.js 自动打包
  

• 使用 index.html 引入 bundle.js 文件即可，无需再引入 src 下的 js 文件

• 测试 npm run build

理解 loader

• loader 是 webpack 的扩展，用于加载 css、图片，将 ES6 转成 ES5 代码，将 TypeScript 转成 ES5 代码，将 scss、less 转成 css，将.jsx、.vue 文件转成 js 文件

loader 的基本使用

• 基本步骤
  • 通过 npm 安装需要使用的 loader，去官网找对应插件的安装命令
  • 配置 webpack.config.js
  • 在 main.js 中注入依赖

安装 css-loader

• 去官网找对应的安装命令

• 在 webpack.config.js 中的 modules 关键字下配置 css-loader
  

• 测试 npm run build

安装 style-loader

• 同理上官网找 style-loader 的安装命令

• 在 webpack.config.js 中的 modules 关键字下配置 style-loader

• 注入依赖

• 测试 npm run build

安装 less- loader

• 找安装命令
  

• 配置
  

• 注入依赖
  

  • 测试 npm run build

图片文件处理 -url-loader

• 图片文件不超过 8kb 用 url-loader

• 配置 publicPath 才能找到图片文件

• 测试 npm run build

图片文件处理 – file-loader

• 图片文件超过 8kb 用 file-loader，file-loader 不需要配置 web pack.config.js，直接 npm 安装即可
  

• 同理配置 publicPath 才能找到图片文件
  

• 测试 npm run build

图片文件处理 – 修改文件名称

ES6 转 ES5 语法 -bable

• 安装 bable

  npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
  

• 配置 webpack.config.js
  

• 测试重新打包 npm run build

webpack 集成 vue

• 为什么要用 webpack 集成 vue

  开发中的 vue.js 文件可以用 webpack 打包

• 在项目目录下安装命令，注意不要加 --save dev，因为运行时也需要 vue，所以不要只在开发环境 dev 中安装 vue

  npm install vue --save
  

• 使用 webpack 集成 vue（了解原理即可，实际开发看下面 Vue 组件化开发）
  

• 报错
  

  • 原因：Vue 不同版本构建，runtime-only 和 runtime-compiler

  • 解决
    

Vue 组件化开发

• 安装 vue-loader 和 vue-template-compiler

  npm install vue-loader vue-template-compiler --save-dev
  

  • 配置 webpack.config.js
    

  • 上面配置好 webpack.config.js 重新打包 npm run build 可能会报以下错误（因为 vue-loader14.0 版本开始要装多一个插件才能使用）
    

    • 解决
      
  • • 重新打包 npm run build，至此 vue-loader 和 vue-template-compiler 安装完成

  • 开始组件化开发

    1. 在 vue 实例（new vue）中抽离模板和 data、method 放到 App.vue 文件中，vue 实例中导入 App.vue 文件
       

    2. 新建 App.vue 文件（组件的修改都在这里，vue 实例文件负责导入 App.vue 即可）
       把抽离出来的模板和 data、method 放到对应的标签中，测试打包 npm run build
       

    3. 组件嵌套方法
       

安装 HtmlWebpackPlugin

• HtmlWebpackPlugin 作用
  

• 安装命令

  npm install html-webpack-plugin --save-dev
  

• 配置 webpack.config.js

  • 导入 HtmlWebpackPlugin
    

  • 配置 plugin
    

  • 重新打包 npm run build 生成 index.html
    

安装 uglifyjs-webpack-plugin

• uglifyjs-webpack-plugin 的作用

  压缩打包 js 文件

• 安装命令

  npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
  

• 配置 webpack.config.js
  

• 重新打包，查看打包后的 bunlde.js 文件，是压缩好的

搭建本地服务器

• webpack-dev-server 是 webpack 提供的本地开发服务器，这个本地服务器基于 node.js 搭建，内部使用 express 框架，可以实现浏览器自动刷新显示修改后的结果

• 安装命令

  npm install --save-dev webpack-dev-server@2.9.1
  

• 配置 webpack.config.js

devServer 可选配置：
  ​	contentBase：为哪一个文件夹提供本地服务，默认是根文件夹，我们这里要填写./dist
  ​	port：端口号，
  ​	inline：页面实时刷新
  ​	historyApiFallback：在 SPA 页面中，依赖 HTML5 的 history 模式

• 配置 package.json（配置后不必每次运行都加上本地 node_modules 下的 webpack-dev-server 路径，直接 npm run dev）
  
• 配置好 package.json 后，npm run dev 即可运行本地服务器，修改代码都可以实时渲染在本地服务器，确认无误打包再执行 npm run build
  

抽离配置文件

• 新建 base.config.js、prod.config.js、dev.config.js 文件，把配置文件放在 build 目录下

  base.config 是公共配置

  base.config + dev.config 配置开发环境

  base.config + prod.config 配置生产环境

  安装 webpack-merge
  

• 导入模块，合并两个配置环境统一导出
  

• 修改 package.json
  

• 修改打包目录
  打包目录是由配置文件所在目录拼接上 dist 目录决定的
  

第五章 Vue CLI 相关

理解 Vue CLI

• Vue CLI 是什么意思

  • CLI 是 Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架
  • Vue CLI 是一个官方发布 vue.js 项目脚手架
  • 使用 vue-cli 可以快速搭建 Vue 开发环境以及对应的 webpack 配置

• 使用 Vue.js 开发大型应用时，需要 Vue CLI 处理代码目录结构、项目结构和部署、热加载、代码单元测试等问题

使用 Vue CLI

• 安装 Vue CLI （安装 vue3 + vue2 模板）

  安装 vue3 命令（全局安装）

  npm install -g @vue/cli
  

  查看是否安装成功，返回 vue3.x.x 即是成功

  vue --version
  

  拉取 vue2 的模板，安装之后 vue2、vue3 创建项目的方式都可以用

  npm install -g @vue/cli-init
  

  vue cli2 初始化项目

  vue init webpack my-project
  

  vue3 cli 初始化项目

  vue create my-project
  

• Vue CLI2 初始化项目详解
  

• vue2 项目初始化完成后自动生成目录
  

• 关于是否开启 Eslint 代码规范检查
  

Runtime-Compiler 和 Runtime-only 的区别

• Runtime-Compiler（运行时 + 编译器）

  Template --> ast --> render --> vdom – > IU

• Runtime-only（只有运行时）(效率更高)

  render --> vdom – > IU
  

• Render 函数的使用
  

npm run build 和 npm run dev

• npm run build
  

• npm run dev
  

认识 Vue CLI3

• vue-cli 3 与 2 版本有很大区别

  • vue-cli 3 是基于 webpack 4 打造，vue-cli 2 还是 webapck 3
  • vue-cli 3 的设计原则是“0 配置”，移除的配置文件根目录下的，build 和 config 等目录
  • vue-cli 3 提供了 vue ui 命令，提供了可视化配置，更加人性化
  • 移除了 static 文件夹，新增了 public 文件夹，并且 index.html 移动到 public 中

• Vue-cli3 初始化项目 vue create my-project
  

• Vue-cli3 目录详解
  

• Vue-cli3 的配置文件在哪里

  • 三种配置方法
    • vue UI 是一个本地服务器，运行 vue ui 即可
    • 隐藏起来的配置文件
    • 自定义配置：起别名
      
      

箭头函数

• 基本使用
  

• 参数
  

• 函数体
  

第六章 vue-router 详解

理解前端路由

• vue-router 是 Vue.js 官方的路由插件，它和 vue.js 是深度集成的，适合用于构建单页面应用

• 官网: https://router.vuejs.org/zh

• vue-router 是基于路由和组件的

  • 路由用于设定访问路径, 将路径和组件映射起来
  • 在 vue-router 的单页面应用中, 页面的路径的改变就是组件的切换

• 前端路由的核心：改变 URL，但是页面不进行整体的刷新

• 改变 URL，不刷新页面的方法

  • URL 的 hash

    • URL 的 hash 也就是锚点(#), 本质上是改变 window.location 的 href 属性
    • 我们可以通过直接赋值 location.hash 来改变 href, 但是页面不发生刷新
    • 

  • HTML5 的 history

    • pushState
      

    • replaceState
      

    • go
      
      

安装和使用 vue-router

• 安装 vue-router（vue2-cli 才安装，vue3-cli 自动生成）

  npm install vue-router --save
  

• 在模块化工程中使用它 (因为是一个插件, 所以可以通过 Vue.use() 来安装路由功能)- 第一步：导入路由对象，并且调用 Vue.use(VueRouter)

  • 第二步：创建路由实例，并且传入路由映射配置
  • 第三步：在 Vue 实例中挂载创建的路由实例
  • 

• 使用 vue-router 的步骤

  • 目标效果

    • 

  • 第一步: 创建路由组件
    

  • 第二步: 配置路由映射: 组件和路径映射关系
    

  • 第三步: 使用路由: 通过和

    • 控制路由跳转到哪个组件，默认渲染成标签
    • 占位，控制视图在哪里显示
      

设置默认路由

• 让路径默认跳转到首页
  

• 设置路由为 HTML5 的 history 模式
  默认路由是 url-hash 模式
  

设置 router-link 属性

• to：用于指定跳转的路径

• tag: tag 可以指定之后渲染成什么组件, 比如<li>、<a>

• replace: replace 不会留下 history 记录, 指定 replace 的情况下, 后退键返回不能返回到上一个页面中
  

• active-class: 当对应的路由精准匹配成功时, 会自动给当前元素设置一个 router-link-active 的 class
  

  • 可以直接用 router-link-active 修改 router-link 标签属性
    

  • 也可以用属性 active-class 将 router-link-active 修改为“active”，用 active 修改 router-link 标签属性
    

  • 还可以配置路由的 index.js 修改 router-link 标签属性（路由的相关配置都在 index.js 里）,
    
    
    

代码控制路由跳转

• Vue 内置路由对象 $router ，通过 this 调用 $router
  

动态路由

• 常规配置路由
  

• 动态路由
  

• 获取动态路由参数
  

路由懒加载

• 认识路由懒加载

  • 打包构建应用时，Javascript 包会变得非常大，影响页面加载
  • 如果一次从服务器全部请求下来这个页面, 需要花费一定的时间, 用户的电脑上出现短暂空白的情况
  • 路由懒加载的主要作用就是将路由对应的组件打包成一个个的 js 代码块
  • 只有在这个路由被访问到的时候, 才加载对应的组件
    

• 懒加载的方式

  • 结合 Vue 的异步组件和 Webpack 的代码分析

    const Home = resolve => {require.ensure(['../components/Home.vue'], ()=> { resolve(require('../components/Home.vue')) })};
    

  • AMD 写法

    const About = resolve => require(['../components/About.vue'], resolve);
    

  • ES6 写法

    const Home = ()=> import('../components/Home.vue')
    

重新打包即可实现懒加载

路由嵌套

• 实现效果
  

• 实现步骤

  • 新建子路由
    

  • 配置 index，映射主路径和子路径
    

  • 配置，控制组件渲染位置
    

• 嵌套路由设置默认路径
  

路由传递参数

• 准备工作

  • 新建组件
    

  • 配置index映射组件
    

  • 配置
    

• 传递参数方式

  • 方式一：parmas

    • 配置index，导入user组件，映射路由路径
      

    • 子组件
      

    • App主组件
      

  • 方式二：query

    • Url：协议：//主机：端口/路径？查询

      ​ scheme://host:port/path?query#fragment

• 通过代码获取参数
  
  
  
  

$route和$router区别

• $router为VueRouter实例，想要导航到不同URL，则使用$router.push方法
• $route为当前router跳转对象里面可以获取name、path、query、params等