一、Vue.js 快速入门

Vue.js 是一款轻量、高效的前端 JavaScript 框架，专注于构建用户界面，具有渐进式的特点，适合初学者快速上手。

✅ 引入 Vue 的方式

1. 使用 CDN（适合初学者快速尝试）：

1
<script src="https://unpkg.com/vue@2.7.16/dist/vue.js"></script>

2. 创建 Vue 实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="app">
    <h1>{{message}}</h1>
    <h1>{{count}}</h1>
  </div>
  

  <script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';

    createApp({
      data() {
        return {
          message: 'Hello Vue',
          count: 100
        }
      }
    }).mount('#app');
  </script>

✅ 运行效果：

页面会显示 Hello Vue!，100 ,{{ message }} 和{{count}}是 Vue 的数据绑定语法。

二、常用指令详解

Vue 指令以 v- 开头，用来在 HTML 模板中操作数据、绑定事件等。

1. v-for：循环渲染列表

✅ 示例：

1
2
3
<ul>
  <li v-for="item in fruits">{{ item }}</li>
</ul>
1
2
3
data: {
  fruits: ['苹果', '香蕉', '橙子']
}

✅ 支持索引：

1
<li v-for="(item, index) in fruits">{{ index }} - {{ item }}</li>

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

✅ 绑定图片、链接、class、style 等

1
2
3
<img v-bind:src="imgUrl">
<a v-bind:href="link">点击我</a>
<div v-bind:class="className"></div>
1
2
3
4
5
data: {
  imgUrl: 'logo.png',
  link: 'https://vuejs.org',
  className: 'active'
}

✅ 简写：

1
<img :src="imgUrl">

3. v-if：条件渲染（控制显示与隐藏）

✅ 示例：

1
<p v-if="isLoggedIn">欢迎回来！</p>
1
2
3
data: {
  isLoggedIn: true
}

✅ 可配合 v-else：

1
2
<p v-if="score >= 60">及格</p>
<p v-else>不及格</p>

4. v-show：显示/隐藏（通过 display:none 控制）

✅ 示例：

1
<p v-show="isVisible">我可以显示或隐藏</p>

与 v-if 不同，v-show 不会销毁元素，只是控制显示状态。

5. v-model：双向数据绑定（多用于表单）

✅ 示例：绑定输入框

1
2
<input v-model="name">
<p>你好，{{ name }}</p>
1
2
3
data: {
  name: ''
}

Vue 会自动将输入框的值和 data.name 双向绑定，输入内容自动更新数据。

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

✅ 示例：按钮点击事件

1
<button v-on:click="sayHi">点击我</button>
1
2
3
4
5
methods: {
  sayHi() {
    alert("你好！");
  }
}

✅ 简写：

1
<button @click="sayHi">点击我</button>

✅ 常见事件：

  • click：点击
  • mouseover：鼠标移入
  • keyup：键盘按键抬起
  • submit：表单提交

总结：指令速查表

指令 功能说明 示例
v-for 列表渲染 v-for="item in list"
v-bind 属性绑定 :src="imgUrl"
v-if 条件渲染（控制结构） v-if="flag"
v-show 控制显示/隐藏 v-show="visible"
v-model 双向绑定（表单） v-model="inputValue"
v-on 事件监听 @click="handleClick"