【Vue.js基础】-CSDN博客

本文链接：https://blog.csdn.net/m0_71941456/article/details/142486824

Vue.js 快速上手指南

Vue.js 快速上手指南

Vue.js 是一个轻量级、易于上手的前端框架，它提供了一套简洁的模板语法和响应式数据绑定机制，使得开发复杂的用户界面变得简单而高效。本文将带你快速了解 Vue.js 的基本概念、特性，并提供一些实用的代码示例。

1. Vue.js 简介

Vue.js（读音 /vjuː/，类似于 “view”）是一个用于构建用户界面的渐进式框架。它的核心库只关注视图层，易于上手，并且可以与第三方库或现有项目整合。Vue.js 的设计哲学是自底向上逐层应用，使得开发者可以根据项目需求灵活地选择使用它的哪一部分。

1.1 Vue.js 的特点

简洁：HTML 模板 + JSON 数据，再创建一个 Vue 实例，就这么简单。
数据驱动：自动追踪依赖的模板表达式和计算属性。
组件化：用解耦、可复用的组件来构造界面。
轻量：压缩后大约 33.46KB，无依赖。
快速：精确有效的异步批量 DOM 更新。
模块友好：通过 NPM 或 Yarn 安装，无缝融入你的工作流。

2. 学习 Vue 2 还是 Vue 3？

Vue 3 于 2020 年 9 月 19 日发布正式版，命名为“One Piece”。Vue 3 带来了更好的性能、更小的包体积、更好的 TypeScript 集成以及更优秀的 API 设计。从 2022 年 2 月 7 日起，Vue 3 成为默认安装版本。因此，现在学习 Vue 3 是非常合适的。

2.1 Vue.js 下载

你可以通过访问 Vue.js 的官方网站 Vue.js 来下载 Vue.js。下载后，你可以在页面中引入 Vue.js 文件。

2.2 在页面引入 Vue.js

<!DOCTYPE html>
<html>
<head>
    <title>Vue.js 示例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
        });
    </script>
</body>
</html>

3. Vue.js 入门

3.1 入门程序 - Hello World

<!DOCTYPE html>
<html>
<head>
    <title>Vue.js Hello World</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello World!'
            }
        });
    </script>
</body>
</html>

3.2 Class 与 Style 绑定

Vue.js 提供了 v-bind:class 和 v-bind:style 指令来动态绑定 class 和 style。

3.2.1 Class 绑定

<!DOCTYPE html>
<html>
<head>
    <title>Vue.js Class 绑定</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <div :class="{ active: isActive, 'text-danger': hasError }"></div>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                isActive: true,
                hasError: false
            }
        });
    </script>
</body>
</html>

3.2.2 Style 绑定

<!DOCTYPE html>
<html>
<head>
    <title>Vue.js Style 绑定</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <div :style="styleObject"></div>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                styleObject: {
                    color: 'red',
                    fontSize: '20px'
                }
            }
        });
    </script>
</body>
</html>

3.3 v-text 和 v-html

v-text 用于更新元素的 textContent。
v-html 用于输出真正的 HTML。

<!DOCTYPE html>
<html>
<head>
    <title>Vue.js v-text 和 v-html</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <p v-text="text"></p>
        <p v-html="html"></p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                text: 'This is a text.',
                html: '<strong>This is HTML.</strong>'
            }
        });
    </script>
</body>
</html>

3.4 v-if 和 v-for

v-if 用于条件渲染。
v-for 用于列表渲染。

<!DOCTYPE html>
<html>
<head>
    <title>Vue.js v-if 和 v-for</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <p v-if="seen">Now you see me.</p>
        <ul>
            <li v-for="item in items" :key="item.id">
                {{ item.text }}
            </li>
        </ul>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                seen: true,
                items: [
                    { id: 1, text: 'Item 1' },
                    { id: 2, text: 'Item 2' }
                ]
            }
        });
    </script>
</body>
</html>

3.5 v-model

v-model 用于在表单 input、textarea 及 select 元素上创建双向数据绑定。

<!DOCTYPE html>
<html>
<head>
    <title>Vue.js v-model</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <input v-model="message" placeholder="Edit me">
        <p>Message is: {{ message }}</p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: ''
            }
        });
    </script>
</body>
</html>

3.6 组件

Vue.js 支持组件化开发，可以创建可复用的组件。

<!DOCTYPE html>
<html>
<head>
    <title>Vue.js 组件</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <person-component></person-component>
    </div>
    <script>
        Vue.component('person-component', {
            template: '<div>Person Component</div>'
        });

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

3.7 生命周期钩子

Vue 实例在创建过程中会经历多个阶段：创建、编译、挂载、更新和销毁。每个阶段都有相应的生命周期钩子。

<!DOCTYPE html>
<html>
<head>
    <title>Vue.js 生命周期钩子</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{ message }}</p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            },
            beforeCreate: function () {
                console.log('Before create');
            },
            created: function () {
                console.log('Created');
            },
            beforeMount: function () {
                console.log('Before mount');
            },
            mounted: function () {
                console.log('Mounted');
            },
            beforeUpdate: function () {
                console.log('Before update');
            },
            updated: function () {
                console.log('Updated');
            },
            beforeDestroy: function () {
                console.log('Before destroy');
            },
            destroyed: function () {
                console.log('Destroyed');
            }
        });
    </script>
</body>
</html>