1.Vue—简介、实例与容器、MVVM模型

news2024/9/22 13:36:51

文章目录

  • 一、Vue简介
    • 1.1 特点
    • 1.2 搭建Vue开发环境
      • 1.2.1 开发版
      • 1.2.2 生产版
    • 1.3 下载Vue开发工具
      • 1.3.1 GitHub方式
      • 1.3.2 国内方式
    • 1.4 消除环境提示
  • 二、 入门程序
    • 2.1 HelloWord
    • 2.2 分析Hello案例
      • 2.3.1 多容器对一实例
      • 2.3.2 多实例对应一容器
      • 2.3.3 总结
  • 三、MVVM模型

一、Vue简介

官方网站：Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)

Vue是一套用户构建用户界面的渐进式JavaScript框架

简单的说就是怎么把数据变成界面

渐进式：Vue可以自底向上逐层的应用。

简单应用：我们只需要引入一个轻量小巧的核心库即可

复杂应用：引入Vue插件

1.1 特点

  1. 组件化模式，提高代码复用率，且让代码更好维护

    加入我们想修改下图页面中"推荐活动"的内容，我们只修改Activity.vue文件即可，其他地方不用动

image-20231027111253472

  1. 声明式编码，让编码人员无需直接操作DOM，提高开发效率

下面是之前操作DOM的形式：命令式编码

image-20231027111526234image-20231027111555425

下面是如今形式：

image-20231027111741925

  1. 使用虚拟DOM + 优秀的Diff 算法，尽量复用DOM节点

原生JavaScript如下所示。

有“张三”、“李四”、“王五”这三个人，使用list.innerHTML写到页面

后面数据发生了变化，新加了一个“赵六”，其他人的信息不变，如果我们还用list.innerHTML写到页面，那“张三”、“李四”、“王五”三个人又写了一次，也就是说我们本来在页面上的“张三”、“李四”、“王五”三个人的数据并没有复用

image-20231027112301346

Vue实现

Vue先把“张三”、“李四”、“王五”三个人变成虚拟DOM，最后把虚拟DOM变成页面的真实DOM

把虚拟DOM理解成内存中的数据

原生JavaScript直接把数据写到页面上，而Vue是先写到内存中，再写到页面，中间多了一个写入内存后必定会浪费时间

假如在“张三”、“李四”、“王五”数据不变的前提下，我们新增一个“赵六”的用户，这时候虚拟DOM的优势就体现出来了。

如果有个新的虚拟DOM和旧的虚拟DOM，他会把两个DOM进行Diff比较，对比会发现“张三”、“李四”、“王五”都是一样的，所以进行复用了，只会生成一个“赵六”的虚拟DOM

image-20231027112752645

1.2 搭建Vue开发环境

介绍 — Vue.js (vuejs.org)

写script标签的时候有一个属性src可以指定资源的位置，为了更好的访问src指定的资源的位置，我们就可以加一个CDN的加速

Vue提供了两个版本，一个是开发版本，一个是生产版本。

开发的时候使用开发版，如果有错误的话会有提示

生产版本是开发完了要进行上线，让文件的体积更小，我们会选择生产版本

image-20231027142311407

将文件下载下来 ：开发版 vue.js 生产版本 vue.min.js(生产版本会经过压缩)

image-20231027143225702

1.2.1 开发版

引入vue.js开发文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF8" />
    <title>初始vue</title>

    <!--引入开发版vue.js-->
    <!--引入后多了一个全局Vue对象/函数  （这个Vue可以被当做对象，也可以被当做函数）-->
    <script type="text/javascript" src="../js/vue.js"></script>

</head>

<body>

</body>

</html>

打开页面观察控制台，有一个提示：

提示1：请您下载Vue的开发工具达到一个更好的体验 （参考1.3下载即可）

提示2：您正在运行一个开发版本的Vue，请您确信在生产环境中不要这么做（参考1.4解决）

image-20231027144556163

然后我们在控制台输入“Vue”，确实会出来一个Vue的构造函数。假如说我们不引入vue.js或vue.main.js时是不会有下面这个构造函数的

image-20231027144825258

我们故意让程序报错，那控制台就会有提示

image-20231027210817961

1.2.2 生产版

<script type="text/javascript" src="../js/vue.main.js">

我们故意让程序报错，那控制台少了一个友好的提示，直接提示Vue底层的提示

image-20231027210910477

1.3 下载Vue开发工具

1.3.1 GitHub方式

进入下面这个网址https://v2.cn.vuejs.org/v2/guide/installation.html，点击“Vue Devtools”

image-20231027145120712

就会进入GitHub主页，下面会有一个“Installation”,如果是谷歌就下载谷歌对应的，如果是火狐就下载火狐对应的

但是不要点括号中的内容，它是开发工具的测试版，是在Vue3.0的时候使用的

image-20231027145313192

假如现在是谷歌，如下图所示，点击“添加”即可

image-20231027145557863

1.3.2 国内方式

但是国内许多人无法登录到GitHub，那就采用下面的方式

比如谷歌浏览器（其他浏览器也同理，只要找到“管理扩展程序模块”搜vue即可）

  1. 点击管理扩展程序

image-20231027145847029

  1. 打开“开发者模式”

image-20231027145916882

  1. 搜索下面这个插件即可

image-20231027150533479

如下所示

image-20231027150559135

  1. 最后页面右上角会多一个“三角形”

image-20231027150720757

1.4 消除环境提示

消除下面这个提示信息

image-20231027152117939

方法1： 切换成生产环境就会消除提示

方法2：不让他提示

怎么不让他提示呢？查看文档

  1. 查看API文档

    API — Vue.js (vuejs.org)

image-20231027152325082

  1. 找到全局配置

image-20231027152429593

Vue.config都是vue对全局的配置，一次修改，在哪都能用

下面有一个“productionTip”默认是“true”开启状态

image-20231027152457297

  1. 设置productionTip为false,此时就关闭了
<body>
    <script type="text/javascript">
        Vue.config.productionTip = false
    </script>

</body>

image-20231027152717853

  1. 保存并启动页面，控制台那是相当的干净

image-20231027153150896

二、 入门程序

2.1 HelloWord

  1. 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象

  2. root容器里面的代码依然符合html规范，只不过混入了一些特殊的Vue语法

  3. root容器里面的代码被称为Vue模板

    这个模板是很重要的概念

    模板的解析流程： 先有的id=root的div容器，后有的new Vue实例，当Vue实例开始工作后发现el指定了id=root的容器，然后Vue实例就把对应的容器拿过来进行解析，去找找有没有一些特殊语法，比如说插值语法，如果有的话就进行替换，最后就会生成一个全新的id为root的div容器

    image-20231027171707401

    模板经过解析就变成了正常的HTML片段

<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF8" />
    <title>初始vue</title>

    <!--引入开发版vue.js-->
    <!--引入后多了一个全局Vue对象/函数  （这个Vue可以被当做对象，也可以被当做函数）-->
    <script type="text/javascript" src="../js/vue.js"></script>

</head>

<body>

    <!-- 准备一个容器,在这个容器中呈现我们的页面-->
    <div id="root">
        <!--{{name}}是插值语法-->
        <h1>Hello,{{name}} 你很棒！！</h1>
    </div>

    <script type="text/javascript">
        //关闭开发环境时的生产提示
        Vue.config.productionTip = false

        //在整体调整productionTip后再写代码

        //当我们引入vue.js文件后，我们全局就多了一个Vue函数
        //创建Vue实例，并且参数只传一个配置对象。配置对象的value值、数据类型是不能随便更改的
        //   比如axios中 axios({ url: "xxxx"})  这个“url”是不能随便更改的，如果改成“ura”就不会实现对应的功能
        const x = new Vue({
            el: '#root', //用于指定当前Vue实例为哪个容器服务，值通常为CSS选择器字符串，比如这个地方是div标签的选择器
            // el: document.getElementById('root'),我们之前是这么获取的

            // data用于存储数据，数据供el所指定的容器去使用，此data先暂时写成一个对象
            data: {
                name: "张靖奇"
            }

        })
        //el是element元素的简称，el: '#root'是一个id选择器，找到了id为root的标签
        //假如说没有el: '#root'配置，容器和vue实例是关联不到一起的，互相不知道对方的存在。
        //当写上el: '#root'配置后，容器和vue实例关联到了一起。vue实例就知道了要把页面成果展示到root所对应的标签中
    </script>


</body>

</html>

2.2 分析Hello案例

2.3.1 多容器对一实例

假如我们页面上有俩容器,其class都是“root”，然后我们的Vue实例el='.root‘，那Vue实例会根据我们所写的选择器找容器root，会发现有两个。

那两个class=root的容器都被Vue实例给接管了，而且两个容器中都使用了插值语法{{name}}

<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF8" />
    <title>初始vue</title>
    <!--引入开发版vue.js-->
    <!--引入后多了一个全局Vue对象/函数  （这个Vue可以被当做对象，也可以被当做函数）-->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

    <div class="root">
        <!--{{name}}是插值语法-->
        <h1>Hello,{{name}} 你很棒！！</h1>
    </div>

    <div class="root">
        <!--{{name}}是插值语法-->
        <h1>Hello,{{name}} 你很棒！！</h1>
    </div>

    <script type="text/javascript">
        //关闭开发环境时的生产提示
        Vue.config.productionTip = false
        
        const x = new Vue({
            el: '.root',//class选择器
            data: {
                name: "张靖奇"
            }

        })
    </script>


</body>

</html>

那按照我们的理解页面是不是会出现两个“张靖奇”？

但其实不是，如下图所示：第一个是正常的，但是第二个没有人解析（不会报错）

image-20231027202011959

原因

根据我们写的el:'.root’它会找到两个容器，但是只会用第一个，不会用第二个

一个Vue实例不能去接管两个容器

2.3.2 多实例对应一容器

<!-- 准备一个容器,在这个容器中呈现我们的页面-->
    <div id="root">
        <h1>Hello,{{name}} 你很棒！！</h1>
    </div>

    <script type="text/javascript">
        //关闭开发环境时的生产提示
        Vue.config.productionTip = false
        new Vue({
            el: '#root',
            data: {
                name: "张靖奇"
            }

        })
        
        new Vue({
            el: '#root',
            data:{
                name:"大帅哥"
            }
         })
    </script>

效果如下图所示：控制台不会报错，说明是第一个Vue接管的容器

image-20231027202906133

再将代码改成下面这个样子

<!-- 准备一个容器,在这个容器中呈现我们的页面-->
    <div id="root">
        <h1>Hello,{{name}} 你很棒！！{{address}}</h1>
    </div>

    <script type="text/javascript">
        //关闭开发环境时的生产提示
        Vue.config.productionTip = false
        new Vue({
            el: '#root',
            data: {
                name: "张靖奇"
            }

        })
        
        new Vue({
            el: '#root',
            data:{
                address:"大帅哥"
            }
         })
    </script>

效果图，说明是第一个Vue接管的容器

image-20231027203135106

控制台报错

image-20231027203153639

原因：当一个Vue实例出现后，它就和id为root的容器绑定在一块，那当我们第二个Vue实例出现也要与id为root的容器绑定，显然是无法绑定的

一个容器只能被一个Vue实例接管

2.3.3 总结

容器与Vue实例之间的关系是一对一

1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象

2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法

3.root容器里面的代码被称为【vue模板】

4.Vue实例和容器是一一对应的

5.真实开发中只有一个Vue实例，并且会配合组件一起使用

6.{{xxx}}中xxx要写js表达式，name模板中用到该数据的地方也会自动更新

image-20231027204525824

7.一旦data中的数据发生改变，那么模板中用到该数据的地方也会自动更新

在页面上使用Vue插件的时候有一个<Root>标签，这个标签和代码中的id=“root”、el:"#root"没有任何关系

<Root>标签标签表示根，也就是Vue实例

image-20231027205534378

三、MVVM模型

Vue虽然没有完全遵循MVVM模型，但是Vue的设计收到了MVVM的启发

MVVM是Vue实现数据驱动视图和双向数据绑定的核心原理，把每个HTML页面都拆分成了如下三个部分：

  1. M: 模型（Model），对应data中的数据，表示当前页面渲染时所依赖的数据源，并且data中的所有属性最终都会出现在VM身上（数据代理）。

  2. V：视图（View），模板，表示当前页面所渲染的DOM结构

  3. VM：视图模型ViewModel，Vue实例对象，是MVVM的核心。

    vm身上所有属性及Vue原型上所有数据，在Vue模板中都可以直接使用

    ViewModel里面有两条线：DOM Listeners所在线 和 Data Bindings所在线

    DOM Listeners ：DOM监听器，在前面的双向数据绑定案例中，我们在输入框中输入了一个数据，然后Vue实例中对应的value也会改变，也就是页面中的改变会映射回数据中的改变。

    这个监听器得时时刻刻的监听这个输入框 ，还得知道监听的是什么，并且将改变后的值同步到Vue实例对象中对应的值内

    DataBindings： 数据绑定，简单的来说就是我们写data的时候，不论是写对象还是写函数，里面都是一组一组的key ：value，这一组组的key value经过Vue数据绑定就把数据展示在了页面的对应位置

    image-20231028153423443

image-20231028160114749

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1144167.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

C++模板编程和标准模板库（STL）

C++模板编程和标准模板库（STL）

1、C模板编程 1&#xff09;函数模板 #include <iostream> using namespace std;// 声明一个泛型类型T&#xff0c;参数化数据类型 template <typename T> // 定义一个函数模板 T man(T a, T b) {return (a>b?a:b); }int main() {// 使用的时候没有指定参数类…
阅读更多...
matlab中类的分别之handle类和value类——matlab无法修改类属性值的可能原因

matlab中类的分别之handle类和value类——matlab无法修改类属性值的可能原因

写在之前&#xff08;吐槽&#xff09; 最近由于变化了一些工作方向&#xff0c;开始需要使用matlab进行开发&#xff0c;哎哟喂&#xff0c;matlab使用的我想吐&#xff0c;那个matlab编辑器又没代码提示&#xff0c;又没彩色&#xff0c;我只好用vscode进行代码编辑&#xf…
阅读更多...
查询和下载国自然科学基金

查询和下载国自然科学基金

查询和下载国自然科学基金 打开网站 能够查到基本信息、项目参与人、项目摘要、结题摘要、结题报告、成果统计、成果产出&#xff08;主要为论文&#xff09; 结题报告可以在线阅读。 下面的参考博文中有下载结题报告书的步骤&#xff0c;不过是收费软件。 参考博文 国自…
阅读更多...
设备树与中断，操作系统如何使用中断

设备树与中断，操作系统如何使用中断

设备树中会对中断进行描述: 首先 cpu工程师会写好中断控制器的设备树节点, 里面会定义寄存器以及如何描述中断, gpio0209…中有两个属性, 一是gpio-controller 二是interrupt-cells。后者表示该设备是一个中断控制器。 interrupt-cells表示用两个属性描述中断。 之后再来看下…
阅读更多...
PostGreSQL模式schema

PostGreSQL模式schema

问题引入 之前在做数据库设计时&#xff0c;经常会忽略schema模式&#xff0c;直接在数据库下的public模式下建立各类数据表。如果数据表命名不够规范&#xff0c;后期寻找某张表时就会比较麻烦。通过 所幸&#xff0c;PostgreSQL 的模式schema管理&#xff0c;可以对这个问题…
阅读更多...
吴恩达《机器学习》2-1:模型描述

吴恩达《机器学习》2-1:模型描述

一、单变量线性回归 单变量线性回归是监督学习中的一种算法&#xff0c;通常用于解决回归问题。在单变量线性回归中&#xff0c;我们有一个训练数据集&#xff0c;其中包括一组输入特征&#xff08;通常表示为&#x1d465;&#xff09;和相应的输出目标&#xff08;通常表示为…
阅读更多...
RabbitMQ消费者的可靠性

RabbitMQ消费者的可靠性

目录 一、消费者确认 二、失败重试机制 2.1、失败处理策略 三、业务幂等性 3.1、唯一消息ID 3.2、业务判断 3.3、兜底方案 一、消费者确认 RabbitMQ提供了消费者确认机制&#xff08;Consumer Acknowledgement&#xff09;。即&#xff1a;当消费者处理消息结束后&#x…
阅读更多...
如何学好机器学习？机器学习一定需要下面这几方面知识！

如何学好机器学习？机器学习一定需要下面这几方面知识！

学好机器学习需要有一定的数学基础和计算机编程基础。总结一下&#xff0c;学机器学习需要下面这几方面知识&#xff1a; 数学基础&#xff1a;机器学习中很多方面都设计到了数学知识&#xff0c;较好的数学知识可以在理解和应用机器学习中发挥积极的作用&#xff0c;一般包括…
阅读更多...
翻页电子杂志制作方法，看完有手就行

翻页电子杂志制作方法，看完有手就行

你还在使用传统的纸质杂志进行宣传推广嘛&#xff1f;不打算紧跟时代的发展&#xff0c;融入互联网制作在线翻页电子杂志嘛&#xff01;电子杂志具有成本低&#xff0c;易于传播&#xff0c;宣传速度快&#xff0c;推广范围大&#xff0c;而且制作电子杂志也很easy噢&#xff0…
阅读更多...
支持Lrc2024 Boris FX Optics最新 for mac

支持Lrc2024 Boris FX Optics最新 for mac

Boris FX Optics是一款强大的图像处理软件&#xff0c;提供了各种专业级的特效和滤镜&#xff0c;用于增强和改善视频和图像的外观。该软件适用于照片编辑、摄影、视频制作等领域&#xff0c;具有广泛的应用范围。 Boris FX Optics功能包括但不限于以下几个方面&#xff1a; …
阅读更多...
iOS iGameGuardian修改器检测方案

iOS iGameGuardian修改器检测方案

一直以来&#xff0c;iOS 系统的安全性、稳定性都是其与安卓竞争的主力卖点。这要归功于 iOS 系统独特的闭源生态&#xff0c;应用软件上架会经过严格审核与测试。所以&#xff0c;iOS端的作弊手段&#xff0c;总是在尝试绕过 App Store 的审查。 常见的 iOS 游戏作弊&#xf…
阅读更多...
删除A文件夹中 AB文件夹共有的文件

删除A文件夹中 AB文件夹共有的文件

import ospath r"Z:\Users\86152\Desktop\chui shen-sw" chui_shen os.listdir(path)# print(chui_shen) # print(len(chui_shen)) for i in chui_shen:os.remove(rZ:\Users\86152\Desktop\ce shen-sw/ i)A文件夹&#xff1a; B文件夹&#xff1a; 我这个情况是 A文…
阅读更多...
十九、类型信息（2）

十九、类型信息（2）

本章概要 Class 对象 类字面常量泛化的 Class 引用cast() 方法 Class 对象 要理解 RTTI 在 Java 中的工作原理&#xff0c;首先必须知道类型信息在运行时是如何表示的。这项工作是由称为 **Class**对象 的特殊对象完成的&#xff0c;它包含了与类有关的信息。实际上&#x…
阅读更多...
STM32串口通信

STM32串口通信

数据通信的基础概念 在单片机的应用中&#xff0c;数据通信是必不可少的一部分&#xff0c;比如&#xff1a;单片机和上位机、单片机和外 围器件之间&#xff0c;它们都有数据通信的需求。由于设备之间的电气特性、传输速率、可靠性要求各 不相同&#xff0c;于是就有了各种通信…
阅读更多...
基于布谷鸟算法的无人机航迹规划-附代码

基于布谷鸟算法的无人机航迹规划-附代码

基于布谷鸟算法的无人机航迹规划 文章目录 基于布谷鸟算法的无人机航迹规划1.布谷鸟搜索算法2.无人机飞行环境建模3.无人机航迹规划建模4.实验结果4.1地图创建4.2 航迹规划 5.参考文献6.Matlab代码 摘要&#xff1a;本文主要介绍利用布谷鸟算法来优化无人机航迹规划。 1.布谷鸟…
阅读更多...
[Python进阶] 消息框、弹窗：pymsgbox.alert

[Python进阶] 消息框、弹窗：pymsgbox.alert

6.18 消息框、弹窗&#xff1a;pymsgbox.alert 作用&#xff1a; 显示带有文本和单个OK按钮的简单消息框。返回所单击按钮的文本。 参数&#xff1a; text “”, 消息框标题 title “”, 消息框内容 button pymsgbox.OK_TEXT, 消息框自带的按钮&#xff0c;默认为&#xff…
阅读更多...
@TableField(fill = FieldFill.INSERT)这个注解的作用

@TableField(fill = FieldFill.INSERT)这个注解的作用

TableField 是 MyBatis-Plus提供的一个注解&#xff0c;用于标注实体类的属性与数据库表的字段之间的映射关系。当你在一个实体类的属性上使用 TableField(fill FieldFill.INSERT) 注解时&#xff0c;你告诉 MyBatis-Plus 在插入记录时自动填充这个字段。 FieldFill.INSERT 是一…
阅读更多...
Docker 网络管理及资源控制

Docker 网络管理及资源控制

目录 1 Docker 网络 1.1 Docker 网络实现原理 1.2 Docker 的网络模式 1.3 网络模式详解 1.3.1 host模式 1.3.2 container模式 1.3.3 none模式 1.3.4 bridge模式 1.3.5 自定义网络 1.4 创建自定义网络 2 资源控制 2.1 CPU 资源控制 2.2 对内存使用的限制 2.3 对磁盘…
阅读更多...
如何在【逻辑回归】中优化控制正则化程度的超参数C

如何在【逻辑回归】中优化控制正则化程度的超参数C

一.逻辑回归基本介绍 逻辑回归也称作logistic回归&#xff0c;是一种广义的线性回归分析模型&#xff0c;主要是用来解决二分类问题&#xff08;也可以解决多分类问题&#xff09;。通过训练集来训练模型&#xff0c;并在训练结束后对测试集进行分类。 通过激活函数&…
阅读更多...
我该如何入门Python机器学习?

我该如何入门Python机器学习?

我是在研一的时候开始学习机器学习的。相对于题主来说&#xff0c;我更是一窍不通&#xff0c;Python都没有一点点基础。总结一下我在学习Python的过程&#xff0c;以及自己在学习机器学习过程中的用到的优质资源&#xff0c;也总结一下我的学习心得。 一、怎么学习Python&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023