Vue.js 第二章知识点总结
·
Vue.js 第二章知识点总结
一、过滤器（Filters）
1. 概念
Vue.js 中用于文本格式化的工具，仅作用于数据展示阶段，不修改原始数据，Vue 2.x 需自定义，Vue 3.x 已移除（推荐用计算属性/方法替代）。
2. 核心用法
- 全局过滤器（所有组件可用）：
Vue.filter('dateFormat', (value) => { return new Date(value).toLocaleDateString(); // 示例：时间戳转日期 }); - 局部过滤器（仅当前组件可用）：
export default { filters: { numberFix: (value) => value.toFixed(2) // 示例：数值保留2位小数 } }; - 模板使用：
{{ timeStamp | dateFormat }}或v-bind:title="price | numberFix"
3. 注意点
- 支持链式调用（如
{{ data | filter1 | filter2 }}）； - 优先级低于计算属性，复杂格式化优先用计算属性。
二、内置指令
1. 概念
Vue 自带的 v- 前缀特殊属性，用于操作 DOM、绑定数据、控制渲染，无需手动定义。
2. 常用指令及功能
| 指令 | 功能描述 | 示例 |
|---|---|---|
v-text |
渲染纯文本，避免插值闪烁 | <span v-text="msg"></span> |
v-html |
渲染 HTML 内容（需防 XSS，仅信任内容可用） | <div v-html="richText"></div> |
v-bind |
动态绑定属性（简写 :） |
<img :src="imgUrl"> |
v-on |
绑定事件（简写 @，支持修饰符 .stop/.prevent） |
<button @click="handleClick"> |
v-model |
表单双向绑定（仅用于 input/select 等表单元素） |
<input v-model="username"> |
v-for |
循环渲染（需加 key 保证唯一性） |
<li v-for="(item, i) in list" :key="i">{{ item }}</li> |
v-if/v-else |
条件渲染（动态创建/销毁 DOM，适合一次性切换） | <div v-if="isShow">显示</div> |
v-show |
条件展示（仅切换 display: none，适合频繁切换） |
<div v-show="isShow">显示</div> |
v-pre |
跳过模板编译，直接显示原始插值（如展示 {{ }} 符号） |
<span v-pre>{{ raw }}</span> |
v-cloak |
隐藏未编译插值（配合 CSS [v-cloak]{display:none} 解决闪烁） |
<div v-cloak>{{ msg }}</div> |
三、自定义指令（Directives）
1. 概念
用户自定义的 v-xxx 指令，用于封装 DOM 操作逻辑（如自动聚焦、权限控制），弥补内置指令不足。
2. 核心用法
- 全局指令（所有组件可用）：
Vue.directive('focus', { inserted(el) { // 元素插入 DOM 时执行（常用钩子） el.focus(); // 示例：输入框自动聚焦 } }); - 局部指令（仅当前组件可用）：
export default { directives: { permission: { bind(el, binding) { // 指令绑定到元素时执行 // 示例：无权限则隐藏元素 if (!binding.value) el.style.display = 'none'; } } } }; - 模板使用：
<input v-focus>或<button v-permission="hasAuth">按钮</button>
3. 核心钩子
bind：指令绑定元素时调用（1次）；inserted：元素插入 DOM 时调用；update：元素所在组件更新时调用。
四、生命周期（Lifecycle）
1. 概念
Vue 实例从创建 → 运行 → 销毁的全过程，每个阶段触发特定“钩子函数”，供开发者执行逻辑。
2. Vue 2.x 核心生命周期（常用）
| 阶段 | 钩子函数 | 执行时机 | 常用场景 |
|---|---|---|---|
| 创建阶段 | beforeCreate |
实例初始化后，数据/方法未挂载 | -（无可用数据，极少用） |
created |
数据/方法已挂载，DOM 未渲染 | 发送初始化请求、初始化数据 | |
| 挂载阶段 | beforeMount |
模板编译完成，未渲染到页面 | -（极少用） |
mounted |
DOM 已渲染，实例挂载完成 | 操作 DOM、初始化第三方插件（如 ECharts） | |
| 更新阶段 | beforeUpdate |
数据变化，DOM 未更新 | -（极少用） |
updated |
DOM 已更新 | 基于更新后的 DOM 执行逻辑（避免修改数据） | |
| 销毁阶段 | beforeDestroy |
实例即将销毁，数据/方法仍可用 | 清理定时器、解绑事件监听 |
destroyed |
实例完全销毁，数据/事件失效 | -（极少用） |
3. 注意点
- Vue 3.x 钩子前缀改为
on（如onMounted），组合式 API 中需手动调用； - 避免在
updated中修改数据，防止无限循环。
五、组件（Components）
1. 概念
Vue 中可复用的 UI 单元，将页面拆分为独立模块（如 Navbar、ListItem），提高代码复用性和维护性。
2. 分类与用法
- 全局组件（所有实例可用）：
Vue.component('GlobalButton', { template: '<button @click="handleClick">{{ btnText }}</button>', data() { return { btnText: '全局按钮' } }, methods: { handleClick() { alert('点击全局按钮') } } }); - 局部组件（仅父组件可用）：
// 子组件 Child.vue <template><div>{{ childMsg }}</div></template> <script> export default { data() { return { childMsg: '局部组件' } } } </script> // 父组件中引入 import Child from './Child.vue'; export default { components: { Child } } // 注册局部组件 - 单文件组件（SFC）：
.vue文件，包含<template>（模板）、<script>（逻辑）、<style>（样式），是实战主流。
3. 核心特性
- 组件间独立作用域（数据不共享，需通过 props/事件通信）；
- 支持嵌套（父子组件）和递归（组件自身调用自身）。
六、脚手架（Vue CLI）
1. 概念
Vue 官方提供的命令行工具，快速搭建标准化 Vue 项目（自动配置 Webpack、Babel、ESLint 等）。
2. 核心操作（Vue 2.x/3.x 通用）
- 安装：
npm install -g @vue/cli（Vue 3.x）或npm install -g vue-cli（Vue 2.x）； - 创建项目：
vue create project-name（选择预设：默认/手动配置，如选 Router、Vuex）； - 启动开发环境：
cd project-name→npm run serve（默认端口 8080，浏览器访问http://localhost:8080）； - 打包生产环境：
npm run build（生成dist目录，用于部署到服务器）。
3. 项目结构（关键目录）
src/：源代码目录（components/组件、router/路由、store/状态管理）；public/：静态资源目录（index.html入口文件）；vue.config.js：项目配置文件（修改端口、代理等）。
七、Render 函数
1. 概念
以JavaScript 代码编写模板的函数，替代 <template>，适合动态生成复杂 DOM 结构（如根据条件渲染不同组件）。
2. 核心用法（Vue 2.x）
- 基础语法：
render: h => h(标签/组件, 配置项, 子元素)（h即createElement，用于创建 VNode）； - 示例（渲染带点击事件的组件）：
import CustomButton from './CustomButton.vue'; export default { render(h) { return h(CustomButton, { props: { btnText: 'Render 生成按钮' }, // 传递 props on: { click: () => alert('点击 Render 按钮') } // 绑定事件 }, ['按钮内部文本']); // 子元素（可选） } };
3. 注意点
- Vue 3.x 中
render函数参数改为createVNode（需从vue导入）； - 支持 JSX（需配置
@vue/babel-plugin-jsx插件，语法更接近 HTML）。
八、修改默认配置（Vue CLI）
1. 概念
通过配置文件修改 Vue CLI 项目的默认设置（如端口、代理、打包路径），无需修改底层 Webpack 配置。
2. 核心配置文件：vue.config.js
在项目根目录创建 vue.config.js，常用配置示例：
module.exports = {
// 1. 修改开发环境端口
devServer: {
port: 8081, // 自定义端口
open: true, // 启动后自动打开浏览器
proxy: { // 配置接口代理（解决跨域）
'/api': {
target: 'http://localhost:3000', // 后端接口地址
pathRewrite: { '^/api': '' }, // 去掉请求中的 /api 前缀
ws: true, // 支持 WebSocket
changeOrigin: true // 模拟跨域请求
}
}
},
// 2. 修改打包路径（解决部署后资源 404）
publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
// 3. 关闭 eslint 校验（开发阶段可选）
lintOnSave: false
};
九、ref 属性
1. 概念
Vue 中用于获取 DOM 元素或组件实例的属性，替代原生 document.querySelector。
2. 核心用法
- 获取 DOM 元素：
<template><div ref="box">我是 DOM 元素</div></template> <script> export default { mounted() { console.log(this.$refs.box); // 输出 <div> 元素 this.$refs.box.style.color = 'red'; // 操作 DOM 样式 } } </script> - 获取组件实例：
<template><Child ref="childCom"></Child></template> <script> import Child from './Child.vue'; export default { components: { Child }, mounted() { console.log(this.$refs.childCom); // 输出 Child 组件实例 this.$refs.childCom.childMethod(); // 调用子组件方法 } } </script>
3. 注意点
$refs仅在mounted钩子后可用（DOM 已渲染）；- 非响应式（修改
$refs不会触发页面重新渲染）。
十、props 配置
1. 概念
父子组件通信的核心方式，用于父组件向子组件传递数据（单向数据流：父变子更，子不能直接修改 props）。
2. 核心用法
- 子组件声明 props（3种方式）：
export default { // 方式1：仅指定类型 props: ['msg', 'count'], // 方式2：指定类型（推荐） props: { msg: String, count: Number }, // 方式3：详细配置（类型、必填、默认值、验证，推荐） props: { msg: { type: String, required: true, // 必填 default: '默认文本' // 非必填时的默认值 }, count: { type: Number, validator: (value) => value >= 0 // 自定义验证：值必须 >= 0 } } }; - 父组件传递数据：
<!-- 静态值直接传，动态值用 v-bind --> <Child msg="静态文本" :count="parentCount"></Child> <script> export default { data() { return { parentCount: 10 } } } </script>
3. 注意点
- 子组件若需修改 props，需通过
$emit触发父组件事件，由父组件修改数据； - 传递对象/数组时，子组件修改内部属性会影响父组件（因引用类型共享地址，需避免）。
十一、Mixin 混入
1. 概念
用于复用组件选项的工具，将多个组件共享的逻辑（数据、方法、生命周期）提取为“混入对象”，减少代码冗余。
2. 核心用法
- 定义混入对象：
// mixins/commonMixin.js export default { data() { return { mixinData: '共享数据' } }, methods: { mixinMethod() { console.log('共享方法') } }, mounted() { console.log('混入的 mounted 钩子') } }; - 局部混入（仅当前组件可用）：
import commonMixin from './mixins/commonMixin'; export default { mixins: [commonMixin], // 引入混入（支持数组，可多个） mounted() { console.log(this.mixinData); // 访问混入数据 this.mixinMethod(); // 调用混入方法 } }; - 全局混入（所有组件可用，慎用，易污染）：
import commonMixin from './mixins/commonMixin'; Vue.mixin(commonMixin);
3. 合并规则
- 数据（data）：组件数据覆盖混入数据（同名时）；
- 生命周期钩子：混入和组件的钩子都会执行，混入钩子先触发；
- 方法/计算属性：同名时组件的覆盖混入的。
十二、插件（Plugins）
1. 概念
用于扩展 Vue 功能的工具，可添加全局方法、指令、混入、实例方法等（如 vue-router、vuex 均为插件）。
2. 核心用法
- 定义插件（需暴露
install方法）：// plugins/myPlugin.js export default { install(Vue, options) { // 1. 添加全局指令 Vue.directive('focus', { inserted(el) { el.focus() } }); // 2. 添加实例方法（通过原型） Vue.prototype.$myMethod = (msg) => console.log('自定义方法：', msg); // 3. 添加全局混入 Vue.mixin({ mounted() { console.log('插件混入的 mounted') } }); } }; - 使用插件（在
main.js中）：import myPlugin from './plugins/myPlugin'; Vue.use(myPlugin, { /* 可选配置参数 */ }); // 需在 new Vue() 前调用
3. 常用官方插件
vue-router：路由管理；vuex：状态管理；vue-i18n：国际化；vue-lazyload：图片懒加载。
十三、scoped 样式
1. 概念
Vue 单文件组件中 <style scoped> 的属性，用于限制样式仅作用于当前组件，避免样式污染（不同组件同名类名冲突）。
2. 核心原理
Vue 会为当前组件的 DOM 元素添加唯一 data-v-xxx 属性，同时为样式选择器添加该属性前缀（如 .box 变为 .box[data-v-xxx]），确保样式仅匹配当前组件 DOM。
3. 用法与注意点
- 基础用法：
<style scoped> .box { color: red; } /* 仅作用于当前组件的 .box 元素 */ </style> - 修改子组件样式（父组件中）：
需用deep选择器（穿透scoped），语法：/* Vue 2.x */ ::v-deep .child-box { color: blue; } /* 或 */ /deep/ .child-box { color: blue; } /* Vue 3.x */ :deep(.child-box) { color: blue; } - 全局样式：不加
scoped的<style>标签为全局样式，作用于所有组件。
十四、浏览器本地存储
1. 概念
Vue 项目中常用的客户端数据存储方案，用于保存用户信息、配置等（无需后端，仅存于浏览器），主要有 localStorage 和 sessionStorage。
2. 两者对比与用法
| 特性 | localStorage | sessionStorage |
|---|---|---|
| 存储时长 | 永久存储（手动删除才消失） | 会话级（关闭标签页/浏览器后清除） |
| 存储大小 | 约 5MB | 约 5MB |
| 共享范围 | 同域名下所有页面共享 | 仅当前标签页共享 |
| 核心方法 | setItem/getItem/removeItem/clear |
同左 |
- 示例（存储用户信息）：
// 存储（需将对象转为 JSON 字符串，因本地存储仅存字符串） const user = { name: '张三', id: 1 }; localStorage.setItem('user', JSON.stringify(user)); // 获取（需解析 JSON） const storedUser = JSON.parse(localStorage.getItem('user')); // 删除指定键 localStorage.removeItem('user'); // 清空所有存储 localStorage.clear();
3. 注意点
- 避免存储敏感数据（如密码，易被篡改和查看）；
- 存储数据量不宜过大，否则影响页面加载性能。
十五、组件自定义事件
1. 概念
父子组件通信的核心方式（子向父传递数据），由父组件绑定事件，子组件触发事件并传参。
2. 核心用法
- 父组件绑定事件：
<template> <!-- 绑定自定义事件 custom-event，触发父组件的 parentMethod 方法 --> <Child @custom-event="parentMethod"></Child> </template> <script> export default { methods: { parentMethod(data) { console.log('收到子组件数据：', data); // 接收子组件传递的数据 } } } </script> - 子组件触发事件：
<template> <button @click="handleClick">向父组件传值</button> </template> <script> export default { methods: { handleClick() { // 触发自定义事件 custom-event，并传递参数 this.$emit('custom-event', '子组件的消息'); } } } </script>
3. 注意点
- 自定义事件名推荐用“kebab-case”（短横线命名），与原生事件区分；
- 解绑事件：在父组件
beforeDestroy中调用this.$off('custom-event')，防止内存泄漏； - 若需一次性触发事件，可用
this.$once('custom-event', callback)。
十六、全局事件总线（Global Event Bus）
1. 概念
用于非父子组件通信（如兄弟组件、跨层级组件）的“中间桥梁”，本质是一个全局共享的 Vue 实例，通过“绑定事件”和“触发事件”传递数据。
2. 核心用法（Vue 2.x）
- 创建全局事件总线（在
main.js中）：// 给 Vue 原型添加 $bus 属性，指向新的 Vue 实例（作为事件总线） Vue.prototype.$bus = new Vue(); - 发送方组件（触发事件传参）：
export default { methods: { sendData() { // 通过 $bus 触发事件 event-name，并传递数据 this.$bus.$emit('event-name', '要传递的数据'); } } }; - 接收方组件（绑定事件接收数据）：
export default { mounted() { // 绑定事件 event-name，接收数据 this.$bus.$on('event-name', (data) => { console.log('收到数据：', data); }); }, beforeDestroy() { // 解绑事件，防止内存泄漏（关键！） this.$bus.$off('event-name'); } };
3. 注意点
- Vue 3.x 无
Vue.prototype，需用app.config.globalProperties替代：const app = createApp(App); app.config.globalProperties.$bus = new app(); - 避免滥用，复杂项目推荐用 Vuex/Pinia 管理状态。
生活感悟
这周学习Vue时，看视频觉得都懂了，一写代码就遇到各种问题，感觉还是需要勤加练习，手不能生
下周计划与学习目标
继续学习Vue，抓紧时间赶赶进度
Agent 垂直技术社区，欢迎活跃、内容共建。
更多推荐
12
0- 0
已为社区贡献5条内容
所有评论(0)