当前位置：首页 > news >正文

【Vue.js基础】

news 来源：原创 2024/9/27 19:20:13

Vue.js 快速上手指南
- 1. Vue.js 简介
- - 1.1 Vue.js 的特点
- 2. 学习 Vue 2 还是 Vue 3？
- - 2.1 Vue.js 下载
  - 2.2 在页面引入 Vue.js
- 3. Vue.js 入门
- - 3.1 入门程序 - Hello World
  - 3.2 Class 与 Style 绑定
  - - 3.2.1 Class 绑定
    - 3.2.2 Style 绑定
  - 3.3 v-text 和 v-html
  - 3.4 v-if 和 v-for
  - 3.5 v-model
  - 3.6 组件
  - 3.7 生命周期钩子
- 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

<!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>