Vue – 4（ 8000 字 Vue2 入门级教程）

大家好，欢迎来到IT知识分享网。

一： Vue 初阶

1.1 关于不同版本的 Vue

Vue.js 有不同版本，如 vue.js （ 完整版 ）与 vue.runtime.xxx.js（ 运行时版 ） ，这些版本主要针对不同的使用场景和需求进行了优化，区别主要体现在以下几个方面：

• vue.js：含有运行时 + 编译器，这是包含编译器的完整构建版本，它包括 Vue 的模板编译器，可以将 Vue 模板直接编译成渲染函数。因此，它适用于独立运行的 Vue.js 项目或通过 script 引入的方式直接使用。
• vue.runtime.xxx.js：这是不包含模板编译器的版本，体积更小，由于没有编译器，所以模板需要事先编译为渲染函数。

1.2 asserts 文件夹

在前端项目中，assets 文件夹通常用来存放静态资源文件，这些资源文件包括但不限于：

1. 图像文件：如 .jpg, .png, .gif 等格式的图片文件，用于网站的图像展示、背景等。
2. 样式表文件：如 .css, .scss, .less 等格式的样式表文件，用于定义网站的样式和布局。
3. 字体文件：如 .ttf, .woff, .woff2 等格式的字体文件，用于网站的文字排版。
4. JavaScript 文件：如 .js 格式的 JavaScript 脚本文件，用于网站的交互逻辑和功能实现。
5. 视频文件：如 .mp4, .avi, .mov 等格式的视频文件，用于网站的视频展示或背景视频。
6. 音频文件：如 .mp3, .ogg, .wav 等格式的音频文件，用于网站的音频播放或背景音乐。
7. 其他静态文件：如 .html, .xml, .json 等格式的文件，用于网站的其他静态内容。

这些静态资源文件通常在开发中需要被引用和加载到网页中，因此将它们放在 assets 文件夹中，便于管理和组织。

1.3 components 文件夹

在前端开发中，components 文件夹通常用来存放 Vue.js 应用中的组件文件，将除了 App.vue 的所有组件集中存放在一个文件夹下，这可以使得项目结构更加清晰，开发者可以快速找到需要的组件文件。

1.4 ref 属性

在 Vue.js 中，ref 属性用于给 DOM 元素或子组件添加一个引用，方便在 JavaScript 代码中直接访问它们。ref 可以用来获取：

1. 原生 DOM 元素的引用。
2. 子组件的引用（即组件实例）。

代码示例：

1. 获取 DOM 元素引用：

<template> <div> <button ref="myButton" @click="handleClick">Click me</button> </div> </template> <script> export default { 
      methods: { 
      handleClick() { 
      // 使用 $refs 来获取 DOM 元素引用，并直接操作该 DOM 元素 this.$refs.myButton.innerText = 'Button Clicked';//修改文本内容 } } } </script> 

2. 获取子组件实例引用：

<template> <div> <!-- 使用 ref 获取子组件实例 --> <child-component ref="myChild"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { 
      components: { 
      ChildComponent }, mounted() { 
      // 使用 $refs 获取子组件实例，并调用子组件的 sayHello() 方法 this.$refs.myChild.sayHello(); } } </script> 

1.5 props 配置（ 父给子传 ）

在 Vue.js 中，props 是父组件向子组件传递数据的一种机制。通过 props，父组件可以将数据传递给子组件，并允许子组件使用这些数据进行处理。此外，props 也可以用来传递方法，使子组件能够调用父组件的函数。

代码示例：

1. 父组件向子组件传递数据

<!-- 父组件 Parent.vue --> <template> <div> <child-component :message="parentMessage" /><!-- 将父组件的 parentMessage 当作 message 传递给子组件 --> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { 
      components: { 
      ChildComponent }, data() { 
      return { 
      parentMessage: 'Hello from Parent!' }; } } </script> <!-- 子组件 ChildComponent.vue --> <template> <div> <p>{ 
  { message }}</p> <!-- 使用传递过来的 props --> </div> </template> <script> export default { 
      props: ['message'] // 声明接收父组件传递的 props } </script> 

为了更好地管理 props，还可以使用对象语法来声明 props，并指定类型、默认值、以及是否必需等。

<script> export default { 
      props: { 
      message: { 
      type: String, // 指定类型为字符串 required: true, // 必须传递该 prop default: '默认消息' // 指定默认值 }, count: { 
      type: Number, // 指定类型为数字 default: 0 // 指定默认值 } } } </script> 

2. 父组件向子组件传递方法：

<!-- 父组件 Parent.vue --> <template> <div> <child-component :send-message="handleMessage" /><!-- 将父组件的 handleMessage 当作 send-message 传递个子组件--> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { 
      components: { 
      ChildComponent }, methods: { 
      handleMessage(msg) { 
      console.log('来自子组件的消息：', msg); } } } </script> <!-- 子组件 ChildComponent.vue --> <template> <div> <button @click="sendMessageToParent">发送消息给父组件</button> </div> </template> <script> export default { 
      props: ['sendMessage'], // 接收父组件传递的函数 methods: { 
      sendMessageToParent() { 
      this.sendMessage('Hello from Child'); // 调用父组件传递的方法 } } } </script> 

1.5.1 子组件向父组件传递数据（ 子给父传 ）

在 Vue.js 中，通过 props 和父组件预先定义的方法，可以通过方法的参数向父组件传递数据。

实现子组件向父组件传递数据的步骤：

1. 在父组件中定义方法并将其传递给子组件
2. 在子组件中调用从父组件接收到的方法，并将数据作为参数传递。

代码示例：

1. 父组件定义方法并传递给子组件：

<!-- ParentComponent.vue（父组件） --> <template> <div> <!-- 将父组件的方法传递给子组件 --> <ChildComponent :sendDataToParent="sendDataToParent" /> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { 
      components: { 
      ChildComponent }, methods: { 
      // 定义父组件的方法 sendDataToParent(data) { 
      console.log('Data received in parent:', data); // 这里可以对数据进行处理或进一步操作 } } } </script> 

2. 子组件调用父组件传递的方法并传递数据：

<!-- ChildComponent.vue（子组件） --> <template> <div> <button @click="sendDataToParent">Send Data to Parent</button> </div> </template> <script> export default { 
      props: { 
      // 声明接收父组件传递的方法 sendDataToParent: Function }, methods: { 
      sendDataToParent() { 
      const data = 'Data from child component'; // 调用父组件传递过来的方法，并传递数据 this.sendDataToParent(data); } } } </script> 

1.6 mixin 混入

Mixin 是 Vue.js 中的一种复用代码的机制，用来将可复用的功能提取出来并共享到多个组件中。通过 mixin，我们可以将组件中的公共逻辑抽取到一个独立的对象中，然后在需要的组件中引入它，这样可以避免在多个组件中重复编写相同的逻辑。

代码示例：

1. 创建一个 mixin：

// exampleMixin.js export const exampleMixin = { 
    data() { 
    return { 
    count: 0 }; }, methods: { 
    increment() { 
    this.count++; }, decrement() { 
    this.count--; } } }; 

2. 在组件中使用 mixin：

<template> <div> <p>Count: { 
  { count }}</p> <button @click="increment">Increment</button> <button @click="decrement">Decrement</button> </div> </template> <script> import { 
      exampleMixin } from './exampleMixin.js';//导入 mixin export default { 
      mixins: [exampleMixin], // 使用 mixin }; </script> 

1.7 scoped 样式

在 Vue.js 中，scoped 是一个用于样式作用域控制的特殊属性，它可以限定样式只在当前组件中生效，而不会影响到其他组件。这种机制可以避免全局样式污染和样式冲突，让组件化开发更加可靠和可维护。

代码示例：使用 scoped 属性定义样式：

<template> <div class="example"> <p>This is a scoped example component.</p> </div> </template> <script> export default { 
      name: 'ExampleComponent' } </script> <style scoped>/*样式只作用于当前组件，不会影响其他组件*/ .example { 
      background-color: #f0f0f0; padding: 20px; } p { 
      color: blue; } </style> 

1.8 组件自定义事件

自定义事件允许子组件向父组件传递数据，也可以在组件内部进行事件的绑定、触发和解绑。

1.8.1 组件自定义事件

组件自定义事件的步骤：

1. 子组件通过 $emit 触发自定义事件。
2. 父组件通过 @事件名 来监听子组件的自定义事件。

1.8.2 触发自定义事件

在子组件中，使用 $ emit 方法来触发自定义事件。

sendStudentlName(){ 
    this.$emit('atguigu', this.name, 666, 888, 900)/*触发名为 `atguigu` 的自定义事件，并传递一些参数*/ } 

1.8.3 监听自定义事件

在父组件中，通过 v-on 或简写 @ 来监听子组件触发的自定义事件。

<template> <div> <Student @atguigu="handleAtguiguEvent" /><!-- 触发了名为 "atguigu" 的自定义事件时，父组件将调用名为 "handleAtguiguEvent" 的方法来处理该事件。 --> </div> </template> <script> export default { 
      methods: { 
      handleAtguiguEvent(name, num1, num2, num3) { 
      console.log('Received event from Student component:', name, num1, num2, num3); } } } </script> 

1.8.4 解绑自定义事件

Vue 提供了 $off 方法用于解绑自定义事件。

 unbind(){ 
    this.$off('atguigu'); // 解绑单个事件 } unbind(){ 
    this.$off(['atguigu', 'demo']); // 解绑多个事件 } unbind(){ 
    this.$off(); // 如果不传入参数，则会解绑所有自定义事件。 } 

1.8.5 组件销毁与事件失效

Vue 组件销毁时，其所有自定义事件也会失效。

death(){ 
    this.$destroy(); // 销毁当前Student组件的实例，销毁后所有自定义事件失效。 } 

1.9 全局事件总线

全局事件总线是 一种组件间通信的方式，适用于任意组件间通信

在 Vue 中，事件总线是一种通信机制，允许不同组件之间进行通信

1. 首先，在Vue实例上创建一个事件总线：

const bus = new Vue(); // 将事件总线挂载到Vue原型上，这样所有组件都可以访问到它 Vue.prototype.$bus = bus; 

2. 然后，在任何组件中，你可以通过$ bus.$ on来监听事件，通过$ bus.$ emit来触发事件，实现数据的任意传递

// 在组件A中监听事件 this.$bus.$on('my-event', (data) => { 
    console.log('Received data:', data); }); // 在组件B中触发事件 this.$bus.$emit('my-event', { 
    message: 'Hello world!' }); 

3. 要解绑事件监听器，可以使用 $off 方法。

// 在组件销毁时解绑事件监听器 beforeDestroy() { 
    this.$bus.$off('my-event'); } 

1.10 Vue 封装的过度与动画

过渡与动画的作用是让元素在插入、更新或移除时，能够以平滑的动画效果呈现出来，增强用户体验，通过 Vue 提供的 transition 组件，可以轻松地实现元素的渡效果和动画效果。

• List item

1.10.1 详细步骤

首先，你需要准备好过渡或动画效果所需的样式，其中包括：

元素进入时的样式类名：

• v-enter：表示元素进入时的起点状态。
• v-enter-active：表示元素进入过程中的状态。
• v-enter-to：表示元素进入时的终点状态。

元素离开时的样式类名：

• v-leave：表示元素离开时的起点状态。
• v-leave-active：表示元素离开过程中的状态。
• v-leave-to：表示元素离开时的终点状态。

接着使用 transition 将需要过渡或动画的元素使用 transition 包裹起来，并配置 name 属性来指定样式类名的前缀。

<transition name="hello"><!-- 应用前缀为 hello 的过渡样式 --> <h1 v-show="isShow">你好啊！</h1><!-- 要应用过渡或动画的元素，当 v-show 的值发生改变时Vue.js 会自动添加过渡类，从而触发过渡动画。 --> </transition> 

示例代码：

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue 过渡动画示例</title> <!-- 引入 Vue.js --> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <style> /* 进入动画的起点状态 */ /* 进入和离开动画的起点状态 */ .fade-enter, .fade-leave-to { 
      opacity: 0; transform: translateY(-10px); /* 向上移动10px */ } /* 进入和离开的终点状态 */ .fade-enter-to, .fade-leave { 
      opacity: 1; transform: translateY(0); /* 移回到原始位置 */ } /* 进入和离开的过渡状态 */ .fade-enter-active, .fade-leave-active { 
      transition: opacity 0.5s, transform 0.5s; /* 过渡效果，持续0.5秒 */ } </style> </head> <body> <div id="app"> <div> <button @click="toggle">切换显示</button> <transition name="fade"> <!-- --> <h1 v-show="isShow">你好啊！</h1> <!-- 要应用过渡或动画的元素 ，当 v-show 的值发生改变时Vue.js 会自动添加过渡类，从而触发过渡动画。--> </transition> </div> </div> <script> // 实例化Vue new Vue({ 
      el: '#app', data() { 
      return { 
      isShow: false // 控制元素显示隐藏 }; }, methods: { 
      toggle() { 
      this.isShow = !this.isShow; // 切换显示状态 } } }); </script> </body> </html> 

1.11 插槽

Vue 中的插槽允许我们在使用自定义组件时传递自定义内容，这样可以让组件在不同的场景下表现不同的内容。插槽的核心思想是让组件变得更加灵活，并减少重复代码。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue 插槽示例</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!-- 默认插槽示例 --> <h2>默认插槽</h2> <child-component> <p>这是传递给默认插槽的内容！</p> <!-- 传递给默认插槽，组件标签内的内容就是要传给插槽的内容 --> </child-component> <!-- 具名插槽示例 --> <h2>具名插槽</h2> <named-component> <template v-slot:header> <h1>这是标题部分</h1><!-- 传递给 header 插槽 --> </template> <template v-slot:footer> <p>这是底部部分</p><!-- 传递给 footer 插槽 --> </template> </named-component> <!-- 作用域插槽示例 --> <h2>作用域插槽</h2> <scoped-component> <template v-slot:default="slotProps"> <p>子组件的消息是：{ 
  { slotProps.msg }}</p> </template> </scoped-component> </div> <script> // 默认插槽组件 Vue.component('child-component', { 
      template: ` <div> <h3>我是子组件的内容</h3> <slot></slot> </div> ` }); // 具名插槽组件 Vue.component('named-component', { 
      template: ` <div> <header> <slot name="header"></slot> </header> <footer> <slot name="footer"></slot> </footer> </div> ` }); // 作用域插槽组件 Vue.component('scoped-component', { 
      data() { 
      return { 
      message: '这是从子组件传递的消息' }; }, template: ` <div> <slot :msg="message"></slot> </div> ` }); // 创建 Vue 实例 new Vue({ 
      el: '#app' }); </script> </body> </html>