前端学习系列（5）：前端框架基础之Vue.js入门

原创于 2025-03-17 19:52:14 发布 · 1.1k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #前端框架 #学习

前端学习系列专栏收录该内容

15 篇文章

订阅专栏

前端学习系列（5）：前端框架基础之Vue.js入门

一、回顾与引入

在上一期中，我们深入学习了JavaScript的高级特性，包括函数式编程、闭包、异步编程以及复杂交互效果的实现。本期，我们将开启前端框架的学习之旅，重点探索Vue.js框架的基础知识，它能帮助我们更高效地构建用户界面。

二、Vue.js基本概念与安装配置

2.1 Vue.js是什么

Vue.js是一款渐进式JavaScript框架，专注于构建用户界面。与其他大型框架不同，Vue被设计为可以自底向上逐层应用。它的核心库只关注视图层，易于上手，同时也能与其他库或已有项目整合。在复杂的单页应用开发中，Vue.js借助相关的工具和库，同样能发挥强大的作用。

2.2 安装Vue.js

Vue.js提供了多种安装方式，对于初学者，直接通过CDN引入是最便捷的方式。在HTML文件的<head>标签中添加如下代码：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

如果使用构建工具，如Webpack，可通过npm进行安装：

npm install vue

三、Vue实例的创建与数据绑定

3.1 创建Vue实例

创建Vue实例是使用Vue.js的基础。在JavaScript文件中，通过new Vue()来创建一个Vue实例，并传入一个配置对象。例如：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Vue实例创建</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: '欢迎学习Vue.js!'
            }
        });
    </script>
</body>
</html>

在上述代码中，el属性指定了Vue实例要挂载的DOM元素，data属性定义了Vue实例的数据。在HTML中，通过{{ message }}进行插值，将Vue实例中的数据显示在页面上。

3.2 数据绑定

Vue.js支持多种数据绑定方式，除了插值表达式，还有双向数据绑定。双向数据绑定允许数据在视图和模型之间自动同步更新。例如，使用v-model指令实现表单元素与数据的双向绑定：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>双向数据绑定</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <input v-model="message" placeholder="输入内容">
        <p>{{ message }}</p>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: ''
            }
        });
    </script>
</body>
</html>

在这个例子中，当在输入框中输入内容时，message数据会同步更新，同时<p>标签中的内容也会随之改变。

四、指令（Directives）的使用

4.1 v-bind指令

v-bind指令用于动态绑定HTML元素的属性。例如，动态绑定src属性来显示不同的图片：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>v-bind指令</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <img v-bind:src="imageUrl" alt="示例图片">
        <button v-bind:disabled="isButtonDisabled">点击我</button>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                imageUrl: 'https://example.com/image.jpg',
                isButtonDisabled: false
            }
        });
    </script>
</body>
</html>

在代码中，v-bind:src根据imageUrl数据动态设置图片的src属性，v-bind:disabled根据isButtonDisabled数据动态控制按钮的禁用状态。v-bind指令也可以简写为:，如:src="imageUrl"。

4.2 v-if和v-for指令

v-if指令用于条件性地渲染元素，只有当表达式的值为真时，元素才会被渲染到DOM中。例如：

<div id="app">
    <button @click="toggleShow">切换显示</button>
    <p v-if="isShow">这是一个根据条件显示的段落</p>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            isShow: true
        },
        methods: {
            toggleShow() {
                this.isShow =!this.isShow;
            }
        }
    });
</script>

v-for指令用于基于一个数组来渲染一个列表。例如：

<div id="app">
    <ul>
        <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            items: ['苹果', '香蕉', '橙子']
        }
    });
</script>

在v-for指令中，item是数组中的每一个元素，index是元素的索引，:key用于给每个渲染的元素提供一个唯一标识，提高渲染效率。

五、组件化开发的基础概念与实践

5.1 组件化开发的概念

组件化开发是Vue.js的核心特性之一。组件是可复用的Vue实例，每个组件都有自己的HTML模板、JavaScript逻辑和CSS样式。通过将页面拆分成多个组件，可以提高代码的可维护性和复用性。

5.2 创建和使用组件

在Vue中，创建一个全局组件的方式如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>组件化开发</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <my - component></my - component>
    </div>
    <script>
        // 创建全局组件
        Vue.component('my-component', {
            template: '<div><h2>这是一个自定义组件</h2><p>组件内容</p></div>'
        });

        const app = new Vue({
            el: '#app'
        });
    </script>
</body>
</html>