第一天

一、为什么要学Vue？

如果你想做前端开发，Vue几乎是绕不开的技能。为啥呢？

前端必备：现在前端岗位招聘，Vue是高频要求的技能
应用广泛：大部分互联网公司（比如阿里、腾讯、字节等）都在使用Vue开发项目
提高效率：用Vue能少写很多重复代码，让开发变快
薪资友好：掌握Vue（尤其是Vue2+Vue3）是拿高薪的加分项

二、什么是Vue？

Vue（读音类似"view"）是一套构建用户界面的渐进式框架。

1. 什么是"构建用户界面"？

简单说就是：基于数据自动生成用户能看到的页面。比如你有个数据msg: "你好"，Vue能帮你把这个文字显示到页面上，不用你手动操作DOM。

2. 什么是"渐进式"？

就是可以"学一点用一点"，不用一次性学完所有内容。比如：

只想改页面的一小部分？用Vue核心包就行
想开发整个网站？再加上Vue插件和工程化工具就行

3. 什么是"框架"？

框架是一套完整的解决方案，就像盖房子的"毛坯房"——已经有了基本结构，你只需要按规则添砖加瓦。

和"库"（比如axios、echarts）的区别：

库是"工具箱"，需要你自己决定怎么用
框架是"半成品房子"，你得按它的规则来装修

三、创建Vue实例：4步搞定

想让Vue帮你干活，得先创建一个Vue实例。核心步骤有4步：

准备容器：在HTML里留一块地方让Vue管理
引入Vue包：从官网或CDN引入Vue核心文件
创建实例：用new Vue()创建实例
配置参数：告诉Vue要管理哪块区域、用什么数据

示例代码：

<!-- 1. 准备容器 -->
<div id="app">{% raw %}{{ msg }}{% endraw %}</div>

<!-- 2. 引入Vue包（开发版本，带调试功能） -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<script>
  // 3. 创建Vue实例
  const app = new Vue({
    // 4. 配置参数：el指定管理的容器（用id选择器）
    el: '#app',
    // data提供数据
    data: {
      msg: 'Hello Vue!'
    }
  })
</script>

运行后，页面会显示Hello Vue!—— 这就是 Vue 基于数据渲染界面的基本用法。

四、插值表达式：{{}} 显示数据

插值表达式是 Vue 最基础的 “数据展示工具”，用{{ 表达式 }}的形式把数据放到页面上。

1. 能做什么？

显示变量：{{ name }}
做简单计算：{{ age + 1 }}
三元运算：{{ score >= 60 ? '及格' : '不及格' }}
调用方法：{{ formatTime() }}（方法要写在methods里）

2. 示例代码：

<div id="app">
  <p>姓名：{% raw %}{{ uname }}{% endraw %}</p>
  <p>年龄：{% raw %}{{ age + 1 }}{% endraw %}</p>
  <p>状态：{% raw %}{{ isVip ? '会员' : '普通用户' }}{% endraw %}</p>
  <p>欢迎语：{% raw %}{{ getWelcome() }}{% endraw %}</p>
</div>

<script>
const app = new Vue({
  el: '#app',
  data: {
    uname: '张三',
    age: 18,
    isVip: true
  },
  methods: {
    getWelcome() {
      return '欢迎回来，' + this.uname
    }
  }
})
</script>

3. 注意事项：

必须用表达式（能算出结果的代码），不能写语句（比如if、for）
数据必须在data里定义，否则会报错
不能用在标签属性里（比如<p title="{{ msg }}">不行）

五、响应式特性：数据变，页面自动变

Vue 最爽的特性之一：当你修改数据时，页面会自动更新，不用手动操作 DOM。

1. 怎么用？

访问数据：用实例.属性名，比如app.uname（在控制台里可以直接输）
修改数据：用实例.属性名 = 新值，比如app.age = 19，页面会自动显示 19

示例代码：

<div id="app">
  <p>当前数量：{% raw %}{{ count }}{% endraw %}</p>
</div>

<script>
const app = new Vue({
  el: '#app',
  data: {
    count: 10
  }
})
</script>

在控制台输入app.count = 20，页面会立刻显示 “当前数量：20”。

六、Vue 开发者工具：调试好帮手

写 Vue 代码时，用专门的调试工具能让你更清楚数据变化。

安装方法：

推荐用 “极简插件” 网站（https://chrome.zzzmh.cn/）搜索 “Vue Devtools” 下载
下载后，把插件拖到 Chrome 的扩展程序页面（打开 Chrome，地址栏输chrome://extensions/）

怎么用？

打开页面后按 F12，会多一个 “Vue” 标签，里面能看到当前 Vue 实例的数据、方法等，修改数据也能实时看到效果。

七、常用指令：简化 DOM 操作

指令是 Vue 提供的特殊标签属性（带v-前缀），能帮你快速操作 DOM。常用的有 6 类：

1. 内容渲染指令：显示文本 / HTML

v-text：类似innerText，会覆盖标签原有内容
1
<p v-text="msg">原来的文字会被覆盖</p>

v-html：类似innerHTML，能解析 HTML 标签

<p v-html="richText"></p>
<script>
  const app = new Vue({
    data: {
      richText: '<strong>加粗的文字</strong>' // 页面会显示加粗的文字
    }
  })
</script>

2. 条件渲染指令：控制元素显隐

v-show：通过display: none控制显隐（适合频繁切换）
1
<div v-show="isShow">我会根据isShow显隐</div>
v-if：直接添加 / 删除元素（适合不频繁切换）
1
<div v-if="isLogin">已登录</div>

v-else / v-else-if：配合 v-if 做多条件判断

1
2
3

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

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

给元素绑定事件（点击、输入等），语法v-on:事件名="处理逻辑"，简写@事件名="处理逻辑"。

直接写简单逻辑：

1 2	`<button @click="count++">点我加1</button> <p>{% raw %}{{ count }}{% endraw %}</p>`

调用方法：

<button @click="sayHi">打招呼</button>
<script>
  const app = new Vue({
    data: { name: 'Vue' },
    methods: {
      sayHi() {
        alert('你好，' + this.name) // 方法里用this访问数据
      }
    }
  })
</script>

传参数：

<button @click="buy('可乐', 5)">买可乐</button>
<script>
  methods: {
    buy(name, price) {
      console.log(`买了${name}，花了${price}元`)
    }
  }
</script>

4. 属性绑定指令：v-bind（简写:）

动态设置标签属性（比如src、class、style），语法v-bind:属性名="变量"，简写:属性名="变量"。

示例代码：动态设置图片地址

<img :src="imgUrl" :title="imgTitle" alt="">
<script>
const app = new Vue({
  data: {
    imgUrl: './pic.jpg', // 图片路径
    imgTitle: '这是一张图片'
  }
})
</script>

5. 列表渲染指令：v-for

循环渲染列表，语法v-for="(item, index) in 数组"，要配合:key使用（提高性能）。

示例代码：渲染书籍列表

<ul>
  <li v-for="(book, index) in books" :key="book.id">
    第{% raw %}{{ index+1 }}{% endraw %}本：{% raw %}{{ book.name }}{% endraw %} - 作者{% raw %}{{ book.author }}{% endraw %}
  </li>
</ul>

<script>
const app = new Vue({
  data: {
    books: [
      { id: 1, name: '《红楼梦》', author: '曹雪芹' },
      { id: 2, name: '《西游记》', author: '吴承恩' }
    ]
  }
})
</script>

注意：:key的值必须唯一（推荐用数据的 id，不用 index）。

6. 双向绑定指令：v-model

专门给表单元素（输入框、复选框等）用，实现 “数据变，表单变；表单变，数据变”。

示例代码：登录表单

<div id="app">
  账户：<input type="text" v-model="username"><br>
  密码：<input type="password" v-model="password"><br>
  <button @click="login">登录</button>
  <button @click="reset">重置</button>
</div>

<script>
const app = new Vue({
  el: '#app',
  data: {
    username: '',
    password: ''
  },
  methods: {
    login() {
      console.log('登录信息：', this.username, this.password)
    },
    reset() {
      this.username = ''
      this.password = '' // 清空数据，表单会自动清空
    }
  }
})
</script>

八、实战小案例

1. 图片切换器

功能：点击 “上一页”" 下一页 " 切换图片，首尾页隐藏对应按钮。

<div id="app">
  <button @click="prev" v-show="index > 0">上一页</button>
  <img :src="list[index]" alt="图片" style="width: 300px;">
  <button @click="next" v-show="index < list.length - 1">下一页</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
  el: '#app',
  data: {
    list: [ // 图片路径数组（可替换为自己的图片路径）
      'https://picsum.photos/200/300?1',
      'https://picsum.photos/200/300?2',
      'https://picsum.photos/200/300?3'
    ],
    index: 0 // 当前显示的图片索引
  },
  methods: {
    prev() { this.index-- },
    next() { this.index++ }
  }
})
</script>

2. 小黑记事本

功能：添加笔记、删除笔记、统计数量、清空所有。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>小黑记事本</title>
  <style>
    .container {
      width: 400px;
      margin: 20px auto;
      text-align: center;
    }
    input {
      width: 250px;
      padding: 8px;
      margin-right: 8px;
    }
    button {
      padding: 8px 16px;
      cursor: pointer;
    }
    ul {
      list-style: none;
      padding: 0;
      margin-top: 20px;
    }
    li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px;
      border-bottom: 1px solid #eee;
    }
    li button {
      background-color: #ff4444;
      color: white;
      border: none;
      border-radius: 4px;
    }
    .footer {
      margin-top: 20px;
      color: #666;
    }
  </style>
</head>
<body>
  <div class="container" id="app">
    <h2>小黑记事本</h2>
    <input 
      type="text" 
      v-model="note" 
      @keyup.enter="addNote"
      placeholder="请输入笔记内容"
    >
    <button @click="addNote">添加</button>

    <ul>
      <li v-for="(item, i) in notes" :key="i">
        {% raw %}{{ item }}{% endraw %}
        <button @click="delNote(i)">删除</button>
      </li>
    </ul>

    <div class="footer" v-if="notes.length > 0">
      共{% raw %}{{ notes.length }}{% endraw %}条笔记
      <button @click="clearAll" style="margin-left: 10px;">清空</button>
    </div>
    <div class="footer" v-else>暂无笔记</div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        note: '',
        notes: ['学习Vue', '写技术博客'] // 初始笔记
      },
      methods: {
        addNote() {
          // 空内容不添加
          if (this.note.trim() === '') return
          // 添加到数组
          this.notes.push(this.note)
          // 清空输入框
          this.note = ''
        },
        delNote(i) {
          // 删除第i个元素
          this.notes.splice(i, 1)
        },
        clearAll() {
          // 清空数组
          this.notes = []
        }
      }
    })
  </script>
</body>
</html>

总结

Vue 的核心是 “数据驱动”—— 你只需要关注数据，页面渲染交给 Vue。这一天主要是学了 Vue 的基础概念、核心语法和实战案例，掌握这些后，就可以开始开发简单的 Vue 应用了。