记录一下刚接触vue时认为比较重要的知识点

dr努力再努力

已于 2024-02-03 22:38:31 修改

阅读量1.8k

点赞数 26

文章标签： vue.js 前端 javascript

于 2024-01-28 21:30:08 首次发布

本文链接：https://blog.youkuaiyun.com/qq_51976882/article/details/135900931

版权

VUEX:Vuex详解，一文彻底搞懂Vuex-优快云博客

响应式 API 做简单状态管理：状态管理 | Vue.js

计算属性的应用场景;

当一个数据受多个数据影响时，可以使用computed

1.本组件计算

2.计算props的值

3.计算vuex的state或者getters值的变化

this.emit()触发父组件给子组件绑定的自定义事件

外部引入文件

引入js文件：在vue组件的script部分顶部通过improt/export进行引入（局部），全局引入同理在main.js中进行引入。import '@/style/reset.css'
引入css文件：全局：通过improt 'path'在main.js中引入；局部：通过@improt 'path'；在style中引入，分号一定要写。 @import '../../assets/iconfont/iconfont.css';这个分号一定要写，要不会报错
1. 注意：使用@import引入样式文件，就算加scoped，其它没有引入的模块还是可以访问到你的样式，如果某个组件的类名一致，则就会被污染到。如果不想被污染，修改引入方式：
引入插件：通过import引入，再通过vue.use()进行全局挂载，这是较为普遍的方式；
1. 还有一种方式是原型链挂，如：既然$video已经挂载到vue原型链上，

那么在使用$video时，必须表明$video的对象vue,初始化时就需要使用this.$video.

注：在main,js中放在new vue中初始化的一般是像router这样的配置文件

axios的使用：

方法：get（一般是用来获取数据）、post(一般用于表单提交和文件上传，用于提交数据）
除了请求拦截，非必要不创建axios配置文件
公式：axios({key:value}).then().catch()
跨域问题要在vue.config.js文件中进行配置代理

VUEX:Vuex详解，一文彻底搞懂Vuex-优快云博客

不是中大型项目不推荐使用vuex，在小型活逻辑较简单的项目中可以使用

响应式 API 做简单状态管理：状态管理 | Vue.js

计算属性的应用场景;

当一个数据受多个数据影响时，可以使用computed

1.本组件计算

2.计算props的值

3.计算vuex的state或者getters值的变化

vuex中不同的映射函数需要写在不同的属性方法中

通过prop父传子参数的方式可以控制相同组件在不同页面的展示状态;即在父组件中给子组件传递bollean值，在子组件中用prop接受和使用即可

自定义事件默认不会被触发，需要通过this.$emit触发

计算属性的书写方式与methods相同

每次为vuex创建一个vuex模块的时候都要为该模块开启空间命名，创建的vuex模块最后会引入到store.js中的modules进行统一管理

mapState，mapGetters映射到computed中；mapMutations映射到methods中

vue路由跳转，如果再配置路由信息的时候将某组件配置成当前页的子路由，则在跳转的时候之后再当前页面进行跳转不会跳转到外页

Vue.nextTick

在下次 DOM 更新循环结束之后执行延迟回调

API — Vue.js

路由组件可以传递props

components放的是公共组件或路由组件

view或pages放的是路由组件

axios二次封装：

引入axios
创建实例对象，在实例对象中配置请求信息如请求头，公共头，超时时间等
配置请求拦截和响应拦截
对外暴露

nprogress插件：实现发送请求时头部有个进度条，请求发送完成就会自动消失

axios是依赖不是插件，不需要Vue.use()，它需要做的是将它的实例对象挂载到vue上身不是它自己

change事件：监听文本输入框值的变化

app根组件是最先执行的，放在app组件中执行的方法或发送的请求全局只会执行一次

this代表vue的实例对象或者说是组件的实例对象，它只在组件中才有效

mock.js:一个插件，会生成随机数据，但不会真的向后台发送请求，就是前端自己写请求回来的数据

webspack默认对外暴露的有图片和JSON数据格式

updata生命周期函数：

在每次Dom节点重新更新渲染完成之后进行调用

重点：想让异步函数想同步函数一样安指定顺序执行的方法有如下几种：

通过计时器
通过异步修饰符async和await
通过updata生命周期函数
通过组件API &nextTick() 和全局API Vue.nextTick()

补充：nextTick的用法介绍：

定义：是在下一次dom更新（指的是请求的数据已经返回得到了，for循环已经遍历完成，页面节点已经渲染完成了）循环结束(这里指的就是v-for指令，因为for循环也是需要时间的)之后执行的延时回调
用法：在修改完数据之后会立即使用这个方法，更新dom
总结：它是个延时回调，就是在dom结构已经搭建更新完毕之后再调用

组件间通信的方法：