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

Vue 入门指南：从零开始学习 Vue 的基础知识

news 2025/7/29 21:52:24

🥝VUE官方文档
注意：

📒Vue 2 将于 2023 年 12 月 31 日停止维护。详见 Vue 2 延长 LTS。
📒Vue 2 中文文档已迁移至 v2.cn.vuejs.org。
📒想从 Vue 2 升级？请参考迁移指南。

文章目录

- 🍁前言
- 🍁ES6学习必要
- 🍁安装 Vue
- 🍁Vue.JS概念
- 🍁Vue.JS特点
- 🍁插值表达式
- - 🍂文本
  - 🍂HTML
  - 🍂Attribute
  - 🍂使用 JavaScript 表达式
- 🍁代码示例

🍁前言

Vue 是一个前端框架，它使得构建交互式应用程序变得更加容易，让前端开发者能够更好地处理复杂的数据，并使得用户界面更加美观、可应对各种设备。使用 Vue 可以在较短的时间内构建出具有雄心壮志的单页应用程序，它也很容易与其他工具协同工作。

学习VUE之前，要学习ES6的语法，ES6 教程

🍁ES6学习必要

在学习 Vue.js 之前，学习 ES6（ECMAScript 2015）是很有必要的，原因如下：

📒官方推荐：Vue.js 官方文档和社区中广泛使用了 ES6 的语法和特性。通过学习 ES6，您将能更好地理解和应用 Vue.js 中的示例代码和文档。
📒新特性支持：ES6 引入了许多强大的新特性，如箭头函数、解构赋值、模块化、Promise、Class、模板字符串等。这些特性可以提高开发效率，使代码更简洁、可读性更好，并且可以充分利用 JavaScript 的功能。
📒提升开发效率：ES6 提供了许多语言层面的功能和优化，使得开发人员可以更快、更高效地编写和组织代码。比如箭头函数可以简化函数的定义和使用，解构赋值可以方便地从对象或数组中提取值。
📒模块化支持：ES6 引入了模块化的概念，使得代码可以按模块组织、导入和导出。这种模块化的开发方式可以提高代码的可维护性和可测试性，也符合现代化的开发规范。
📒兼容性和未来发展：ES6 是 JavaScript 的下一代标准，浏览器厂商和开发者社区都在积极支持和推广。掌握 ES6 让您能够编写更先进的 JavaScript 代码，并且能够顺利迁移到未来的 JavaScript 版本，同时还能兼顾旧版本的浏览器兼容性。

总的来说，学习 ES6 可以让您更好地理解和应用 Vue.js，同时也提升了您作为前端开发者的技能水平和竞争力。它是现代 JavaScript 开发的重要基础，对于学习和掌握任何现代的前端框架和工具都是非常有帮助的。

🍁安装 Vue

首先，需要从 Vue 的官方网站下载相关的脚本文件，或者通过类似 npm 或 Yarn 的工具安装。下载的文件包含了 Vue 的核心代码和几个常用的插件，可以通过 script 标签或操作性的方法引入到你的项目中。
下载脚本，在官网中下载
在这里插入图片描述

//引包
<script src="./vue.js"></script>
//或者 不需要下载直接引用Vue 库
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

🍁Vue.JS概念

Vue.js（通常称为Vue）是一个用于构建用户界面的渐进式JavaScript框架。它专注于视图层，采用了响应式数据绑定和组件化的开发方式，可以帮助开发者构建交互性的单页应用程序（Single-Page Applications，SPA）和可复用的组件。

Vue.js的核心思想是通过将视图（HTML模板）和数据（JavaScript对象）进行双向绑定，实现数据的自动更新和视图的响应性。这意味着当数据发生变化时，页面上对应的视图部分会自动更新，而不需要手动操作DOM。这使得开发者能够专注于业务逻辑和数据处理，而不必过多关注繁琐的DOM操作。

Vue.js也支持组件化开发，通过将页面拆分为多个独立可复用的组件，实现更好的代码组织和可维护性。每个组件都有自己的模板、逻辑和样式，可以独立进行开发和测试，并可以在不同的应用程序中共享和复用。

Vue.js还提供了许多其他功能和特性，如路由管理（Vue Router）、状态管理（Vuex）、动画效果（Vue Transitions）等，以满足不同项目的需求。

总的来说，Vue.js 是一个灵活、易学且功能强大的前端框架，帮助开发者构建高效、响应式的用户界面。

🍁Vue.JS特点

Vue.js 作为一个主流的前端框架，与其他框架相比具有以下特点和优势：

📒简单易学
Vue.js 的语法和概念相对简单，易于学习和上手。它采用了响应式的数据绑定和组件化的开发方式，使得开发者可以快速构建交互式的单页应用程序。
📒灵活性
Vue.js 可以与其他库或现有项目集成，也可以逐步应用到现有项目中。它不强制性地依赖特定的工具链，因此开发者可以根据自身需求选择合适的构建工具和库。
📒渐进式框架
Vue.js 是一个渐进式框架，可以根据项目规模和复杂度选择使用不同规模的功能。无论是小型的交互式组件还是大型的单页应用程序，Vue.js 都能提供适当的解决方案。
📒性能优化
Vue.js 在性能方面做了很多优化，包括虚拟 DOM、异步更新、组件级别的缓存策略等。这些优化措施使得应用程序可以高效地运行，响应速度更快。
📒生态系统丰富
Vue.js 生态系统非常丰富，有大量的第三方插件和库可供选择，以满足各种需求。同时，Vue.js 也有一个活跃的社区，提供了丰富的教程、文档和支持。

与其他框架相比，例如 React 和 Angular，Vue.js 的学习曲线相对较低，语法更加简洁直观。React 更加注重组件化和声明式编程，而 Angular 更注重模块化和强大的工具集。不同的框架适用于不同的项目和团队需求，开发者可以根据自身情况和偏好选择合适的框架。

🍁插值表达式

🍂文本

Vue 的插值表达式用双大括号{{}}表示，可以将数据动态地绑定到模板中。在双大括号中，你可以使用 Vue 实例中的数据属性，并将其显示在视图中。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>vue的插值表达式</title></head><body><div id="app"><h2>{{ text }}</h2></div><script src="./vue.js"></script><script>const v = new Vue({el:'#app',data:{text:'vue study'}});</script></body>
</html>

在上面的例子中，我们创建了一个 Vue 实例，并将其绑定到 id 为 app 的元素上。data 选项用来定义实例的数据属性，其中 text是一个字符串类型的数据属性。

在 HTML 文件中，我们通过使用双大括号 {{}} 的插值表达式来显示 text属性的值。当 Vue 实例中的 text属性发生变化时，对应的文本内容也会自动更新。

🍂HTML

在 Vue 的插值表达式中，默认情况下会对输出的文本内容进行转义，以防止XSS（跨站脚本攻击）的安全问题。这意味着如果你在插值表达式中包含 HTML 标签，它们将会以文本形式被展示而不会被解析为实际的 HTML。

如果你确实需要在插值表达式中显示原始 HTML，可以使用 v-html 指令。与 v-text 指令不同，v-html 指令会解析绑定的数据中包含的 HTML 标签，并将其作为实际的 HTML 内容进行渲染。

示例：

<div v-html="htmlContent"></div>

在上面的示例中，htmlContent 是 Vue 实例中的一个数据属性，它的值是一个包含 HTML 标签的字符串。v-html 指令会将 htmlContent 的值解析为 HTML，并将其渲染到 div 元素中。

需要注意的是，对于使用 v-html 指令的内容，要确保它们来自于可信的来源，以避免潜在的安全风险。使用不受信任的内容时，一定要进行恰当的过滤和验证。

总结：插值表达式默认会将输出的文本进行转义，但如果你需要在 Vue 模板中显示原始 HTML 内容，可以使用 v-html 指令来实现。请谨慎使用，并确保内容来源可信。

🍂Attribute

在 Vue 的插值表达式中，你可以使用 v-bind 指令（或简写形式的冒号 :）来动态绑定 HTML 属性。

以下是一些例子：

使用变量绑定属性值：

<a v-bind:href="url">{{ linkText }}</a>

在上面的例子中，属性 href 的值将被动态地绑定为 url 变量的值。linkText 表达式将作为链接的文本内容。

直接绑定表达式作为属性值：

<img v-bind:src="imageSrc">

在上面的例子中，src 属性的值将被绑定为 imageSrc 表达式的值。这通常用于动态加载图像。

绑定动态的 CSS 类：

<div v-bind:class="active ? 'active' : 'inactive'"></div>

在上面的例子中，class 属性的值将根据 active 变量的值动态绑定不同的 CSS 类。

请注意，对于布尔类型的属性，通过简单地省略属性值可以将其绑定为真值：

<input type="checkbox" v-bind:checked="isActive">

在上面的例子中，如果 isActive 为 true，则 checked 属性会被添加到元素上。

总结：通过使用 v-bind 指令，在 Vue 的插值表达式中可以动态地绑定 HTML 属性。你可以使用变量、表达式或布尔值来绑定属性的值。

🍂使用 JavaScript 表达式

在 Vue 的插值表达式中，你可以使用 JavaScript 表达式执行简单的计算、逻辑判断和其他操作。以下是一些例子：

执行简单的计算：

<p>{{ num1 + num2 }}</p>

上面的例子中，Vue 将会计算 num1 和 num2 的和，并将结果作为文本显示在

标签中。

进行逻辑判断：

<p v-if="showText">{{ message }}</p>

在上面的例子中，当 showText 的值为真时，Vue 将会渲染显示 message 变量的值。否则，该段落标签将不会显示。

调用函数或方法：

<p>{{ getFullName(firstName, lastName) }}</p>

在上面的例子中，getFullName 是一个在 Vue 实例中定义的方法，它接收 firstName 和 lastName 作为参数，并返回一个完整的姓名。

请注意，插值表达式中的 JavaScript 表达式应该是简单和非副作用的。复杂的逻辑和大量的计算应该尽量放在 Vue 实例的计算属性或方法中，然后在插值表达式中使用这些属性或方法。

🍁代码示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>vue的插值表达式</title></head><body><div id="app"><h2>{{ text }}</h2><h2>{{ getContent() }}</h2><h2>{{ 1<2 ? 'true':'false' }}</h2></div><script src="./vue.js"></script><script>const v = new Vue({el:'#app',data:{text:'vue study',text2:'Hello!'},methods:{getContent(){return this.text2 + ' ' + this.text}}});</script></body>
</html>

运行结果：
在这里插入图片描述

🏫博客主页：魔王-T

🥝大鹏一日同风起扶摇直上九万里

❤️感谢大家点赞👍收藏⭐评论✍️