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 分钟前
北斗形变监测传感器在大坝安全监测中的应用与优势分析
前端
孔令飞10 分钟前
如何学习Go
前端
HUIBUR科技14 分钟前
AI 中枢，面向企业场景构建的 AI 智能体
前端·数据库·人工智能
怕浪猫21 分钟前
给AI配一台电脑，开源版Muse来了，OpenMuse赶紧去二次开发吧
javascript·面试·github
随便写个软件31 分钟前
【新版本】EasyExplorer资源管理器 3.12.0——地址栏重要更新
运维·服务器·前端·everything·资源管理器
Jack N34 分钟前
【Strapi 系列之二】Collection / Single / Component 怎么选？Strapi 字段大全一篇讲透
前端·javascript·strapi
hiahiahia12341 分钟前
Agent Tool 执行失败怎么办
服务器·前端
Java后端的Ai之路42 分钟前
09-React组件生命周期
前端·react.js·前端框架
撸串-研究生43 分钟前
面向景区的综合服务管理平台设计——以稻城亚丁景区为例【附源码】
java·开发语言·vue.js·前后端分离·稻城亚丁景区
IT_陈寒1 小时前
SpringBoot开发实战:从入门到精通
前端·人工智能·后端
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02历年考研数学一、数学二、数学三真题试卷及答案PDF03GitHub 镜像站点04「全语录+省流版」邵艾伦 × 孙宇晨：聊风口、聊个人IP、聊年轻人如何抓住 AI 时代的机会05蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接06如何新建文件夹？ 电脑新建文件夹的4种方法07Windows 10/11 如何退出微软账户并改用本地账户登录（含找不到选项的解决方法）08Telegram APK 下载安装完整指南 — 2026年最新09轻量化AI渗透武器库｜ARTEX自主攻防系统、资产梳理、漏洞挖掘、链路分析全流程智能化落地10微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新