Vue.js核心技术解析与uni-app跨平台实战开发电子书

作者简介

内容简介

前言

目 录

第1章 Vue.js基础入门

1.1 什么是Vue.js

1.1.1 当前流行的前端框架

1.1.2 为什么要学习Vue.js

1.1.3 Vue.js核心理念

1.1.4 框架和库的区别

1.2 MVVM前端视图层开发理念

1.3 创建Vue实例对象，详解MVVM

1.4 详解插值表达式

1.5 Vue基础指令

1.5.1 v-cloak指令

1.5.2 v-text指令

1.5.3 v-html指令

1.5.4 v-bind指令

1.5.5 v-on指令

1.6 事件修饰符

1.6.1 鼠标按键修饰

1.6.2 系统修饰符

1.6.3 事件修饰符

1.7 双向数据绑定

1.7.1 v-model修饰符

1.7.2 使用v-model实现计算器案例

1.8 v-for指令

1.8.1 遍历普通数组

1.8.2 遍历对象数组

1.8.3 遍历对象

1.8.4 遍历数字

1.9 学生管理案例

1.9.1 渲染学生列表

1.9.2 新增学生

1.9.3 删除学生

1.9.4 搜索学生

第2章 Vue.js绑定样式及案例

2.1 class类名绑定

2.1.1 对象控制绑定样式

2.1.2 数组控制绑定样式

2.2 style行内样式绑定

2.2.1 对象控制绑定行内样式

2.2.2 数组控制绑定行内样式

2.3 Vue绑定样式案例（标题排他）

2.4 控制元素显示隐藏

2.4.1 v-if和v-show指令

2.4.2 v-if实现选项卡案例

2.5 简单版购物车实例

2.5.1 购物车实例简介

2.5.2 静态页面布局

2.5.3 渲染购物车列表

2.5.4 修改商品选中状态

2.5.5 记录选中商品的总数量和总价格

2.5.6 全选状态

1．状态1：选中所有商品

2．状态2：选中底部的“全选”复选框

2.5.7 商品数量增加或减少

第3章 Vue.js生命周期函数

3.1 创建期间生命周期函数

3.2 运行期间生命周期函数

3.3 销毁期间生命周期函数

3.4 扩 展

第4章 Vue.js动画

4.1 Vue单组动画

1．Enter入场动画

2．Leave离场动画

4.2 Vue定义多组动画

4.3 使用animate动画库

4.4 transition-group列表动画

第5章 Vue.js组件

5.1 创建全局组件

5.1.1 组件创建方式一

5.1.2 组件创建方式二

5.1.3 组件创建方式三

5.2 创建私有组件

5.2.1 组件中的data和methods

5.2.2 组件选项卡切换案例

1．双组件切换

2．多组件切换

5.3 动画组件

5.4 组件传值

5.4.1 父组件向子组件传值

5.4.2 父组件向子组件传递方法

5.4.3 子组件向父组件传值

5.5 Vue获取DOM元素的方法（ref）

5.5.1 ref获取普通DOM元素

5.5.2 ref获取组件元素

第6章 Vue.js路由

6.1 什么是路由

6.1.1 安装路由

6.1.2 使用路由

6.2 路由控制组件切换

6.3 路由重定向以及动画路由

1．路由重定向

2．动画路由

6.4 路由传参

6.4.1 传参方式一

6.4.2 传参方式二

6.5 嵌套路由

6.6 路由布局

第7章 Vue.js高级进阶

7.1 安装vue-cli

7.1.1 vue-cli创建项目

7.1.2 运行脚手架项目

7.2 vue-cli目录结构

7.3 vue-cli运行机制

1．在终端中输入“npm run dev”

2．打开main.js

3．打开App.vue组件

4．打开router文件夹下的index.js

7.4 vue-cli选项卡案例

7.5 过滤器

7.5.1 私有过滤器

7.5.2 全局过滤器

7.6 Vue计算属性

7.7 watch侦听属性

7.8 slot插槽

1．HelloWorld组件视图层

2．myslot组件视图层

7.9 链式路由跳转

7.10 路由守卫

7.10.1 全局路由守卫

7.10.2 组件内路由守卫

7.10.3 离开组件时守卫

第8章 element-ui/mint-ui组件库

8.1 element-ui使用步骤

1．安装element-ui

2．element-ui使用方式

3．配置.babelrc

4．全局使用element-ui

8.2 mint-ui的使用

1．安装mint-ui

2．mint-ui使用方式

3．全局使用mint-ui

4．在HelloWorld组件中使用mint-ui按钮

第9章 axios发送HTTP请求

9.1 安装axios

9.1.1 组件中使用axios

9.1.2 配置全局域名

9.1.3 代码分离

9.2 axios传递参数

9.3 axios原理之promise

9.3.1 什么是promise

9.3.2 为什么要用promise

9.3.3 promise基本使用

9.3.4 promise的API

1．Promise (excutor) {}

2．Promise.prototype.then()方法：(onResolved, onRejected) => {}

3．Promise.prototype.catch()方法：(onRejected) => {}

4．Promise.resolve()方法：(value) => {}

5．Promise.reject()方法：(reason) => {}

6．Promise.all()方法：(promises) => {}

7．Promise.race()方法：(promises) => {}

9.3.5 async与await

1．async函数

2．await表达式

第10章 Vuex状态管理

10.1 Vuex基础应用

10.2 getters的使用

1．Vuex代码

2．HelloWorld组件代码

10.3 mutations的使用

1．Vuex代码

2．HelloWorld组件代码

1．HelloWorld组件代码

2．Vuex代码

10.4 actions的使用

10.5 Vuex代码分离

10.6 辅助函数

10.6.1 mapState辅助函数

10.6.2 mapGetters辅助函数

10.6.3 mapMutations辅助函数

10.6.4 mapActions辅助函数

10.7 Vuex实例之登录退出

10.7.1 vue-cli创建项目站点

10.7.2 Vuex修改登录状态

第11章 企业项目实战

11.1 vue-cli创建项目

11.2 首页开发

11.2.1 布局首页静态页面

11.2.2 使用axios获取轮播图

11.2.3 首页广告版块数据渲染

11.2.4 首页商家推荐版块数据渲染

11.2.5 首页其他版块数据渲染

11.3 网页底部信息和产品列表页面开发

11.3.1 产品列表静态页面布局

11.3.2 渲染全部产品页面数据

11.3.3 产品价格排序功能

11.3.4 产品价格范围筛选功能

11.4 element-ui实现产品分页

11.5 产品详情页面开发

第12章 Vue3.X新特性解析

12.1 Vue3.0新特性

12.2 什么是Composition API

12.2.1 setup函数的特点

12.2.2 定义响应式数据

12.3 reactive函数

12.4 封装功能模块，增加代码复用

12.5 Vue3生命周期

12.6 computed的使用

12.7 watch监听的使用

12.8 依赖注入

12.9 Refs模板

12.10 readonly()函数的使用

12.11 watchEffect()函数的使用

12.12 响应式系统工具集的使用

12.12.1 unref()

12.12.2 toRef()

12.12.3 isRef()

12.12.4 isProxy()

12.12.5 isReactive()

12.12.6 isReadonly()

第13章 uni-app核心基础

13.1 uni-app概述

1．什么是uni-app

2．为什么要学习uni-app

3．怎样学习uni-app

13.1.1 创建uni-app项目

1．选择软件

2．创建uni-app项目

13.1.2 uni-app目录结构

13.1.3 uni-app运行机制

1．uni-app页面结构

2．配置样式

13.2 常用组件

13.2.1 view组件

13.2.2 text组件

13.2.3 image组件

13.3 常用特效

13.3.1 tabBar导航使用

13.3.2 swiper轮播图使用

13.4 uni-app属性绑定和事件绑定

13.4.1 属性绑定

13.4.2 事件绑定

13.5 v-for渲染数据

13.6 uni-app生命周期

13.6.1 应用生命周期

13.6.2 页面生命周期

13.6.3 下拉刷新生命周期函数

13.6.4 上拉加载生命周期函数

13.7 uni-app发送HTTP请求

13.8 跨端兼容

13.8.1 控制页面元素

13.8.2 控制CSS样式

13.8.3 控制JS

13.9 页面跳转

13.9.1 网址跳转

13.9.2 事件跳转

13.9.3 传递参数

第14章 uni-app企业项目实战

14.1 鲁嗑瓜子首页开发

14.1.1 布局首页静态页

14.1.2 调用数据接口渲染轮播图

14.1.3 首页广告版块数据渲染

14.1.4 首页商家推荐版块数据渲染

14.1.5 首页其他版块数据渲染

14.2 产品列表页开发

14.2.1 布局产品列表静态页面

14.2.2 渲染产品列表数据

14.2.3 价格排序功能

14.2.4 价格范围筛选功能

14.3 产品详情页开发

14.4 App打包

14.4.1 H5发布

14.4.2 App发布