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

第1集丨Vue 江湖 —— Hello Vue

news 文章来源：https://blog.csdn.net/DUQGQG/article/details/131975643 2025/5/15 11:11:53

Vue（读音 /vjuː/, 类似于 view）是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动，概括为以下三点：

Vue 是一套构建用户界面的渐进式框架。
Vue 只关注视图层，采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

1.1 参考网址

Vue3 官网
Vue2 中文文档官网

1.2 下载

开发版和生产版
下载地址：Vue.js下载

二、Hello Vue

用VSCode新建一个简单的VUEJS工程，结构目录如下：

在这里插入图片描述

2.1 创建页面

新建index.html页面，引入vue.js
准备一个div容器，创建Vue模板
将Vue实例和容器绑定

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../lib/vue.js"></script>
</head>
<body><!-- 准备好一个容器:称为Vue模板 两个花括号为插值语法，里面的为js表达式--><div id="root"><h1>hello {{name.toUpperCase()}}!</h1></div><script>// 阻止 vue 在启动时生成生产提示。Vue.config.productionTip = false;// 创建Vue实例：容器和实例一对一new Vue({el:"#root",// data中用于存储数据，数据提供el所指定的的容器去使用。data: {name:'Vue'}});</script>
</body>
</html>

2.2 安装Live Server插件

在扩展里面搜索Live Server ，然后安装

在这里插入图片描述

安装完成之后，在html页面中，右击可以查看到Open with Live Server选项，以后页面就此选项打开。

在这里插入图片描述

2.4 安装 vue-devtools

打开Microsoft Edge 浏览器，在插件应用商店里面搜索vue-devtools安装即可。

2.5 预览效果

我们打开Vue-devtools 可以查看到Vue的实例数据。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。

注意我们不再和 HTML 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #root) 然后对其进行完全控制。那个 HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部。
在这里插入图片描述

目录

一、简介

1.1 参考网址

1.2 下载

二、Hello Vue

2.1 创建页面

2.2 安装Live Server插件

2.4 安装 vue-devtools

2.5 预览效果

相关文章：