Vue 介绍与体验

CaptainDrake2024-09-10 15:29

目录

  • [Vue 介绍与体验](#Vue 介绍与体验)
  • [vue 简介](#vue 简介)
  • [Vue的 options](#Vue的 options)
  • [Vue 的基本使用](#Vue 的基本使用)
    • [Vue 安装与使用](#Vue 安装与使用)
    • [Vue2 安装与使用（可选）](#Vue2 安装与使用（可选）)
  • [Vue 的调试工具](#Vue 的调试工具)

Vue 介绍与体验

vue 简介

Sum：

概念：Vue是一套用于构建 用户界面 的 渐进式前端框架。

  • 理解与表达：

    从两个角度解读，

    构建用户界面：通过指令、数据驱动视图、事件绑定等方式构建用户界面

    前端框架：提供一整套构建用户界面的解决方案，包括vue、vue-router、vuex、组件库等

    渐进式概念：可以先针对项目某个模块先用Vue开发，然后再逐步用Vue去开发更多模块。

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

vue 模型：MVVM

  • 理解与表达：

    vue的特性是数据驱动视图和双向数据绑定，其中MVVM是vue实现二者的核心原理，它把每个HTML页面都拆分成了View、ViewModel、Model三个部分，其中View 表示当前页面所渲染的 DOM 结构。Model 表示当前页面渲染时所依赖的数据源。ViewModel 表示 vue 的实例，它是 MVVM 的核心。

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

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

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

  • 理解与表达：

vue 概念

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

关键词1：构建用户界面

概念：基于数据动态渲染页面

关键词2：框架

概念：一整套的项目解决方案，提升开发效率

Vue提供了构建用户界面的一整套解决方案（俗称 vue 全家桶）：

  • vue（核心库）
  • vue-router（路由方案）
  • vuex（状态管理方案）
  • vue 组件库（快速搭建页面 UI 效果的方案）

以及辅助 vue 项目开发的一系列工具：

  • vue-cli（npm 全局包：一键生成工程化的 vue 项目 - 基于 webpack、大而全）
  • vite（npm 全局包：一键生成工程化的 vue 项目 - 小而巧）
  • vue-devtools（浏览器插件：辅助调试的工具）
  • vetur（vscode 插件：提供语法高亮和智能提示）

提到框架，不得不提一下库。

  • 库，类似工具箱，是一堆方法的集合，比如 axios、lodash、echarts等
  • 框架，是一套完整的解决方案，实现了大部分功能，我们只需要按照一定的规则去编码即可。

关键词：渐进式

概念：可以先针对项目某个模块先用Vue开发，然后再逐步用Vue去开发更多模块。

Vue的两种开发方式：

  1. Vue核心包开发场景：局部模块改造
  2. Vue核心包&Vue插件&工程化场景：整站开发

vue 特性

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

数据驱动视图

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

好处：当页面数据发生变化时，页面会自动重新渲染！

注意：数据驱动视图是单向的数据绑定。

双向数据绑定

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

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

MVC和MVVM模型

MVC和MVVM都是一种软件的体系结构

概念：MVC是Model -- View --Controller的简称，是在前期流行的框架架构模式，比如iOS、前端；

比如 Controller 从 Server 获取数据，然后传递给 Model，Model 将渲染后的结果传递给 Control，最后渲染到 View上

前端的MVC：比如我们就可以把 Html 看作 View，JS看作 Controller，然后通过 JS 从服务器获取数据，交给 Model，最后 Model 将渲染后的结果传递给 Control，最后渲染到 View上

MVVM是Model-View-ViewModel的简称，是目前非常流行的架构模式；

概念：MVVM 是 vue 实现数据驱动视图和双向数据绑定的核心原理。以下是对关键概念的理解：

  • Model 表示当前页面渲染时所依赖的数据源。
  • View 表示当前页面所渲染的 DOM 结构。
  • ViewModel 表示 vue 的实例，它是 MVVM 的核心。

它把每个 HTML 页面都拆分成了如下三个部分：

MVVM 的工作原理：

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

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

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

结合计数器案例理解：

vue 版本

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

2.x 版本的 vue 是目前企业级项目开发中的主流版本

3.x 版本的 vue 于 2020-09-19 发布，生态还不完善，尚未在企业级项目开发中普及和推广

1.x 版本的 vue 几乎被淘汰，不再建议学习与使用

vue3.x 和 vue2.x 版本的对比：

vue2.x 中绝大多数的 API 与特性，在 vue3.x 中同样支持。同时，vue3.x 中还新增了 3.x 所特有的功能、并废弃了某些 2.x 中的旧功能：

新增的功能例如：

组合式 API、多根节点组件、更好的 TypeScript 支持等

废弃的旧功能如下：

过滤器、不再支持 o n ， on， on，off 和 $once 实例方法等

详细的变更信息，请参考官方文档给出的迁移指南：

https://v3.vuejs.org/guide/migration/introduction.html

Vue的 options

data属性

data属性是传入一个函数，并且该函数需要返回一个对象：

在Vue2.x的时候，也可以传入一个对象（虽然官方推荐是一个函数）；

在Vue3.x的时候，必须传入一个函数，否则就会直接在浏览器中报错；

基本原理：

data中返回的对象会被Vue的响应式系统劫持，之后对该对象的修改或者访问都会在劫持中被处理：

所以我们在template或者app中通过 {{counter}} 访问counter，可以从对象中获取到数据；

所以我们修改counter的值时，app中的 {{counter}}也会发生改变；

具体这种响应式的原理，我们后面会有专门的篇幅来讲解。

Code:

  • 基础

    jsx 复制代码 
    <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>

  <div id="app">
    <h2>{{message}}</h2>
    <button @click="changeMessage">改变message</button>
  </div>
  
  <script src="./lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      // data: option api
      data: function() {
        return {
          message: "Hello Data"
        }
      },
      // methods: option api
      methods: {
        changeMessage: function() {
          this.message = "你好, 师姐!"
        }
      }
    })

    app.mount("#app")
  </script>
</body>
</html>

methods属性

methods属性是一个对象，通常我们会在这个对象中定义很多的方法：

这些方法可以被绑定到 模板中；

在该方法中，我们可以使用this关键字来直接访问到data中返回的对象的属性；

对于有经验的同学，在这里我提一个问题，官方文档有这么一段描述：

问题一：为什么不能使用箭头函数（官方文档有给出解释）？

问题二：不使用箭头函数的情况下，this到底指向的是什么？（可以作为一道面试题）

Res:

箭头函数的this是绑定到上层作用域的this上。比如，如下箭头函数的this就相当于全局作用域的this，指向 window。因此，methods中定义方法不能使用箭头函数。

  • Code:

    jsx 复制代码 
    <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>
  
  <div id="app">
    <h2>当前计数: {{counter}}</h2>
    <button @click="increment">+1</button>
  </div>

  <script src="./lib/vue.js"></script>
  <script>

    console.log(this)

    const app = Vue.createApp({
      data: function() {
        return {
          counter: 0
        }
      },

      // methods: option api
      methods: {
        increment: function() {
          this.counter++
        },
        // 强调: methods中函数不能写成箭头函数
        // increment: () => {
        //   console.log(this)
        // }
      }
    })

    app.mount("#app")
  </script>
</body>
</html>

Vue 的基本使用

Vue 安装与使用

方式一：在页面中通过CDN的方式来引入；

jsx 复制代码 
<script src="https://unpkg.com/vue@next"></script>

Case:

jsx 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const app = Vue.createApp({
      template: `<h2>Hello World</h2>`
    })
    app.mount("#app")
  </script>
</body>
</html>

方式二：下载Vue的JavaScript文件，并且自己手动引入；

jsx 复制代码 
<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>

  <div id="app"></div>
  
  <script src="./lib/vue.js"></script>
  <script>
    
    // 1.创建app
    const app = Vue.createApp({
      template: `<h1>Hello Vue</h1>`
    })

    // 2.挂载app
    app.mount("#app")

  </script>

</body>
</html>

方式三：通过npm包管理工具安装使用它（webpack笔记里）；

方式四：直接通过Vue CLI创建项目，并且使用它；

Vue2 安装与使用（可选）

基本使用步骤

  1. 引包（官网） --- 开发版本/生产版本
  2. 创建Vue实例 new Vue()
  3. 指定配置项，渲染数据
    1. el:指定挂载点
    2. data提供数据

官网引包（直接用）：

jsx 复制代码 
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

注意：开发版本包含完整的警告和调试模式；生产版本删除了警告，体积更小。

案例：

jsx 复制代码 
<!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>
<!-- 1-Vue所管理的范围 -->
<div id="app">
  <!-- 这里将来会编写一些用于渲染的代码逻辑 -->
  <h1>{{ msg }}</h1>
  <a href="#">{{ count }}</a>
</div>

<!-- 2-引入的是开发版本包 - 包含完整的注释和警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

<script>
  // 一旦引入 VueJS核心包，在全局环境，就有了 Vue 构造函数
  const app = new Vue({
    // 通过 el 配置选择器，指定 Vue 管理的是哪个盒子
    el: '#app',
    // 通过 data 提供数据
    data: {
      msg: 'Hello 传智播客',
      count: 666
    }
  })

</script>

  
</body>
</html>

Vue2网址：https://v2.cn.vuejs.org/

Vue 的调试工具

安装 vue-devtools 调试工具：

vue 官方提供的 vue-devtools 调试工具，能够方便开发者对 vue 项目进行调试与开发。

Chrome 浏览器在线安装 vue-devtools

vue 2.x 调试工具：
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

vue 3.x 调试工具：
https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg

注意：vue2 和 vue3 的浏览器调试工具不能交叉使用

配置 Chrome 浏览器中的 vue-devtools：

点击 Chrome 浏览器右上角的 按钮，选择更多工具 -> 扩展程序 -> Vue.js devtools 详细信息，并勾选如下的两个选项：

注意：修改完配置项，须重启浏览器才能生效！

使用 vue-devtools 调试 vue 页面：

在浏览器中访问一个使用了 vue 的页面，打开浏览器的开发者工具，切换到 Vue 面板，即可使用 vue-devtools调试当前的页面。

相关推荐
Bug缔造者4 小时前
Element-ui el-table 全局表格排序
前端·javascript·vue.js
xnian_5 小时前
解决ruoyi-vue-pro-master框架引入报错，启动报错问题
前端·javascript·vue.js
罗政5 小时前
[附源码]超简洁个人博客网站搭建+SpringBoot+Vue前后端分离
vue.js·spring boot·后端
阿树梢6 小时前
【Vue】VueRouter路由
前端·javascript·vue.js
随笔写7 小时前
vue使用关于speak-tss插件的详细介绍
前端·javascript·vue.js
陈小唬8 小时前
html页面整合vue2或vue3
前端·vue.js·html
花下的晚风8 小时前
Vue实用操作篇-1-第一个 Vue 程序
前端·javascript·vue.js
我是Superman丶10 小时前
【前端UI框架】VUE ElementUI 离线文档 可不联网打开
前端·vue.js·elementui
growdu_real11 小时前
pandoc自定义过滤器
vue.js
天下无贼！11 小时前
2024年最新版TypeScript学习笔记——泛型、接口、枚举、自定义类型等知识点
前端·javascript·vue.js·笔记·学习·typescript·html
热门推荐
01RAG 实践- Ollama+RagFlow 部署本地知识库02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）032024年高教社杯数学建模国赛C题超详细解题思路分析04Coze扣子平台完整体验和实践（附国内和国际版对比）05苍穹外卖面试总结06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）08CCF-CSP认证考试 202406-3 文本分词 100分题解09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10浏览器插件——ModHeader 的分享和学习