前端

Vue

Vue3 快速入门

引入 Vue 模块

概述： 可以通过 CDN 引入 Vue 的 ES 模块版本，也可以本地安装引入。

<script type="module">
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
</script>
方法说明
type="module"使用 ES Module 语法引入
import { createApp }导入 Vue3 创建应用实例的方法

创建 Vue 应用实例 createApp

概述： 使用 createApp 创建 Vue 应用实例，可传入配置对象（data、methods 等）。

const app = createApp({
  data() {
    return { message: 'hello vue' }
  }
});
方法说明
createApp(options)创建 Vue 应用实例

挂载点与 .mount()

概述： 挂载点是 Vue 管理的 DOM 区域，.mount() 方法将 Vue 实例挂载到元素上。

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

<script type="module">

createApp({ data(){ return { message: 'Hi' } } }).mount('#app');

</script>

方法说明
.mount('#selector')挂载到选择器指定元素

data() 函数与响应式数据

概述： data() 函数返回一个对象，在模板中可直接通过属性访问并绑定到视图。

data() {
  return {
    message: 'hello vue',
    count: 0
  }
}
特性说明
响应式数据变更会自动更新绑定的模板

插值表达式 {{}}

概述： 使用双大括号 {{ }} 将变量输出到模板中，可包含简单表达式。

<h1>{{ message }}</h1>
<h2>{{ count + 1 }}</h2>
限制说明
只能单表达式不能在插值中写 if/for 语句

Vue3 综合案例：员工信息表

v-model（input 文本框）

概述： 使用 v-model 实现表单输入和数据的双向绑定，用户输入会自动更新 Vue 数据，Vue 数据变化也会更新输入框。

<input type="text" v-model="searchForm.name" placeholder="请输入姓名">
指令说明
v-model="变量"将表单控件和 Vue 数据属性绑定，实现双向绑定

v-model（select 下拉框）

概述： 在下拉选择框中，v-model 可绑定当前选中的值到数据属性。

<select v-model="searchForm.gender">
  <option value=""></option>
  <option value="1">男</option>
  <option value="2">女</option>
</select>
行为说明
数据同步选择项改变，更新 Vue 中绑定的值
初始值对应 data() 中属性的初始值

v-on:click / @click 事件绑定

概述： 使用 v-on 或简写 @ 绑定 DOM 事件到 Vue 方法。

<button type="submit" @click="search">查询</button>
<button type="reset" v-on:click="clear">清空</button>
语法说明
v-on:事件="方法"绑定事件监听器
@事件="方法"缩写形式，功能相同

methods 定义函数

概述： 在 Vue 应用配置中定义 methods 对象存放事件处理函数。

methods: {
  search() {
    console.log(this.searchForm);
  },
  clear() {
    // 清空表单
    this.searchForm = { name: '', gender: '', job: '' };
  }
}
位置说明
methodsdata 方法外层的对象
this指向当前 Vue 实例，可访问 data 中数据

访问 data 数据（this 关键字）

概述： 在 methods 中通过 this.属性名 访问 data() 中的变量或对象。

methods: {
  search() {
    console.log(this.searchForm.name); // 访问姓名
  }
}
关键点说明
this在 Vue 方法中始终指向当前应用实例
属性访问通过 this.属性名 访问响应式数据

表单对象的绑定（封装到一个对象中）

概述： 将多个表单输入通过 v-model 绑定到同一个对象属性中，便于整体获取和重置。

data() {
  return {
    searchForm: {
      name: '',
      gender: '',
      job: ''
    }
  }
}
好处说明
统一管理减少多个独立变量，使用一个对象集中存储
便于清空直接重置 searchForm 对象即可清空表单

v-for 遍历数组生成表格行

概述： 使用 v-for 指令遍历数组数据，生成多个 DOM 元素。

<tr v-for="(e,index) in empList" :key="e.id">
  <td>{{ index + 1 }}</td>
  <td>{{ e.name }}</td>
</tr>
语法说明
v-for="(item,index) in 数组"item 为当前项，index 为索引
:key建议提供唯一标识，优化渲染效率

:key 唯一标识的作用

概述： 在 v-for 中添加 :key 能帮 Vue 更高效地更新 DOM，避免重复渲染。

<tr v-for="emp in empList" :key="emp.id">
  ...
</tr>
属性说明
:key唯一标识当前项，一般用 id

插值表达式输出属性值

概述： 使用 {{}} 将数组对象的属性值渲染到页面。

<td>{{ e.name }}</td>
<td>{{ e.entrydate }}</td>
限制说明
单表达式不能直接写语句（如 if/for），仅能在表达式中做运算或三元判断

插值表达式中的三元运算符

概述： 在插值表达式中可以使用三元运算符对数据进行简单格式化处理。

<td>{{ e.gender == 1 ? '男' : '女' }}</td>
应用说明
简单判断用来替换值，例如性别数字 → 文字

v-bind / : 动态绑定图片 src 和 alt

概述： 使用 v-bind（或 : 简写）绑定 HTML 特性，值可为 JS 表达式。

<img class="avatar" :src="e.image" :alt="e.name">
指令说明
v-bind:属性绑定属性值
:属性简写形式

v-if / v-else-if / v-else 条件渲染职位

概述： 通过条件判断，渲染不同职位的文本。

<span v-if="e.job==1">班主任</span>
<span v-else-if="e.job==2">讲师</span>
<span v-else>其他</span>
区别说明
v-if条件不满足时，元素不会渲染到 DOM

v-show 条件展示职位标签

概述： 控制元素 display 属性切换显示/隐藏，结构始终存在 DOM 中。

<span v-show="e.job==1">班主任</span>
<span v-show="e.job==2">讲师</span>
区别说明
v-show通过 CSS display:none 控制显示
v-if移除/添加 DOM 节点

表格中显示日期字段

概述： 直接用插值表达式输出数据中的日期字符串。

<td>{{ e.entrydate }}</td>
<td>{{ e.updatetime }}</td>
说明
字符串格式由后端提供，可以在前端进一步格式化。

方法中修改对象（清空表单）

概述： 在 Vue 方法中直接修改绑定对象的值来重置表单。

clear() {
  this.searchForm = { name: '', gender: '', job: '' };
}
注意说明
响应式直接替换对象，视图会自动更新

综合数据结构（数组+对象混合管理）

概述： 在 data() 中既可以声明对象（searchForm）管理表单，又可以声明数组（empList）管理数据列表。

data() {
  return {
    searchForm: { name: '', gender: '', job: '' },
    empList: [
      { id:1, name:'谢逊', gender:1, job:'1', image:'...', entrydate:'2023-06-09', updatetime:'2024-09-30' },
      { id:2, name:'韦一笑', gender:1, job:'1', image:'...', entrydate:'2020-05-09', updatetime:'2024-09-01' }
    ]
  }
}
类型说明
对象管理关联字段（如表单输入）
数组存储多条相同结构的数据

在 Vue 中定义方法

概述： 在 Vue 应用的配置对象中，使用 methods 选项定义组件/实例内部的方法。方法通常用于处理业务逻辑、事件响应等，在模板中可直接通过方法名调用。

createApp({
  data() {
    return { count: 0 }
  },
  // 在此处定义方法
  methods: {
    increment() {
      this.count++;
    },
    logMessage(msg) {
      console.log(msg);
    }
  }
}).mount('#app');
位置说明
methodsVue 配置对象中的一个选项，值为对象，包含多个方法
方法名()方法定义语法，同普通 JS 对象的方法
this在方法中 this 指向当前 Vue 实例，可访问 data 中的属性

在模板中调用 Vue 方法

概述： 模板中可以直接在事件绑定指令（如 v-on/@）中调用方法，或在表达式内调用。

<!-- 事件中调用方法 -->
<button @click="increment">+1</button>

<!-- 事件中调用方法（带参数） -->
<button @click="logMessage('Hello Vue')">输出信息</button>
用法说明
@事件名="方法名"无参数调用
@事件名="方法名(参数)"调用时传递参数
评论