vue终极使用教程，从0开始

m0_74153220

337人浏览 · 2026-06-09 13:16:29

m0_74153220 · 2026-06-09 13:16:29 发布

一、Vue 整体组成（三大核心部分）

不管是 CDN 引入还是 .vue 单文件组件，Vue 项目固定由 3 部分构成，分工明确：

模板层（template）：HTML 结构 + Vue 指令，负责页面展示
脚本层（script）：JavaScript 代码，负责数据、逻辑、方法、请求等
样式层（style）：CSS/LESS/SCSS，负责页面美化

1. 单文件组件标准结构（`.vue` 文件，项目主流）

vue

<!-- 1. 模板：页面结构、指令、插值 -->
<template>
  <div>
    {{ msg }}
    <button @click="sayHello">点击</button>
  </div>
</template>

<!-- 2. 脚本：JS 逻辑核心 -->
<script>
export default {
  // 数据、方法、生命周期、计算属性等 JS 代码都写在这里
}
</script>

<!-- 3. 样式：页面样式 -->
<style scoped>
div { color: red; }
</style>

scoped：样式只作用于当前组件，不会污染其他页面。

Vue 基础使用教程（快速上手版）

本文以 Vue 3 + 选项式 API 为主，从环境搭建到核心语法、常用指令、事件、样式、组件一步步讲解，适合零基础入门。

一、两种引入方式

1. CDN 引入（零配置，快速测试）

直接在 HTML 引入，适合 demo、学习：

<!-- 引入 Vue3 CDN -->
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

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

<script>
  // 创建Vue实例
  const { createApp } = Vue
  createApp({
    // 数据
    data() {
      return {
        msg: 'Hello Vue!'
      }
    }
  }).mount('#app') // 挂载到 #app 元素
</script>

2. 脚手架 Vite（正式项目推荐）

Vite 启动更快，官方推荐构建工具：

先安装 Node.js（版本 14.18+ / 16+）
终端执行创建项目：

# 创建vue项目
npm create vite@latest my-vue-demo -- --template vue
# 进入项目
cd my-vue-demo
# 安装依赖
npm install
# 启动项目
npm run dev

启动后打开浏览器访问终端地址即可。

二、核心基础语法

1. 插值语法 `{{ }}`

作用：渲染文本内容，支持简单表达式。

<div id="app">
  <p>文本：{{ name }}</p>
  <p>表达式：{{ 10 + 20 }}</p>
  <p>拼接：{{ '姓名：' + name }}</p>
</div>

<script>
const { createApp } = Vue
createApp({
  data() {
    return {
      name: '张三'
    }
  }
}).mount('#app')
</script>

2. 常用指令（Vue 核心）

指令格式：v-xxx，写在 HTML 标签属性上。

（1）v-text / v-html

v-text：纯文本渲染，等价于 {{ }}
v-html：解析 HTML 标签（注意安全，勿渲染用户输入）

<div v-text="txt"></div>
<div v-html="htmlTxt"></div>

<script>
data() {
  return {
    txt: '普通文本',
    htmlTxt: '<b>加粗文字</b>'
  }
}
</script>

（2）v-bind：绑定属性（简写 `:`）

动态绑定 HTML 属性（class、src、href、title 等）

<!-- 完整写法 -->
<img v-bind:src="imgUrl">
<!-- 简写 : -->
<a :href="link">跳转</a>

<script>
data() {
  return {
    imgUrl: 'https://xxx.jpg',
    link: 'https://vuejs.org'
  }
}
</script>

动态 class /style（高频用法）

<!-- 动态class：对象写法 -->
<div :class="{ active: isActive }">样式切换</div>
<!-- 动态style -->
<div :style="{ color: fontColor, fontSize: '20px' }"></div>

<script>
data() {
  return {
    isActive: true,
    fontColor: 'red'
  }
}
</script>

（3）v-on：绑定事件（简写 `@`）

绑定点击、输入、鼠标等事件

<!-- 完整写法 -->
<button v-on:click="handleClick">点击</button>
<!-- 简写 @ -->
<button @click="handleClick">简写点击</button>

<script>
createApp({
  data() { return { count: 0 } },
  // 方法写在 methods 中
  methods: {
    handleClick() {
      this.count++
      alert('点击了')
    }
  }
}).mount('#app')
</script>

事件传参

<button @click="add(10)">加10</button>

<script>
methods: {
  add(num) {
    this.count += num
  }
}
</script>

（4）v-model：双向数据绑定（表单专属）

数据 ↔ 视图双向同步，多用于输入框、单选、复选、下拉框。

<!-- 输入框双向绑定 -->
<input type="text" v-model="inputVal">
<p>输入内容：{{ inputVal }}</p>

<script>
data() {
  return {
    inputVal: ''
  }
}
</script>

（5）条件渲染 v-if /v-show

两者都用来控制元素显示 / 隐藏

v-if：销毁 / 创建元素，切换频率低使用
v-show：切换 display 样式，元素始终存在，切换频繁使用

<div v-if="isShow">v-if 内容</div>
<div v-show="isShow">v-show 内容</div>

<script>
data() {
  return { isShow: true }
}
</script>

多分支判断：v-else-if / v-else

<div v-if="score >= 90">优秀</div>
<div v-else-if="score >= 60">及格</div>
<div v-else>不及格</div>

（6）列表渲染 v-for

遍历数组 / 对象，渲染列表，必须加 key（推荐绑定唯一值）

二、Vue 中 JS 的书写规则 & 核心配置项

Vue 的 JS 基于原生 JavaScript，只是封装了固定配置项，下面逐个讲解必用配置，附写法 + 作用。

前置说明

Vue3 分两种写法：

选项式 API：上手简单、结构清晰，新手首选（下面全部用这种）
组合式 API（setup）：大型项目用，后期再学

1. 基础骨架（固定模板）

1.1 CDN 形式 JS 骨架

javascript

运行

const { createApp } = Vue
createApp({
  // 所有配置项写在这里
}).mount('#app') // 挂载到页面元素

1.2 单文件组件（.vue）JS 骨架

javascript

运行

export default {
  // 所有配置项写在这里
}

2. 核心配置项（JS 必学内容）

① data：定义页面数据（变量）

作用：存放页面要用到的所有变量，模板中直接使用。

规则：必须是函数，并且 return 一个对象（Vue 规定）
取值：模板直接写变量名；JS 内部用 this.变量名

javascript

运行

export default {
  data() {
    // 定义数据
    return {
      name: "小明",
      age: 18,
      count: 0
    }
  }
}

模板使用：

html

预览

<template>
  <p>姓名：{{ name }}</p>
  <p>年龄：{{ age }}</p>
</template>

② methods：定义函数 / 方法（事件、通用逻辑）

作用：存放可调用的函数，比如按钮点击、业务逻辑、数据处理。

规则：写法和原生 JS 函数一致
调用：模板用 @事件名="方法名"；JS 内部用 this.方法名()

完整示例：

vue

<template>
  <div>
    <p>计数：{{ count }}</p>
    <!-- 调用方法 -->
    <button @click="add">加1</button>
    <button @click="addNum(5)">加5</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  // 方法全部写在 methods 里
  methods: {
    // 无参方法
    add() {
      // JS 内部使用数据：this.变量
      this.count = this.count + 1
    },
    // 带参方法
    addNum(num) {
      this.count += num
    }
  }
}
</script>

③ computed：计算属性（派生数据）

作用：基于现有数据自动计算新数据，有缓存，数据不变不会重复执行。适合：字符串拼接、数值计算、复杂表达式。

vue

<template>
  <p>全名：{{ fullName }}</p>
</template>

<script>
export default {
  data() {
    return {
      firstName: "李",
      lastName: "华"
    }
  },
  computed: {
    // 计算属性，本质是函数，返回结果
    fullName() {
      return this.firstName + this.lastName
    }
  }
}
</script>

④ watch：侦听器（监听数据变化）

作用：监听某个数据，数据一变就执行逻辑，适合异步操作、复杂业务。

vue

<template>
  <input v-model="inputVal" placeholder="输入内容">
</template>

<script>
export default {
  data() {
    return {
      inputVal: ""
    }
  },
  // 监听数据
  watch: {
    // 监听 inputVal 变化
    inputVal(newVal, oldVal) {
      console.log("新值：", newVal, "旧值：", oldVal)
    }
  }
}
</script>

⑤ 生命周期钩子（函数）

本质就是Vue 内置的特殊函数，在组件不同阶段自动执行，最常用两个：

created：组件创建完成，可操作数据、调用方法，不能操作 DOM
mounted：组件渲染到页面（DOM 挂载完成），请求接口、操作 DOM 写这里

示例：

javascript

运行

export default {
  data(){...},
  methods(){...},
  // 组件创建完成
  created() {
    console.log("组件创建好了")
  },
  // DOM 渲染完成
  mounted() {
    console.log("页面渲染完毕，可以发请求了")
  }
}

三、原生 JS 在 Vue 中怎么用？（重点）

Vue 没有替换 JS，只是封装了语法，原生 JS 所有语法、API 都可以直接在 Vue 里使用。

1. 位置规则

原生 JS 代码不能直接写在 template 模板里（只能写简单表达式）
所有复杂 JS 逻辑：循环、判断、数组方法、定时器、接口请求等，全部写在 methods / 生命周期 /computed 中

2. 常用原生 JS 场景 + 示例

场景 1：分支判断 `if / else`

写在方法里：

javascript

运行

methods: {
  checkAge() {
    let age = this.age
    if (age >= 18) {
      alert("成年")
    } else {
      alert("未成年")
    }
  }
}

场景 2：数组操作（遍历、增删改查）

原生数组方法 push/splice/map/filter 直接用：

vue

<template>
  <ul>
    <li v-for="item in list" :key="item.id">{{ item.name }}</li>
    <button @click="addItem">添加</button>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: "苹果" },
        { id: 2, name: "香蕉" }
      ]
    }
  },
  methods: {
    addItem() {
      // 原生数组 push
      this.list.push({ id: 3, name: "橙子" })
    }
  }
}
</script>

场景 3：定时器 `setTimeout / setInterval`

javascript

运行

methods: {
  startTimer() {
    // 原生延时器
    setTimeout(() => {
      this.count++
    }, 1000)
  }
}

场景 4：字符串、数字、对象等基础语法

原生语法完全兼容：

javascript

运行

methods: {
  testJs() {
    // 原生字符串
    let str = "vue + js"
    console.log(str.length)
    // 原生数学计算
    let a = 10, b = 20
    console.log(a + b)
    // 原生对象
    let obj = { title: "测试" }
  }
}

场景 5：接口请求（原生 fetch /axios）

推荐在 mounted 中发起请求：

javascript

运行

mounted() {
  // 原生 fetch 请求
  fetch("https://xxx/api")
    .then(res => res.json())
    .then(data => {
      console.log("请求结果", data)
    })
}

3. 模板中能写哪些 JS？

{{ }} 插值里只支持简单表达式，不支持语句： ✅ 允许（表达式）

html

预览

{{ num + 1 }}
{{ name.split('') }}
{{ isShow ? '显示' : '隐藏' }}

❌ 不允许（语句）

html

预览

{{ let a = 10 }}  <!-- 错误 -->
{{ if(1>0){} }}  <!-- 错误 -->

复杂逻辑请移到 methods/computed。

四、总结梳理

1. Vue 三大组成

template：HTML + Vue 指令，负责页面结构
script：原生 JS + Vue 配置项，负责所有逻辑、数据、方法
style：CSS，负责样式

2. Vue 中 JS 核心配置（必记）

data：定义页面变量
methods：定义事件 / 通用函数
computed：计算派生数据
watch：监听数据变化
生命周期：created / mounted 处理初始化逻辑

3. JS 使用原则

示例

html

预览

<!-- 1. 直接渲染变量（最常用） -->
<p>姓名：{{ username }}</p>

<!-- 2. 算术运算 -->
<p>总和：{{ num1 + num2 }}</p>

<!-- 3. 字符串拼接 -->
<p>欢迎：{{ '你好，' + username }}</p>

<!-- 4. 三元表达式（条件判断） -->
<p>{{ age >= 18 ? '成年人' : '未成年人' }}</p>

<!-- 5. 对象/数组取值 -->
<p>城市：{{ user.city }}</p>
<p>第一个标签：{{ tagList[0] }}</p>

<!-- 6. 调用方法（也可执行简单函数） -->
<p>处理后文本：{{ formatText() }}</p>

二、script 标签内：强制项 & 可选项（选项式 API）

以 Vue3 选项式 API 为准，分两类说明：

1. 强制 / 必备项

2. 可选配置项（按需添加，不用就不写）

以下都不是必须，根据业务选择：

极简合法组件（只保留强制项）：

Vue 完全兼容原生 JS 所有语法、API；
复杂逻辑（判断、循环、定时器、请求）写在 methods / 生命周期；
模板内只写简单表达式，不写代码语句；
Vue 内部访问数据 / 方法，必须加 this.。
一、{{}} 插值语法详解

1. 作用

文本插值，把 data 里的数据、简单表达式渲染到页面，是 Vue 最基础的数据绑定方式。

2. 基本用法

语法：{{ 内容 }}
内容可以是：变量、算术运算、字符串拼接、三元表达式、数组 / 对象取值
不支持：let/var 变量声明、if/for 语句、函数调用外的复杂代码
根导出 export default {} 所有 Vue 单文件组件的 JS 入口，必须存在。
data 选项 存放页面响应式数据，必须是函数，且 return 一个对象。

原因：防止组件复用时数据互相污染，Vue 语法强制要求。
methods：存放事件函数、业务方法
computed：计算属性
watch：侦听器
生命周期钩子：created、mounted、updated、unmounted 等
components：注册局部子组件
props：接收父组件传值
filters：过滤器（Vue3 已移除，不推荐）

一、Vue 页面通用空架构（纯轮廓，无业务逻辑）

分两种：CDN 版（HTML 文件）、单文件组件 .vue（项目标准），直接套用即可。

1. CDN 全局版空架构

html

预览

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Vue 页面轮廓</title>
  <style>
    /* 全局样式区域 */
  </style>
</head>
<body>
  <!-- Vue 挂载容器 -->
  <div id="app">
    <!-- 模板区域：插值、指令、结构 -->
  </div>

  <!-- 引入Vue -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    const { createApp } = Vue
    createApp({
      // 【强制】数据
      data() {
        return {}
      },

      // 【可选】方法
      methods: {},

      // 【可选】计算属性
      computed: {},

      // 【可选】侦听器
      watch: {},

      // 【可选】生命周期钩子
      created() {},
      mounted() {}
    }).mount('#app')
  </script>
</body>
</html>

2. 单文件组件 .vue 空架构（项目主流）

vue

<template>
  <!-- HTML结构、插值、所有Vue指令 -->
  <div class="container">

  </div>
</template>

<script>
// 【强制】导出组件配置
export default {
  // 【强制】响应式数据
  data() {
    return {}
  },

  // 【可选】事件/自定义方法
  methods: {},

  // 【可选】计算属性
  computed: {},

  // 【可选】数据侦听
  watch: {},

  // 【可选】生命周期
  created() {},
  mounted() {}
}
</script>

<!-- 样式区域，scoped 隔离样式 -->
<style scoped>
.container {

}
</style>

二、完整版综合示例（包含：插值 + 全部常用指令 + 方法 / 计算 / 侦听 / 生命周期）

带逐行注释，整合前面学的所有知识点：插值、v-bind、v-on、v-model、v-if/v-show、v-for、computed、watch、生命周期。

CDN 完整综合案例（可直接打开运行）

html

预览

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Vue 综合语法演示</title>
  <style>
    .active { color: red; font-weight: bold; }
    .box { margin: 10px 0; padding: 10px; border: 1px solid #ccc; }
  </style>
</head>
<body>

<!-- Vue 根容器，所有Vue语法写在此内部 -->
<div id="app">
  <!-- 1. ########## 插值语法 {{ }} ########## -->
  <div class="box">
    <h4>插值语法</h4>
    <p>普通变量：{{ msg }}</p>
    <p>算术运算：{{ num1 + num2 }}</p>
    <p>对象取值：{{ user.name }} - {{ user.age }}</p>
    <p>三元表达式：{{ isAdult ? '已成年' : '未成年' }}</p>
  </div>

  <!-- 2. ########## v-bind 属性绑定（简写 :） ########## -->
  <div class="box">
    <h4>v-bind 属性绑定</h4>
    <div :class="{ active: isActive }">动态class样式</div>
    <a :href="url">动态跳转链接</a>
  </div>

  <!-- 3. ########## v-on 事件绑定（简写 @） ########## -->
  <div class="box">
    <h4>v-on 点击事件</h4>
    <p>计数：{{ count }}</p>
    <button @click="add">点击+1</button>
    <button @click="addNum(10)">点击+10</button>
  </div>

  <!-- 4. ########## v-model 双向绑定 ########## -->
  <div class="box">
    <h4>v-model 双向绑定</h4>
    <input type="text" v-model="inputVal" placeholder="请输入内容">
    <p>实时输入内容：{{ inputVal }}</p>
  </div>

  <!-- 5. ########## v-if / v-show 条件渲染 ########## -->
  <div class="box">
    <h4>v-if / v-show 条件显示</h4>
    <div v-if="isShow">v-if 显示的内容</div>
    <div v-show="isShow">v-show 显示的内容</div>
    <button @click="toggleShow">切换显示/隐藏</button>
  </div>

  <!-- 6. ########## v-for 列表渲染 ########## -->
  <div class="box">
    <h4>v-for 列表循环</h4>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        {{ index + 1 }} - {{ item.name }}
      </li>
    </ul>
  </div>

  <!-- 7. ########## 计算属性 展示 ########## -->
  <div class="box">
    <h4>计算属性 computed</h4>
    <p>拼接全名：{{ fullName }}</p>
  </div>
</div>

<!-- 引入Vue3 全局版本 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<script>
// 解构出创建应用的方法
const { createApp } = Vue

createApp({
  // ===================== 【强制项】data：所有响应式数据 =====================
  data() {
    return {
      // 插值相关数据
      msg: "Hello Vue",
      num1: 60,
      num2: 40,
      user: { name: "张三", age: 20 },
      isAdult: true,

      // v-bind 相关
      isActive: true,
      url: "https://cn.vuejs.org",

      // v-on 事件相关
      count: 0,

      // v-model 双向绑定
      inputVal: "",

      // v-if / v-show 相关
      isShow: true,

      // v-for 列表数据
      list: [
        { name: "Vue基础" },
        { name: "JavaScript" },
        { name: "HTML+CSS" }
      ],

      // 计算属性用到的数据
      firstName: "张",
      lastName: "三"
    }
  },

  // ===================== 【可选项】methods：所有事件、自定义方法 =====================
  methods: {
    // 计数+1
    add() {
      this.count++
    },
    // 带参方法
    addNum(n) {
      this.count += n
    },
    // 切换显示隐藏
    toggleShow() {
      this.isShow = !this.isShow
    }
  },

  // ===================== 【可选项】computed：计算属性 =====================
  computed: {
    // 拼接全名，依赖 firstName / lastName
    fullName() {
      return this.firstName + this.lastName
    }
  },

  // ===================== 【可选项】watch：侦听器，监听数据变化 =====================
  watch: {
    // 监听输入框内容变化
    inputVal(newVal) {
      console.log("输入框新内容：", newVal)
    }
  },

  // ===================== 【可选项】生命周期钩子 =====================
  // 组件创建完成，DOM未生成
  created() {
    console.log("created：组件创建完毕")
  },
  // DOM 渲染挂载完成（常用：发接口、操作DOM）
  mounted() {
    console.log("mounted：页面DOM渲染完成")
  }
}).mount('#app') // 挂载到 id=app 的元素上
</script>

</body>
</html>

同逻辑单文件组件版（.vue，项目里直接用）

文件名：AllDemo.vue

vue

<template>
  <div class="app">
    <!-- 插值语法 -->
    <div class="box">
      <h4>插值语法</h4>
      <p>普通变量：{{ msg }}</p>
      <p>算术运算：{{ num1 + num2 }}</p>
      <p>对象取值：{{ user.name }} - {{ user.age }}</p>
      <p>三元表达式：{{ isAdult ? '已成年' : '未成年' }}</p>
    </div>

    <!-- v-bind 属性绑定 -->
    <div class="box">
      <h4>v-bind 属性绑定</h4>
      <div :class="{ active: isActive }">动态class样式</div>
      <a :href="url">动态跳转链接</a>
    </div>

    <!-- v-on 事件 -->
    <div class="box">
      <h4>v-on 点击事件</h4>
      <p>计数：{{ count }}</p>
      <button @click="add">点击+1</button>
      <button @click="addNum(10)">点击+10</button>
    </div>

    <!-- v-model 双向绑定 -->
    <div class="box">
      <h4>v-model 双向绑定</h4>
      <input v-model="inputVal" placeholder="请输入内容">
      <p>实时输入内容：{{ inputVal }}</p>
    </div>

    <!-- v-if / v-show -->
    <div class="box">
      <h4>v-if / v-show 条件显示</h4>
      <div v-if="isShow">v-if 内容</div>
      <div v-show="isShow">v-show 内容</div>
      <button @click="toggleShow">切换显隐</button>
    </div>

    <!-- v-for 列表 -->
    <div class="box">
      <h4>v-for 列表循环</h4>
      <ul>
        <li v-for="(item, index) in list" :key="index">
          {{ index + 1 }} - {{ item.name }}
        </li>
      </ul>
    </div>

    <!-- 计算属性 -->
    <div class="box">
      <h4>计算属性</h4>
      <p>全名：{{ fullName }}</p>
    </div>
  </div>
</template>

<script>
export default {
  // 强制：数据
  data() {
    return {
      msg: "Hello Vue",
      num1: 60,
      num2: 40,
      user: { name: "张三", age: 20 },
      isAdult: true,
      isActive: true,
      url: "https://cn.vuejs.org",
      count: 0,
      inputVal: "",
      isShow: true,
      list: [
        { name: "Vue基础" },
        { name: "JavaScript" },
        { name: "HTML+CSS" }
      ],
      firstName: "张",
      lastName: "三"
    }
  },

  // 可选：方法
  methods: {
    add() {
      this.count++
    },
    addNum(n) {
      this.count += n
    },
    toggleShow() {
      this.isShow = !this.isShow
    }
  },

  // 可选：计算属性
  computed: {
    fullName() {
      return this.firstName + this.lastName
    }
  },

  // 可选：侦听器
  watch: {
    inputVal(newVal) {
      console.log("输入内容：", newVal)
    }
  },

  // 可选：生命周期
  created() {
    console.log("组件创建完成")
  },
  mounted() {
    console.log("DOM挂载完成")
  }
}
</script>

<style scoped>
.box {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ccc;
}
.active {
  color: red;
  font-weight: bold;
}
</style>

三、快速回顾

- 页面轮廓三部分
  - <template>：结构 + 插值 + 所有指令
  - <script>：data（必写）+ 其余配置（可选）
  - <style>：样式
- script 内规则
  - 必写：export default {} + data() { return {} }
  - 可选：methods / computed / watch / 生命周期

二、Vue 模板里除了 `<div>`，还能用哪些标签？

Vue 模板支持所有原生 HTML 标签，没有限制，只是日常开发分工不同，分类举例：

1. 文本 / 行内标签（展示文字、行内内容）

html

预览

<span></span>    <!-- 行内容器，放文字、小图标 -->
<p></p>         <!-- 段落 -->
<h1>~<h6>       <!-- 标题 -->
<b></b> / <strong></strong>  <!-- 加粗 -->
<i></i> / <em></em>          <!-- 斜体 -->
<br>            <!-- 换行 -->

2. 表单标签（配合 v-model 双向绑定，高频使用）

html

预览

<input type="text">  <!-- 输入框 -->
<input type="radio"> <!-- 单选框 -->
<input type="checkbox"> <!-- 复选框 -->
<textarea></textarea>  <!-- 多行文本域 -->
<select>               <!-- 下拉选择框 -->
  <option></option>    <!-- 下拉选项 -->
<button></button>      <!-- 按钮（配合@click事件） -->
<label></label>        <!-- 表单标签 -->

3. 列表标签（配合 v-for 循环渲染）

html

预览

<ul>       <!-- 无序列表 -->
  <li></li>
</ul>

<ol>       <!-- 有序列表 -->
  <li></li>
</ol>

4. 链接 & 媒体标签

html

预览

<a href=""></a>        <!-- 超链接，常用 :href 动态绑定 -->
<img src="">           <!-- 图片，常用 :src 动态绑定 -->
        <!-- 音频 -->
<video></video>        <!-- 视频 -->

5. 布局 / 结构化标签（语义化标签，替代部分 div）

html

预览

<header></header>  <!-- 头部 -->
<nav></nav>        <!-- 导航栏 -->
<main></main>      <!-- 主体内容 -->
<section></section><!-- 区块 -->
<footer></footer>  <!-- 页脚 -->
<aside></aside>    <!-- 侧边栏 -->

6. 表格标签

html

预览

<table>
  <thead></thead>
  <tbody>
    <tr>          <!-- 行 -->
      <td></td>   <!-- 单元格 -->
      <th></th>   <!-- 表头单元格 -->
    </tr>
  </tbody>
</table>

结合你现在接触的 Vue 两种写法（选项式 API、script setup），分场景讲变量、函数定义、使用规则，搭配对应示例，同时区分普通变量、响应式变量。

一、先分清两大写法

选项式 API（传统写法，export default + data + methods） Vue2 / 入门教学、老项目常用，结构固定。
<script setup>（Vue3 组合式语法糖） Vue3 新项目主流，写法更简洁。

二、写法 1：选项式 API（你之前学的标准结构）

1. 定义变量（分两类：页面要用的响应式变量、内部临时变量）

1.1 页面模板要使用的变量 → 写在 `data()` 中

Vue 会自动把 data 里的变量变成响应式，模板 {{ }}、指令可直接使用。语法固定：data 必须是函数，return 一个对象，变量写在对象里。

vue

<script>
export default {
  // 【定义响应式变量】模板、方法都能直接用
  data() {
    return {
      // 基础类型变量：字符串、数字、布尔
      msg: "Hello Vue",
      count: 0,
      isOpen: false,

      // 对象变量（表单、复杂数据常用）
      form: {
        name: "",
        age: 18
      },

      // 数组变量
      list: ["苹果", "香蕉"]
    }
  },

  // 后面放函数
  methods: {}
}
</script>

使用规则

模板中使用：直接写变量名

vue

<template>
  <p>{{ msg }}</p>
  <p>计数：{{ count }}</p>
  <p>{{ form.name }}</p>
</template>

JS 方法内部使用：必须加 this.

运行

methods: {
  test() {
    console.log(this.msg)
    this.count = this.count + 1 // 修改变量
  }
}

1.2 仅 JS 内部使用、模板不用的临时变量

直接写在 export default 外部，或方法内部，非响应式。

vue

<script>
// 全局临时变量，整个组件内可用，模板访问不到
let tempNum = 100

export default {
  data() {
    return {}
  },
  methods: {
    fn() {
      // 方法内局部变量，仅当前函数可用
      let str = "局部文本"
      console.log(tempNum, str)
    }
  }
}
</script>

2. 定义函数（方法）→ 统一写在 `methods` 里

所有事件函数、业务逻辑函数，全部放入 methods: {}。

基础语法

vue

<script>
export default {
  data() {
    return {
      count: 0
    }
  },

  // 【定义函数】所有自定义方法写在这里
  methods: {
    // 1. 无参函数
    add() {
      this.count++
    },

    // 2. 带参函数
    addNum(num) {
      this.count += num
    },

    // 3. 开关/选择器自带参数（如 el-switch、单选框 @change）
    switchHandle(val) {
      // val 是组件自动传过来的值（布尔/选中项）
      console.log("当前状态：", val)
    },

    // 4. 异步函数（接口请求、表单提交用 async/await）
    async submitForm() {
      try {
        // 异步逻辑
      } catch (err) {

      }
    }
  }
}
</script>

函数调用

模板中调用：@事件名="函数名"

vue

<template>
  <button @click="add">+1</button>
  <button @click="addNum(5)">+5</button>
  <el-switch @change="switchHandle" />
</template>

JS 内部互相调用：this.函数名()

运行

methods: {
  a() {
    this.b() // 调用同 methods 里的 b 函数
  },
  b() {
    console.log("被调用了")
  }
}

三、写法 2：`<script setup>`（Vue3 主流写法）

1. 定义变量

分为 响应式变量（页面要同步更新）和 普通变量。需要手动引入 ref / reactive 实现响应式。

1.1 基础类型（字符串、数字、布尔）→ 用 `ref`

vue

<script setup>
// 1. 引入 Vue 响应式API
import { ref } from 'vue'

// 【定义响应式变量】基础类型：数字、字符串、布尔
const msg = ref("Hello Setup")
const count = ref(0)
const locationEnabled = ref(false) // 对应你代码里的开关变量

// 普通变量（非响应式，页面不会同步更新，仅内部使用）
let temp = 200
</script>

使用规则

模板中：直接写变量名，不用 .value

vue

<template>
  <p>{{ msg }}</p>
  <p>{{ count }}</p>
  <el-switch v-model="locationEnabled" />
</template>

JS 内部修改 / 取值：必须加 .value

运行

count.value = count.value + 1
locationEnabled.value = true

1.2 对象、数组 → 用 `reactive`

适合表单、复杂对象（你代码里的 form 就是这种）

vue

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

// 【定义响应式对象】表单、复杂数据首选
const form = reactive({
  activityName: "",
  startDate: ""
})

// 数组
const list = reactive(["Vue", "JS"])
</script>

使用规则

模板 & JS 内部：直接点属性，不用 .value

运行

// JS 内部
form.activityName = "新建活动"

2. 定义函数

直接在 <script setup> 顶层书写，不需要放到 methods，定义完模板直接调用。

完整示例

vue

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

const count = ref(0)
const locationEnabled = ref(false)

// 1. 无参函数
function add() {
  count.value++
}

// 2. 带参函数
function addNum(n) {
  count.value += n
}

// 3. 组件事件函数（自带参数 val）
function handleLocationChange(val) {
  console.log("开关状态：", val)
  locationEnabled.value = val
}

// 4. 异步函数（表单提交、接口请求）
async function handleSubmit() {
  // 异步逻辑
}
</script>

函数调用

和选项式一致，模板用 @事件="函数名"：

vue

<template>
  <button @click="add">加1</button>
  <el-switch @change="handleLocationChange" />
  <button @click="handleSubmit">提交</button>
</template>

函数互相调用

直接写函数名即可，不用 this：

运行

function fn1() {
  fn2() // 直接调用
}
function fn2() {
  console.log("执行 fn2")
}

四、两种写法核心对比（速记）

1. 变量定义

表格

场景	选项式 API	script setup
页面要用的变量	写在 `data()` 里，自动响应式	基础类型用 `ref`，对象用 `reactive`
JS 内取值 / 修改	加 `this.变量名`	ref 变量加 `.value`，reactive 直接访问
模板使用	直接写变量名	直接写变量名

2. 函数定义

表格

场景	选项式 API	script setup
存放位置	全部放入 `methods:{}`	脚本顶层直接定义
内部调用	`this.函数名()`	直接写函数名
模板调用	`@click="xxx"`	`@click="xxx"`（写法一致）

五、结合你项目代码举例（对照理解）

示例 1：开关相关变量 + 函数

1）选项式 API

运行

export default {
  data() {
    return {
      locationEnabled: false // 变量
    }
  },
  methods: {
    // 函数
    handleLocationChange(val) {
      console.log(val)
    }
  }
}

2）script setup

运行

<script setup>
import { ref } from 'vue'
// 定义变量
const locationEnabled = ref(false)

// 定义函数
function handleLocationChange(val) {
  console.log(val)
}
</script>

亚马逊云科技技术品牌专区

更多推荐

LoRA（低秩适配）：大模型高效微调的革命性技术

LoRA（低秩适配）是一种高效的大模型微调技术，通过冻结预训练模型权重并注入低秩可训练矩阵，显著降低计算和存储成本。相比全量微调，LoRA参数减少90%以上，显存需求降至3-8GB，训练时间缩短至数小时，且支持灵活任务切换。其核心优势包括低硬件门槛、高效训练和部署灵活性，适用于垂直领域适配、生成式AI定制等场景。经验表明，秩r=4或8通常效果良好，但LoRA在数据量极大或任务复杂时可能受限。技术演

亚马逊云科技技术品牌专区

2026年AI写作辅助平台推荐：9款高效AI工具终极指南

亚马逊云科技技术品牌专区

TVA对具身智能领域“莫拉维克悖论“的挑战（19）

亚马逊云科技技术品牌专区

所有评论(0)

查看更多评论

m0_74153220

@m0_74153220

已为社区贡献1条内容

vue终极使用教程，从0开始

m0_74153220

一、Vue 整体组成（三大核心部分）

1. 单文件组件标准结构（.vue 文件，项目主流）

Vue 基础使用教程（快速上手版）

一、两种引入方式

1. CDN 引入（零配置，快速测试）

2. 脚手架 Vite（正式项目推荐）

二、核心基础语法

1. 插值语法 {{ }}

2. 常用指令（Vue 核心）

（1）v-text / v-html

（2）v-bind：绑定属性（简写 :）

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

（4）v-model：双向数据绑定（表单专属）

（5）条件渲染 v-if /v-show

（6）列表渲染 v-for

二、Vue 中 JS 的书写规则 & 核心配置项

前置说明

1. 基础骨架（固定模板）

1.1 CDN 形式 JS 骨架

1.2 单文件组件（.vue）JS 骨架

2. 核心配置项（JS 必学内容）

① data：定义页面数据（变量）

② methods：定义函数 / 方法（事件、通用逻辑）

③ computed：计算属性（派生数据）

④ watch：侦听器（监听数据变化）

⑤ 生命周期钩子（函数）

三、原生 JS 在 Vue 中怎么用？（重点）

1. 位置规则

2. 常用原生 JS 场景 + 示例

场景 1：分支判断 if / else

场景 2：数组操作（遍历、增删改查）

场景 3：定时器 setTimeout / setInterval

场景 4：字符串、数字、对象等基础语法

场景 5：接口请求（原生 fetch /axios）

3. 模板中能写哪些 JS？

四、总结梳理

1. Vue 三大组成

2. Vue 中 JS 核心配置（必记）

3. JS 使用原则

示例

二、script 标签内：强制项 & 可选项（选项式 API）

1. 强制 / 必备项

2. 可选配置项（按需添加，不用就不写）

一、{{}} 插值语法详解

1. 作用

2. 基本用法

一、Vue 页面通用空架构（纯轮廓，无业务逻辑）

1. CDN 全局版 空架构

2. 单文件组件 .vue 空架构（项目主流）

二、完整版综合示例（包含：插值 + 全部常用指令 + 方法 / 计算 / 侦听 / 生命周期）

CDN 完整综合案例（可直接打开运行）

同逻辑 单文件组件版（.vue，项目里直接用）

三、快速回顾

二、Vue 模板里除了 <div>，还能用哪些标签？

1. 文本 / 行内标签（展示文字、行内内容）

2. 表单标签（配合 v-model 双向绑定，高频使用）

3. 列表标签（配合 v-for 循环渲染）

4. 链接 & 媒体标签

5. 布局 / 结构化标签（语义化标签，替代部分 div）

6. 表格标签

一、先分清两大写法

二、写法 1：选项式 API（你之前学的标准结构）

1. 定义变量（分两类：页面要用的响应式变量、内部临时变量）

1.1 页面模板要使用的变量 → 写在 data() 中

使用规则

1.2 仅 JS 内部使用、模板不用的临时变量

2. 定义函数（方法）→ 统一写在 methods 里

基础语法

函数调用

三、写法 2：<script setup>（Vue3 主流写法）

1. 定义变量

1.1 基础类型（字符串、数字、布尔）→ 用 ref

使用规则

1.2 对象、数组 → 用 reactive

使用规则

2. 定义函数

完整示例

函数调用

1. 单文件组件标准结构（`.vue` 文件，项目主流）

1. 插值语法 `{{ }}`

（2）v-bind：绑定属性（简写 `:`）

（3）v-on：绑定事件（简写 `@`）

场景 1：分支判断 `if / else`

场景 3：定时器 `setTimeout / setInterval`

1. CDN 全局版空架构

同逻辑单文件组件版（.vue，项目里直接用）

二、Vue 模板里除了 `<div>`，还能用哪些标签？

1.1 页面模板要使用的变量 → 写在 `data()` 中

2. 定义函数（方法）→ 统一写在 `methods` 里

三、写法 2：`<script setup>`（Vue3 主流写法）

1.1 基础类型（字符串、数字、布尔）→ 用 `ref`

1.2 对象、数组 → 用 `reactive`