Vue开发:基础内容

Vue 需要掌握的基础内容

数据代理

事件处理

键盘事件

特殊系统修饰键:

  • tab:需要配合 keydown 使用

  • ctrl、alt、shift、meta

    • 配合 keyup:需要按下该系统修饰键,再按下其他键,再松开其他键才会触发
    • 配合 keydown:正常触发

需求

  • 按下 ctrl + y 时触发事件

  • 可以使用 @keyup.ctrl.y = "show" 来触发

计算属性

computed 与 methods 的区别:

  • 前者带有缓存,一次执行其余地方执行时可以直接读取缓存;后者不带有缓存,每一次调用时都会执行

简写:

  • 只考虑读取,不考虑修改的时候可以使用简写形式:

1
2
3
4
5
6
7
8
9
10
11
12
13
computed: {
fullName: {
get() {
return "wrysmile";
}
}
}
// 可简写为:
computed: {
fullName() {
return "wrysmile";
}
}

监视属性

作用:可以监视某属性是否发生变化

监视属性可以直接在 Vue 中配置,也可以在 vm 实例中进行配置,如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Vue 中配置
new Vue({
watch: {
info: {
immediate: false, // 是否立即触发
deep: true, // 监视多级结构中所有属性是否发生变化
handler(newValue, oldValue) { // 回调函数
...代码片段
}
}
}
})
// vm 中配置
vm.$watch('info', {
immediate: false, // 是否立即触发
handler(newValue, oldValue) { // 回调函数
...代码片段
}
})

当无需配置 immediatedeep 属性时可以使用简写形式,如下:

1
2
3
4
5
6
7
8
9
10
11
12
// Vue 中配置
new Vue({
watch: {
info(newValue, oldValue) {
...代码片段
}
}
})
// vm 中配置
vm.$watch('info', (newValue, oldValue) {
...代码片段
})

组件

1.组件间通信

父组件 ——> 子组件

子组件 ——> 父组件

  • 基础:父组件定义一个方法并传给子组件,当子组件需要传值时,可以在事件中调用通过 prop 属性传入的方法来形成通信

  • 进阶1:通过 v-on:xxx="update" 自定义事件来给子组件绑定个事件,当子组件需要传值时,使用 this.$emit('xxx', params) 来将参数弹射给父组件

  • 进阶2:通过 ref='a' 传给子组件,父组件在挂载时调用 this.$refs.a.on('xxx', [methods中的方法]),就会监听到子组件中通过 this.$emit('xxx', params) 弹射的内容

路由

1.携带参数跳转路由

点击这里

2.query和params的区别

点击这里

3.使用watch监听参数变化

点击这里

开发技巧

1.生成唯一ID

可以使用 uuidnanoid 等库来生成唯一ID值

使用:

  • npm i nanoid 安装依赖包

  • nanoid 使用了分别暴露的方法,所以需要使用 import {nanoid} from 'nanoid'

  • 在需要使用的地方直接调用函数即可 nanoid()

2.根据条件遍历数组对象,返回满足条件的长度

方法1:使用 for 循环,控制变量 ++

方法2:使用数组的 reduce() 方法

  • 第一个参数为函数,接收之前的值和当前的值,最终该方法返回最后一次的值

  • 第二个参数即为计数器

3.消息订阅与发布

可以使用第三方库来实现,如 pubsub-js

4.强制更新模板

当 Vue 监测一个对象的时候,如果对象中的某一属性发生变化,Vue可能监测不到其变化,因为对象的引用地址并没有变化

因此,这个时候我们就需要手动强制更新模板来重新渲染

方法可参考 这里

5.引入的SVG图像无法修改样式

有时我们需要引入一些 SVG 图标,但是通过该方法引入时是无法直接修改图标的样式的

1
<img src='./dot.svg' class="svg-img" />

所以我们需要通过一个库来将页面中的 img 图像转化成为 svg

1
npm install --savee @iconfu/svg-inject

在自己的项目入门文件中 引入该库

1
2
// main.js
import '@iconfu/svg-inject'

然后在 img 标签中通过 onload 方法来注入 svg 图像

1
<img src='./dot.svg' class="svg-img" onload="SVGInject(this)" />

最后就可以通过类选择器对该图标进行样式的修改

1
2
3
.svg-img {
fill: red;
}