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）等高级特性，构建更加复杂和高效的应用。

相关推荐
掘金一周2 小时前
没开玩笑，全框架支持的 dialog 组件，支持响应式| 掘金一周 11.6
前端·人工智能
拉不动的猪3 小时前
浏览器&Websocket&热更新
前端·javascript·vue.js
那些免费的砖3 小时前
Reka UI - 一款免费开源的 Vue 无头 UI 组件库，样式定制开发项目的绝佳选择
vue.js·ui·开源
Never_Satisfied3 小时前
在JavaScript中，将包含HTML实体字符的字符串转换为普通字符
开发语言·javascript·html
im_AMBER3 小时前
React 12
前端·javascript·笔记·学习·react.js·前端框架
开开心心就好3 小时前
电脑音质提升：杜比全景声安装详细教程
java·开发语言·前端·数据库·电脑·ruby·1024程序员节
午安～婉3 小时前
HTML CSS八股
前端·css·html
有事没事实验室3 小时前
css变量
前端·css
前端付豪4 小时前
Vue 中的 JSX：让组件渲染更灵活的正确方式
前端·javascript·vue.js
热门推荐
01GitHub 镜像站点02综合整理：pdf预览显示：你尝试预览的文件可能对你的计算机有害。如果你信任此文件以及其来源，请打开此文件以看其内容，如何解决以正常预览文件03UV安装并设置国内源04npm使用国内淘宝镜像的方法05Linux下V2Ray安装配置指南06安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）07BongoCat - 跨平台键盘猫动画工具08《大数据技术原理与应用》实验报告三 熟悉HBase常用操作09NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南10GitLab 零基础入门指南：从安装到项目管理全流程