Vue3零基础入门全解（基础篇）：环境搭建 / 语法 / 指令 / 组件

图1：Vue3零基础入门全解 核心知识体系

一、Vue3零基础入门全解：环境搭建（两种方式，新手首选CDN）

在Vue3入门的第一步，环境搭建是重中之重，我刚学Vue的时候踩了不少环境配置的坑，这里给大家整理了最适合新手的两种方式，代码加详细注释，直接抄作业就能用。

<!-- 方式1：CDN引入（Vue3入门新手首选，无需配置环境，直接写代码） -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<!-- 方式2：脚手架创建（Vue3企业开发首选，需安装Node.js） -->
<!-- 终端执行命令，创建Vue项目 -->
// npm create vue@latest
// 按照提示选择配置，完成后进入项目，安装依赖，启动项目
// cd 项目名
// npm install
// npm run dev

Vue3入门避坑：新手一定要先从CDN开始，不要上来就搞脚手架，环境配置容易劝退，等基础语法熟练后再用脚手架做项目，循序渐进不踩坑。

二、Vue3零基础入门全解：模板语法（数据渲染核心）

模板语法是Vue3的核心，用于把数据渲染到页面，支持插值表达式、指令、表达式计算，下面是Vue3入门最常用的语法代码，加小白友好注释，新手直接用。

<!-- 模板语法示例，Vue3入门必学 -->
<template>
  <!-- 1. 插值表达式：把数据渲染到页面，Vue3最基础的语法 -->
  <div>{{ msg }}</div>

  <!-- 2. 表达式计算：支持简单的JS表达式，不能写复杂语句 -->
  <div>{{ 1 + 1 }}</div>
  <div>{{ isShow ? '显示内容' : '隐藏内容' }}</div>

  <!-- 3. 原始HTML：v-html用于渲染HTML标签，注意安全问题 -->
  <div v-html="htmlStr"></div>
</template>

<script>
export default {
  data() {
    return {
      msg: "Vue3零基础入门，你好Vue3",
      isShow: true,
      htmlStr: "<strong>渲染HTML内容</strong>"
    }
  }
}
</script>

三、Vue3零基础入门全解：常用指令大全（操作DOM必备）

指令是Vue提供的特殊属性，以v-开头，用于操作DOM元素，是Vue3开发中最常用的功能，下面是Vue3核心指令的代码+注释+避坑指南。

<template>
  <!-- 1. v-if/v-show：条件渲染 -->
  <div v-if="isShow">v-if会删除DOM，适合不频繁切换的场景</div>
  <div v-show="isShow">v-show仅切换样式，适合频繁切换的场景</div>

  <!-- 2. v-for：列表渲染，必须绑定key（Vue3入门必加，否则报错/渲染错乱） -->
  <div v-for="(item, index) in list" :key="index">
    {{ index }} - {{ item }}
  </div>

  <!-- 3. v-bind：绑定属性，简写:（Vue3最常用的指令之一） -->
  <img :src="imgUrl" :alt="imgAlt" />

  <!-- 4. v-on：绑定事件，简写@（Vue3事件处理核心） -->
  <button @click="handleClick">点击事件</button>
</template>

<script>
export default {
  data() {
    return {
      isShow: true,
      list: ["Vue3入门", "前端开发", "框架学习"],
      imgUrl: "https://picsum.photos/200",
      imgAlt: "Vue3入门示例图"
    }
  },
  methods: {
    handleClick() {
      alert("Vue3入门：按钮被点击了")
    }
  }
}
</script>

Vue3入门避坑：v-for必须绑定key，v-if和v-for不能用在同一个标签上（优先级问题会导致循环失效），正确做法是用template包裹v-for，再在上面加v-if。

四、Vue3零基础入门全解：事件处理与双向绑定

事件处理和双向绑定是Vue3实现交互的核心，下面是Vue3入门最常用的代码+注释，新手直接抄作业。

<template>
  <!-- 1. 事件绑定：v-on简写@，支持事件修饰符（.prevent阻止默认行为，.stop阻止冒泡） -->
  <button @click.stop="handleClick">点击事件（阻止冒泡）</button>

  <!-- 2. 双向绑定：v-model，用于表单元素和数据的双向同步（Vue3核心语法） -->
  <input v-model="inputVal" placeholder="请输入内容" />
  <div>输入内容：{{ inputVal }}</div>
</template>

<script>
export default {
  data() {
    return {
      inputVal: ""
    }
  },
  methods: {
    handleClick() {
      console.log("Vue3入门：事件触发")
    }
  }
}
</script>

五、Vue3零基础入门全解：组件基础（Vue核心思想）

组件化是Vue的核心思想，将页面拆分为独立可复用的模块，是Vue3入门必须掌握的技能，下面是Vue3组件基础代码+注释+避坑。

<!-- 子组件 Child.vue -->
<template>
  <div>{{ title }}</div>
</template>

<script>
export default {
  // props接收父组件传递的数据（Vue3父传子核心）
  props: {
    title: {
      type: String,
      required: true
    }
  },
  // 组件中data必须是函数，不能是对象（Vue3入门必避坑，否则数据污染）
  data() {
    return {
      count: 0
    }
  }
}
</script>

<!-- 父组件 App.vue -->
<template>
  <Child :title="parentTitle" />
</template>

<script>
// 引入子组件
import Child from './Child.vue'
export default {
  // 注册子组件
  components: { Child },
  data() {
    return {
      parentTitle: "Vue3入门：父组件传递的数据"
    }
  }
}
</script>

图2：Vue3零基础入门全解 指令与事件处理实战

六、Vue3零基础入门全解：新手100%会踩的避坑指南

七、Vue3零基础入门全解：第一个实战项目（TodoList）

学完基础语法，我们来做一个Vue3入门经典实战：TodoList待办事项列表，把前面学的指令、事件、双向绑定全部用起来，零基础也能直接跑通。

<template>
  <div class="todo-container">
    <h2>Vue3 TodoList 待办事项</h2>
    <!-- 输入框+添加按钮 -->
    <div class="input-box">
      <input v-model="newTodo" placeholder="请输入待办事项" />
      <button @click="addTodo">添加</button>
    </div>
    <!-- 待办列表 -->
    <ul class="todo-list">
      <li v-for="(item, index) in todoList" :key="index">
        {{ item }}
        <button @click="deleteTodo(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTodo: "",
      todoList: []
    }
  },
  methods: {
    // 添加待办
    addTodo() {
      if (this.newTodo.trim() === "") return
      this.todoList.push(this.newTodo)
      this.newTodo = ""
    },
    // 删除待办
    deleteTodo(index) {
      this.todoList.splice(index, 1)
    }
  }
}
</script>

<style scoped>
.todo-container { max-width: 500px; margin: 0 auto; padding: 20px; }
.input-box { display: flex; gap: 10px; margin-bottom: 20px; }
input { flex: 1; padding: 8px; }
button { padding: 8px 16px; background: #409eff; color: #fff; border: none; border-radius: 4px; }
.todo-list { list-style: none; padding: 0; }
.todo-list li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #eee; }
</style>

八、Vue3零基础入门全解：核心知识点总结