Vue开发：基础内容

Vue 需要掌握的基础内容

数据代理

事件处理

键盘事件

特殊系统修饰键：

• tab：需要配合 keydown 使用

• ctrl、alt、shift、meta：

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

需求：

• 按下 ctrl + y 时触发事件

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

计算属性

computed 与 methods 的区别：

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

简写：

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

computed: {
	fullName: {
		get() {
			return "wrysmile";
		}
	}
}
// 可简写为：
computed: {
	fullName() {
		return "wrysmile";
	}
}

监视属性

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

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

// Vue 中配置
new Vue({
	watch: {
		info: {
			immediate: false,	// 是否立即触发
			deep: true,			// 监视多级结构中所有属性是否发生变化
			handler(newValue, oldValue) {	// 回调函数
				...代码片段
			}
		}
	}
})
// vm 中配置
vm.$watch('info', {
	immediate: false,	// 是否立即触发
	handler(newValue, oldValue) {	// 回调函数
		...代码片段
	}
})

当无需配置 immediate 和 deep 属性时可以使用简写形式，如下：

// 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

可以使用 uuid 或 nanoid 等库来生成唯一ID值

使用：

• npm i nanoid 安装依赖包

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

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

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

方法1：使用 for 循环，控制变量 ++

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

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

• 第二个参数即为计数器

3.消息订阅与发布

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

4.强制更新模板

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

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

方法可参考 这里

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

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

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

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

npm install --savee @iconfu/svg-inject

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

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

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

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

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

.svg-img {
	fill: red;
}