首页  思维导图  详情

Vue项目实战

2024-02-19 15:37:51   2  举报





AI智能生成

为你推荐

查看更多



vue

在Vue项目实战中，我们通常会经历从项目初始化到构建完成各个阶段。首先，使用Vue CLI创建项目，进行目录结构和基本配置的设置。接着，应用Vue Router进行路由管理，实现单页面应用的跳转和页面切换。同时，使用Axios或其他HTTP库进行前后端数据交互。为了优化性能，我们可能需要引入Vuex进行状态管理，并通过 Vue DevTools 进行调试。最后，使用ESLint和Prettier等工具进行代码质量管理和代码格式化。整个项目过程需要掌握Vue的基础知识，如模板语法、组件通信、生命周期等，并逐步涉及到Vue的高级特性，如自定义指令、插件开发等。

项目实战

Vue

Vue项目实战

思维导图

作者其他创作

大纲/内容

1. 指令综合案例

vue-resouce

axios

ajax

本地存储，存储在客户端，包括localStorage和sessionStorage

1. webstorage

localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。

2. localStorage

以“key”为名称存储一个值“value”

获取名称为“key”的值

localStorage.getItem("key");

删除名称为“key”的信息

localStorage.removeItem("key");

清空localStorage中所有信息

localStorage.clear();

3. 常用API

本地化

2. 数据持久化

零、开篇引导

M是指业务模型，V是指用户界面，C则是控制器

分支主题

图示

主要用于中大型项目的分层开发

应用场景

Model和View是完全隔离的，由C作为中间人来负责二者的交互

同时三者是完全独立分开的

这样可以保证M和V的可测试性和复用性，但是一般由于C都是为特别的应用场景下的M和V做中介者，所以很难复用。

运作流程

模型(model)－视图(view)－控制器(controller)

1. 概念

耦合性低

重用性高

部署快，生命周期成本低

可维护性高

2. 好处

不适合小型，中等规模的应用程序

视图与控制器间的过于紧密的连接并且降低了视图对模型数据的访问

3. 存在的问题

1. MVC

Model --->每个页面的单独数据View --->每个页面中的HTML结构VM ---> 调度者

Model---View---VM(ViewModel)

数据驱动

VM提供数据的双向绑定

2. MVVM

MVC和MVVM的区别？

一、概念补充

Vue.js devtools

0. 安装Vue调试工具

从内到外

阻止冒泡

.stop

<a href="http://www.jd.com" @click.prevent="buy">我想要买东西</a>

阻止默认事件

.prevent

从外到内

添加事件侦听器时使用事件捕获模式

.capture

只当事件在该元素本身（比如不是子元素）触发时触发回调

.self

事件只触发一次

.once

.stop 是真正意义上的阻止冒泡；

.self 只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡的行为。

.stop 和 .self 的区别

1. 事件修饰符

1. 直接传递一个数组，注意：这里的 class 需要使用 v-bind 做数据绑定;

2. 在数组中使用表达式;

3. 在数组中使用对象来代替三元表达式，提高代码的可读性;

4. 在为class使用v-bind绑定对象的时候，对象的属性是类名，由于对象的属性可带引号，也可不带引号，所以这里我没写引号；属性的值是一个标识符

代码演示

class

1. 直接在元素上通过 `:style` 的形式，书写样式对象

2. 将样式对象，定义到 `data` 中，并直接引用到 `:style` 中

3. 在 `:style` 中通过数组，引用多个 `data` 上的样式对象

style

2. class和style

in 后面我们放过普通数组，对象数组，对象，还可以放数字;

注意：如果使用 v-for 迭代数字的话，前面的 count 值从 1 开始

1. 补充知识点

伪数组转成真数组才能遍历

Array.prototype.slice.call(伪数组).forEach(()=>{});

forEach

用于检测数组中的元素是否满足指定条件

验证数组中是否有字段"itlike.com"

举例

some

用于把Array的某些元素过滤掉，然后返回剩下的元素

filter

2. ES6数组方法的使用

String.prototype.includes('')

3. ES6中字符串方法

3. v-for

Vue.js 允许我们自定义过滤器，可被用作一些常见的文本格式化，比如日期，钱等。

过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由 | 指示分割；

概念

全局过滤器

私有过滤器

用法

当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！

注意

4. 过滤器

自定义全局指令

自定义局部指令

5. 自定义指令

从Vue实例创建、运行、到销毁期间，会伴随着触发各种各样的事件，这些事件，统称为生命周期。

生命周期钩子 = 生命周期函数 = 生命周期事件

1. 什么是生命周期？

实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性

beforeCreate

实例已经在内存中创建完毕，此时 data 和 methods 已经创建完毕，此时还没有开始编译模板

created

此时已经完成了模板的编译，但是还没有挂载到页面中

beforeMount

此时已经将编译好的模板，挂载到了页面指定的容器中显示

mounted

创建期间的生命周期函数

状态更新之前执行此函数，此时 data 中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始重新渲染DOM节点

beforeUpdate

实例更新完毕之后调用此函数，此时 data 中的状态值和界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！

updated

运行期间的生命周期函数

实例被销毁之前调用，在该函数中，实例仍然完全可用。

beforeDestroy

Vue 实例销毁后调用，调用该函数后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

destroyed

销毁期间的生命周期函数

2. 生命周期中事件划分？

6.Vue中组件的生命周期

超链接

https://cn.vuejs.org/v2/guide/transitions.html

网址

动画能够提高用户的体验，帮助用户更好的理解页面中的功能；

1. 使用动画的意义？

v-enter 【这是一个时间点】是进入之前，元素的起始状态，此时还没有开始进入;v-leave-to 【这是一个时间点】是动画离开之后，离开的终止状态，此时，元素动画已经结束了

v-enter-active 【入场动画的时间段】v-leave-active 【离场动画的时间段】

2. transition

3. animate.css在vue中的使用

4. 使用动画钩子函数

需求：点击按钮，让 h3 显示，再点击，让 h3 隐藏

使用 transition 元素，把需要被动画控制的元素，包裹起来

自定义两组样式，来控制 transition 内部的元素实现动画

操作1

需求: name属性使用

操作2

需求: 动画实现列表插入和删除

1. 在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，不能使用 transition 包裹，需要使用 transitionGroup;

2. 如果要为 v-for 循环创建的元素设置动画，必须为每一个元素设置 :key 属性;

3. 给 transition-group 添加 appear 属性，实现页面刚展示出来时候，入场时候的效果;

4. 通过为 transition-group 元素，设置 tag 属性，指定 transition-group 渲染为指定的元素，如果不指定 tag 属性，默认，渲染为 span 标签

技术点

操作3

结合animate.css使用

操作4

5. 案例实操

7. Vue中使用动画

8. is属性的使用

二、新知识补充-1

vue-cli是vue官方提供的脚手架工具，默认搭建好了一个项目的基本架子，我们在其基础上进行相应修改即可。

下载模板项目

https://github.com/vuejs/vue-cli

1. vue-cli是什么？

npm install -g vue-clivue init webpack jh_democd jh_demonpm installnpm run dev

访问: http://localhost:8080/

2. 创建Vue项目

3. 解读项目的目录结构

1. 主要是对代码的书写格式进行检查，不影响项目的运行；2. 其内部定义了很多规则，一旦项目中的某些代码违背了这些规则，ESLint就会做出非常有用的提示；3. 官网：http://eslint.org/

'indent': 'off'

比如：去除空格检查

.eslintrc.js

可以添加忽略哪些后缀的文件

.eslintignore

如果想去除某个检查

4. 代码规范检查工具（ESLint）

1. Vue-Cli

https://mint-ui.github.io/#!/zh-cn

地址

饿了么开源的基于vue的移动端UI组件库

Mint UI

http://element-cn.eleme.io/#/zh-CN

饿了么开源的基于vue的PC端UI组件库

Elment

1. Vue常用的UI组件库

npm install mint-ui -S

1. 安装

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

npm install babel-plugin-component -D

安装

修改.babelrc

2. 按需引入

标签组件

非标签组件

3. Mint UI的分类

1. 引入要使用的组件

2. 全局注册组件

<mt-button type="danger">点我呀</mt-button>

3. 子组件中使用

4. 使用Mint UI

2. Mint UI

2. UI组件库-mint-ui

Vuex是一个专为Vue.js应用程序开发的状态管理模式

官方解释

当项目比较庞大的时候，每个组件的状态比较多，为了方便管理，需要把组件中的状态抽取出来，放入Vuex中进行统一管理。

1. 简介

https://github.com/vuejs/vuex

https://vuex.vuejs.org/zh/

2. 在线文档

对项目中多个组件的共享状态进行集中式的管理(读/写)

3. 整体作用

1. 什么是Vuex?

1. 多个视图依赖于同一个状态

2. 多个不同的视图行为需要变更同一状态

将所有数据以及操作数据的方法都定义在父组件

将数据以及操作数据的方法传递给需要的各个子组件

存在问题:

方案一

消耗性能

容易发生内存泄露

方案二

3. 以往解决方案

4. vuex就是解决此问题的终极方案

解决多组件共享状态问题

state，驱动应用的数据源；

view，以声明方式将 state 映射到视图；

actions，响应在 view 上的用户输入导致的状态变化。

2. 为什么要使用VueX?

Backend API：后端接口；Vue Components: 界面组件；

画图分析结构

3. Vuex状态管理

我们需要把任何一个组件中需要抽取出来的变量放入到state中去

唯一的数据源

只要把store注册到app.js中，所有组件都可以使用其中的状态

举例：

单一的状态树

State

通过Getters可以派生出一些新的状态

Getters

更改Vuex的store中的状态的唯一方法时提交mutation

const store = new Vuex.Store({ state: { total: 1 }， mutations: { add (state){ // 更改状态 state.total++; } }});

调用： store.commit('add')；

Mutations

Action提交的是mutation，而不是直接变更状态

const store = new Vuex.Store({ state: { total: 0 }， mutations: { add (state){ // 更改状态 state.total++; } }， actions: { add(context){ context.commit('add'); } }});

Actions

面对复杂的应用程序，当管理的状态比较多时，我们需要将Vuex的store对象分割成多个模块(modules)

Modules

4. Vuex的核心概念？

手工图示

todoList

5. Vuex快速入门

3. Vuex

三、新知识补充-2

Vue项目实战