Vue项目实战
2023-03-23 15:45:10
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项目实战
0 条评论
回复 删除
下一页
职业：架构师、项目管理、产品管理
作者其他创作：