【Vue.js基础】

  • [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:classv-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 用于在表单 inputtextareaselect 元素上创建双向数据绑定。

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 的核心优势在于其渐进式架构,使得开发者可以轻松地将其集成到现有的项目中,或者用于构建全新的单页应用。

相关推荐
@小红花36 分钟前
从0到1学习Vue框架Day03
前端·javascript·vue.js·学习·ecmascript
前端与小赵39 分钟前
vue3中 ref() 和 reactive() 的区别
前端·javascript·vue.js
魔云连洲1 小时前
Vue的响应式底层原理:Proxy vs defineProperty
前端·javascript·vue.js
专注VB编程开发20年1 小时前
CSS定义网格的列模板grid-template-columns什么意思,为什么要用这么复杂的单词
前端·css
黑金IT1 小时前
Dart → `.exe`:Flutter 桌面与纯命令行双轨编译完全指南
flutter
IT_陈寒1 小时前
Redis性能提升50%的7个关键优化策略,90%开发者都不知道第5点!
前端·人工智能·后端
iOS_MingXing1 小时前
flutter TabBar 设置isScrollable 第一个有间距
flutter
Hilaku1 小时前
深入URL和URLSearchParams:别再用正则表达式去折磨URL了
前端·javascript·代码规范
pubuzhixing1 小时前
Canvas 的性能卓越,用它解决一个棘手问题
前端
weixin_456904271 小时前
Vue.jsmain.js/request.js/user.js/store/index.js Vuex状态管理项目核心模块深度解析
前端·javascript·vue.js