Vue2.0入门分析

微微猫
283 阅读4分钟

注意： 不包含Vuex，其他都包含

-- Vue前置知识

Es6模块化

默认导出

image.png

let n1 = 10
let n2 = 20
function show() {}

export default {
  n1,
  show
}

// export default {
//   n2
// }

默认导入

import m1 from './01.默认导出.js'

console.log(m1)

image.png

image.png

image.png

image.png

Promise

image.png

image.png

image.png

image.png

async/await

image.png

EventLoop

image.png

宏任务和微任务

image.png

总结

image.png

- yarn 的安装

image.png

知识点自测

image.png

-- Webpack

为什么学习webpack

image.png

webpack概述

image.png

环境准备

image.png

webpack的基础使用

image.png

webpack再次打包

image.png

webpack配置入口与出口

image.png

yarn build 执行过程分析

image.png

隔行变色案例

image.png

html-webpack-plugin插件

image.png

webpack默认只能处理js文件

image.png

css-loader处理css文件，style-loader将css代码插入<style>中

image.png

less-loader识别less文件，less模块包转换less文件

image.png

webpack处理图片

image.png

图片转base64优缺点

image.png

webpack处理字体图标

image.png

webpack-Es6转Es5语法降级

image.png

webpack开发服务器的优势

image.png

webpack-dev-server开发服务器

image.png

webpack配置服务器端口号

image.png

今日总结

image.png

-- Vue

为什么学习Vue

image.png

Vue框架的概念

image.png

Vue的学习方式

image.png

- Vue-cli脚手架的介绍

image.png

全局安装vue-cli脚手架

image.png

使用vue-cli创建项目和运行项目

image.png

vue-cli项目文件夹介绍

image.png

项目入口和文件夹的关系

image.png

在webpack.config.js中配置端口

image.png

lintOnSave关闭Eslint检查

image.png

Vue单文件的好处

image.png

清理Vue项目文件-并初始

image.png

- Vue基础指令

{{ }} 插值表达式

image.png

MVVM 设计模式

image.png

v-bind 属性绑定

image.png

v-on事件绑定

image.png

v-on事件对象 $event

image.png

v-on 事件修饰符

image.png

v-on 按键修饰符

image.png

v-model基础用法

image.png

v-model更多用法

image.png

v-model 修饰符

image.png

v-str 和 v-html

image.png

v-show 和 v-if

image.png

v-for 遍历

image.png

- Vue计算属性.侦听器.过滤器

image.png

v-for 数组变更方法和非变更方法

image.png

v-for 就地更新DOM结构

image.png

虚拟DOM是如何更新真实DOM的

image.png

- diff算法

diff算法比较新旧DOM

image.png

diff算法是如何对比的

无key更新，性能不高

image.png

有key值为index，就地更新

image.png

有key值为ID， 比较之后更新

image.png

image.png

- v-bind:class 和v-bind:style

v-bind:class 动态绑定类样式

image.png

v-bind:style 动态给属性设置样式

image.png

增删案例

image.png

- filter过滤器

filter 过滤器的基础使用

image.png

filter 过滤器传参

image.png

- computed计算属性

computed 计算属性的基本使用

image.png

computed和methods的区别与优势

image.png

案例 - 品牌统计

image.png

computed 完整写法

image.png

computed 全选和反选案例

image.png

- watch侦听器

wacth侦听器的基本使用

image.png

deep:true深度监听，immediate:true立即执行

image.png

案例-监听数据本地化储存

image.png

image.png

- Vue组件

image.png

component组件的基本使用

image.png

全局组件和局部组件

image.png

image.png

组件的概念

image.png

style上的scoped的具体作用

image.png

- 组件通信

父向子传值

image.png

循环创建多个子组件

image.png

单项数据流的弊端

image.png

子向父传值 - 通过自定义事件触发

image.png

image.png

EventBus事件中心

   原理：事件中心本质就是一个空的vue对象， 
        A组件 - 事件发布方：通过EventBus.$emit发布自定义事件，给回事件中心
        B组件 - 事件接收方：通过EventBus.$on接收自定义事件，来进行最终处理。

image.png

vue组件 - todo案例

image.png

image.png

image.png

- 生命周期

image.png

生命周期的概念

image.png

生命周期的各个阶段

image.png

created 初始化阶段

image.png

mounted 完成DOM挂载完成

image.png

update DOM更新完

image.png

destroyed 销毁阶段

image.png

- axios 数据请求库

image.png

最基础的GET 请求

image.png

GET携带参数 - params查询数据

在params中传递get查询参数， bookname是接口规定的，将自己双向数据绑定的书名传递，并查看查询结果 image.png

POST添加数据 - data中传递数据

POST与GET不同， GET是在params携带数据， 而POST是在data中，是一个请求对象 image.png

axios.defaults.baseURL请求根路径

image.png

$refs

1:在标签上使用 ref关键字指向='变量名' 2：在组件内使用this.$refs.变量名，就能获取该元素实例 image.png

$nextTick 会在DOM更新后执行

image.png

$nextTick实际使用场景

因为this.$nextTick返回的是promise对象，自然可以使用async方法来修饰 image.png

组件name的实际价值

image.png

- 组件化案例 - 购物车

项目初始化

模块化项目，下载第三方所需包，分析页面，抽离所需单独的组件，再导入组装成一个完整页面 image.png

自定义头部

image.png

请求首页数据

image.png

渲染商品列表数据

image.png

点击复选框被选中

image.png

商品数量修改功能

image.png

全选和复选功能

image.png

商品总数量

image.png

商品总价格

image.png

image.png

- 组件进阶

component 通过 :is动态切换组件

image.png

keep-alive 组件缓存

image.png

activated激活，deactived失去激活

image.png

-- slot 插槽

image.png

默认插槽

image.png

具名插槽

image.png

作用域插槽

image.png

表格案例，遍历数组中的对象

image.png

- 自定义指令 directives

image.png

自定义指令的update更新数据方法

image.png

tab案例

项目初始化

image.png

渲染tabbar页面样式

image.png

点击tab切换高亮效果

image.png

点击tab显示对应页面内容

image.png

渲染goodslist商品列表页面

mytable在goodslist页面导入并挂载，父向子传值，实现tr的表格行循环，然后使用作用域插槽向goodslist的td渲染对应的td单元格 image.png

使用作用域插槽提高组件复用性

在上一张《渲染goodslist商品列表页面》，我已经讲过作用域插槽了，具体分析请看上一张 image.png

二次循环数组展示tag标签

image.png

插槽事件之-删除一条数据

image.png

添加tag标签

image.png

- 总结

image.png

-- Vue Router 路由

image.png

什么是路由

image.png

什么是单页面应用

image.png

Vue-Router模块包介绍

image.png

组件分为2类：复用组件和页面组件

image.png

路由的基础使用以及配置规则

image.png

router-link的好处

image.png

声明式导航 - 跳转传参的两种方式

image.png

redirect 页面重定向

image.png

Not Found 404页面设置

image.png

mode：history 路由模式

image.png

this.$router.push 编程式导航

image.png

编程式导航 - 跳转传参

image.png

子路由 children

image.png

router-link 激活的2个类名区别

image.png

前置路由守卫 router.beforeEach

image.png

-- Vant 组件库

image.png

导入所有组件

image.png

按需导入组件

image.png

自动按需引入

image.png

Dialog 弹出框

image.png

form表单的基础使用

image.png

image.png

-- 网易云案例

- 项目初始化

image.png

该项目接口涉及跨域

image.png

测试网易云接口数据

克隆项目并安装依赖，启动测试数据的返回 image.png

开始 - 项目初始化

image.png

分析并创建对应的页面组件

image.png

配置路由，挂载路由，并设置router-view显示地方

image.png

实现点击tab切换路由页面功能

image.png

navbar 头部标题

image.png

动态设置页面标题

image.png

统一管理和设置axios数据请求，将请求逻辑与视图分离

image.png

首页推荐歌单的页面渲染

image.png

渲染最新音乐列表数据

image.png

完成搜索页面的开发

image.png

搜索结果页面的开发 - 和搜索页面的互斥显示

image.png

实现搜索功能

image.png

下拉加载更多数据

image.png

解决搜索结果页面的3个小bug

1: 如果搜索的歌曲不存在，会报错的问题
2：如果只有一页数据，下拉就不会显示加载更多，只会显示加载已完毕
3：如果有多页搜索结果，下拉就不会只显示1页，则会下拉就加载更多数据

image.png

输入框数据请求防抖

image.png

解决offset页码值累加的问题

image.png

解决nav和router-view的2个小问题

image.png

封装cell列表，达到复用

image.png

点击按钮，跳转播放页面，实现歌曲播放功能

image.png

解决ipad页面rem值自动转换的问题

image.png

avatar
文章
阅读
粉丝