vue复习2

79 阅读4分钟

表单数据处理

image.png

过滤器

image.png

过滤器基础使用

image.png

image.png

过滤器传参使用

image.png

多重过滤器使用

image.png

image.png

局部过滤

image.png

全局过滤

image.png

内置指令

基础指令

image.png

cookie 导入导出工具

image.png

image.png image.png

获取cookie

image.png

image.png

v-html

image.png

image.png

v-cloak

image.png image.png

v-once

image.png image.png

v-pre 不再解析插值语法,直接显示

image.png

自定义指令

image.png

自定义指令初级

image.png

自定义指令深入

image.png image.png image.png

定义全局指令

image.png

image.png

生命周期

生命函数示意图

image.png image.png image.png

image.png image.png

image.png

image.png

组件化

image.png image.png image.png

image.png

image.png

vuecomponent

image.png

image.png

内置关系

image.png

image.png

image.png

单文件组件

image.png

脚手架文件解析

使用不完整的vue模版解析工具,能很好的节省文件大小 image.png

main.js

查看webpack配置文件output.js,此文件默认是隐藏只读文件,不可修改,查看可在终端输入vue inspect > output.js image.png image.png output.js默认配置了main.js入口文件

image.png

如果想修改默认配置可使用vue.config.js,调整脚手架工作模式,最终和webpack已有配置相整合

image.png image.png

脚手架架构

image.png

关于ref 操作dom元素

image.png image.png

在标签上挂载ref属性

image.png

获取标签使用this.$refs.需要的ref属性值

image.png

this下的$refs

image.png

props 父传子操作

image.png

父组件传参

image.png

子组件简单接参,使用

image.png

子组件条件接参,使用

image.png

子组件完整条件接参,使用

image.png image.png

props接收的参数可以直接使用,但最好不要修改,容易产生奇怪的Bug

mixin 混入(多个文件共用一个配置)

image.png

新建一个大家都要用的混合js文件,文件里需暴露方法,使用export暴露

image.png

需要使用mixin公用文件的组件如何应用

image.png

当混入文件和组件内部js发生冲突,则data及方法冲突采用组件内部属性,钩子函数冲突则两端都接受

在main.js中设置全局混合

image.png

插件

image.png

自定义插件

新建一个插件js文件,我们可以在plugins.js文件中添加过滤器,自定义的全局指令,mixin混入的属性及方法等等插件,通过export default暴露,install写入安装

image.png 全局引入插件文件,在main.js文件中操作

image.png 使用插件里的方法,直接调用方法即可

image.png

scoped样式精简

image.png 使用scoped主要是为了防止不同组件相同class名的样式覆盖,如果使用了scoped该样式则只能作用于该组件内部 image.png

image.png 查看webpack版本 image.png 查看less-loader版本 image.png

使用nanoid插件自动生成id,先npm i nanoid

image.png

代码中使用nanoid

image.png

reduce统计

image.png

image.png

项目基础应用,通信

image.png

浏览器存储

image.png

localStorage(网页关闭,记录依然存在

添加存储,对象需特殊处理(JSON.stringify()

localStorage.setItem() image.png

读取存储,对象需特殊处理(JSON.parse()

localStorage.getItem() image.png

删除单个存储

localStorage.removeItem() image.png

清空存储

localStorage.clear() image.png

SessionStorage

localStorage.setItem() 增
localStorage.getItem() 获取
localStorage.removeItem() 删除单个
localStorage.clear() 全部删除

watch deep:true 深度监视 image.png

组件的自定义事件

image.png

子传父的多种传参方式

1、props接参形式,2、v-on绑定监听事件,this.$emit()触发事件

父组件 image.png 子组件 image.png 子组件 image.png

3、refs绑定监听,this.$emit调用触发

父组件 image.png image.png 子组件 image.png

image.png image.png

解绑组件绑定事件(this.$off(),this.$destroy())

image.png

image.png

任意组件间的通讯

image.png image.png 兄弟组件通信 image.png 注册$bus image.png 触发$bus image.png 使用$bus image.png 解绑$bus image.png

消息订阅与发布

image.png

安装 pubsub-js库

image.png

引入pubsub-js库

image.png

订阅

image.png

发布消息

image.png

销毁订阅发布

image.png

.hasOwnproperty判断是否拥有某个属性

image.png

this.$nextTick Dom执行完成后再执行this.$nextTick里的代码

image.png image.png

获取焦点

image.png

过度与动画

image.png

动画

reverse 反向平移

image.png

image.png image.png

过度

image.png

image.png

过度组 多动画互动

image.png

第三方动画库

image.png

安装 npm i animate.css --save

image.png

引入库

image.png image.png image.png image.png

总结

image.png

image.png

配置代理

image.png

image.png image.png

安装 axios npm i axios

image.png

引入axios

image.png

使用axios(建议使用)

image.png

跨域报错

image.png

如何解决

1、vue cli 借助vue.config.js文件配置devServer image.png

image.png

vue-resource(维护少)

安装

npm i vue-resource

image.png

main.js文件中引用vue-resource

image.png

使用vue-resource

image.png

slot插槽

image.png

image.png

image.png

image.png

默认插槽

image.png

image.png

具名插槽

image.png

template能省去结构,v-slot只能用于template身上,普通标签使用slot='插槽名称'

image.png

作用域插槽

传参

image.png

接参必须使用template结构,三种写法

image.png image.png

vuex

image.png

数据结构

image.png

工作原理

image.png

版本要求

image.png

安装vuex

image.png

src目录下创建store文件夹

image.png

简写store文件夹下index.js文件内容

image.png

main.js文件中引用vuex,以及store文件夹

image.png

vuex,store生效,实例对象上出现$store

image.png

问题

image.png

解决办法-在store文件里引入使用vue,和vuex

image.png

main.js中只引用store即可

image.png

实例对象$store包含的方法

image.png

vuex store的基础使用

1. 设置参数state

image.png

2. 调用dispatch,触发actions里的方法

this.$store.dispatch(actions方法名,参数值)

image.png

3. actions确认方法,触发mutations里方法

image.png

4. mutations调用方法修改state里参数

image.png

5. 获取存储参数渲染页面

this.$store.state.state里的参数名

image.png

细节应用

actions处理逻辑,可在此请求后端接口

image.png

直接触发mutations里方法修改state里的参数值(没啥逻辑时可使用)
this.$store.commit(mutations里方法名,参数值)

image.png 注意:

  1. 如果在actions里直接修改state里的数据,Devtools开发者工具会失效,Devtools开发者工具只与mutations交互
  2. 在actions里写逻辑能提高代码的复用性

vuex store getters的使用

image.png

vuex关键周边

mapState

mapState引入

image.png

导入展开State里的值

image.png

mapGetters

mapGetters引入

image.png

导入展开getters里的值

image.png

mapMutations

mapMutations引入

image.png

导入展开Mutations里的方法

image.png

image.png 总结

image.png

image.png

image.png

路由

图示

image.png

image.png

image.png

1、引入vue router

image.png

2、引入router/index.js文件

image.png

3、调用路由

image.png

image.png

4、多级路由

image.png

5、路由传参 及获取参数 query

image.png image.png

image.png image.png

6、命名路由

image.png image.png image.png image.png

7、路由传参- params

image.png

image.png

image.png

8、路由传参- props配置

image.png

image.png

9、路由替换当前历史记录-replace

image.png

image.png

10、keep-alive

image.png

11、全局路由守卫

image.png image.png

12、路由模式

image.png image.png 后端处理可使用插件或者nginx

image.png

image.png 小型服务部署使用express

image.png

image.png

按需引入elementui

image.png image.png

image.png