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

Vue之入门(Vue是什么以及Vue工作原理)

news 来源：原创 2025/5/21 10:42:07

文章目录

- Vue简介
- - 2.1.1 什么是 vue
  - 2.1.2 vue 原理
  - - 2.1 vue 特性
    - - 数据驱动视图
      - 双向数据绑定
      - 总结
    - 2.2 MVVM
    - 2.3 MVVM 的工作原理
  - 2.1.3 vue 的版本
- 2.2 vue 的基本使用
- - 2.2.1 基本使用步骤
  - 2.2.2 基本代码与 MVVM 的对应关系
- 2.3 vue 的调试工具
- - 2.3.1安装 vue-devtools 调试工具
  - 2.3.2 配置 Chrome 浏览器中的 vue-devtools
  - 2.3.3 使用 vue-devtools 调试 vue 页面

Vue简介

2.1.1 什么是 vue

官方给出的概念：Vue (读音 /vjuː/，类似于 view) 是用于构建用户界面的j渐进式框架。

构建用户界面
- 用 vue 往 html 页面中填充数据，非常的方便
渐进式: 可以使用核心包开发，可以使用Vue核心包+插件工程化开发
框架
- 框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能！
- 要学习 vue，就是在学习 vue 框架中规定的用法！
- vue 的指令、组件（是对 UI 结构的复用）、路由、Vuex(这是状态管理的一个东西)、vue 组件库
- 只有把上面罗列的内容掌握以后，才有开发 vue 项目的能力！

使用js开发能提高70%的效率。

下面举个例子，我使用三种方式完成下面的页面。
在这里插入图片描述

使用js开发

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>js开发</title></head>
<style>#product-list {display: flex;}.product-item{height: 100px;margin-right: 10px;}
</style><body><div id="product-list"></div><script>// 模拟商品数据（实际开发中通过接口获取）const products = [{ id: 1, name: "商品A", price: 100, image: "image1.jpg" },{ id: 2, name: "商品B", price: 200, image: "image2.jpg" }];// 渲染商品列表function renderProducts() {const productList = document.getElementById('product-list');productList.innerHTML = ''; // 清空旧内容products.forEach(product => {const productDiv = document.createElement('div');productDiv.className = 'product-item';productDiv.innerHTML = `<img src="${product.image}" alt="${product.name}"><h3>${product.name}</h3><p>价格: ¥${product.price}</p><button onclick="addToCart(${product.id})">加入购物车</button>`;productList.appendChild(productDiv);});}// 初始化渲染renderProducts();</script>
</body></html>

使用核心代码库Vue开发

<!DOCTYPE html>
<html><head><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<style>.product-list {display: flex;}.product-item {height: 100px;margin-right: 10px;}
</style><body><div id="app"><div class="product-list"><div class="product-item" v-for="product in products"><img :src="product.image" :alt="product.name"><h3>{{ product.name }}</h3><p>价格: ¥{{ product.price }}</p><button @click="addToCart">加入购物车</button></div></div></div><script>// 根实例new Vue({el: '#app',data: {products: [{ id: 1, name: "商品A", price: 100, image: "image1.jpg" },{ id: 2, name: "商品B", price: 200, image: "image2.jpg" }]},});</script>
</body></html>

使用cli脚手架构建webpack工程开发

<template><div class="product-list"><div class="product-item" v-for="product in products"><img :src="product.image" :alt="product.name"><h3>{{ product.name }}</h3><p>价格: ¥{{ product.price }}</p><button @click="addToCart">加入购物车</button></div></div>
</template><script>
export default {data(){return{ products: [{ id: 1, name: "商品A", price: 100, image: "image1.jpg" },{ id: 2, name: "商品B", price: 200, image: "image2.jpg" }]}}
} 
</script><style lang="less" scoped>.product-list {display: flex;}.product-item {height: 100px;margin-right: 10px;}
</style>

通过对比发现使用核心代码库开发和webpack开发比JavaScript开发代码少了不少。

2.1.2 vue 原理

2.1 vue 特性

为什么上面的Vue代码不用操作DOM元素就可以直接复制呢？

vue 框架的特性，主要体现在如下两方面：
① 数据驱动视图
② 双向数据绑定

数据驱动视图

在使用了 vue 的页面中，vue 会监听数据的变化，从而自动重新渲染页面的结构。示意图如下：

在这里插入图片描述

好处：当页面数据发生变化时，页面会自动重新渲染！
注意：数据驱动视图是单向的数据绑定。

双向数据绑定

在填写表单时，双向数据绑定可以辅助开发者在不操作 DOM 的前提下，自动把用户填写的内容同步到数据源

中。示意图如下：

请添加图片描述

好处：开发者不再需要手动操作 DOM 元素，来获取表单元素最新的值！

总结

数据驱动视图（单向）：
- 数据的变化会驱动视图自动更新
- 好处：程序员只管把数据维护好，那么页面结构会被 vue 自动渲染出来！
双向数据绑定：

在网页中，form 表单负责采集数据，Ajax 负责提交数据。

js 数据的变化，会被自动渲染到页面上
页面上表单采集的数据发生变化的时候，会被 vue 自动获取到，并更新到 js 数据中

注意：数据驱动视图和双向数据绑定的底层原理是 MVVM（Mode 数据源、View 视图、ViewModel (就是 vue 的实例)）

2.2 MVVM

MVVM 是 vue 实现数据驱动视图和双向数据绑定的核心原理。MVVM 指的是 Model、View 和 ViewModel，

它把每个 HTML 页面都拆分成了这三个部分，如图所示：

请添加图片描述

在 MVVM 概念中：

Model 表示当前页面渲染时所依赖的数据源。(后端返回给前端的值)
View 表示当前页面所渲染的 DOM 结构。也就是声明的一些标签(页面标签)
ViewModel 表示 vue 的实例，它是 MVVM 的核心。也就是Vue

2.3 MVVM 的工作原理

ViewModel 作为 MVVM 的核心，是它把当前页面的数据源（Model）和页面的结构（View）连接在了一起。

请添加图片描述

当数据源发生变化时，会被 ViewModel 监听到，VM 会根据最新的数据源自动更新页面的结构

当表单元素的值发生变化时，也会被 VM 监听到，VM 会把变化过后最新的值自动同步到 Model 数据源中

2.1.3 vue 的版本

当前，vue 共有 3 个大版本，其中：

1.x 版本的 vue 几乎被淘汰，不再建议学习与使用
2.x 版本的 vue 是目前企业级项目开发中的主流版本 (vue2 在未来会被逐渐淘汰)
3.x 版本的 vue 于 2020-09-19 发布，生态还不完善，尚未在企业级项目开发中普及和推广（vue3 是未来企业级项目开发的趋势）

2.2 vue 的基本使用

2.2.1 基本使用步骤

① 导入 vue.js 的 script 脚本文件
② 在页面中声明一个将要被 vue 所控制的 DOM 区域
③ 创建 vm 实例对象（vue 实例对象）

首先将第二章中资料的lib文件夹放入新建的day2_code文件夹中，用VsCode打开day2_code文件夹

注意也可以直接引入在线版这样就不用下载了：Vue官网获取在线的vue.js 的 script 脚本文件
在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!-- 希望 Vue 能够控制下面的这个 div，帮我们在把数据填充到 div 内部 --><div id="app">{{ username }}</div><!-- 1. 导入 Vue 的库文件，在 window 全局就有了 Vue 这个构造函数 --><script src="./lib/vue-2.6.12.js"></script><!-- 2. 创建 Vue 的实例对象 --><script>// 创建 Vue 的实例对象const vm = new Vue({// el 属性是固定的写法，表示当前 vm 实例要控制页面上的哪个区域，接收的值是一个选择器el: '#app',// data 对象就是要渲染到页面上的数据data: {username: 'zhangsan'}})</script>
</body></html>