Vue基础语法及项目相关指令详解

一、项目相关指令

二、Vue模版语法

三、修饰符

四、易错点总结

本章介绍关于vue的基础语法，从项目指令和模板语法两个方面讲解vue开发中的基础知识。

一、项目相关指令

在Vue项目开发中，常用的命令行指令主要包括项目创建、依赖安装、项目运行和打包。

（1）项目创建指令

使用该命令可以快速创建一个最新版本的Vue项目，官方推荐的脚手架工具。

npm create vue@latest

（2）安装依赖包

安装项目所需的所有依赖包，确保项目正常运行。

依赖包存在的位置：

package.json 用于记录依赖包的名称、版本和配置信息：
- "dependencies"：项目运行时需要的依赖包。
- "devDependencies"：开发阶段需要的依赖包，比如构建工具、测试工具等。
node_modules 实际安装依赖包代码的文件夹

npm install 或者 nmp i

（3）项目运行

启动开发服务器，进行本地调试和开发。

npm run dev

（4）项目打包

将项目打包成生产环境代码，生成可部署的静态资源。

npm run build

二、Vue模版语法

Vue模板语法是Vue框架的核心，主要包括插值表达式、指令和修饰符。下面逐一介绍。

1、插值表达式

语法形式：{{ 内容 }}

**说明：**插值表达式用于在模板中插入动态数据

2、模板指令

模板指令有属性绑定、事件绑定、双向绑定（事件绑定+属性绑定）、条件渲染、列表渲染、插槽

（1）属性绑定：v-bind：或者是简写为：

说明：动态地绑定HTML元素的属性值，使得属性的值可以根据Vue实例中的数据动态变化。

代码示例：

javascript 复制代码

<!-- 绑定元素的属性 -->
<img v-bind:src="imageUrl" alt="图片描述" />

<!-- 绑定元素的属性-简写 -->
<img :src="imageUrl" alt="图片描述" />

这里，v-bind:src 表示将 src 属性绑定到Vue实例中 imageUrl 这个数据变量上。当 imageUrl 变化时，图片的 src 属性会自动更新。

相较于传统javascript的属性绑定

如果是传统的JavaScript首先需要获取当前img的DOM元素对象，然后触发了某些事件通过事件监听器手动的将img的属性改为所需要的地址，使用vue简化了操作，可以动态的修改。

（2）事件绑定：v-on：简写为@

说明：用于监听DOM的指令，类似于javascript中的事件监听器addEventListener,使用事件绑定可以让我们触发某个事件执行响应的逻辑。

代码示例：

javascript 复制代码

<button v-on:click="handleClick">点击我</button>


<!--简写 -->
<button @click="handleClick">点击我</button>

这里，v-on:click 表示给按钮绑定了一个点击事件，当用户点击按钮时，会执行Vue实例中的 handleClick 方法。

相较于传统的javascript事件绑定

传统JavaScript 需要先获取DOM元素，再调用 addEventListener 绑定事件，代码繁琐且不易维护。
Vue事件绑定 通过模板语法直接绑定方法，代码简洁，且事件处理函数和数据逻辑高度耦合，方便管理。

（3）双向绑定：v-model

说明：双向绑定一般是用在表单元素当中的，双向绑定等于属性绑定 + 事件绑定，对于每个表单元素，使用双向绑定都会绑定表单元素默认的

javascript 复制代码

<input v-model="username" placeholder="请输入用户名" />
<p>你输入的用户名是：{{ username }}</p>

当用户在输入框输入内容时，username 数据会实时更新。
当 username 数据被程序修改时，输入框的内容也会自动变化。

传统JavaScript vs Vue双向绑定

传统JS：需要手动监听输入事件，获取输入值，再更新数据变量，代码繁琐且容易出错。
Vue ：只需使用 v-model，自动完成数据和视图的同步，代码简洁且易维护。

（4）条件渲染

v-if：用来根据表达式的真假来决定是否在DOM中渲染元素，类似于if语句，只有条件为真时会渲染。
v-else-if 和 v-else：配合 v-if 使用，处理多重条件
v-show:v-show 也能控制元素显示隐藏，但它是通过CSS的 display 属性切换实现的，元素始终存在于DOM中，只是显示或隐藏。

代码示例：

javascript 复制代码

<template>
  <div>
    <button @click="toggle">切换显示状态</button>

    <!-- v-if 示例 -->
    <p v-if="status.value === 'success'">操作成功！</p>
    <p v-else-if="status.value === 'warning'">警告：请注意！</p>
    <p v-else>未知状态</p>

    <!-- v-show 示例 -->
    <p v-show="isVisible.value">这段内容通过 v-show 控制显示/隐藏</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const status = ref('success');
const isVisible = ref(true);

function toggle() {
  if (status.value === 'success') {
    status.value = 'warning';
  } else if (status.value === 'warning') {
    status.value = 'other';
  } else {
    status.value = 'success';
  }
  isVisible.value = !isVisible.value;
}
</script>

注意事项：使用v-if渲染的，dom元素是不会真实存在模板中的，根据条件的真假都需要进行重新渲染。使用v-show渲染，dom元素真实存在模板中，只是将display设置为false。

（5）列表渲染：v-for

列表渲染指的是根据一个数组或对象，动态生成一组DOM元素。它可以让我们轻松地把数据集合渲染成对应的列表结构。

javascript 复制代码

<template>
  <div>
    <h2>水果列表</h2>
    <ul>
      <li v-for="(fruit, index) in fruits" :key="fruit.id">
        {{ index + 1 }}. {{ fruit.name }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 定义响应式数组
const fruits = ref([
  { id: 1, name: '苹果' },
  { id: 2, name: '香蕉' },
  { id: 3, name: '橘子' }
])
</script>

传统JavaScript vs Vue列表渲染

传统JS：需要手动循环数组，创建DOM节点，插入到页面，代码冗长且易错。
Vue ：使用 v-for 指令声明式渲染，代码简洁，且数据变化时自动更新视图。

三、修饰符

Vue 提供了一组事件修饰符，可以在事件监听器中直接使用，简化对事件对象的操作，避免在回调中手动调用 event.preventDefault() 或 event.stopPropagation() 等

修饰符	作用	典型使用场景
`.prevent`	调用 `event.preventDefault()`，阻止默认行为	阻止表单提交页面刷新
`.stop`	调用 `event.stopPropagation()`，阻止事件冒泡	阻止事件向父元素传播
`.once`	事件只触发一次，触发后自动移除监听器	只需响应一次点击
`.capture`	使用事件捕获模式（`addEventListener`的第三个参数`capture`）	先于冒泡阶段捕获事件
`.passive`	告诉浏览器回调不会调用 `preventDefault()`，提升滚动性能	优化滚动事件监听
`.self`	只有事件目标是绑定元素本身时才触发，忽略子元素触发的事件	防止子元素触发父元素的事件

代码示例：

javascript 复制代码

<template>
  <div>
    <h2>Vue事件修饰符示例</h2>

    <!-- .prevent 阻止默认行为 -->
    <form @submit.prevent="onSubmit" style="margin-bottom: 16px;">
      <button type="submit">提交表单（阻止默认刷新）</button>
    </form>

    <!-- .stop 阻止事件冒泡 -->
    <div @click="parentClick" style="padding: 10px; border: 1px solid #ccc; margin-bottom: 16px;">
      父元素（点击按钮时不会触发此事件，因为按钮事件使用了.stop）
      <button @click.stop="buttonClick" style="margin-left: 10px;">点击按钮（阻止冒泡）</button>
    </div>

    <!-- .once 事件只触发一次 -->
    <button @click.once="onceClick" style="margin-bottom: 16px;">
      只响应一次点击
    </button>

    <!-- .capture 使用事件捕获 -->
    <div @click.capture="captureClick" style="padding: 10px; border: 1px solid #ccc; margin-bottom: 16px;">
      捕获阶段点击区域（事件捕获模式）
      <button @click="normalClick" style="margin-left: 10px;">普通点击按钮</button>
    </div>

    <!-- .passive 告诉浏览器回调不会调用 preventDefault -->
    <div 
      @scroll.passive="onScroll" 
      style="height: 100px; overflow-y: scroll; border: 1px solid #ccc; margin-bottom: 16px;"
    >
      <div style="height: 300px;">滚动此区域触发滚动事件（passive）</div>
    </div>

    <!-- .self 只当事件目标是绑定元素本身才触发 -->
    <div 
      @click.self="selfClick" 
      style="padding: 10px; border: 1px solid #ccc;"
    >
      点击此区域（忽略子元素触发）
      <button style="margin-left: 10px;">点击按钮不会触发</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

function onSubmit(event) {
  alert('表单提交事件被触发，但默认行为被阻止了！')
}

function parentClick() {
  alert('父元素点击事件触发')
}

function buttonClick() {
  alert('按钮点击事件触发，事件冒泡被阻止')
}

function onceClick() {
  alert('该按钮点击事件只会触发一次')
}

function captureClick() {
  alert('捕获阶段的点击事件触发')
}

function normalClick() {
  alert('普通点击事件触发（冒泡阶段）')
}

function onScroll() {
  console.log('滚动事件触发（passive修饰符）')
}

function selfClick() {
  alert('只有点击绑定元素本身才触发该事件')
}
</script>

四、易错点总结

v-for 必须有 :key（且 key 稳定唯一） --- 防止节点重用引起的问题。
不要在同一元素同时使用 v-if 和 v-for（或注意优先级） --- 若必须，拆成外层 template 或先做过滤再循环。
v-show 不会触发生命周期的卸载/挂载 --- 组件内部状态保持。
事件修饰符组合 --- 可以链式使用：@click.prevent.stop="..."。
不要滥用索引作为 key --- 插入/删除会造成 DOM 和组件复用错乱。
使用组件列表时 ，key 应该绑定到组件的 props 唯一 id，不是 DOM 索引或随机数。