Vue.js 基础教程：从入门到实践

不会算法的小灰2025-11-06 17:32

一、Vue.js 简介

Vue.js 是一个渐进式 JavaScript 框架，用于构建用户界面。与其他大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

二、环境搭建

1. 使用ES模块构建版本

这是最简单的方式，适合初学者快速体验 Vue 的功能。

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 入门案例</title>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>

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

    const app = createApp({
        data() {
            return {
                message: 'Hello Vue!'
            }
        }
    });

    app.mount('#app');
</script>
</body>
</html>

2. 通过 NPM 安装（适合大型项目）

bash 复制代码 
npm install vue

三、Vue 常用指令详解与案例

Vue 提供了丰富的指令，用于在模板中绑定数据、事件、属性等。以下是常用的指令及其使用案例。

1. v-bind：绑定属性

用于绑定 HTML 属性到 Vue 实例的属性或表达式上。简写为 :。

案例：绑定图片地址

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 入门案例</title>
</head>
<body>
    <div id="app">
      <img :src="imageUrl" alt="Vue Logo">
    </div>

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

    const app = createApp({
        data() {
          return {
            imageUrl: 'https://vuejs.org/images/logo.png'
          };
        }
    });

    app.mount('#app');
</script>
</body>
</html>

2. v-model：双向数据绑定

用于在表单元素上创建双向数据绑定。

案例：输入框双向绑定

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 入门案例</title>
</head>
<body>
    <div id="app">
      <input type="text" v-model="message">
      <p>你输入的内容是: {{ message }}</p>

    </div>

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

    const app = createApp({
        data() {
          return {
            message:''
          };
        }
    });

    app.mount('#app');
</script>
</body>
</html>

3. v-if / v-else-if / v-else：条件渲染

根据表达式的真假条件性地渲染元素。

案例：条件显示内容

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 入门案例</title>
</head>
<body>
    <div id="app">
      <p v-if="score>=90">
        优秀
      </p>
      <p v-else-if="score>=75">
        良好
      </p>
      <p v-else-if="score>=60">
        及格
      </p>
      <p v-else>
        不及格
      </p>

    </div>

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

    const app = createApp({
        data() {
          return {
            score:85
          };
        }
    });

    app.mount('#app');
</script>
</body>
</html>

4. v-for：列表渲染

用于基于数组渲染列表。

案例：遍历数组

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 入门案例</title>
</head>
<body>
    <div id="app">
      <ul >
        <li v-for="item in list" :key="item.id">
          {{ item.id }} - {{ item.name }} - {{ item.age }}

        </li>
      </ul>
    </div>

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

    const app = createApp({
        data() {
          return {
            list: [
              { id: 1, name: '张三', age: 18 },
              { id: 2, name: '李四', age: 28 },
              { id: 3, name: '王五', age: 38 }
            ]
          };
        }
    });

    app.mount('#app');
</script>
</body>
</html>

5. v-on：事件监听

用于监听 DOM 事件，简写为 @。

案例：点击按钮增加计数

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on 示例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>当前计数：{{ count }}</p>
        <button v-on:click="count++">增加</button>
        <!-- 简写形式 -->
        <button @click="count--">减少</button>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                count: 0
            }
        });
    </script>
</body>
</html>

6. v-show：根据条件显示或隐藏元素

与 v-if 不同，v-show 通过 CSS 的 display 属性控制元素的显示和隐藏。

案例：切换元素显示

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-show 示例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <p v-show="isVisible">这个段落是可见的</p>
        <button @click="isVisible = !isVisible">切换显示</button>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                isVisible: true
            }
        });
    </script>
</body>
</html>

四、综合案例：待办事项列表

结合以上指令，我们创建一个简单的待办事项列表应用。

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 待办事项列表</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        ul {
            list-style-type: none;
            padding: 0;
        }
        li {
            margin: 5px 0;
        }
        .completed {
            text-decoration: line-through;
            color: gray;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>待办事项列表</h1>
        <input v-model="newTodo" @keyup.enter="addTodo" placeholder="添加新任务">
        <button @click="addTodo">添加</button>
        <ul>
            <li v-for="todo in todos" :key="todo.id">
                <input type="checkbox" v-model="todo.completed">
                <span :class="{ completed: todo.completed }">{{ todo.text }}</span>
                <button @click="removeTodo(todo.id)">删除</button>
            </li>
        </ul>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                newTodo: '',
                todos: []
            },
            methods: {
                addTodo() {
                    if (this.newTodo.trim() === '') return;
                    this.todos.push({
                        id: Date.now(),
                        text: this.newTodo,
                        completed: false
                    });
                    this.newTodo = '';
                },
                removeTodo(id) {
                    this.todos = this.todos.filter(todo => todo.id !== id);
                }
            }
        });
    </script>
</body>
</html>

五、总结

通过本教程，我们学习了：

  • Vue.js 的基本概念和环境搭建
  • 常用指令（v-bind、v-model、v-if、v-for、v-on、v-show）的使用
  • 通过一个综合案例，将所学知识应用到实际开发中

Vue.js 的学习曲线平缓，但功能强大。掌握这些基础知识后，你可以进一步探索 Vue 的组件化开发、路由管理（Vue Router）、状态管理（Vuex）等高级特性，构建更加复杂和高效的应用。

相关推荐
阿里巴啦3 分钟前
用React+Three.js 做 3D Web版搭建三维交互场景：模型的可视化摆放与轻量交互
前端·react·three.js·模型可视化·web三维·web三维交互场景
daols8812 分钟前
vue 甘特图 vxe-gantt table 连接线的用法详解
vue.js·甘特图·vxe-table
Liu.77414 分钟前
vue3组件之间传输数据
前端·javascript·vue.js
|晴 天|14 分钟前
前端闭包：从概念到实战，解锁JavaScript高级技能
开发语言·前端·javascript
开发者小天15 分钟前
react的拖拽组件库dnd-kit
前端·react.js·前端框架
用户44455436542625 分钟前
在Android开发中阅读源码的指导思路
前端
用户542778485154027 分钟前
ESM 模块（ECMAScript Module）详解
前端
全栈前端老曹42 分钟前
【ReactNative】核心组件与 JSX 语法
前端·javascript·react native·react.js·跨平台·jsx·移动端开发
用户54277848515401 小时前
JavaScript 闭包详解：由浅入深掌握作用域与内存管理的艺术
前端
小小黑0071 小时前
快手小程序-实现插屏广告的功能
前端·javascript·小程序
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03Linux下V2Ray安装配置指南04安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）05在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）06RedissonClient的配置解析07BongoCat - 跨平台键盘猫动画工具08jdk21下载、安装（Windows、Linux、macOS）09Open-AutoGLM Windows 安装部署教程10Labelme从安装到标注：零基础完整指南