当前位置：首页 > news >正文

Vue入门

news 来源：原创 2025/5/10 13:52:58

Vue生命周期

思考：什么时候可以发送初始化渲染请求？（越早越好）什么时候可以开始操作dom？（至少dom得渲染出来）

Vue生命周期：就是一个Vue实例从创建到销毁的整个过程。

生命周期四个阶段：① 创建 ② 挂载 ③ 更新 ④ 销毁

1.创建阶段：创建响应式数据

2.挂载阶段：渲染模板

3.更新阶段：修改数据，更新视图

4.销毁阶段：销毁Vue实例

Vue生命周期钩子

Vue生命周期过程中，会自动运行一些函数，被称为【生命周期钩子】→ 让开发者可以在【特定阶段】运行自己的代码

工程化开发和脚手架

1.开发Vue的两种方式

核心包传统开发模式：基于html / css / js 文件，直接引入核心包，开发 Vue

工程化开发模式：基于构建工具（例如：webpack）的环境中开发Vue

工程化开发模式优点

提高编码效率，比如使用JS新语法、Less/Sass、Typescript等通过webpack都可以编译成浏览器识别的ES3/ES5/CSS等

工程化开发模式问题：

* webpack配置**不简单**
* **雷同**的基础配置
* 缺乏**统一的标准**

为了解决以上问题，所以我们需要一个工具，生成标准化的配置

基本介绍：

Vue CLI 是Vue官方提供的一个**全局命令工具**

可以帮助我们**快速创建**一个开发Vue项目的**标准化基础架子**。【集成了webpack配置】

好处：

1.开箱即用，零配置
2.内置babel等工具
3.标准化的webpack配置

使用步骤：

1.全局安装（只需安装一次即可） yarn global add @vue/cli 或者 npm i @vue/cli -g
2.查看vue/cli版本： vue --version
3.创建项目架子：**vue create project-name**(项目名不能使用中文)
4.启动项目：**yarn serve** 或者 **npm run serve**(命令不固定，找package.json)

项目目录介绍和运行流程

虽然脚手架中的文件有很多，目前咱们只需人事三个文件即可

1. main.js 入口文件
2. App.vue App根组件
3. index.html 模板文件

scoped解决样式冲突

1.默认情况

写在组件中的样式会 "全局生效*"→ 因此很容易造成多个组件之间的样式冲突问题。

1. 全局样式: 默认组件中的样式会作用到全局，任何一个组件中都会受到此样式的影响

2. 局部样式: 可以给组件加上**scoped** 属性,可以**让样式只作用于当前组件

2.scoped原理

1.当前组件内标签都被添加data-v-hash值的属性
2.css选择器都被添加 [data-v-hash值] 的属性选择器

最终效果: 必须是当前组件的元素, 才会有这个自定义属性, 才会被这个样式作用到

data必须是一个函数

1、data为什么要写成函数

一个组件的 data*选项必须是一个函数。目的是为了：保证每个组件实例，维护独立的一份数据对象。

每次创建新的组件实例，都会新**执行一次data 函数**，得到一个新对象。

组件通信

1.什么是组件通信？

组件通信，就是指组件与组件之间的数据传递

组件的数据是独立的，无法直接访问其他组件的数据。
想使用其他组件的数据，就需要组件通信

父子通信流程

父---->子

* 父组件通过 **props** 将数据传递给子组件
* 子组件利用 **$emit** 通知父组件修改更新

步骤：

1.给子组件以添加属性的方式传值
2.子组件内部通过props接收
3.模板中直接使用 props接收的值

子---->父

子向父传值步骤

1. $emit触发事件，给父组件发送消息通知
2. 父组件监听$emit触发的事件
3. 提供处理函数，在函数的性参中获取传过来的参数

props校验

1.思考

组件的props可以乱传吗

2.作用

为组件的 prop 指定**验证要求**，不符合要求，控制台就会有**错误提示** → 帮助开发者，快速发现错误

3.语法

类型校验
非空校验
默认值
自定义校验

props: {
  校验的属性名: {
    type: 类型,  // Number String Boolean ...
    required: true, // 是否必填
    default: 默认值, // 默认值
    validator (value) {
      // 自定义校验逻辑
      return 是否通过校验
    }
  }
},

<script>
export default {
  // 完整写法（类型、默认值、非空、自定义校验）
  props: {    
    w: {
      type: Number,
      //required: true,
      default: 0,
      validator(val) {
        // console.log(val)
        if (val >= 100 || val <= 0) {
          console.error('传入的范围必须是0-100之间')
          return false
        } else {
          return true
        }
      },
    },
  },
}
</script>

注意

1.default和required一般不同时写（因为当时必填项时，肯定是有值的）

2.default后面如果是简单类型的值，可以直接写默认。如果是复杂类型的值，则需要以函数的形式return一个默认值

props&data、单向数据流

1.共同点

都可以给组件提供数据

2.区别

data 的数据是**自己**的 → 随便改
prop 的数据是**外部**的 → 不能直接改，要遵循 **单向数据流**

3.单向数据流

父级props 的数据更新，会向下流动，影响子组件。这个数据流动是单向的

非父子通信

代码示例

EventBus.js

import Vue from 'vue'
const Bus  =  new Vue()
export default Bus

BaseA.vue(接受方)

<template>
  <div class="base-a">
    我是A组件（接收方）
    <p>{{msg}}</p>  
  </div>
</template>

<script>
import Bus from '../utils/EventBus'
export default {
  data() {
    return {
      msg: '',
    }
  },
}
</script>

<style scoped>
.base-a {
  width: 200px;
  height: 200px;
  border: 3px solid #000;
  border-radius: 3px;
  margin: 10px;
}
</style>

BaseB.vue(发送方)

<template>
  <div class="base-b">
    <div>我是B组件（发布方）</div>
    <button>发送消息</button>
  </div>
</template>

<script>
import Bus from '../utils/EventBus'
export default {
}
</script>

<style scoped>
.base-b {
  width: 200px;
  height: 200px;
  border: 3px solid #000;
  border-radius: 3px;
  margin: 10px;
}
</style>

App.vue

<template>
  <div class="app">
    <BaseA></BaseA>
    <BaseB></BaseB> 
  </div>
</template>

<script>
import BaseA from './components/BaseA.vue'
import BaseB from './components/BaseB.vue' 
export default {
  components:{
    BaseA,
    BaseB
  }
}
</script>

<style>

</style>

ref和$refs

1.作用

利用ref 和 $refs 可以用于获取 dom 元素或组件实例

2.特点：

查找范围 → 当前组件内(更精确稳定)

3.语法

1.给要获取的盒子添加ref属性
<div ref="chartRef">我是渲染图表的容器</div>
2.获取时通过 $refs获取 this.\$refs.chartRef 获取
mounted () {
  console.log(this.$refs.chartRef)
}

注意

之前只用document.querySelect('.box') 获取的是整个页面中的盒子

自定义指令

1.指令介绍

* 内置指令：**v-html、v-if、v-bind、v-on**... 这都是Vue给咱们内置的一些指令，可以直接使用
* 自定义指令：同时Vue也支持让开发者，自己注册一些指令。这些指令被称为**自定义指令**每个指令都有自己各自独立的功能

2.自定义指令

概念：自己定义的指令，可以**封装一些DOM操作**，扩展额外的功能

3.自定义指令语法

全局注册
//在main.js中
Vue.directive('指令名', {
  "inserted" (el) {
    // 可以对 el 标签，扩展额外功能
    el.focus()
  }
})
局部注册
//在Vue组件的配置项中
directives: {
  "指令名": {
    inserted () {
      // 可以对 el 标签，扩展额外功能
      el.focus()
    }
  }
}
注意：在使用指令的时候，一定要**先注册**，**再使用**，否则会报错使用指令语法： v-指令名。如：<input type="text" v-focus/>**注册**指令时**不用**加**v-前缀**，但**使用时**一定要**加v-前缀