Vue学习笔记

正文

目录会跟随阅读位置移动。

阅读进度

Vue学习笔记

一、Vue基础入门

1.1 Vue简介

1.1.1 什么是Vue

Vue是一套用于构建用户界面的渐进式JavaScript框架，核心是数据驱动视图，无需手动操作DOM，只需关注数据变化，视图会自动更新。

渐进式：可以按需引入，从小项目到大项目逐步扩展，无需一次性全量使用
核心特点：响应式数据、组件化开发、虚拟DOM、指令系统

1.1.2 Vue的版本区别

Vue2：采用 Object.defineProperty 实现响应式，支持选项式API，兼容性好
Vue3：采用 Proxy 实现响应式，支持组合式API+选项式API，性能更强，支持TS
学习建议：先掌握Vue2基础，再过渡到Vue3核心差异，零基础优先学Vue2

1.1.3 Vue的开发优势

1. 简化DOM操作，告别原生JS/jQuery的繁琐DOM操作

2. 组件化开发，代码复用性高，便于维护

3. 响应式数据，数据变化视图自动更新

4. 生态完善，有配套的路由、状态管理、UI组件库

1.2 Vue的基本使用（Vue2）

1.2.1 引入Vue

两种引入方式：

1. CDN引入

<!-- 开发环境版本，包含完整的警告和调试模式 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

2. 本地下载引入：下载vue.js文件，通过script标签本地引入

1.2.2 Vue实例化

<div id="app">
{{ message }}
</div>

<script>
const vm = new Vue({
el: '#app',
data: {
  message: 'Hello Vue!'
},
methods: {
  showMsg() {
    console.log(this.message)
  }
}
})
</script>

1.2.3 核心概念说明

el：挂载点，Vue仅管理el命中的元素及其内部后代元素
data：响应式数据，数据变化视图自动更新，通过 this.属性名访问
methods：定义方法，通过 this.方法名调用，方法中this指向Vue实例
插值表达式{{ }}：渲染data中的数据，支持简单表达式，不支持语句

1.3 Vue调试工具（Vue Devtools）

1.3.1 作用

用于浏览器调试Vue项目，查看Vue实例、数据、组件、事件等，提升开发效率

1.3.2 安装使用

1. 浏览器搜索Vue Devtools安装

2. 打开Vue项目，按F12开发者工具，找到Vue面板即可调试

二、Vue核心指令

2.1 内容渲染指令

2.1.1 v-text

作用：设置元素的文本内容，覆盖元素原有内容
语法： 
特点：不解析HTML标签，纯文本渲染

2.1.2 v-html

作用：设置元素的innerHTML，解析HTML标签
语法： 
注意：慎用，防止XSS攻击，仅在可信内容中使用

2.1.3 {{ }} 插值表达式

作用：渲染数据，不覆盖原有内容，支持拼接文本
语法： 我是{{name}}

2.2 属性绑定指令（v-bind）

2.2.1 作用

动态设置HTML元素的属性（src、href、title、class、style等）

2.2.2 语法

完整语法： v-bind:属性名="数据"
简写语法： :属性名="数据"

2.3 事件绑定指令（v-on）

2.3.1 作用

为元素绑定DOM事件（click、input、mouseover等）

2.3.2 语法

完整语法： v-on:事件名="方法名"
简写语法：`` @事件名="方法名" ```

2.3.3 事件参数与修饰符

1. 传递参数： @click="handleClick(参数)"

2. 事件对象：默认传递 $event

3. 常用修饰符：

.stop ：阻止事件冒泡
.prevent ：阻止默认行为
.once ：事件只触发一次
.self ：仅点击自身时触发

2.4 双向绑定指令（v-model）

2.4.1 作用

实现表单元素与数据的双向绑定：数据变化→视图更新，视图输入→数据变化

2.4.2 适用元素

input、textarea、select、checkbox、radio等表单元素

2.4.3 v-model修饰符

.number ：将输入值转为数值类型
.trim ：去除首尾空格
.lazy ：失去焦点时再同步数据

2.4.4 基础语法

v-model="data 里的数据名"

//示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Vue根组件 v-model 完整示例</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>

  <div id="app">
    <!-- 输入框 -->
    用户名：<input type="text" v-model="username"> <br>
    密码：<input type="password" v-model="password"> <br>
    年龄：<input type="text" v-model.number="age"> <br><br>

    <!-- 单选框 -->
    性别：
    <input type="radio" value="男" v-model="gender">男
    <input type="radio" value="女" v-model="gender">女 <br><br>

    <!-- 复选框 -->
    同意协议：<input type="checkbox" v-model="isAgree"> <br><br>

    <!-- 多选爱好 -->
    爱好：
    <input type="checkbox" value="游泳" v-model="hobby">游泳
    <input type="checkbox" value="跑步" v-model="hobby">跑步
    <input type="checkbox" value="看书" v-model="hobby">看书 <br><br>

    <!-- 下拉框 -->
    城市：
    <select v-model="city">
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="广州">广州</option>
    </select>
  </div>

  <script>
    // 根组件 —— data 不加 ()
    new Vue({
      el: '#app',
      data: {
        username: '',
        password: '',
        age: '',
        gender: '',
        isAgree: false,
        hobby: [],
        city: ''
      }
    })
  </script>

</body>
</html>

2.5 条件渲染指令

2.5.1 v-show

作用：控制元素显示/隐藏，通过CSS的display属性实现
特点：元素始终在DOM中，切换性能高，适合频繁切换场景

2.5.2 v-if / v-else-if / v-else

作用：控制元素创建/销毁，直接操作DOM树
特点：切换时销毁/重建元素，性能低，适合不频繁切换场景

2.6 列表渲染指令（v-for）

2.6.1 作用

遍历数组/对象，循环渲染列表结构

2.6.2 语法

1. 遍历数组： v-for="(item, index) in list" :key="item.id"

item：当前遍历的每一项
index：下标（从0开始）
list：data 里的数组

2. 遍历对象： v-for="(value, key, index) in user(对象)" :key="key"

value：属性值
key：属性名
index：下标

2.6.3 key属性

作用：给列表项添加唯一标识，提升Vue渲染性能，避免列表错乱
要求：唯一、不重复、不动态变化，优先用id，不用index

2.6.4 举例遍历数组：

list: [
  '苹果',
  '香蕉',
  '橘子'
]
<li v-for="item in list" :key="item.id">
  {{ item.name }}
</li>

遍历对象（批量展示对象里所有数据）：

//用户对象
user: {
  name: "小明",  // 属性名：属性值
  age: 20,
  phone: "138xxxx",
  email: "xxx@qq.com"
}

<div v-for="(value, key, index) in user" :key="key">
  {{ key }}：{{ value }}
</div>

2.6.5 注意

v-for和v-if不能同时用在同一元素上
如需过滤列表，用计算属性(computed)替代

三、Vue核心特性

3.1 计算属性（computed）

3.1.1 作用

处理复杂数据逻辑，基于依赖数据缓存结果，依赖数据不变，计算属性不重新计算

3.1.2 语法

computed: {
  计算属性名() {
    return 结果
  }
}

3.2 侦听器（watch）

3.2.1 作用

监听数据变化，数据改变时执行自定义逻辑

3.2.2 语法

1. 简单监听

watch: {
  数据名(newVal, oldVal) {
    console.log('数据变化了', newVal, oldVal)
  }
}

2. 深度监听

watch: {
  对象名: {
    handler(newVal) {
      console.log('对象变化了', newVal)
    },
    deep: true,
    immediate: true
  }
}

附： watch、computed、methods 区别:

computed（计算属性）

用法：当作属性用，不加括号
特点：有缓存，依赖不变就不重新计算
场景：数据计算、筛选、拼接、总价
关键词：缓存、简化视图

watch（侦听器）

用法：监听一个数据变化
特点：无缓存，数据一变就执行
场景：异步请求、定时器、复杂逻辑操作
关键词：监听、异步、执行动作

methods（方法）

用法：当作函数用，必须加括号
特点：无缓存，渲染一次执行一次
场景：事件绑定、点击触发、业务逻辑
关键词：事件、主动调用、无缓存

一句话区分：

要算数据 → 用 computed
要监听数据变了做事情 → 用 watch
要点击/触发才执行 → 用 methods

3.3 过滤器（filters）Vue2独有

3.3.1 作用

对数据进行格式化处理（文本格式化、日期格式化、价格格式化等）

3.3.2 语法

1. 局部过滤器

filters: {
  过滤器名(val) {
    return 格式化后的值
  }
}

2. 全局过滤器

Vue.filter('过滤器名', (val) => {
  return 格式化后的值
})

四、Vue组件化开发

4.1 组件基础认知

4.1.1 什么是组件

组件是可复用的Vue实例，封装了HTML、CSS、JS，实现代码复用，降低耦合

4.1.2 组件化优势

1. 代码复用，减少重复代码 2. 便于维护和协作，独立模块独立开发 3. 结构清晰，页面模块化拆分

4.1.3 组件分类

全局组件：所有Vue实例/组件都可使用
局部组件：仅当前父组件可使用

4.2 组件定义与使用

4.2.1 全局组件定义

Vue.component('my-component', {
  template: `
    <div>
      <h3>{{ title }}</h3>
      <button @click="handleClick">点击</button>
    </div>
  `,
  data() {
    return {
      title: '我是全局组件'
    }
  },
  methods: {
    handleClick() {
      console.log('组件点击')
    }
  }
})

4.2.2 局部组件定义

const MyComponent = {
 template: `<div>我是局部组件</div>`,
 data() {
   return {}
 }
}

new Vue({
 el: '#app',
 components: {
   MyComponent
 }
})

4.2.3 组件命名规范

短横线命名（推荐）： my-component
驼峰命名： myComponent ，仅在字符串模板中可用

4.3 组件通信

4.3.1 父传子（props）

1. 父组件通过属性传递数据

2. 子组件通过props接收数据

4.3.2 子传父（自定义事件）

1. 子组件通过 $emit('事件名', 数据) 触发事件

2. 父组件通过 @事件名监听事件

4.3.3 兄弟组件通信（EventBus）

1. 创建事件总线： const bus = new Vue() 2. 发送数据： bus.$emit('事件名', 数据) 3. 接收数据： bus.$on('事件名', (data) => {})

4.4 组件生命周期

4.4.2 常用生命周期函数（Vue2）

1. beforeCreate：实例创建前，data和methods未初始化

2. created：实例创建完成，data和methods初始化完成

3. beforeMount：挂载前，模板编译完成，未渲染到页面

4. mounted：挂载完成，DOM渲染完成，可操作DOM、发送网络请求

5. beforeUpdate：数据更新前，视图未更新

6. updated：数据更新完成，视图重新渲染

7. beforeDestroy：实例销毁前，清理定时器、事件监听

8. destroyed：实例销毁完成

五、Vue工程化开发

5.1 Vue CLI（脚手架）

5.1.2 安装与使用

1. 安装Node.js

2. 全局安装Vue CLI

bash

npm install -g @vue/cli

3. 创建项目

bash

vue create 项目名

4. 启动项目

bash

cd 项目名
npm run serve

5. 打包项目

bash
 
npm run build

5.2 单文件组件（.vue）

5.2.1 组成

每个.vue文件包含三部分：

1. ：HTML模板，Vue2中必须有一个根元素

Vue学习笔记

作者名片