【Vue.js基础】

m0_719414562024-09-27 19:28
  • [Vue.js 快速上手指南](#Vue.js 快速上手指南)
    • [1. Vue.js 简介](#1. Vue.js 简介)
      • [1.1 Vue.js 的特点](#1.1 Vue.js 的特点)
    • [2. 学习 Vue 2 还是 Vue 3？](#2. 学习 Vue 2 还是 Vue 3？)
      • [2.1 Vue.js 下载](#2.1 Vue.js 下载)
      • [2.2 在页面引入 Vue.js](#2.2 在页面引入 Vue.js)
    • [3. Vue.js 入门](#3. Vue.js 入门)
      • [3.1 入门程序 - Hello World](#3.1 入门程序 - Hello World)
      • [3.2 Class 与 Style 绑定](#3.2 Class 与 Style 绑定)
        • [3.2.1 Class 绑定](#3.2.1 Class 绑定)
        • [3.2.2 Style 绑定](#3.2.2 Style 绑定)
      • [3.3 v-text 和 v-html](#3.3 v-text 和 v-html)
      • [3.4 v-if 和 v-for](#3.4 v-if 和 v-for)
      • [3.5 v-model](#3.5 v-model)
      • [3.6 组件](#3.6 组件)
      • [3.7 生命周期钩子](#3.7 生命周期钩子)
    • [4. 结论](#4. 结论)

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

html 复制代码 
<!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

html 复制代码 
<!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 绑定
html 复制代码 
<!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 绑定
html 复制代码 
<!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。
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 用于列表渲染。
html 复制代码 
<!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 元素上创建双向数据绑定。

html 复制代码 
<!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 支持组件化开发，可以创建可复用的组件。

html 复制代码 
<!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 实例在创建过程中会经历多个阶段：创建、编译、挂载、更新和销毁。每个阶段都有相应的生命周期钩子。

html 复制代码 
<!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>

4. 结论

提供了简洁的语法和高效的数据绑定机制，使得开发复杂的用户界面变得简单而高效。Vue.js 是一个现代化的前端框架，它通过简洁的设计和强大的功能，极大地简化了用户界面的开发过程。Vue.js 的核心优势在于其渐进式架构，使得开发者可以轻松地将其集成到现有的项目中，或者用于构建全新的单页应用。

相关推荐
JuneTT几秒前
uniapp 常用高度状态栏，导航栏，tab栏，底部安全高度
前端·javascript·uni-app
i801327 分钟前
delphi制作漂亮的农历窗体（IntraWeb+Layui的完美结合）
前端·javascript·layui
南瓜啊27 分钟前
【VUE】状态管理：Pinia组件、Cookie组件
前端·javascript·vue.js
@月落1 小时前
获取douyin商品详情：API接口的力量
java·前端·数据库
CherishTaoTao1 小时前
uniapp vue3 使用echarts绘制图表 柱状图等
vue.js·uni-app·echarts
大青虫1 小时前
关于uniapp wifi调用走过的坑
前端·uni-app
媛媛要加油呀1 小时前
web功能测试总结（自用分享）
运维·服务器·前端·功能测试
hakesashou1 小时前
python命令行怎么换行
java·前端·python
**之火1 小时前
前端项目package.json文件对象属性介绍
前端·配置
追风筝的少女2 小时前
vue-baidu-map的基本使用
前端·javascript·vue.js
热门推荐
01组基轨迹建模 GBTM的介绍与实现（Stata 或 R）02RAG 实践- Ollama+RagFlow 部署本地知识库032024年高教社杯数学建模国赛C题超详细解题思路分析04CANoe Trace窗口过滤栏消失的几种解决方法（附上最终解决方案）05yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提072024年网络安全比赛--系统渗透测试（超详细）08软件工程从理论到实践客观题汇总(头歌第一章至第八章)09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10大数据分析案例-基于SVM支持向量机算法构建手机价格分类预测模型