Vue基础指令01-CSDN博客

一、Vue 基础创建

1. 创建 Vue 实例

核心语法：通过 new Vue({ ... }) 创建Vue实例
必选配置：el（挂载点，指定Vue管理的DOM元素，如 #app）
数据配置：data
核心原理：Vue实例会接管 el 对应的DOM区域，实现数据与视图的双向绑定基础

const vm = new Vue({
  el: '#app', // 挂载点
  data: {     // 响应式数据
    msg: 'Hello Vue'
  }
});

二、数据插值

插值表达式 {{ }}：
- 作用：将Vue实例中 data 的数据渲染到页面
- 支持：直接渲染变量、简单运算
- 注意：不能写复杂逻辑（如for循环、if语句），仅支持单行简单表达式

<p>{{ name }}</p>                  <!-- 渲染变量 -->
<p>{{ age + 1 }}</p>               <!-- 简单运算 -->
<p>{{ age >= 18 ? '成年' : '未成年' }}</p> <!-- 三元表达式 -->

三、Vue 指令

v-html（内容渲染）

v-html 指令：
- 作用：渲染包含HTML标签的字符串（区别于插值表达式仅渲染纯文本）
- 语法：<div v-html="htmlStr"></div>（htmlStr 为包含标签的字符串，如 <h1>标题</h1>）
- 对比：插值表达式 {{ htmlStr }} 会原样输出标签，v-html 会解析标签并渲染

<p v-html="htmlStr"></p> <!-- 解析HTML标签 -->
<p>{{ htmlStr }}</p>     <!-- 原样输出标签 -->
<script>
  data: { htmlStr: '<h3>带标签的内容</h3>' }
</script>

v-show &v-if（条件渲染）

v-show：
- 原理：通过CSS的 display: none 控制元素显示/隐藏
- 特点：元素始终存在于DOM中，切换开销小，适合频繁切换场景
v-if / v-else / v-else-if：
- 原理：通过动态创建/销毁DOM元素控制显示/隐藏
- 语法：v-if="条件" + v-else-if="条件" + v-else（条件为布尔值）
- 特点：切换开销大，适合首次渲染后少切换的场景；指令需连续书写（中间无其他元素）

<p v-show="isShow">v-show控制</p> <!-- display:none -->
<p v-if="score >= 60">及格</p>     <!-- 动态DOM -->
<p v-else>不及格</p>
<p v-else-if="score >= 90">优秀</p>

v-on(事件绑定)

基础语法：v-on:事件名="处理逻辑"（简写 @事件名="处理逻辑"）
处理逻辑类型：
- 内联语句：@click="count++"（简单逻辑直接写）
- methods函数：@click="handleClick"（复杂逻辑抽离到 methods 配置项）
methods配置：
- 定义：new Vue({ methods: { 函数名() { ... } } })
参数传递：
- 无参：@click="fn"（函数名后不加括号）
- 有参：@click="fn(参数)"（如 fn(10)、fn(msg)）
- 传事件对象：@click="fn($event)"（$event为Vue内置的事件对象）

<button @click="count++">内联逻辑</button>          <!-- 简写@ -->
<button @click="handleClick">绑定方法</button>       <!-- 方法名 -->
<button @click="handleParams(10, $event)">传参+事件对象</button>
<script>
  methods: {
    handleClick() { this.count++ },
    handleParams(num, e) { console.log(num, e) }
  }
</script>

v-for（列表渲染）

v-for 基础：
- 语法：v-for="(item, index) in 数组/对象" :key="唯一标识"
- 遍历数组：v-for="(book, i) in bookList" :key="i"（item为元素，index为索引）
- 遍历对象：v-for="(value, key) in obj"（value为值，key为键）
key 属性：
- 作用：给v-for渲染的每个元素添加唯一标识，帮助Vue识别元素身份，提升更新效率
- 要求：key值需唯一（优先用数据的唯一ID，如id；避免用index，index会随列表变化）

<li v-for="(item, index) in list" :key="item.id">
  {{ index }} - {{ item.name }}
</li>
<!-- 遍历对象 -->
<div v-for="(value, key) in obj" :key="key">
  {{ key }}：{{ value }}
</div>

v-bind（属性绑定）

v-bind:属性名="值"（简写 :属性名="值"）
作用：动态绑定HTML元素的属性（如 src、href、class、style 等）

示例：

<img :src="imgUrl" alt="">
<a :href="link">链接</a>

特性：绑定的值为Vue实例的data数据，数据变化时属性值自动更新

<img :src="imgUrl" alt=""> <!-- 简写: -->
<a :href="link">链接</a>
<div :class="isActive ? 'active' : ''">动态类名</div>

v-bind （样式控制）

1、控制 CSS 类（class）

基础用法：v-bind:class（简写 :class）绑定类名，支持字符串、数组、对象三种格式；
核心场景：根据数据动态切换 /添加类名（如 Tab 栏选中态、条件样式）选中高亮。

2、控制行内样式（style）

基础用法：v-bind:style（:style）绑定行内样式
核心场景：动态修改单个 / 多个样式属性（如宽高、颜色、字体）；

<!-- class对象语法 -->
<div :class="{ active: isActive, 'bg-gray': isGray }"></div>
<!-- class数组语法 -->
<div :class="[activeClass, bgClass]"></div>

<!-- style对象语法 -->
<div :style="{ fontSize: '16px', color: 'red' }"></div>
<div :style="[baseStyle, customStyle]"></div> <!-- 数组语法 -->

v-model（多表单元素适配）

1、核心：v-model 支持所有表单元素，但不同表单元素的 v-model 绑定逻辑不同（如复选框绑定数组 / 布尔值、单选框绑定字符串、select 绑定值）；
2、应用场景：完整表单的双向数据绑定（如用户信息填写、筛选条件选择）。

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

<!-- 复选框（单个-布尔值） -->
<input v-model="agree" type="checkbox">
<!-- 复选框（多个-数组） -->
<input v-model="hobby" type="checkbox" value="游戏">游戏
<input v-model="hobby" type="checkbox" value="运动">运动

<!-- 下拉选择框 -->
<select v-model="city">
  <option value="北京">北京</option>
  <option value="上海">上海</option>
</select>

扩充：Vue 指令修饰符

核心概念
指令修饰符是对 Vue 内置指令功能的补充，分为事件修饰符和v-model 修饰符两类，核心作用是简化事件 / 表单处理的代码逻辑，无需手动在方法内做额外判断。
关键知识点
事件修饰符：解决事件触发时的默认行为、事件冒泡 / 捕获、只触发一次等场景（如 .stop 阻止冒泡、.prevent 阻止默认行为、.once 只触发一次、.self 仅自身触发等）；
v-model 修饰符：优化表单输入绑定的逻辑（如 .trim 去除输入首尾空格、.number 自动转为数字类型、.lazy 失去焦点后再更新数据）。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>指令修饰符</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <!-- 事件修饰符 -->
    <div @click="parentClick" style="padding: 20px; border: 1px solid #000;">
      父元素
      <!-- .stop：阻止冒泡 -->
      <button @click.stop="childClick">阻止冒泡</button>
      <!-- .prevent：阻止默认行为 -->
      <a href="https://vuejs.org/" @click.prevent="linkClick">阻止跳转</a>
      <!-- .once：只触发一次 -->
      <button @click.once="onceClick">只触发一次</button>
    </div>

    <!-- v-model修饰符 -->
    <!-- .trim：去除首尾空格 -->
    <input v-model.trim="username" placeholder="输入用户名（自动去空格）">
    <!-- .number：自动转数字 -->
    <input v-model.number="age" type="text" placeholder="输入年龄（自动转数字）">
    <!-- .lazy：失去焦点后更新 -->
    <input v-model.lazy="content" placeholder="输入内容（失去焦点更新）">
    
    <p>用户名："{{ username }}"</p>
    <p>年龄类型：{{ typeof age }}</p>
    <p>内容：{{ content }}</p>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        username: '',
        age: '',
        content: ''
      },
      methods: {
        parentClick() {
          console.log('父元素被点击');
        },
        childClick() {
          console.log('子元素被点击');
        },
        linkClick() {
          console.log('链接被点击，阻止跳转');
        },
        onceClick() {
          console.log('只触发一次的点击');
        }
      }
    });
  </script>
</body>
</html>

四、计算属性（Computed）

核心概念
基于现有数据派生新数据，依赖的数据变化时，计算属性会自动重新计算，且自带缓存（多次调用仅执行一次计算，性能优于方法）。
关键用法
简写形式：仅读取数据时使用
完整写法：包含 get（读取）和 set（修改）方法，支持手动修改计算属性并同步更新依赖数据
与 Methods 的对比
Computed：有缓存，依赖数据变化才重新执行，适合数据派生 / 展示；
Methods：无缓存，每次调用都执行，适合事件处理 / 一次性逻辑

// 简写（仅读取）
computed: {
  filterList() {
    return this.list.filter(item => item.price > 100); // 派生数据
  }
}

// 完整写法（可修改）
computed: {
  fullName: {
    get() { return this.firstName + ' ' + this.lastName },
    set(val) {
      const [first, last] = val.split(' ');
      this.firstName = first;
      this.lastName = last;
    }
  }
}

五、侦听器（Watch）

核心概念
监听指定数据的变化，当数据发生改变时，自动执行预设的回调函数，适合处理数据变化后的异步 / 复杂逻辑（如请求接口、联动修改其他数据）。
关键用法
简单写法：监听单个普通数据（如字符串、数字），直接定义回调函数。
完整写法：配置对象形式，支持 immediate（初始加载时立即执行）、deep（深度监听对象 / 数组内部属性变化）、handler（回调函数）等配置。

// 简单写法
watch: {
  msg(newVal, oldVal) {
    console.log('msg变化：', newVal, oldVal);
  }
}

// 完整写法
watch: {
  user: {
    deep: true, // 深度监听对象
    immediate: true, // 初始执行
    handler(newVal) {
      console.log('user变化：', newVal);
    }
  }
}

总结归纳

指令	语法	简写	作用	要点
插值表达式	`{{ 表达式 }}`	-	渲染纯文本数据	1. 支持简单运算、三元表达式； 2. 不支持复杂逻辑（循环/判断）；
v-html	`v-html="数据"`	-	渲染包含 HTML 标签的内容	解析 HTML 标签并渲染；
v-show	`v-show="布尔值"`	-	控制元素显示/隐藏（CSS 方式）	1. 通过 `display: none` 实现； 2. 元素始终在 DOM 中； 3. 适合频繁切换场景
v-if	`v-if="布尔值"`	-	控制元素显示/隐藏（DOM 方式）	1. 通过创建/销毁 DOM 实现； 2. 切换开销大； 3. 适合少切换场景（如权限展示）
v-else-if	`v-else-if="布尔值"`	-	多条件分支渲染	1. 必须紧跟 v-if/v-else-if 之后； 2. 无独立绑定值，依赖前置条件
v-else	`v-else`	-	条件渲染兜底	1. 必须紧跟 v-if/v-else-if 之后； 2. 无需绑定值，匹配所有前置条件不满足的情况
v-on	`v-on:事件名="处理逻辑"`	`@事件名="处理逻辑"`	绑定 DOM 事件	1. 支持内联逻辑、绑定 methods 方法； 2. 可传参（含 $event 事件对象）； 3. 支持修饰符（.stop/.prevent/.once）
v-bind	`v-bind:属性名="数据"`	`:属性名="数据"`	动态绑定 HTML 元素属性	1. 支持绑定 src/href/class/style 等所有属性； 2. 支持对象/数组语法
v-for	`v-for="(item,index) in 数据"`	-	遍历数组/对象渲染列表	1. `:key`（唯一标识，优先用 ID 而非 index）； 2. 支持遍历数组（item/index）、对象（value/key）
v-model	`v-model="数据"`	-	表单元素双向数据绑定	支持修饰符（.trim/.number/.lazy）