行业知识
Vue2——前端笔记
Vue
- 一、Vue核心
- 1.1、vue简介
- 1.2、初始vue
- 1.3、模板语法
- 1.4、数据绑定
- 1.5、el与data的两种写法
- 1.6、MVVM模型
- 1.7、Vue中的数据代理
- 1.7.1、Object.defineProperty() 理解
- 1.7.2、Vue中的数据代理
- 1.8、事件处理
- 1.8.1、事件的基本用法
- 1.8.2、事件修饰符
- 1.8.3、键盘事件
- 1.9、计算属性
- 1.10、监视属性
- 1.10.1、深度监视
- 1.10.3、监视属性 和 计算属性 区别
- 1.11、绑定样式
- 1.12、条件渲染
- 1.13、列表渲染
- 1.13.1、vue.set() 向响应式对象添加响应式属性
- 1.14、 收集表单数据
- 1.15、过滤器
- 1.16、内置指令
- 1.16.1、v-text指令
- 1.16.2、v-html指令
- 1.16.3、v-cloak指令
- 1.16.4、v-once指令
- 1.16.5、v-pre指令
- 1.17、自定义指令
- 1.18、Vue生命周期
- 二、Vue组件化编程
- 2.1、 模块与组件、模块化与组件化
- 2.2、 非单文件组件（不常用）
- 2.2.1、基本使用
- 2.2.2、使用注意事项
- 2.2.3、组件的嵌套
- 2.2.4、VueComponent
- 2.2.5. 一个重要的内置关系
- 2.3、 单文件组件（常用）
- 三、使用Vue cli 脚手架
- 3.1、 初始化脚手架
- 3.1.1、render函数
- 3.1.2、修改默认配置
- 3.2、ref属性
- 3.3、props配置项
- 3.4、mixin混入
- 3.5、plugin插件
- 3.6、scoped样式
- 3.7、Todo-List案例
- 3.8、WebStorage
- 3.9. 自定义事件
- 3.10、全局事件总线
- 3.11、消息的订阅与发布
- 3.12、$nextTick
- 3.13、过渡与动画
- 四、Vue中的Ajax
- 4.1、axios
- 4.2、Vue脚手架配置代理
- 4.3、GitHub用户搜索案例
- 4.4、slot插槽
- 4.4.1、默认插槽
- 4.4.2、具名插槽
- 4.4.3、作用域插槽
- 五、Vuex
- 5.1、理解vuex
- 5.2、求和案例
- 5.3、getters配置项
- 5.4、四个map方法的使用
- 5.4.1、mapState与mapGetters
- 5.4.2、mapActions与mapMutations
- 5.5、多组件共享数据
- 5.6、模块化+命名空间
- 六、Vue Router路由管理器
- 6.1、理解
- 6.2、基本路由
- 6.3、多级路由
- 6.4、路由的query参数
- 6.5、命名路由
- 6.6、 路由的params参数
- 6.7、路由的props配置
- 6.8、路由跳转的replace方法
- 6.9、编程式路由导航
- 6.10、缓存路由组件
- 6.11、activated 和 deactivated
- 6.12、路由守卫
- 6.13、路由的两种工作模式
- 6.14、路由meta元数据
- 6.15、路由重定向
- Vue 3
一、Vue核心
1.1、vue简介
Vue.js 是一个功能强大、易于学习和使用的前端框架，适用于构建各种规模的 Web 应用程序，并且在社区和生态系统方面拥有广泛的支持和资源。
官网链接: https://cn.vuejs.org/
以下是 Vue.js 的一些主要特性和优点：
-
响应式数据绑定：Vue.js 使用了响应式的数据绑定机制，当数据发生变化时，视图会自动更新。这使得开发者可以轻松地管理和维护应用程序的状态。
-
组件化开发：Vue.js 鼓励组件化开发，将界面拆分为独立、可复用的组件。每个组件都有自己的状态和逻辑，可以相互组合形成复杂的界面。
-
简洁明了的模板语法：Vue.js 提供了简洁明了的模板语法，可以将 HTML 和 JavaScript 代码进行有效地结合，使得开发者能够更快速地编写和理解代码。
-
灵活性和可扩展性：Vue.js 是一个轻量级框架，可以逐步应用到项目中，也可以与其他库或框架（如 React、Angular）结合使用。它还提供了丰富的插件系统和生态系统，可以满足不同项目的需求。
-
单文件组件：Vue.js 支持使用单文件组件 (.vue 文件) 来组织代码，将模板、样式和逻辑放在同一个文件中，使得代码更加清晰和易于维护。
-
虚拟 DOM：Vue.js 使用虚拟 DOM 技术来提高性能，通过比较虚拟 DOM 的变化来最小化 DOM 操作，从而提高页面渲染的效率。
-
生命周期钩子：Vue.js 提供了一系列的生命周期钩子函数，允许开发者在组件的不同阶段执行自定义的逻辑，从而更好地控制组件的行为。
与其他JS框架的关联：
- 借鉴 Angular 的模板和数据绑定技术
- 借鉴 React 的组件化和虚拟DOM技术
常用的 Vue.js 周边库：
-
Vue Router：Vue.js 官方的路由管理器，用于构建单页面应用程序（SPA）。Vue Router 允许开发者通过定义路由来管理应用程序的导航和页面跳转，支持动态路由、嵌套路由、路由传参等功能。
-
Vuex：Vue.js 官方的状态管理库，用于管理应用程序的状态和数据流。Vuex 提供了一种集中式的状态管理方案，让不同组件之间可以共享状态，并且能够实现状态的响应式更新。
-
Vue CLI：Vue.js 官方的命令行工具，用于快速搭建 Vue.js 项目和进行开发调试。Vue CLI 提供了一整套的项目脚手架和开发工具，包括项目初始化、插件管理、开发服务器、构建打包等功能。
-
Element UI：一个基于 Vue.js 的 UI 组件库，提供了丰富的可复用的 UI 组件，包括按钮、表单、对话框、菜单等，可以帮助开发者快速构建漂亮的用户界面。
-
axios：一个基于 Promise 的 HTTP 客户端，用于在浏览器和 Node.js 中发送 HTTP 请求。axios 可以与 Vue.js 结合使用，用于处理数据请求和响应。
1.2、初始vue
初识vue
Hello！{{name}}!
Vue.config.productionTip = false // 阻止vue在启动时生成生产提示 new Vue({ el:'#root', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串 data:{ //data用于存储数据，数据共el所指定的容器去使用 name:'JOJO' } })效果：
注意：
- 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
- root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法
- root容器里的代码被称为Vue模板
- Vue实例与容器是一一对应的
- 真实开发中只有一个Vue实例，并且会配合着组件一起使用
- {{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
- 一旦data中的数据发生变化，那么模板中用到该数据的地方也会自动更新
1.3、模板语法
- 插值：使用双大括号 {{ }} 来进行数据绑定，将数据渲染到 HTML 中。例如：
{{ message }}这会将 Vue 实例中的 message 数据绑定到 元素中，使其显示在页面上。
-
指令：以 v- 开头的特殊属性，用于在 DOM 元素上添加特殊行为。例如：
v-if：根据表达式的值来条件性地渲染元素。
v-for：基于数组数据进行循环渲染列表。
v-on：绑定事件监听器，用于监听 DOM 事件。
v-bind：动态地绑定 HTML 属性。
v-model：实现表单输入元素和 Vue 实例数据的双向绑定。
举例：或简写为，xxx同样要写js表达式，且可以直接读取到data中的所有属性
示例：
vue模板语法
插值语法
你好，{{name}}!
指令语法
快去看新番！
快去看新番！ Vue.config.productionTip = false new Vue({ el:'#root', data:{ name:'JOJO', url:'https://www.bilibili.com/' } })1.4、数据绑定
- 单向绑定（v-bind）：数据只能从data流向页面
- 双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data，双向绑定一般都应用在表单类元素上（如：、、等）
示例：
数据绑定 单向数据绑定：
双向数据绑定： // v-model:value可以简写为v-model，因为v-model默认收集的就是value值 Vue.config.productionTip = false new Vue({ el:'#root', data:{ name:'JOJO' } })1.5、el与data的两种写法
el有2种写法：
- 创建Vue实例对象的时候配置el属性
- 先创建Vue实例，随后再通过vm.$mount(‘#root’)指定el的值
data有2种写法：
- 对象式
- 函数式
el与data的两种写法
Hello,{{name}}!
Vue.config.productionTip = false //el的两种写法： // const vm = new Vue({ // // el:'#root', //第一种写法 // data:{ // name:'JOJO' // } // }) // vm.$mount('#root')//第二种写法 //data的两种写法： new Vue({ el:'#root', //data的第一种写法：对象式 // data:{ // name:'JOJO' // } //data的第二种写法：函数式 data(){ return{ name:'JOJO' } } })1.6、MVVM模型
在 Vue.js 中，采用了 MVVM（Model-View-ViewModel）的设计模式。
-
Model（模型）：在 Vue.js 中，Model 表示的是数据对象和业务逻辑。这些数据对象通常被定义在 Vue 实例的 data 选项中，也可以通过组件之间的通信来共享数据。
-
View（视图）：View 是用户界面的呈现部分，通常由 HTML 模板构成。在 Vue.js 中，视图通过 Vue 实例的模板来定义，Vue 使用了基于 HTML 的模板语法，使开发者可以直观地描述用户界面的结构。
-
ViewModel（视图模型）：在 Vue.js 中，ViewModel 是 Vue 实例。它是 Vue.js 的核心，负责连接 View 和 Model，并管理 View 的状态。Vue 实例的 data 选项中定义的数据对象就是 ViewModel 中的数据模型，而 Vue 实例中的方法和计算属性则是 ViewModel 中的业务逻辑。
在 Vue.js 中，通过数据绑定和指令等机制，实现了视图与数据模型之间的双向绑定，当数据模型发生变化时，视图会自动更新；反之，当用户与视图进行交互时，数据模型也会随之更新。这种双向绑定的机制使得开发者可以更加高效地开发复杂的用户界面，并且使代码更加易于维护。
总的来说，Vue.js 中的 MVVM 模型将数据、视图和逻辑进行了清晰地分离，使得开发者可以更加专注于业务逻辑的实现，同时也提高了代码的可维护性和可测试性。
示例：
mvvm
名称：{{name}}
战队：{{rank}}
测试：{{$options}}
Vue.config.productionTip = false new Vue({ el:'#root', data:{ name:'uzi', rank:'RNG' } })1.7、Vue中的数据代理
1.7.1、Object.defineProperty() 理解
Object.defineProperty() 是 JavaScript 中的一个方法，用于定义或修改对象的属性。通过这个方法，你可以精确地控制属性的各种特性，例如可枚举性、可配置性、可写性等。
这个方法接受三个参数：
-
对象（Object）：要在其上定义属性的对象。
-
属性名（String）：要定义或修改的属性的名称。
-
属性描述符（Descriptor）：一个包含属性特性的对象。这个对象可以包含如下属性：
- value：属性的值。
- writable：属性是否可写，默认为 false。
- enumerable：属性是否可枚举（就是是否可以遍历），默认为 false。
- configurable：属性是否可配置，默认为 false。
- get：一个 getter 函数，用于获取属性的值。
- set：一个 setter 函数，用于设置属性的值。
使用 Object.defineProperty() 方法可以实现对属性的高度定制，例如：
var obj = {};// 定义属性 name，值为 "John"，可写，可枚举，可配置Object.defineProperty(obj, 'name', { value: 'John', writable: true, enumerable: true, configurable: true});console.log(obj.name); // 输出 "John"// 修改属性 name 的值obj.name = 'Doe';console.log(obj.name); // 输出 "Doe"// 删除属性 namedelete obj.name;console.log(obj.name); // 输出 undefined在这个例子中，我们使用 Object.defineProperty() 方法定义了一个名为 name 的属性，并设置了它的值为 'John'，并且该属性是可写、可枚举、可配置的。然后我们修改了属性的值为 'Doe'，最后删除了这个属性。
总的来说，Object.defineProperty() 方法使得我们可以更加灵活地定义对象的属性，实现对属性的精确控制。
1.7.2、Vue中的数据代理
在 Vue.js 中，数据代理是指 Vue 实例的 data 对象中的属性被代理到 Vue 实例上，使得可以通过 Vue 实例直接访问这些属性。这样做的好处是可以在 Vue 实例中直接访问和修改数据，而不需要通过 this.data.xxx 的方式。
当你在 Vue 实例的 data 选项中定义了一些属性时，Vue.js 会将这些属性代理到 Vue 实例上，这样你就可以直接通过 this.xxx 的方式来访问和修改这些属性，而不需要使用 this.data.xxx。
例如，如果你有以下的 Vue 实例：
var vm = new Vue({ data: { message: 'Hello, Vue!' }})那么你可以直接在 Vue 实例中访问和修改 message 属性，如下所示：
console.log(vm.message) // 输出 'Hello, Vue!'vm.message = 'Hello, Vue.js!' // 修改 message 属性的值console.log(vm.message) // 输出 'Hello, Vue.js!'
在这个例子中，message 属性被代理到了 Vue 实例 vm 上，你可以直接通过 vm.message 来访问和修改它。
数据代理使得在 Vue 实例中操作数据变得更加简洁和方便，同时也使得代码更加易读和易于维护。
1.8、事件处理
1.8.1、事件的基本用法
事件处理是通过指令来实现的。Vue.js 提供了 v-on 指令来监听 DOM 事件，并在触发事件时执行相应的方法。
在 Vue.js 中，事件处理是通过指令来实现的。Vue.js 提供了 v-on 指令来监听 DOM 事件，并在触发事件时执行相应的方法。
下面是一些常见的 Vue.js 事件处理的方法：
-
监听事件：使用 v-on 指令可以监听 DOM 事件，并在事件触发时执行指定的方法。语法格式为 v-on:事件名，例如 v-on:click 用于监听点击事件。你也可以使用简写形式 @事件名，例如 @click。示例：
点击我点击我
-
事件方法：在 Vue 实例中定义事件方法，当相应的事件被触发时执行这些方法。示例：
var vm = new Vue({ methods: { handleClick: function () { console.log('按钮被点击了！'); } }}); -
事件对象：在事件处理方法中，可以通过 $event 访问原生 DOM 事件对象（就是vm）。注意不要用箭头函数，示例：
点击我
methods: { handleClick: function (event) { console.log('按钮被点击了！', event); }}
这些是 Vue.js 中常用的事件处理方式，通过这些方式可以方便地处理用户交互和响应用户操作。除了点击事件，还有很多常用事件，例如下方。
常用的事件指令，用于监听不同的 DOM 事件:
事件 描述 @click 监听点击事件 @dblclick 监听双击事件。 @mousedown 监听鼠标按下事件。 @mouseup 监听鼠标释放事件。 @mousemove 监听鼠标移动事件。 @mouseover 监听鼠标移入事件。 @mouseout 监听鼠标移出事件。 @keydown 监听键盘按下事件。 @keyup 监听键盘释放事件。 @keypress 监听键盘按键事件。 @submit 监听表单提交事件。 @input 监听输入事件，常用于 、、 等元素。 @change 监听改变事件，常用于 、、 等元素。 @focus 监听获得焦点事件。 @blur 监听失去焦点事件。 1.8.2、事件修饰符
Vue.js 提供了一些事件修饰符，用于对事件进行额外的处理或修改事件的行为。以下是常用的事件修饰符：
-
.stop：阻止事件继续传播，即阻止事件冒泡。(常用)
-
.prevent：阻止默认事件行为。(常用)
-
.once：只触发一次事件，之后移除监听器。(常用)
-
.capture：使用事件捕获模式，即在捕获阶段处理事件。
-
.self：只在事件是从触发元素自身触发时触发回调。
-
.passive：指示浏览器不要等待 preventDefault() 被调用，可以提升移动端的性能。
修饰符可以连续写，比如可以这么用：@click.prevent.stop=“showInfo”
1.8.3、键盘事件
Vue.js 提供了多种方式来处理键盘事件。你可以使用 @keydown、@keyup 或 @keypress 指令来监听键盘事件，并执行相应的逻辑。这些指令可以直接绑定到 DOM 元素上，如 、 或 等。
- 监听键盘按下事件 (@keydown)：
- 监听键盘释放事件 (@keyup)：
- 监听键盘按键事件 (@keypress)：
常用键盘事件修饰符：
修饰符 描述 .enter 只在 Enter 键按下时触发。 .tab 只在 Tab 键按下时触发。 .delete 只在删除键按下时触发。 .esc 只在 Esc 键按下时触发。 .space 只在空格键按下时触发。 .up 只在上箭头键按下时触发。 .down 只在下箭头键按下时触发。 .left 只在左箭头键按下时触发。 .right 只在右箭头键按下时触发。 Vue.config.keyCodes.自定义键名 = 键码，可以自定义按键别名
使用示例：
当然，下面是一些常见的键盘事件处理示例：
export default { methods: { // 当按下 Enter 键时调用的方法 onEnterPressed(event) { console.log('按下了 Enter 键'); // 执行其他逻辑... }, // 当按下 Esc 键时调用的方法 onEscPressed(event) { console.log('按下了 Esc 键'); // 执行其他逻辑... }, // 当按下上箭头键时调用的方法 onUpArrowPressed(event) { console.log('按下了上箭头键'); // 执行其他逻辑... }, // 当按下下箭头键时调用的方法 onDownArrowPressed(event) { console.log('按下了下箭头键'); // 执行其他逻辑... }, // 当按下 Tab 键时调用的方法 onTabPressed(event) { console.log('按下了 Tab 键'); // 执行其他逻辑... } }}1.9、计算属性
Vue.js 中的计算属性是一种能够根据依赖进行缓存的属性。这意味着只要依赖项没有发生变化，多次访问计算属性将立即返回之前的计算结果，而不会重新执行计算函数。
定义：要用的属性不存在，需要通过已有属性计算得来。
原理：底层借助了Objcet.defineproperty()方法提供的getter和setter。
下面是一个简单的 Vue 组件示例，演示了如何使用计算属性：
原始消息：{{ message }}
反转后的消息：{{ reversedMessage }}
export default { data() { return { message: 'Hello Vue.js' }; }, computed: { // 计算属性：反转消息 reversedMessage() { // 这里的代码将在需要时被执行，并且计算结果将被缓存 return this.message.split('').reverse().join(''); } }}在这个示例中，reversedMessage 是一个计算属性，它根据 message 的值进行计算。每当 message 的值发生变化时，reversedMessage 会自动重新计算；但如果 message 没有发生变化，多次访问 reversedMessage 将直接返回之前计算的结果，而不会重新执行计算函数。
计算属性在 Vue.js 中非常实用，特别是在需要对数据进行复杂计算或依赖其他数据的情况下。使用计算属性可以使代码更清晰、更易于维护。
1.10、监视属性
在 Vue.js 中，你可以使用 watch 选项来监视一个数据的变化。这个选项可以用来执行异步操作或在数据发生变化时执行特定的逻辑。注意监视的属性必须存在，才能进行监视。
下面是一个简单的示例，演示了如何使用 watch 来监视数据的变化：
当前计数：{{ count }}
增加计数 export default { data() { return { count: 0 }; }, watch: { // 监听 count 数据的变化 count(newValue, oldValue) { console.log('计数值发生变化：', newValue); // 在这里可以执行一些特定的逻辑，比如发送请求、更新其他数据等 } }, methods: { // 增加计数的方法 increment() { this.count++; } }}在这个示例中，我们定义了一个名为 count 的数据属性，并在 watch 中定义了一个函数来监听 count 的变化。每当 count 的值发生变化时，该函数会被调用，并且会传入两个参数：新值 newValue 和旧值 oldValue。在函数内部，你可以根据需要执行任何特定的逻辑。
需要注意的是，watch 选项可以用来监听任何数据的变化，不仅限于基本数据类型，还可以监听对象、数组等的变化。
在 Vue.js 中，监视属性（Watchers）和计算属性（Computed Properties）都是用来观察数据变化并做出响应的机制，但它们之间有一些关键的区别和适用场景。
1.10.1、深度监视
深度监视（Deep Watching）是 Vue.js 中用于监视对象或数组内部变化的一种机制。默认情况下，Vue.js 在监视对象或数组时是浅层监视的，即只监视对象或数组的第一层属性或元素的变化。但是，在某些情况下，你可能需要监视对象或数组内部的变化，这就需要使用深度监视。
在 Vue.js 中，你可以通过在监视属性中设置 deep: true 来启用深度监视。当启用深度监视时，Vue.js 将会递归遍历对象的所有属性或数组的所有元素，并对它们进行监视。
下面是一个示例，演示了如何在 Vue.js 中使用深度监视：
data() { return { user: { name: 'John', age: 30, address: { city: 'New York', country: 'USA' } } };},watch: { user: { handler(newValue, oldValue) { console.log('用户对象发生变化：', newValue); }, deep: true // 启用深度监视 }}在这个示例中，我们监视了 user 对象，并启用了深度监视。这意味着当 user 对象内部的任何属性发生变化时，监视器函数都会被调用。如果不启用深度监视，则只有 user 对象的引用发生变化时才会触发监视器函数。
需要注意的是，启用深度监视可能会带来性能损耗，因为 Vue.js 需要递归遍历整个对象或数组。因此，只有在确实需要监视对象或数组内部变化时才应该使用深度监视。
1.10.3、监视属性 和 计算属性 区别
-
计算属性 (Computed Properties)：
- 计算属性是基于它们所依赖的数据进行计算的，只有依赖的数据发生变化时，计算属性才会重新计算。
- 计算属性是基于依赖的缓存的，只有依赖的数据变化时，才会重新计算计算属性的值。这意味着多次访问计算属性时，只有在依赖数据变化时才会重新计算，否则会直接返回缓存的结果。
- 计算属性适用于基于现有数据计算衍生数据的场景，比如对列表进行过滤、排序等操作。
-
监视属性 (Watchers)：
- 监视属性允许你在数据变化时执行自定义的异步或开销较大的操作。
- 监视属性适用于需要在数据变化时执行异步操作、执行一些副作用操作或需要在数据变化时做一些复杂的逻辑处理的场景。
- 监视属性监听的是某个特定属性的变化，而不是像计算属性那样基于其他数据的计算结果。
场景：
-
计算属性的场景：
- 当你需要根据现有数据计算出衍生数据时，例如对数组进行过滤、排序、格式化等操作时，可以使用计算属性。
- 当你希望基于已有数据自动更新衍生数据时，例如实时计算订单总额或列表项数量时，可以使用计算属性。
-
监视属性的场景：
- 当需要执行异步操作时，例如向服务器发送 HTTP 请求或执行一些耗时的操作时，可以使用监视属性。
- 当需要监听特定属性的变化并在变化发生时执行一些复杂逻辑时，可以使用监视属性。比如，当用户输入一个值时，你可能需要验证这个值、更新其他相关的数据、或者触发一些特定的操作。
总的来说，计算属性适用于基于现有数据的计算，而监视属性适用于在数据变化时执行特定的操作。根据具体的需求和场景，选择适合的机制来管理数据的变化。
1.11、绑定样式
使用:style 或 :class来绑定样式
-
class样式：
-
写法：class=“xxx”，xxx可以是字符串、对象、数组
-
字符串写法适用于：类名不确定，要动态获取
-
对象写法适用于：要绑定多个样式，个数不确定，名字也不确定
-
数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用
-
style样式：
- :其中xxx是动态值
- :其中a、b是样式对象
-
{{name}}
{{name}}
{{name}}
{{name}}
{{name}}Vue.config.productionTip = false const vm = new Vue({ el:'#root', data:{ name:'尚硅谷', mood:'normal', classArr:['atguigu1','atguigu2','atguigu3'], classObj:{ atguigu1:false, atguigu2:false, }, styleObj:{ fontSize: '40px', color:'red', }, styleObj2:{ backgroundColor:'orange' }, styleArr:[ { fontSize: '40px', color:'blue', }, { backgroundColor:'gray' } ] }, methods: { changeMood(){ const arr = ['happy','sad','normal'] const index = Math.floor(Math.random()*3) this.mood = arr[index] } }, }) .basic{ width: 400px; height: 100px; border: 1px solid black; } .happy{ border: 4px solid red;; background-color: rgba(255, 255, 0, 0.644); background: linear-gradient(30deg,yellow,pink,orange,yellow); } .sad{ border: 4px dashed rgb(2, 197, 2); background-color: gray; } .normal{ background-color: skyblue; } .atguigu1{ background-color: yellowgreen; } .atguigu2{ font-size: 30px; text-shadow:2px 2px 10px red; } .atguigu3{ border-radius: 20px; }1.12、条件渲染
在 Vue.js 中，你可以使用 v-if、v-else-if、v-else 、v-show指令来进行条件渲染。这些指令允许你根据表达式的真假来控制元素的显示与隐藏。
-
v-if：
-
写法：
v-if="表达式"
v-else-if="表达式"
v-else
-
适用于：切换频率较低的场景
-
特点：不展示的DOM元素直接被移除
-
注意：v-if可以和v-else-if、v-else一起使用，但要求结构不能被打断
-
v-show：
- 写法：v-show="表达式"
- 适用于：切换频率较高的场景
- 特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
-
使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到
使用示例：
条件渲染
当前的n值是:{{n}}
点我n+1Hello,{{name}}!
AngularReactVueVue.config.productionTip = falseconst vm = new Vue({el:'#root',data:{name:'jojo',n:0}})1.13、列表渲染
在 Vue.js 中，你可以使用 v-for 指令来进行列表渲染，它可以根据数组的数据来渲染一个元素或一个组件的多个实例。
基本列表
人员列表（遍历数组）
- {{p.name}}-{{p.age}}
汽车信息（遍历对象）
- {{k}}-{{value}}
遍历字符串
- {{char}}-{{index}}
遍历指定次数
- {{index}}-{{number}}
key的作用和原理：
在 Vue.js 中，key 是用来识别 Vue.js 的虚拟 DOM 树中的节点的唯一标识符。key 的作用是帮助 Vue.js 跟踪每个节点的身份，以便在进行 DOM 元素的增、删、改操作时，能够更高效地定位到对应的节点，从而避免不必要的 DOM 操作，提高性能。
作用：
-
维持状态：当 Vue.js 重新渲染列表时，它会根据新旧节点的 key 来识别节点的变化，然后进行相应的更新操作。如果某个节点的 key 在新旧列表中都存在，则 Vue.js 会认为这是同一个节点，会尝试尽可能地复用该节点，而不是销毁并重新创建，从而保持该节点的状态（例如输入框中的内容）。
-
提高性能：有了唯一的 key，Vue.js 在进行 DOM 操作时可以更加高效地定位到对应的节点，避免不必要的 DOM 操作，从而提高渲染性能。
原理：
Vue.js 在进行列表渲染时，会生成一个虚拟 DOM 树来表示列表中的各个节点，每个节点都有一个对应的 key。当列表发生变化时，Vue.js 会通过比较新旧虚拟 DOM 树中的节点的 key 来识别节点的变化：
-
如果某个节点的 key 在新旧列表中都存在，则 Vue.js 认为这是同一个节点，会尝试复用该节点，从而保持节点的状态。
-
如果某个节点的 key 在新列表中不存在，但在旧列表中存在，则 Vue.js 会将该节点标记为待删除节点，并在 DOM 中将其移除。
-
如果某个节点的 key 在新列表中存在，但在旧列表中不存在，则 Vue.js 会将该节点标记为待添加节点，并在 DOM 中将其插入到相应位置。
通过这种方式，Vue.js 能够高效地更新列表，并且尽可能地减少不必要的 DOM 操作，提高性能。
因此，为列表中的每个节点提供一个唯一的 key 是十分重要的，尤其在涉及到动态更新的列表时。
key的原理
人员列表
添加老刘- {{p.name}} - {{p.age}}
1.13.1、vue.set() 向响应式对象添加响应式属性
Vue.set() 是 Vue.js 提供的一个全局方法，用于在响应式对象上添加响应式属性。在 Vue.js 中，如果直接使用赋值语句给一个已经创建的响应式对象添加新属性，Vue.js 无法检测到这个新属性的变化，因为它是在对象被创建之后添加的。为了解决这个问题，Vue.js 提供了 Vue.set() 方法来手动添加响应式属性。
语法:
Vue.set(object, key, value)
- object: 要添加属性的目标对象。
- key: 要添加的属性名。
- value: 要添加的属性值。
示例:
{{ obj }}
Add Property export default { data() { return { obj: { name: 'John', age: 30 } }; }, methods: { addProperty() { Vue.set(this.obj, 'gender', 'male'); } }};在上面的示例中，obj 是一个响应式对象，初始时包含 name 和 age 两个属性。当点击按钮时，调用 addProperty 方法，在该方法中使用 Vue.set() 方法向 obj 对象中添加一个新属性 gender，并赋值为 'male'。由于使用了 Vue.set() 方法，Vue.js 能够检测到新属性的变化，从而实现响应式更新。
需要注意的是，Vue.set() 方法只能用于添加响应式属性，如果要修改已有的响应式属性的值，直接赋值即可，Vue.js 会自动检测到属性值的变化。
1.14、 收集表单数据
收集表单数据账号：
密码：
年龄：
性别：男女
爱好：学习打游戏吃饭
所属校区：请选择校区北京上海深圳武汉
其他信息：
阅读并接受《用户协议》提交Vue.config.productionTip = falsenew Vue({el:'#root',data:{userInfo:{account:'',password:'',age:0,sex:'female',hobby:[],city:'beijing',other:'',agree:''}},methods: {demo(){console.log(JSON.stringify(this.userInfo))}}})收集表单数据：
- 若：，则v-model收集的是value值，用户输入的内容就是value值
- 若：，则v-model收集的是value值，且要给标签配置value属性
- 若：
- 没有配置value属性，那么收集的是checked属性（勾选 or 未勾选，是布尔值）
- 配置了value属性：
- v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
- v-model的初始值是数组，那么收集的就是value组成的数组
v-model的三个修饰符：
- lazy：失去焦点后再收集数据
- number：输入字符串转为有效的数字
- trim：输入首尾空格过滤
1.15、过滤器
在Vue.js中，过滤器（Filters）是一种用于在模板中对数据进行处理和格式化的功能。它们可以在双花括号插值（mustache）和 v-bind 表达式中使用。
基本语法：
{{ expression | filterName }}- expression: 表达式或变量名。
- filterName: 过滤器的名称。
过滤器可以串联使用，多个过滤器会按顺序执行：
{{ message | filter1 | filter2 }}全局过滤器：
Vue.filter('filterName', function(value) { // 过滤逻辑 return processedValue;});局部过滤器：
filters: { filterName(value) { // 过滤逻辑 return processedValue; }}示例：
{{ message | capitalize }}
{{ date | formatDate }}
export default { data() { return { message: 'hello world', date: new Date() }; }, filters: { capitalize(value) { if (!value) return ''; value = value.toString(); return value.charAt(0).toUpperCase() + value.slice(1); }, formatDate(value) { if (!value) return ''; const date = new Date(value); return date.toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }); } }};在上面的示例中，定义了两个过滤器：capitalize 和 formatDate。capitalize 将字符串的首字母大写，formatDate 将日期对象格式化为长格式的日期字符串。然后在模板中使用这些过滤器对数据进行处理和格式化。
过滤器是 Vue.js 中非常实用的功能，可以简化模板中的数据处理和格式化逻辑，使代码更加清晰易读。
1.16、内置指令
之前学过的指令：
- v-bind：单向绑定解析表达式，可简写为:
- v-model：双向数据绑定
- v-for：遍历数组 / 对象 / 字符串
- v-on：绑定事件监听，可简写为@
- v-if：条件渲染（动态控制节点是否存存在）
- v-else：条件渲染（动态控制节点是否存存在）
- v-show：条件渲染 (动态控制节点是否展示)
除了这些，还有一些内置指令
1.16.1、v-text指令
-
作用：向其所在的节点中渲染文本内容
-
与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。
v-text指令你好，{{name}}Vue.config.productionTip = false new Vue({el:'#root',data:{name:'JOJO',str:'你好啊！
'}})1.16.2、v-html指令
-
作用：向指定节点中渲染包含html结构的内容
-
与插值语法的区别：
- v-html会替换掉节点中所有的内容，{{xx}}则不会
- v-html可以识别html结构
-
严重注意：v-html有安全性问题！！！
- 在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击
- 一定要在可信的内容上使用v-html，永远不要用在用户提交的内容上！！！
v-html指令Hello，{{name}}Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。new Vue({el:'#root',data:{name:'JOJO',str:'你好啊！
',str2:'兄弟我找到你想要的资源了，快来！',}})1.16.3、v-cloak指令
v-cloak指令（没有值）：
- 本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性
- 使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题
v-cloak指令[v-cloak]{display:none;}{{name}}
Vue.config.productionTip = falsenew Vue({el:'#root',data:{name:'尚硅谷'}})1.16.4、v-once指令
v-once指令：
-
v-once所在节点在初次动态渲染后，就视为静态内容了
-
以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能
v-once指令
n初始化的值是：{{n}}
n现在的值是：{{n}}
点我n+1Vue.config.productionTip = false new Vue({el:'#root',data:{n:1}})1.16.5、v-pre指令
v-pre指令：
- 跳过其所在节点的编译过程。
- 可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译
v-pre指令
Vue其实很简单
当前的n值是:{{n}}
点我n+1Vue.config.productionTip = falsenew Vue({el:'#root',data:{n:1}})1.17、自定义指令
Vue.js 允许你创建自定义指令，这样你就可以在应用程序中封装特定的 DOM 行为。自定义指令可以用于处理 DOM 事件、操作 DOM 元素，或者在元素插入/更新时执行特定的代码逻辑。
创建自定义指令
你可以使用 Vue.directive 方法来注册全局自定义指令，或者在组件内部的 directives 选项中注册局部自定义指令。
全局自定义指令
Vue.directive('directiveName', { // 指令钩子函数 bind(el, binding, vnode) { // 指令绑定到元素上时调用 }, inserted(el, binding, vnode) { // 元素插入到 DOM 时调用 }, update(el, binding, vnode, oldVnode) { // 组件更新时调用 }, componentUpdated(el, binding, vnode, oldVnode) { // 组件更新完成时调用 }, unbind(el, binding, vnode) { // 指令从元素上解绑时调用 }});局部自定义指令
export default { directives: { directiveName: { bind(el, binding, vnode) { // 指令钩子函数 }, // 其他钩子函数... } }};自定义指令的钩子函数：
自定义指令可以定义以下钩子函数：
- bind: 只调用一次，指令第一次绑定到元素时调用。
- inserted: 元素插入到 DOM 中时调用。
- update: 元素所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。
- componentUpdated: 组件更新完成后调用。
- unbind: 指令与元素解绑时调用。
示例：
// 注册一个全局自定义指令Vue.directive('focus', { inserted(el) { // 元素插入到 DOM 后自动获取焦点 el.focus(); }});// 在组件中使用自定义指令export default { directives: { highlight: { bind(el, binding) { // 根据传入的参数修改元素的背景颜色 el.style.backgroundColor = binding.value; } } }};这段文字将被高亮显示
在这个示例中，我们创建了两个自定义指令：v-focus 和 v-highlight。v-focus 指令在元素插入到 DOM 后自动获取焦点，而 v-highlight 指令根据传入的参数修改元素的背景颜色。
1.18、Vue生命周期
Vue.js 组件的生命周期包括创建、挂载、更新和销毁等不同阶段，每个阶段都有对应的生命周期钩子函数可以用来执行特定的逻辑。以下是 Vue.js 组件的生命周期及其对应的钩子函数：
分析生命周期
当前的n值是：{{n}}
点我n+1点我销毁vmVue.config.productionTip = falsenew Vue({el:'#root',// template:`// //当前的n值是：{{n}}
// 点我n+1// // `,data:{n:1},methods: {add(){console.log('add')this.n++},bye(){console.log('bye')this.$destroy()}},watch:{n(){console.log('n变了')}},beforeCreate() {console.log('beforeCreate')},created() {console.log('created')},beforeMount() {console.log('beforeMount')},mounted() {console.log('mounted')},beforeUpdate() {console.log('beforeUpdate')},updated() {console.log('updated')},beforeDestroy() {console.log('beforeDestroy')},destroyed() {console.log('destroyed')},})二、Vue组件化编程
2.1、 模块与组件、模块化与组件化
理解 Vue.js 中的模块（Module）、组件（Component）、模块化（Modularity）和组件化（Componentization）是非常重要的，因为它们是构建 Vue 应用的核心概念。
模块（Module）
在 Vue.js 中，模块通常指的是一种组织代码的方式，用于将相关的功能或资源组织在一起。模块可以是 JavaScript 文件、CSS 文件、图片等资源。模块化开发可以帮助开发者更好地管理代码，提高代码的可维护性和可重用性。
组件（Component）
组件是 Vue.js 中一种抽象的概念，它代表了一个可复用的 UI 单元，可以包含 HTML 结构、CSS 样式和 JavaScript 行为。在 Vue 中，每个组件都是一个 Vue 实例，可以通过组件树的方式组合起来构建复杂的用户界面。
模块化（Modularity）
模块化是一种软件设计的方法，旨在将一个大型系统划分成多个相互独立的模块，每个模块只关注特定的功能或责任。在 Vue.js 中，可以使用 ES6 的模块化语法（例如 import 和 export）或者模块打包工具（例如 webpack）来实现模块化开发。
组件化（Componentization）
组件化是一种将界面拆分成独立可复用的组件的方法，每个组件负责自己的 UI 和行为，并且可以嵌套在其他组件内部。组件化开发可以使代码更易于理解、维护和测试，同时也可以提高开发效率和代码的可重用性。
综上所述，模块化和组件化是 Vue.js 开发中的重要思想，它们帮助开发者更好地组织和管理代码，提高代码质量和可维护性。
2.2、 非单文件组件（不常用）
2.2.1、基本使用
基本使用
{{msg}}
Vue.config.productionTip = false//第一步：创建school组件const school = Vue.extend({ //组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。template:`学校名称：{{schoolName}}
学校地址：{{address}}
`,data(){return {schoolName:'尚硅谷',address:'北京昌平'}}})//第一步：创建student组件const student = Vue.extend({template:`学生姓名：{{studentName}}
学生年龄：{{age}}
`,data(){return {studentName:'JOJO',age:20}}})//创建vmnew Vue({el:'#root',data:{msg:'你好，JOJO！'},//第二步：注册组件（局部注册）components:{school,student}})-
Vue中使用组件的三大步骤：
- 定义组件(创建组件)
- 注册组件
- 使用组件(写组件标签)
-
如何定义一个组件？
使用Vue.extend(options)创建，其中options和new Vue(options)时传入的options几乎一样，但也有点区别：
-
el不要写，为什么？
最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器
-
data必须写成函数，为什么？
避免组件被复用时，数据存在引用关系
-
如何注册组件？
- 局部注册：new Vue的时候传入components选项
- 全局注册：Vue.component(‘组件名’,组件)
-
编写组件标签：
2.2.2、使用注意事项
-
关于组件名：
一个单词组成：
第一种写法（首字母小写）：school
第二种写法（首字母大写）：School
-
多个单词组成：
第一种写法（kebab-case命名）：my-school
第二种写法（CamelCase命名）：MySchool （需要Vue脚手架支持）
-
备注：
组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行
可以使用name配置项指定组件在开发者工具中呈现的名字
-
关于组件标签：
第一种写法：
第二种写法：
备注：不使用脚手架时，会导致后续组件不能渲染
-
一个简写方式：const school = Vue.extend(options)可简写为：const school = options
2.2.3、组件的嵌套
组件的嵌套Vue.config.productionTip = false//定义student组件const student = Vue.extend({template:`学生名称：{{name}}
学生年龄：{{age}}
`,data(){return {name:'JOJO',age:20}}})//定义school组件const school = Vue.extend({template:`学校名称：{{name}}
学校地址：{{address}}
`,components:{student},data(){return {name:'尚硅谷',address:'北京'}}})//定义hello组件const hello = Vue.extend({template:`{{msg}}
`,data(){return {msg:"欢迎学习尚硅谷Vue教程！"}}})//定义app组件const app = Vue.extend({template:``,components:{school,hello}})//创建vmnew Vue({template:``,el:'#root',components:{app}})2.2.4、VueComponent
关于VueComponent：
-
school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的
-
我们只需要写或，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)
-
特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！
-
关于this指向：
- 组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是VueComponent实例对象
- new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是Vue实例对象
2.2.5. 一个重要的内置关系
一个重要的内置关系Vue.config.productionTip = falseVue.prototype.x = 99const school = Vue.extend({name:'school',template:`学校名称：{{name}}
学校地址：{{address}}
点我输出x`,data(){return {name:'尚硅谷',address:'北京'}},methods: {showX(){console.log(this.x)}},})const vm = new Vue({el:'#root',data:{msg:'你好'},components:{school}})- 一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype
- 为什么要有这个关系：让组件实例对象（VueComponent）可以访问到 Vue 原型上的属性、方法
2.3、 单文件组件（常用）
使用单文件组件可以带来以下好处：
-
模块化: 将模板、脚本和样式放在一个文件中，使得组件的逻辑和样式更容易管理和维护。
-
可复用性: 组件可以被多个页面或应用程序共享和重复使用，提高了代码的可重用性。
-
清晰明了: 单文件组件将一个组件的所有相关代码放在一个文件中，使得代码结构更加清晰明了，便于阅读和理解。
-
热重载: 开发环境下，单文件组件支持热重载，可以实时预览修改的效果，提高开发效率。
代码示例：
- School.vue
学校名称：{{name}}
学校地址：{{address}}
点我提示学校名 export default { name:'School', data() { return { name:'尚硅谷', address:'北京' } }, methods: { showName(){ alert(this.name) } }, } #Demo{ background: orange; }- Student.vue
学生姓名：{{name}}
学生年龄：{{age}}
export default { name:'Student', data() { return { name:'JOJO', age:20 } }, }- 引入组件
import School from './School.vue' import Student from './Student.vue' export default { name:'App', components:{ School, Student } }三、使用Vue cli 脚手架
3.1、 初始化脚手架
Vue CLI是一个官方提供的用于快速搭建Vue.js项目的脚手架工具。
官网链接: https://cli.vuejs.org/zh/
安装：
npm install -g @vue/cli# ORyarn global add @vue/cli
脚手架项目结构
.文件目录├── node_modules ├── public│ ├── favicon.ico: 页签图标│ └── index.html: 主页面├── src│ ├── assets: 存放静态资源│ │ └── logo.png│ │── component: 存放组件│ │ └── HelloWorld.vue│ │── App.vue: 汇总所有组件│ └── main.js: 入口文件├── .gitignore: git版本管制忽略的配置├── babel.config.js: babel的配置文件├── package.json: 应用包配置文件 ├── README.md: 应用描述文件└── package-lock.json: 包版本控制文件
3.1.1、render函数
import Vue from 'vue'import App from './App.vue'Vue.config.productionTip = falsenew Vue({ el:'#app', // 简写形式render: h => h(App), // 完整形式// render(createElement){// return createElement(App)// }})关于不同版本的函数：
-
vue.js 与 vue.runtime.xxx.js的区别：
- vue.js 是完整版的 Vue，包含：核心功能+模板解析器
- vue.runtime.xxx.js 是运行版的 Vue，只包含核心功能，没有模板解析器
-
因为 vue.runtime.xxx.js 没有模板解析器，所以不能使用 template 配置项，需要使用 render函数接收到的createElement 函数去指定具体内容
3.1.2、修改默认配置
vue.config.js 是一个可选的配置文件，如果项目的（和 package.json 同级的）根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载，使用 vue.config.js 可以对脚手架进行个性化定制。
以下是一些你可以在vue.config.js中修改的默认配置选项：
- publicPath: 设置打包后静态资源的基本路径，默认是’/'。
- outputDir: 设置打包后的文件输出目录，默认是’dist’。
- assetsDir: 设置放置生成的静态资源（js、css、img、fonts）的目录，默认是’'（即和outputDir同级）。
- indexPath: 设置生成的 index.html 的输出路径，默认是’index.html’。
- productionSourceMap: 设置是否在生产环境下生成 source map，默认是true。
- lintOnSave: 设置是否在开发和生产环境下都进行ESLint检查，默认是true。
- devServer: 设置开发服务器相关的配置，如端口号、代理等。
- chainWebpack: 通过 webpack-chain 来修改内部的 webpack 配置。
- configureWebpack: 如果需要更细粒度的控制，你可以通过该选项直接修改webpack 配置。
下面是一个简单的示例，展示了如何修改默认的输出目录和路径：
// vue.config.jsmodule.exports = { outputDir: 'my-dist', // 将打包后的文件输出到 my-dist 目录 publicPath: process.env.NODE_ENV === 'production' ? '/my-project/' : '/'}在这个示例中，outputDir被设置为’my-dist’，这意味着打包后的文件将会输出到my-dist目录中。publicPath被设置为’/my-project/‘，这意味着在生产环境下静态资源的基本路径为’/my-project/'。
3.2、ref属性
在Vue.js中，ref属性是用来给子组件或DOM元素注册引用的。通过在模板中使用ref属性，你可以在父组件中访问子组件实例或者直接操作DOM元素。
给组件注册引用：
import ChildComponent from './ChildComponent.vue';export default { components: { ChildComponent }, mounted() { // 通过 this.$refs 访问子组件实例 this.$refs.myComponent.methodName(); }}在这个例子中，ref属性被用于给名为myComponent的子组件注册引用。在父组件中，你可以通过this.$refs.myComponent访问子组件的实例，然后调用子组件的方法或者访问其属性。
给DOM元素注册引用：
Focus Input export default { methods: { focusInput() { // 通过 this.$refs 访问DOM元素 this.$refs.myInput.focus(); } }}在这个例子中，ref属性被用于给input元素注册引用。通过this.$refs.myInput，你可以在父组件中访问到该input元素的DOM对象，然后调用其方法或者操作其属性，比如调用focus()方法使输入框获取焦点。
需要注意的是，当你使用ref属性时，Vue会在组件实例中创建一个$refs对象，其中包含了所有通过ref属性注册的引用。但是，尽量避免在模板中滥用ref，因为它会导致代码变得难以维护和理解。
3.3、props配置项
在Vue.js中，props是用来传递数据给子组件的一个重要选项。通过在父组件中使用props选项，你可以将数据传递给子组件，并在子组件中使用这些数据。以下是props配置项的一些常用选项：
-
type: 指定接收的数据类型，可以是预定义的数据类型（如String、Number、Boolean等）或者自定义的构造函数。
-
required: 指定该prop是否是必须的，如果设置为true，当prop的值为undefined时会发出警告。
-
default: 设置prop的默认值，如果父组件没有传递该prop，则会使用默认值。
-
validator: 自定义验证函数，用于验证prop的有效性，如果验证失败会发出警告。
下面是一个简单的例子，展示了如何在父组件中通过props选项向子组件传递数据：
import ChildComponent from './ChildComponent.vue';export default { components: { ChildComponent }, data() { return { parentMessage: 'Hello from Parent!' }; }}{{ message }}
export default { props: { // 声明一个名为message的prop，类型为String，并指定默认值 message: { type: String, default: 'Default message' } }}在这个例子中，父组件ParentComponent通过props将名为parentMessage的数据传递给子组件ChildComponent的message prop。在子组件中，通过props选项声明了一个名为message的prop，并指定了其类型为String，并设置了默认值。然后在子组件的模板中就可以使用message来访问父组件传递过来的数据了。
接收数据方式：
-
第一种方式（只接收）：props:['name']
-
第二种方式（限制数据类型）：props:{name:String}
-
第三种方式（限制类型、限制必要性、指定默认值）：
props:{ name:{ type:String, //类型 required:true, //必要性 default:'JOJO' //默认值 }}props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据
3.4、mixin混入
Mixin（混入）是一种在Vue.js中用于组件复用的机制。它允许你在多个组件之间共享相同的功能。Mixin本质上是一个包含了一组可复用选项（如data、methods、computed等）的对象。
通过在组件的mixins选项中引入Mixin，可以将Mixin中的选项合并到组件自身的选项中，从而实现功能的复用。可以把多个组件共用的配置提取成一个混入对象
- 局部混入： mixins:['xxx']
1、src/mixin.js:
export const mixin = { methods: { showName() { alert(this.name) } }, mounted() { console.log("你好呀~") }}2、src/components/School.vue
学校姓名：{{name}}
学校地址：{{address}}
//引入混入 import {mixin} from '../mixin' export default { name:'School', data() { return { name:'尚硅谷',address:'北京' } }, mixins:[mixin] }3、src/components/Student.vue:
学生姓名：{{name}}
学生性别：{{sex}}
//引入混入 import {mixin} from '../mixin' export default { name:'Student', data() { return { name:'JOJO',sex:'男' } },mixins:[mixin] }4、src/App.vue:
import Student from './components/Student.vue' import School from './components/School.vue' export default { name:'App', components: { Student,School }, }- 全局混入： Vue.mixin(xxx)
1、src/main.js:
import Vue from 'vue'import App from './App.vue'import {mixin} from './mixin'Vue.config.productionTip = falseVue.mixin(mixin)new Vue({ el:"#app", render: h => h(App)})3.5、plugin插件
Vue.js的插件（plugin）是一种可重用的Vue.js功能模块，可以在Vue应用中轻松地引入和使用。插件通常用于封装常用功能、工具或第三方库，并提供给Vue应用使用。用于增强Vue。
要创建一个Vue插件，通常需要执行以下步骤：
- 编写插件代码：编写一个JavaScript文件，定义插件的功能和API。
- 注册插件：在Vue应用中注册插件，通常在Vue实例创建之前进行注册。
- 使用插件：在Vue组件或全局上下文中使用插件提供的功能。
假设我们要创建一个简单的Vue插件，用于在控制台输出一条消息。首先，创建一个名为console-plugin.js的文件：
// console-plugin.jsconst ConsolePlugin = { // 定义插件的安装方法 install(Vue, options) { // 添加一个全局方法 Vue.prototype.$logMessage = function (message) { console.log(message); }; }};export default ConsolePlugin;然后，在Vue应用中注册插件：
import Vue from 'vue';import ConsolePlugin from './console-plugin';// 注册插件Vue.use(ConsolePlugin);
现在，我们可以在Vue组件中使用该插件提供的方法，在控制台输出消息：
Click me export default { methods: { logHello() { // 使用插件提供的方法 this.$logMessage('Hello from Vue plugin!'); } }};这样，当用户点击按钮时，控制台将输出"Hello from Vue plugin!"。
3.6、scoped样式
Vue.js中的scoped样式是一种用于在组件中实现样式隔离的技术。通过scoped样式，可以确保组件的样式只应用于该组件的DOM元素，而不会影响其他组件或全局样式。让样式在局部生效，防止冲突。
在Vue组件中使用scoped样式非常简单，只需在标签上添加scoped属性即可。例如：
这是一个示例组件
export default { name: 'ExampleComponent'};.example { background-color: lightblue; padding: 20px;}p { color: red;}在这个示例中，.example类的样式和p标签的样式都只会应用于当前组件的DOM元素，不会影响到其他组件或全局样式。
使用scoped样式有助于确保样式的局部作用范围，避免样式污染和命名冲突，并提高组件的可维护性。
示例：
1、src/components/School.vue:
学校姓名：{{name}}
学校地址：{{address}}
export default { name:'School', data() { return { name:'尚硅谷',address:'北京' } } } .demo{ background-color: blueviolet; }2、src/components/Student.vue
学生姓名：{{name}}
学生性别：{{sex}}
export default { name:'Student', data() { return { name:'JOJO',sex:'男' } } } .demo{ background-color: chartreuse; }3、src/App.vue:
import Student from './components/Student.vue' import School from './components/School.vue' export default { name:'App', components: { Student,School }, }3.7、Todo-List案例
1、src/components/MyHeader.vue:
import {nanoid} from 'nanoid' export default { name:'MyHeader', data() { return { title:'' } }, methods:{ add(){ if(!this.title.trim()) return const todoObj = {id:nanoid(),title:this.title,done:false} this.addTodo(todoObj) this.title = '' } }, props:['addTodo'] } .todo-header input { width: 560px; height: 28px; font-size: 14px; border: 1px solid #ccc; border-radius: 4px; padding: 4px 7px; } .todo-header input:focus { outline: none; border-color: rgba(82, 168, 236, 0.8); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); }2、src/components/MyItem.vue:
- {{todo.title}} 删除 export default { name:'MyItem', props:['todo','checkTodo','deleteTodo'], methods:{ handleCheck(id){ this.checkTodo(id) }, handleDelete(id,title){ if(confirm("确定删除任务："+title+"吗？")){ this.deleteTodo(id) } } } } li { list-style: none; height: 36px; line-height: 36px; padding: 0 5px; border-bottom: 1px solid #ddd; } li label { float: left; cursor: pointer; } li label li input { vertical-align: middle; margin-right: 6px; position: relative; top: -1px; } li button { float: right; display: none; margin-top: 3px; } li:before { content: initial; } li:last-child { border-bottom: none; } li:hover { background-color: #eee; } li:hover button{ display: block; }
3、src/components/MyList.vue:
4、src/App.vue:
import MyHeader from './components/MyHeader.vue' import MyList from './components/MyList.vue' import MyFooter from './components/MyFooter.vue' export default { name:'App', components: { MyHeader,MyList,MyFooter }, data() { return { todos:[ {id:'001',title:'抽烟',done:false}, {id:'002',title:'喝酒',done:false}, {id:'003',title:'烫头',done:false}, ] } }, methods:{ //添加一个todo addTodo(todoObj){ this.todos.unshift(todoObj) }, //勾选or取消勾选一个todo checkTodo(id){ this.todos.forEach((todo)=>{ if(todo.id === id) todo.done = !todo.done }) }, //删除一个todo deleteTodo(id){ this.todos = this.todos.filter(todo => todo.id !== id) }, //全选or取消勾选 checkAllTodo(done){ this.todos.forEach(todo => todo.done = done) }, //删除已完成的todo clearAllTodo(){ this.todos = this.todos.filter(todo => !todo.done) } } } body { background: #fff; } .btn { display: inline-block; padding: 4px 12px; margin-bottom: 0; font-size: 14px; line-height: 20px; text-align: center; vertical-align: middle; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); border-radius: 4px; } .btn-danger { color: #fff; background-color: #da4f49; border: 1px solid #bd362f; } .btn-danger:hover { color: #fff; background-color: #bd362f; } .btn:focus { outline: none; } .todo-container { width: 600px; margin: 0 auto; } .todo-container .todo-wrap { padding: 10px; border: 1px solid #ddd; border-radius: 5px; }-
组件化编码流程：
- 拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突
- 实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：
- 一个组件在用：放在组件自身即可
- 一些组件在用：放在他们共同的父组件上（状态提升）
- 实现交互：从绑定事件开始
-
props适用于：
- 父组件 ==> 子组件 通信
- 子组件 ==> 父组件 通信（要求父组件先给子组件一个函数）
-
使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的
-
props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做
3.8、WebStorage
Vue.js中的Web Storage是指通过浏览器提供的localStorage和sessionStorage API来在客户端存储数据，以便在页面刷新或重新加载后保留数据。Vue.js通常与Web Storage一起使用，以在应用程序中实现数据的持久性和状态管理。
localStorage
localStorage
点我保存数据
点我读数据
点我删除数据
点我清空数据
let person = {name:"JOJO",age:20} function saveDate(){ localStorage.setItem('msg','localStorage') localStorage.setItem('person',JSON.stringify(person)) } function readDate(){ console.log(localStorage.getItem('msg')) const person = localStorage.getItem('person') console.log(JSON.parse(person)) } function deleteDate(){ localStorage.removeItem('msg') localStorage.removeItem('person') } function deleteAllDate(){ localStorage.clear() }sessionStorage
sessionStorage
点我保存数据
点我读数据
点我删除数据
点我清空数据
let person = {name:"JOJO",age:20} function saveDate(){ sessionStorage.setItem('msg','sessionStorage') sessionStorage.setItem('person',JSON.stringify(person)) } function readDate(){ console.log(sessionStorage.getItem('msg')) const person = sessionStorage.getItem('person') console.log(JSON.parse(person)) } function deleteDate(){ sessionStorage.removeItem('msg') sessionStorage.removeItem('person') } function deleteAllDate(){ sessionStorage.clear() }-
存储内容大小一般支持5MB左右（不同浏览器可能还不一样）
-
浏览器端通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制
-
相关API：
- xxxStorage.setItem('key', 'value')：该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值
- xxxStorage.getItem('key')：该方法接受一个键名作为参数，返回键名对应的值
- xxxStorage.removeItem('key')：该方法接受一个键名作为参数，并把该键名从存储中删除
- xxxStorage.clear()：该方法会清空存储中的所有数据
-
备注：
- SessionStorage存储的内容会随着浏览器窗口关闭而消失
- LocalStorage存储的内容，需要手动清除才会消失
- xxxStorage.getItem(xxx)如果 xxx 对应的 value 获取不到，那么getItem()的返回值是null
- JSON.parse(null)的结果依然是null
使用本地存储优化Todo-List：
src/App.vue:
import MyHeader from './components/MyHeader.vue' import MyList from './components/MyList.vue' import MyFooter from './components/MyFooter.vue' export default { name:'App', components: { MyHeader,MyList,MyFooter }, data() { return { //若localStorage中存有'todos'则从localStorage中取出，否则初始为空数组 todos:JSON.parse(localStorage.getItem('todos')) || [] } }, methods:{ //添加一个todo addTodo(todoObj){ this.todos.unshift(todoObj) }, //勾选or取消勾选一个todo checkTodo(id){ this.todos.forEach((todo)=>{ if(todo.id === id) todo.done = !todo.done }) }, //删除一个todo deleteTodo(id){ this.todos = this.todos.filter(todo => todo.id !== id) }, //全选or取消勾选 checkAllTodo(done){ this.todos.forEach(todo => todo.done = done) }, //删除已完成的todo clearAllTodo(){ this.todos = this.todos.filter(todo => !todo.done) } }, watch:{ todos:{ //由于todos是对象数组，所以必须开启深度监视才能发现数组中对象的变化 deep:true, handler(value){ localStorage.setItem('todos',JSON.stringify(value)) } } } } body { background: #fff; } .btn { display: inline-block; padding: 4px 12px; margin-bottom: 0; font-size: 14px; line-height: 20px; text-align: center; vertical-align: middle; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); border-radius: 4px; } .btn-danger { color: #fff; background-color: #da4f49; border: 1px solid #bd362f; } .btn-danger:hover { color: #fff; background-color: #bd362f; } .btn:focus { outline: none; } .todo-container { width: 600px; margin: 0 auto; } .todo-container .todo-wrap { padding: 10px; border: 1px solid #ddd; border-radius: 5px; }3.9. 自定义事件
在Vue.js中，绑定和解绑自定义事件的过程与绑定和解绑普通事件非常相似。您可以使用$on方法来监听自定义事件，并使用$off方法来停止监听它。
自定义事件的使用场景通常涉及到组件之间的通信和解耦，以下是一些常见的场景：
-
父子组件通信：
- 当子组件需要向父组件传递数据时，可以通过自定义事件来实现。子组件可以通过触发自定义事件并传递数据，从而通知父组件发生了某些事情。
- 例如，在子组件中点击了一个按钮，需要通知父组件进行相应的处理，就可以使用自定义事件来实现。
-
非父子组件通信：
- 当两个组件处于不同的层次或没有直接的父子关系时，它们之间的通信可能会比较困难。这时可以使用一个中央事件总线（Event Bus）来实现组件之间的通信。
- 组件可以向事件总线发送事件，其他组件可以监听这些事件并做出相应的响应。通过事件总线，任意两个组件之间都可以进行通信，实现解耦和灵活性。
-
跨组件通信：
- 当需要在不同的组件之间传递数据或触发某些行为时，可以使用自定义事件来实现跨组件通信。
- 例如，一个全局的导航栏组件需要通知一个商品详情页组件进行数据更新，可以通过自定义事件来实现。
-
组件解耦：
- 使用自定义事件可以帮助解耦组件之间的关系，使它们更加独立和可复用。组件不需要直接引用或依赖其他组件，而是通过事件来进行通信，从而降低了组件之间的耦合度。
总的来说，自定义事件适用于需要实现组件之间解耦、通信和交互的场景，能够提高代码的灵活性和可维护性。但在使用时需要注意避免过度使用，以免造成代码的混乱和不易维护。
- 绑定自定义事件：
在Vue实例或组件中，您可以使用$on方法来绑定自定义事件。例如，在创建Vue实例时或在组件的mounted生命周期钩子中：
// 在Vue实例中绑定自定义事件this.$on('custom-event', this.handleCustomEvent);// 在组件的生命周期钩子中绑定自定义事件mounted() { this.$on('custom-event', this.handleCustomEvent);}- 解绑自定义事件：
您可以使用$off方法来解绑自定义事件。在解绑时，您可以选择性地指定要解绑的事件处理程序，如果没有指定，则会解绑所有与该事件相关的处理程序。
// 解绑指定事件处理程序this.$off('custom-event', this.handleCustomEvent);// 解绑所有与该事件相关的处理程序this.$off('custom-event');请注意，在Vue.js中，如果您没有显式解绑自定义事件，Vue实例或组件销毁时会自动清理所有自定义事件监听器，因此通常情况下您不必担心手动解绑事件。
这样，您就可以在Vue.js应用中绑定和解绑自定义事件，实现组件之间的通信和交互。
- 绑定示例：
src/App.vue:
import Student from './components/Student.vue' import School from './components/School.vue' export default { name:'App', components: { Student,School }, methods:{ getSchoolName(name){ console.log("已收到学校的名称："+name) }, getStudentName(name){ console.log("已收到学生的姓名："+name) } }, mounted(){ this.$refs.student.$on('jojo',this.getStudentName) } } .app{ background-color: gray; padding: 5px; }src/components/Student.vue:
学生姓名：{{name}}
学生性别：{{sex}}
点我传递学生姓名 export default { name:'Student', data() { return { name:'JOJO',sex:'男' } }, methods:{ sendStudentName(){ this.$emit('jojo',this.name) } } } .student{ background-color: chartreuse; padding: 5px;margin-top: 30px; }- 解绑示例：
src/App.vue:
import Student from './components/Student.vue' export default { name:'App', components: { Student }, methods:{ getStudentName(name){ console.log("已收到学生的姓名："+name) } } }.app{background-color: gray;padding: 5px;}src/components/Student.vue:
学生姓名：{{name}}
学生性别：{{sex}}
点我传递学生姓名 解绑自定义事件 export default { name:'Student', data() { return { name:'JOJO',sex:'男' } }, methods:{ sendStudentName(){ this.$emit('jojo',this.name) }, unbind(){ // 解绑一个自定义事件 // this.$off('jojo') // 解绑多个自定义事件 // this.$off(['jojo']) // 解绑所有自定义事件 this.$off() } } } .student{ background-color: chartreuse; padding: 5px;margin-top: 30px; }组件的自定义事件：
-
一种组件间通信的方式，适用于：子组件 > 父组件
-
使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）
-
绑定自定义事件：
-
第一种方式，在父组件中： 或
-
第二种方式，在父组件中：
... mounted(){ this.$refs.demo.$on('atguigu',data) }- 若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法
-
触发自定义事件：this.$emit('atguigu',数据)
-
解绑自定义事件：this.$off('atguigu')
-
组件上也可以绑定原生DOM事件，需要使用native修饰符
-
注意：通过this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！
3.10、全局事件总线
全局事件总线是一种可以在任意组件间通信的方式，本质上就是一个对象。它必须满足以下条件：1. 所有的组件对象都必须能看见他 2. 这个对象必须能够使用$on、$emit和$off方法去绑定、触发和解绑事件。
1、src/main.js:
import Vue from 'vue'import App from './App.vue'Vue.config.productionTip = falsenew Vue({el:'#app',render: h => h(App),beforeCreate() {Vue.prototype.$bus = this //安装全局事件总线}})2、src/App.vue:
import Student from './components/Student'import School from './components/School'export default {name:'App',components:{School,Student}}.app{background-color: gray;padding: 5px;}3、src/components/School.vue:
学校名称：{{name}}
学校地址：{{address}}
export default {name:'School',data() {return {name:'尚硅谷',address:'北京',}},methods:{demo(data) {console.log('我是School组件，收到了数据：',data)}},mounted() {this.$bus.$on('demo',this.demo)},beforeDestroy() {this.$bus.$off('demo')},}.school{background-color: skyblue;padding: 5px;}4、src/components/Student.vue:
学生姓名：{{name}}
学生性别：{{sex}}
把学生名给School组件export default {name:'Student',data() {return {name:'张三',sex:'男'}},methods: {sendStudentName(){this.$bus.$emit('demo',this.name)}}}.student{background-color: pink;padding: 5px;margin-top: 30px;}全局事件总线（GlobalEventBus）：
-
一种组件间通信的方式，适用于任意组件间通信
-
安装全局事件总线：
new Vue({ ... beforeCreate() { Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm }, ...}) -
使用事件总线：
- 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身
export default { methods(){ demo(data){...} } ... mounted() { this.$bus.$on('xxx',this.demo) } }- 提供数据：this.$bus.$emit('xxx',data)
-
最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件
3.11、消息的订阅与发布
1、src/components/School.vue:
学校名称：{{name}}
学校地址：{{address}}
import pubsub from 'pubsub-js'export default {name:'School',data() {return {name:'尚硅谷',address:'北京',}},methods:{demo(msgName,data) {console.log('我是School组件，收到了数据：',data)}},mounted() {this.pubId = pubsub.subscribe('demo',this.demo) //订阅消息},beforeDestroy() {pubsub.unsubscribe(this.pubId) //取消订阅}}.school{background-color: skyblue;padding: 5px;}2、src/components/Student.vue:
学生姓名：{{name}}
学生性别：{{sex}}
把学生名给School组件import pubsub from 'pubsub-js'export default {name:'Student',data() {return {name:'JOJO',sex:'男',}},methods: {sendStudentName(){pubsub.publish('demo',this.name) //发布消息}}}.student{background-color: pink;padding: 5px;margin-top: 30px;}消息订阅与发布（pubsub）：
-
消息订阅与发布是一种组件间通信的方式，适用于任意组件间通信
-
使用步骤：
-
安装pubsub：npm i pubsub-js
-
引入：import pubsub from 'pubsub-js'
-
接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身
export default { methods(){ demo(data){...} } ... mounted() { this.pid = pubsub.subscribe('xxx',this.demo) } } -
提供数据：pubsub.publish('xxx',data)
-
-
最好在beforeDestroy钩子中，使用pubsub.unsubscribe(pid)取消订阅
3.12、$nextTick
$nextTick 是 Vue.js 中的一个异步更新队列管理工具，它允许您在 DOM 更新之后执行特定的操作。通常情况下，当您修改了 Vue 实例的数据时，Vue 异步地更新 DOM。这意味着，当您修改了数据后，DOM 并不会立即更新，而是会在下一个 DOM 更新周期中才会反映这些变化。
这就是 $nextTick 的作用发挥的时候了。它允许您在 Vue 实例更新 DOM 之后执行代码，以确保在对更新后的 DOM 进行操作时，您能够获取到最新的 DOM 结构。
使用 $nextTick 的基本方式如下：
// 在数据发生变化后，等待 DOM 更新后执行特定的操作this.$nextTick(() => { // 在这里执行您需要的操作，确保 DOM 已经更新});例如，在一次数据更新后，您可能需要获取更新后的 DOM 元素的尺寸或位置，或者执行其他依赖于更新后 DOM 结构的操作，那么您就可以使用 $nextTick 来确保在合适的时机执行这些操作。
请注意，$nextTick 是异步的，因此您在回调函数中执行的操作会在下一个 DOM 更新周期中执行，而不是立即执行。这使得 $nextTick 特别适合于处理与 DOM 相关的操作。
使用$nextTick优化Todo-List：
1、src/App.vue:
import pubsub from 'pubsub-js' import MyHeader from './components/MyHeader.vue' import MyList from './components/MyList.vue' import MyFooter from './components/MyFooter.vue' export default { name:'App', components: { MyHeader,MyList,MyFooter }, data() { return { todos:JSON.parse(localStorage.getItem('todos')) || [] } }, methods:{ //添加一个todo addTodo(todoObj){ this.todos.unshift(todoObj) }, //勾选or取消勾选一个todo checkTodo(_,id){ this.todos.forEach((todo)=>{ if(todo.id === id) todo.done = !todo.done }) }, //删除一个todo deleteTodo(id){ this.todos = this.todos.filter(todo => todo.id !== id) }, //更新一个todoupdateTodo(id,title){this.todos.forEach((todo)=>{if(todo.id === id) todo.title = title})}, //全选or取消勾选 checkAllTodo(done){ this.todos.forEach(todo => todo.done = done) }, //删除已完成的todo clearAllTodo(){ this.todos = this.todos.filter(todo => !todo.done) } }, watch:{ todos:{ deep:true, handler(value){ localStorage.setItem('todos',JSON.stringify(value)) } } }, mounted(){ this.pubId = pubsub.subscribe('checkTodo',this.checkTodo) this.$bus.$on('deleteTodo',this.deleteTodo) this.$bus.$on('updateTodo',this.updateTodo) }, beforeDestroy(){ pubsub.unsubscribe(this.pubId) this.$bus.$off('deleteTodo') this.$bus.$off('updateTodo') } } body { background: #fff; } .btn { display: inline-block; padding: 4px 12px; margin-bottom: 0; font-size: 14px; line-height: 20px; text-align: center; vertical-align: middle; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); border-radius: 4px; } .btn-danger { color: #fff; background-color: #e04e49; border: 1px solid #bd362f; } .btn-danger:hover { color: #fff; background-color: #bd362f; } .btn-info { color: #fff; background-color: rgb(50, 129, 233); border: 1px solid rgb(1, 47, 212); margin-right: 5px; } .btn-info:hover { color: #fff; background-color: rgb(1, 47, 212); } .btn:focus { outline: none; } .todo-container { width: 600px; margin: 0 auto; } .todo-container .todo-wrap { padding: 10px; border: 1px solid #ddd; border-radius: 5px; }2、src/components/MyItem.vue:
- {{todo.title}} 删除 编辑 import pubsub from 'pubsub-js' export default { name:'MyItem', props:['todo'], methods:{ handleCheck(id){ pubsub.publish('checkTodo',id) }, handleDelete(id,title){ if(confirm("确定删除任务："+title+"吗？")){ this.$bus.$emit('deleteTodo',id) } }, handleEdit(todo){ // 如果todo自身有isEdit属性就将isEdit改成trueif(Object.prototype.hasOwnProperty.call(todo,'isEdit')){todo.isEdit = true}else{ // 如果没有就向todo中添加一个响应式的isEdit属性并设为truethis.$set(todo,'isEdit',true)} // 当Vue重新编译模板之后执行$nextTick()中的回调函数 this.$nextTick(function(){ // 使input框获取焦点 this.$refs.inputTitle.focus() })}, // 当input框失去焦点时更新 handleBlur(todo,event){ todo.isEdit = falseif(!event.target.value.trim()) return alert('输入不能为空！')this.$bus.$emit('updateTodo',todo.id,event.target.value) } } } li { list-style: none; height: 36px; line-height: 36px; padding: 0 5px; border-bottom: 1px solid #ddd; } li label { float: left; cursor: pointer; } li label li input { vertical-align: middle; margin-right: 6px; position: relative; top: -1px; } li button { float: right; display: none; margin-top: 3px; } li:before { content: initial; } li:last-child { border-bottom: none; } li:hover { background-color: #eee; } li:hover button{ display: block; }
3.13、过渡与动画
Vue.js 提供了过渡和动画的内置支持，使得在 Vue 组件中添加动画效果变得更加容易。您可以使用 Vue 提供的 和 组件，或者使用 CSS 过渡和动画来实现这些效果。
-
使用 组件：
组件可以用来在元素插入、更新或移除时应用过渡效果。它是 Vue 内置的组件，通过设置不同的名为 name 的属性值，可以触发不同的过渡效果。
Hello, Vue!
在上面的示例中，当 show 变为 true 时， 元素会以渐隐渐现的方式进行显示和隐藏。
-
使用 组件：
组件可以对列表或多个元素进行过渡效果的控制，同样也是 Vue 内置的组件。它通过设置不同的 name 属性值，可以触发不同的过渡效果。
- {{ item.text }}
在上面的示例中，当 items 数组发生变化时，列表中的元素会以一定的过渡效果进行更新。
-
-
使用 CSS 过渡和动画：
您还可以通过使用 CSS 过渡和动画来实现更复杂的动画效果。Vue 提供了一些钩子类名，您可以在 CSS 中使用这些类名来定义过渡效果。
.fade-enter-active, .fade-leave-active { transition: opacity 0.5s;}.fade-enter, .fade-leave-to /* .fade-leave-active in opacity: 0;} data() { return { show: false }; }, methods: { toggle() { this.show = !this.show; } }}; transition: opacity 0.5s;}.fade-enter, .fade-leave-to /* .fade-leave-active in opacity: 0;} data() { return { show: false }; }, methods: { toggle() { this.show = !this.show; } }}; width: 200px; height: 200px; background-color: lightblue;}.fade-enter-active, .fade-leave-active { transition: opacity 0.5s;}.fade-enter, .fade-leave-to /* .fade-leave-active in opacity: 0;} methods: { fetchData() { axios.get('https://api.example.com/data') .then(response = { // 请求成功处理数据 console.log(response.data); }) .catch(error = { // 请求失败处理错误 console.error('Error fetching data:', error); }); } }}; methods: { sendData() { const postData = { key1: 'value1', key2: 'value2' }; axios.post('https://api.example.com/postData', postData) .then(response = { // 请求成功处理响应 console.log('Response after POST request:', response.data); }) .catch(error => { // 请求失败处理错误 console.error('Error sending data:', error); }); } }};在上面的示例中，我们使用 axios.post() 方法发送了一个 POST 请求，并传递了要发送的数据对象 postData，然后在 .then() 方法中处理了成功响应的数据，同时在 .catch() 方法中处理了请求失败的情况。
这些示例展示了如何在 Vue.js 中使用 Axios 库发送 GET 和 POST 请求，以便与后端 API 进行通信。
4.2、Vue脚手架配置代理
vue.config.js:
module.exports = { pages: { index: { entry: 'src/main.js', }, }, lintOnSave:false, // 开启代理服务器（方式一） // devServer: { // proxy:'http://localhost:5000' // } //开启代理服务器（方式二）devServer: { proxy: { '/jojo': { target: 'http://localhost:5000', pathRewrite:{'^/jojo':''}, // ws: true, //用于支持websocket,默认值为true // changeOrigin: true //用于控制请求头中的host值,默认值为true }, '/atguigu': { target: 'http://localhost:5001', pathRewrite:{'^/atguigu':''}, // ws: true, //用于支持websocket,默认值为true // changeOrigin: true //用于控制请求头中的host值,默认值为true } } }}src/App.vue:
获取学生信息
获取汽车信息 import axios from 'axios' export default { name:'App', methods: {getStudents(){axios.get('http://localhost:8080/jojo/students').then(response => {console.log('请求成功了',response.data)},error => {console.log('请求失败了',error.message)})}, getCars(){axios.get('http://localhost:8080/atguigu/cars').then(response => {console.log('请求成功了',response.data)},error => {console.log('请求失败了',error.message)})} } }vue脚手架配置代理服务器：
- 方法一：在vue.config.js中添加如下配置：
devServer:{ proxy:"http://localhost:5000"}说明：
1. 优点：配置简单，请求资源时直接发给前端即可
2. 缺点：不能配置多个代理，不能灵活的控制请求是否走代理
3. 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源）
- 方法二：
devServer: { proxy: { '/api1': { // 匹配所有以 '/api1'开头的请求路径 target: 'http://localhost:5000',// 代理目标的基础路径 changeOrigin: true, pathRewrite: {'^/api1': ''} }, '/api2': { // 匹配所有以 '/api2'开头的请求路径 target: 'http://localhost:5001',// 代理目标的基础路径 changeOrigin: true, pathRewrite: {'^/api2': ''} } }}// changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000// changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080说明：
1. 优点：可以配置多个代理，且可以灵活的控制请求是否走代理
2. 缺点：配置略微繁琐，请求资源时必须加前缀
4.3、GitHub用户搜索案例
public/index.html:
src/main.js:
import Vue from 'vue'import App from './App.vue'Vue.config.productionTip = falsenew Vue({ el:"#app", render: h => h(App), beforeCreate(){ Vue.prototype.$bus = this }})src/App.vue:
import Search from './components/Search.vue'import List from './components/List.vue' export default { name:'App',components:{Search,List},}src/components/Search.vue:
Search Github Users
Search import axios from 'axios' export default { name:'Search', data() { return { keyWord:'' } }, methods: { getUsers(){ //请求前更新List的数据this.$bus.$emit('updateListData',{isLoading:true,errMsg:'',users:[],isFirst:false})axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(response => {console.log('请求成功了')//请求成功后更新List的数据this.$bus.$emit('updateListData',{isLoading:false,errMsg:'',users:response.data.items})},error => {//请求后更新List的数据this.$bus.$emit('updateListData',{isLoading:false,errMsg:error.message,users:[]})}) } } }src/components/List.vue:
{{user.login}}
欢迎使用！
加载中...
{{errMsg}}
export default { name:'List', data() { return { info:{ isFirst:true, isLoading:false, errMsg:'', users:[] } } }, mounted(){ this.$bus.$on('updateListData',(dataObj)=>{ //动态合并两个对象的属性 this.info = {...this.info,...dataObj} }) }, beforeDestroy(){ this.$bus.$off('updateListData') } } .album {min-height: 50rem; /* Can be removed; just added for demo purposes */padding-top: 3rem;padding-bottom: 3rem;background-color: #f7f7f7;}.card {float: left;width: 33.333%;padding: .75rem;margin-bottom: 2rem;border: 1px solid #efefef;text-align: center;}.card > img {margin-bottom: .75rem;border-radius: 100px;}.card-text {font-size: 85%;}4.4、slot插槽
Vue 中的插槽（slot）是一种机制，允许您在组件中定义可扩展的模板部分，以便父组件可以在使用该组件时填充具体内容。
作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于==父组件 > 子组件
4.4.1、默认插槽
src/App.vue:
- {{g}}
src/components/Category.vue:
{{title}}分类
我是一些默认值，当使用者没有传递具体结构时，我会出现export default {name:'Category',props:['title']}.category{background-color: skyblue;width: 200px;height: 300px;}h3{text-align: center;background-color: orange;}video{width: 100%;}img{width: 100%;}4.4.2、具名插槽
src/App.vue:
更多美食
- {{g}}
欢迎前来观影
import Category from './components/Category'export default {name:'App',components:{Category},data() {return {games:['植物大战僵尸','红色警戒','空洞骑士','王国']}},}.container,.foot{display: flex;justify-content: space-around;}h4{text-align: center;}src/components/Category.vue:
{{title}}分类
我是一些默认值，当使用者没有传递具体结构时，我会出现1 我是一些默认值，当使用者没有传递具体结构时，我会出现2export default {name:'Category',props:['title']}.category{background-color: skyblue;width: 200px;height: 300px;}h3{text-align: center;background-color: orange;}video{width: 100%;}img{width: 100%;}4.4.3、作用域插槽
src/App.vue:
- {{g}}
- {{g}}
{{g}}
import Category from './components/Category'export default {name:'App',components:{Category}}.container,.foot{display: flex;justify-content: space-around;}h4{text-align: center;}src/components/Category.vue:
{{title}}分类
我是一些默认值，当使用者没有传递具体结构时，我会出现1export default {name:'Category',props:['title'], data() {return {games:['植物大战僵尸','红色警戒','空洞骑士','王国']}},}.category{background-color: skyblue;width: 200px;height: 300px;}h3{text-align: center;background-color: orange;}video{width: 100%;}img{width: 100%;}五、Vuex
5.1、理解vuex
概念：专门在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，对 vue 应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。
在 Vuex 中，存在以下几个核心概念：
-
State（状态）： Vuex 使用单一状态树，即将所有组件的状态存储在一个对象中。这使得我们能够轻松地跟踪整个应用程序的状态。
-
Getter（获取器） ： Getter 类似于 Vue 中的计算属性，允许我们在 Vuex 中派生出一些状态，以供组件使用。
-
Mutation（突变） ： Mutation 是更改状态的唯一方式。每个 mutation 都有一个字符串类型的事件类型（type）和一个回调函数，该回调函数会接收当前状态作为第一个参数，以及可选的额外参数作为第二个参数。
-
Action（动作）： Action 提交 mutation，而不是直接变更状态。它可以包含任意异步操作。
-
Module（模块） ： Vuex 允许将 Store 分割成模块（module）。每个模块都具有自己的 state、getter、mutation 和 action。
Vuex工作原理图：
Vuex 适用于以下几种场景：
-
大型单页面应用程序（SPA）： 当您的应用程序变得复杂，并且多个组件共享状态时，Vuex 可帮助您更好地管理应用程序的状态。通过将状态集中存储在 Vuex 的单一状态树中，可以更轻松地跟踪和调试应用程序的状态变化。
-
组件通信： 当多个组件需要共享状态或需要通信时，使用 Vuex 可以更清晰地管理这些组件之间的数据流。通过将状态存储在 Vuex 中，组件可以更容易地访问和修改共享状态，而不需要通过多层嵌套的 props 和事件传递数据。
-
异步操作管理： 当您的应用程序需要执行异步操作（例如从服务器获取数据）并根据操作结果更新状态时，Vuex 的 actions 可以帮助您更好地管理这些异步操作。通过将异步操作封装在 action 中，并使用 mutation 更新状态，可以更清晰地跟踪和处理异步操作。
-
路由状态管理： 当您的应用程序需要根据路由状态进行不同的操作或显示不同的内容时，Vuex 可以与 Vue Router 配合使用，帮助您更好地管理路由状态。通过将路由状态存储在 Vuex 中，并根据路由状态更新应用程序的状态，可以更容易地实现复杂的路由逻辑和页面交互。
总之，Vuex 适用于任何需要跨组件共享状态、管理异步操作、或管理路由状态的场景，并且可以帮助您更好地组织和管理应用程序的状态和数据流。
下载vuex：npm i vuex
5.2、求和案例
5.2.1、使用纯vue编写:
src/App.vue:
import Count from './components/Count'export default {name:'App',components:{Count}}src/components/Count.vue:
当前求和为：{{sum}}
123+-当前求和为奇数再加等一等再加export default {name:'Count',data() {return {n:1, //用户选择的数字sum:0 //当前的和}},methods: {increment(){this.sum += this.n},decrement(){this.sum -= this.n},incrementOdd(){if(this.sum % 2){this.sum += this.n}},incrementWait(){setTimeout(()=>{this.sum += this.n},500)},},}button{margin-left: 5px;}5.2.2、使用vuex编写:
-
下载 Vuex：npm i vuex
-
创建src/store/index.js：
//引入Vue核心库import Vue from 'vue'//引入Vueximport Vuex from 'vuex'//应用Vuex插件Vue.use(Vuex) //准备actions对象——响应组件中用户的动作、处理业务逻辑const actions = {}//准备mutations对象——修改state中的数据const mutations = {}//准备state对象——保存具体的数据const state = {} //创建并暴露storeexport default new Vuex.Store({ actions, mutations, state}) -
在src/main.js中创建 vm 时传入store配置项：
import Vue from 'vue'import App from './App.vue'import Vuex from 'vuex'import store from './store'Vue.config.productionTip = falseVue.use(Vuex)new Vue({ el:"#app", render: h => h(App), store}) -
使用Vuex编写:
src/components/Count.vue:
当前求和为：{{$store.state.sum}}
123+-当前求和为奇数再加等一等再加export default {name:'Count',data() {return {n:1, //用户选择的数字}},methods: {increment(){this.$store.commit('ADD',this.n)},decrement(){this.$store.commit('SUBTRACT',this.n)},incrementOdd(){this.$store.dispatch('addOdd',this.n)},incrementWait(){this.$store.dispatch('addWait',this.n)},},}button{margin-left: 5px;}src/store/index.js:
//引入Vue核心库import Vue from 'vue'//引入Vueximport Vuex from 'vuex'//应用Vuex插件Vue.use(Vuex) //准备actions对象——响应组件中用户的动作const actions = { addOdd(context,value){ console.log("actions中的addOdd被调用了") if(context.state.sum % 2){ context.commit('ADD',value) } }, addWait(context,value){ console.log("actions中的addWait被调用了") setTimeout(()=>{context.commit('ADD',value)},500) },}//准备mutations对象——修改state中的数据const mutations = { ADD(state,value){ state.sum += value }, SUBTRACT(state,value){ state.sum -= value }}//准备state对象——保存具体的数据const state = { sum:0 //当前的和} //创建并暴露storeexport default new Vuex.Store({ actions, mutations, state})Vuex的基本使用：
- 初始化数据state，配置actions、mutations，操作文件store.js
//引入Vue核心库 import Vue from 'vue' //引入Vuex import Vuex from 'vuex' //引用Vuex Vue.use(Vuex) const actions = { //响应组件中加的动作 jia(context,value){ // console.log('actions中的jia被调用了',miniStore,value) context.commit('JIA',value) }, } const mutations = { //执行加 JIA(state,value){ // console.log('mutations中的JIA被调用了',state,value) state.sum += value } } //初始化数据 const state = { sum:0 } //创建并暴露store export default new Vuex.Store({ actions, mutations, state, })-
组件中读取vuex中的数据：$store.state.sum
-
组件中修改vuex中的数据：$store.dispatch('action中的方法名',数据) 或 $store.commit('mutations中的方法名',数据)
-
备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接编写commit
5.3、getters配置项
src/Count.vue:
当前求和为：{{$store.state.sum}}
当前求和的10倍为：{{$store.getters.bigSum}}
123+-当前求和为奇数再加等一等再加export default {name:'Count',data() {return {n:1, //用户选择的数字}},methods: {increment(){this.$store.commit('ADD',this.n)},decrement(){this.$store.commit('SUBTRACT',this.n)},incrementOdd(){this.$store.dispatch('addOdd',this.n)},incrementWait(){this.$store.dispatch('addWait',this.n)},},}button{margin-left: 5px;}src/store/index.js:
//引入Vue核心库import Vue from 'vue'//引入Vueximport Vuex from 'vuex'//应用Vuex插件Vue.use(Vuex) //准备actions对象——响应组件中用户的动作const actions = { addOdd(context,value){ console.log("actions中的addOdd被调用了") if(context.state.sum % 2){ context.commit('ADD',value) } }, addWait(context,value){ console.log("actions中的addWait被调用了") setTimeout(()=>{context.commit('ADD',value)},500) },}//准备mutations对象——修改state中的数据const mutations = { ADD(state,value){ state.sum += value }, SUBTRACT(state,value){ state.sum -= value }}//准备state对象——保存具体的数据const state = { sum:0 //当前的和}//准备getters对象——用于将state中的数据进行加工const getters = { bigSum(){ return state.sum * 10 }} //创建并暴露storeexport default new Vuex.Store({ actions, mutations, state, getters})getters配置项的使用：
-
概念：当state中的数据需要经过加工后再使用时，可以使用getters加工
-
在store.js中追加getters配置
... const getters = { bigSum(state){ return state.sum * 10 } } //创建并暴露store export default new Vuex.Store({ ... getters }) -
组件中读取数据：$store.getters.bigSum
5.4、四个map方法的使用
5.4.1、mapState与mapGetters
src/store/index.js:
//引入Vue核心库import Vue from 'vue'//引入Vueximport Vuex from 'vuex'//应用Vuex插件Vue.use(Vuex) //准备actions对象——响应组件中用户的动作const actions = { addOdd(context,value){ console.log("actions中的addOdd被调用了") if(context.state.sum % 2){ context.commit('ADD',value) } }, addWait(context,value){ console.log("actions中的addWait被调用了") setTimeout(()=>{context.commit('ADD',value)},500) },}//准备mutations对象——修改state中的数据const mutations = { ADD(state,value){ state.sum += value }, SUBTRACT(state,value){ state.sum -= value }}//准备state对象——保存具体的数据const state = { sum:0, //当前的和 name:'JOJO', school:'尚硅谷',}//准备getters对象——用于将state中的数据进行加工const getters = { bigSum(){ return state.sum * 10 }} //创建并暴露storeexport default new Vuex.Store({ actions, mutations, state, getters})src/components/Count.vue:
当前求和为：{{sum}}
当前求和的10倍为：{{bigSum}}
我是{{name}}，我在{{school}}学习
123+-当前求和为奇数再加等一等再加import {mapState,mapGetters} from 'vuex'export default {name:'Count',data() {return {n:1, //用户选择的数字}},methods: {increment(){this.$store.commit('ADD',this.n)},decrement(){this.$store.commit('SUBTRACT',this.n)},incrementOdd(){this.$store.dispatch('addOdd',this.n)},incrementWait(){this.$store.dispatch('addWait',this.n)},},computed:{// 借助mapState生成计算属性（数组写法）// ...mapState(['sum','school','name']),// 借助mapState生成计算属性（对象写法）...mapState({sum:'sum',school:'school',name:'name'}),...mapGetters(['bigSum'])}}button{margin-left: 5px;}总结：
- mapState方法：用于帮助我们映射state中的数据
computed: { //借助mapState生成计算属性：sum、school、subject（对象写法） ...mapState({sum:'sum',school:'school',subject:'subject'}), //借助mapState生成计算属性：sum、school、subject（数组写法） ...mapState(['sum','school','subject']),}, - mapGetters方法：用于帮助我们映射getters中的数据
computed: { //借助mapGetters生成计算属性：bigSum（对象写法） ...mapGetters({bigSum:'bigSum'}), //借助mapGetters生成计算属性：bigSum（数组写法） ...mapGetters(['bigSum'])},
5.4.2、mapActions与mapMutations
src/components/Count.vue:
当前求和为：{{sum}}
当前求和的10倍为：{{bigSum}}
我是{{name}}，我在{{school}}学习
123+-当前求和为奇数再加等一等再加import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'export default {name:'Count',data() {return {n:1, //用户选择的数字}},methods: {// 借助mapActions生成：increment、decrement（对象形式）...mapMutations({increment:'ADD',decrement:'SUBTRACT'}),// 借助mapActions生成：incrementOdd、incrementWait（对象形式）...mapActions({incrementOdd:'addOdd',incrementWait:'addWait'})},computed:{// 借助mapState生成计算属性（数组写法）// ...mapState(['sum','school','name']),// 借助mapState生成计算属性（对象写法）...mapState({sum:'sum',school:'school',name:'name'}),...mapGetters(['bigSum'])}}button{margin-left: 5px;}总结：
- mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数
methods:{ //靠mapActions生成：incrementOdd、incrementWait（对象形式） ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'}) //靠mapActions生成：incrementOdd、incrementWait（数组形式） ...mapActions(['jiaOdd','jiaWait'])} - mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数
methods:{ //靠mapActions生成：increment、decrement（对象形式） ...mapMutations({increment:'JIA',decrement:'JIAN'}), //靠mapMutations生成：JIA、JIAN（对象形式） ...mapMutations(['JIA','JIAN']),}
备注：mapActions与mapMutations使用时，若需要传递参数，则需要在模板中绑定事件时传递好参数，否则参数是事件对象
5.5、多组件共享数据
src/App.vue:
import Count from './components/Count'import Person from './components/Person'export default {name:'App',components:{Count,Person}}src/store/index.js:
//引入Vue核心库import Vue from 'vue'//引入Vueximport Vuex from 'vuex'//应用Vuex插件Vue.use(Vuex) //准备actions对象——响应组件中用户的动作const actions = { addOdd(context,value){ console.log("actions中的addOdd被调用了") if(context.state.sum % 2){ context.commit('ADD',value) } }, addWait(context,value){ console.log("actions中的addWait被调用了") setTimeout(()=>{context.commit('ADD',value)},500) },}//准备mutations对象——修改state中的数据const mutations = { ADD(state,value){ state.sum += value }, SUBTRACT(state,value){ state.sum -= value },ADD_PERSON(state,value){console.log('mutations中的ADD_PERSON被调用了')state.personList.unshift(value)}}//准备state对象——保存具体的数据const state = { sum:0, //当前的和 name:'JOJO', school:'尚硅谷', personList:[{id:'001',name:'JOJO'}]}//准备getters对象——用于将state中的数据进行加工const getters = { bigSum(){ return state.sum * 10 }} //创建并暴露storeexport default new Vuex.Store({ actions, mutations, state, getters})src/components/Count.vue:
当前求和为：{{sum}}
当前求和的10倍为：{{bigSum}}
我是{{name}}，我在{{school}}学习
Person组件的总人数是：{{personList.length}}
123+-当前求和为奇数再加等一等再加import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'export default {name:'Count',data() {return {n:1, //用户选择的数字}},methods: {...mapMutations({increment:'ADD',decrement:'SUBTRACT'}),...mapActions({incrementOdd:'addOdd',incrementWait:'addWait'})},computed:{...mapState(['sum','school','name','personList']),,...mapGetters(['bigSum'])}}button{margin-left: 5px;}src/components/Person.vue:
人员列表
Count组件求和为：{{sum}}
添加- {{p.name}}
5.6、模块化+命名空间
src/store/index.js:
//引入Vue核心库import Vue from 'vue'//引入Vueximport Vuex from 'vuex'//引入countimport countOptions from './count'//引入personimport personOptions from './person'//应用Vuex插件Vue.use(Vuex) //创建并暴露storeexport default new Vuex.Store({ modules:{ countAbout:countOptions, personAbout:personOptions, }})src/store/count.js:
export default{ namespaced:true, actions:{ addOdd(context,value){ console.log("actions中的addOdd被调用了") if(context.state.sum % 2){ context.commit('ADD',value) } }, addWait(context,value){ console.log("actions中的addWait被调用了") setTimeout(()=>{ context.commit('ADD',value) },500) } }, mutations:{ ADD(state,value){ state.sum += value }, SUBTRACT(state,value){ state.sum -= value } }, state:{ sum:0, //当前的和 name:'JOJO', school:'尚硅谷', }, getters:{ bigSum(state){ return state.sum * 10 } }}src/store/person.js:
import axios from "axios"import { nanoid } from "nanoid"export default{ namespaced:true, actions:{ addPersonWang(context,value){ if(value.name.indexOf('王') === 0){ context.commit('ADD_PERSON',value) }else{ alert('添加的人必须姓王！') } }, addPersonServer(context){ axios.get('http://api.uixsj.cn/hitokoto/get?type=social').then( response => { context.commit('ADD_PERSON',{id:nanoid(),name:response.data}) }, error => { alert(error.message) } ) } }, mutations:{ ADD_PERSON(state,value){ console.log('mutations中的ADD_PERSON被调用了') state.personList.unshift(value) } }, state:{ personList:[ {id:'001',name:'JOJO'} ] }, getters:{ firstPersonName(state){ return state.personList[0].name } }}src/components/Count.vue:
当前求和为：{{sum}}
当前求和的10倍为：{{bigSum}}
我是{{name}}，我在{{school}}学习
Person组件的总人数是：{{personList.length}}
123+-当前求和为奇数再加等一等再加import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'export default {name:'Count',data() {return {n:1, //用户选择的数字}},methods: {...mapMutations('countAbout',{increment:'ADD',decrement:'SUBTRACT'}),...mapActions('countAbout',{incrementOdd:'addOdd',incrementWait:'addWait'})},computed:{...mapState('countAbout',['sum','school','name']),...mapGetters('countAbout',['bigSum']),...mapState('personAbout',['personList'])}}button{margin-left: 5px;}src/components/Person.vue:
人员列表
Count组件求和为：{{sum}}
列表中第一个人的名字是：{{firstPersonName}}
添加 添加一个姓王的人 随机添加一个人- {{p.name}}
模块化+命名空间：
-
目的：让代码更好维护，让多种数据分类更加明确
-
修改store.js：
const countAbout = {namespaced:true,//开启命名空间state:{x:1}, mutations: { ... }, actions: { ... }, getters: { bigSum(state){ return state.sum * 10 } }}const personAbout = { namespaced:true,//开启命名空间 state:{ ... }, mutations: { ... }, actions: { ... }}const store = new Vuex.Store({ modules: { countAbout, personAbout }}) -
开启命名空间后，组件中读取state数据：
//方式一：自己直接读取this.$store.state.personAbout.list//方式二：借助mapState读取：...mapState('countAbout',['sum','school','subject']), -
开启命名空间后，组件中读取getters数据：
//方式一：自己直接读取this.$store.getters['personAbout/firstPersonName']//方式二：借助mapGetters读取：...mapGetters('countAbout',['bigSum']) -
开启命名空间后，组件中调用dispatch：
//方式一：自己直接dispatchthis.$store.dispatch('personAbout/addPersonWang',person)//方式二：借助mapActions：...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'}) -
开启命名空间后，组件中调用commit：
//方式一：自己直接committhis.$store.commit('personAbout/ADD_PERSON',person)//方式二：借助mapMutations：...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
六、Vue Router路由管理器
6.1、理解
Vue Router 是 Vue.js 官方的路由管理器，它与 Vue.js 核心深度集成，可以帮助您构建单页面应用程序（SPA）并管理应用程序的路由状态。
Vue Router 提供了以下主要功能：
-
路由映射： Vue Router 允许您定义应用程序的路由映射关系，将 URL 映射到组件，以便根据用户的导航动作显示不同的视图。
-
嵌套路由： 您可以使用嵌套路由来组织和管理应用程序的路由结构，使得路由可以以层次化的方式进行组织。
-
路由参数： Vue Router 支持动态路由参数，您可以在路由路径中定义参数，并在组件中通过 $route.params 来获取路由参数。
-
命名路由： 您可以给路由定义名称，以便在组件中通过名称进行导航，而不必依赖于硬编码的路径。
-
编程式导航： Vue Router 提供了丰富的编程式导航 API，使得您可以在组件内部或其他 JavaScript 代码中进行路由导航。
-
路由导航守卫： Vue Router 提供了全局的导航守卫和路由级别的导航守卫，允许您在导航到某个路由之前或之后执行一些操作，例如进行权限验证、数据预取等。
-
路由懒加载： 您可以通过路由懒加载来延迟加载应用程序的路由组件，以提高应用程序的性能和加载速度。
-
历史模式和哈希模式： Vue Router 支持 HTML5 History 模式和哈希模式，您可以根据项目需求选择合适的路由模式。
-
导航解析： Vue Router 提供了路由导航解析功能，允许您检查路由导航的来源，以便根据需要进行适当的处理。
总的来说，Vue Router 是一个强大而灵活的路由管理器，能够帮助您构建复杂的单页面应用程序，并提供了丰富的功能和 API 来满足不同的路由管理需求。
对SPA应用的理解：
- 单页 Web 应用（single page web application，SPA）
- 整个应用只有一个完整的页面
- 点击页面中的导航链接不会刷新页面，只会做页面的局部更新
- 数据需要通过ajax请求获取
6.2、基本路由
下载vue-router：npm i vue-router
1、src/router/index.js:
//该文件专门用于创建整个应用的路由器import VueRouter from "vue-router";//引入组件import Home from '../components/Home'import About from '../components/About'//创建并暴露一个路由器export default new VueRouter({ routes:[ { path:'/about', component:About }, { path:'/home', component:Home } ]})2、src/main.js:
import Vue from 'vue'import App from './App.vue'import VueRouter from 'vue-router'import router from './router'Vue.config.productionTip = falseVue.use(VueRouter)new Vue({ el:"#app", render: h => h(App), router})3、src/App.vue:
Vue Router Demo
About Home export default {name:'App',}4、src/components/Home.vue:
我是Home组件的内容
export default { name:'Home' }5、src/components/About.vue:
我是About组件的内容
export default { name:'About' }总结：
-
安装vue-router，命令：npm i vue-router
-
应用插件：Vue.use(VueRouter)
-
编写router配置项：
//引入VueRouterimport VueRouter from 'vue-router'//引入Luyou 组件import About from '../components/About'import Home from '../components/Home'//创建router实例对象，去管理一组一组的路由规则const router = new VueRouter({routes:[{path:'/about',component:About},{path:'/home',component:Home}]})//暴露routerexport default router- 实现切换（active-class可配置高亮样式）：
About
- 指定展示位：
注意：
- 路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹
- 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载
- 每个组件都有自己的$route属性，里面存储着自己的路由信息
- 整个应用只有一个router，可以通过组件的$router属性获取到
6.3、多级路由
在 Vue 中使用多级路由（嵌套路由）可以帮助您构建更复杂的应用程序结构。下面是一个简单的示例，演示如何在 Vue 中使用多级路由：
// router.jsimport Vue from 'vue';import VueRouter from 'vue-router';import Home from './views/Home.vue';import About from './views/About.vue';import Contact from './views/Contact.vue';import Profile from './views/Profile.vue';import ProfileDetails from './views/ProfileDetails.vue';Vue.use(VueRouter);const routes = [ { path: '/', component: Home }, { path: '/about', component: About }, { path: '/contact', component: Contact }, { path: '/profile', component: Profile, children: [ { path: '', // 当访问 /profile 时，默认渲染 ProfileDetails 组件 component: ProfileDetails }, { path: 'details', // 当访问 /profile/details 时，渲染 ProfileDetails 组件 component: ProfileDetails }, { path: 'settings', // 当访问 /profile/settings 时，渲染 ProfileSettings 组件 component: ProfileSettings } ] }];const router = new VueRouter({ routes});export default router;在上面的示例中，/profile 路由下定义了两个子路由：/profile/details 和 /profile/settings。当用户访问 /profile 时，默认渲染 ProfileDetails 组件，而当用户访问 /profile/details 或 /profile/settings 时，分别渲染对应的组件。
在 Profile.vue 组件中，您可以使用 标签来渲染子路由的组件：
Profile Page
- Profile Details
- Profile Settings
这样就完成了多级路由的配置和使用。您可以根据需要进一步扩展和优化路由结构，以构建更复杂的 Vue 应用程序。
跳转（要写完整路径）：Profile Details
6.4、路由的query参数
传递参数：
跳转
- mapState方法：用于帮助我们映射state中的数据
-
-
- 方法二：
- 方法一：在vue.config.js中添加如下配置：
-
-
-
- 全局混入： Vue.mixin(xxx)
- 局部混入： mixins:['xxx']
-
- 引入组件
- Student.vue
- School.vue
-
-
-
-
-
-
-
-
-
-
-
-
上一篇：舰队老服务器怎么加入?
下一篇：怎么看服务器的并发?
