Vue入门到关门之Vue介绍与使用

一、vue框架介绍

1、什么是Vue？

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

2、Vue框架的构造

  • Vue采用了M-V-VM（Model-View-ViewModel）的思想，它是一种基于前端开发的架构模式，也是一种事件驱动的编程方式。
  • 除了M-V-VM，还有其他一些常见的架构模式
    • 例如
      • MTV（Model-Template-View）
      • MVC（Model-View-Controller）
      • MVP（Model-View-Presenter）。
  • 然而
    • 在前端开发中，MVVM和组件化开发、单页面开发（SPA）结合使用的情况比较普遍。
  • 目前，Vue的最新版本是Vue4，但并没有公司在使用
    • 主流的公司项目基本上会采用Vue3
    • 而老项目仍然继续使用Vue2。

3、MVC和MVVM的区别

（1）MVC

MVC 是 Model View Controller 的缩写

  • Model：模型层，是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象负责在数据库中存取数据。

  • View：视图层，用户界面渲染逻辑，通常视图是依据模型数据创建的。

  • Controller：控制器，数据模型和视图之间通信的桥梁，通常控制器负责从事图读取数据，控制用户输入，并向模型发送数据。

在这里插入图片描述

**MVC的思想：**Controller负责将Model的数据用View显示出来，换句话说就是在Controller里面把Model的数据赋值给View。

**MVC的特点：**实现关注点分离，即应用程序中的数据模型与业务和展示逻辑解耦。就是将模型和视图之间实现代码分离，松散耦合，使之成为一个更容易开发、维护和测试的客户端应用程序。

MVC的优点：

  • 耦合度低，视图层和业务层分离

  • 重用度高

  • 生命周期成本低

  • 可维护性高

  • 部署快

MVC的缺点：

  • 不适合小型项目的开发

  • 视图与控制器间的过于紧密的连接，视图与控制器是相互分离，但却是联系紧密的部件，妨碍了他们的独立重用

  • 降低了视图对模型数据的访问，依据模型操作接口的不同，视图可能需要多次调用才能获得足够的显示数据。对未变化数据的不必要的频繁访问，也将损害操作性能。

**MVC的应用：**主要用于中大型项目的分层开发。

MVC的例子： 举一个例子，页面有一个 id 为 container 的 span，点击按钮会让其内容加 1：

  • view：
<div><span id="container">0</span><button id="btn">+</button>
</div>
  • controller：
const button = document.getElementById('btn');
// 响应视图指令
button.addEventListener('click', () => {const container = document.getElementById('container');// 调用模型add(container);
}, false);
  • model：
function add (node) {// 业务逻辑处理const currentValue = parseInt(node.innerText);const newValue = currentValue + 1;// 更新视图node.innerText = current + 1;
}

这样就把数据更新分的比较明确了。

（2）MVVM

MVVM是Model-View-ViewModel的简写，即模型-视图-视图模型。

  • Modal：模型，指的是后端传递的数据。

  • View：视图，指的是所看到的页面。

  • ViewModal：视图模型，mvvm模式的核心，它是连接view和model的桥梁。主要用来处理业务逻辑

在这里插入图片描述

它有两个方向：

  • 一是将模型转化成视图，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。

  • 二是将视图转化成模型，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。

这两个方向都实现的，就是数据的双向绑定。

MVVM的特点： 在MVVM的框架下，视图和模型是不能直接通信的，它们通过ViewModal来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信。

MVVM的优点：

MVVM模式的主要目的是分离视图（View）和模型（Model），有几大优点：

  • 低耦合，视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。

  • 可重用性，可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。

  • 独立开发，开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xml代码。

  • 可测试，界面向来是比较难于测试的，而现在测试可以针对ViewModel来写

  • 双向数据绑定，它实现了View和Model的自动同步，当Model的属性改变时，不需要手动操作Dom元素，来改变View的显示，而是改变属性后该属性对应View层显示会自动改变

MVVM适用场景： 适合数据驱动的场景，数据操作比较多的场景

二、vue简单使用

1、第一个Hello World

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<!--    本地引入-->
<!--    <script src="./vue/vue.js"></script>-->
<!--    CDN引入--><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.0/vue.min.js"></script>
</head>
<body>
<div id="d1"><h1>{{s}}</h1>
</div>
</body>
<script type="text/javascript">var vm = new Vue({el: '#d1',data: {s: 'Hello World'}})
</script>
</html>

2、Vue的响应式原理

响应式原理：数据变了—>页面会变数据也会变

（1）理解代理对象

// 定义源对象obj1
let obj1 = {name:'张三',age:20
}
//定义代理对象obj2，代理源对象obj1
let obj2 = obj1
console.log('obj2:',obj2);
// 代理对象修改了源对象的数据
obj2.name = '李四'
obj2.age = 30
console.log(obj1);  // {name: "李四", age: 30}

（2）Vue的data和_data

// 定义源对象
let myData = {name: '张三',age: 20
}
let mx = new Vue({// 将源对象传递给Vue的data，背后做了两件事// 1、设置Vue实例的_data属性，作为当前源对象的代理对象。（响应式的核心）// 2、将_data里面代理的所有数据，再添加到当前Vue实例身上，也就是vm身上。（方便直接调用数据）
})
// 通过改变vue实例的属性可以改变源对象的属性值
mx.name = '王五'
mx.age = 40
console.log(myData);  // {name: "王五", age: 40}

（3）给对象添加属性的多种方式

  • 第一种方式：使用点 .
  • 第二种方式：使用中括号 [ ]
  • 第三种方式：使用Object.defineProperty方法
// 方式一
let obj3 = {}
obj3.name = '张三'
// 方式二
obj3['age'] = 20
//方式三
// 这种方式，给对象添加成员，尽管繁琐，但是可以配置更多的功能。
// 默认添加的属性是不允许删除的，如果要允许删除，就需要添加configurable配置。
// 默认添加的属性是不允许枚举的，所谓枚举指的就是遍历。
Object.defineProperty(obj3,'sex',{// 属性值value:'男',// 允许被枚举（默认不允许）enumerable:true,// 允许被删除（默认不允许）configurable:true
})
// 枚举出对象的所有属性（其实就遍历出对象的所有属性名）
// 如果sex属性没有设置允许被枚举，就不能被枚举
for(let key in obj3){console.log(key);
}
// 通过delete关键，可以删除对象身上的指定属性
delete obj3.name
delete obj3.sex   // 如果sex属性没有设置允许被删除，就不能被删除

三、模版语法

1、介绍

  • 模版语法也可以叫做插值表达式，插值表达式用户把vue中所定义的数据,显示在页面上.。插值表达式允许用户输入"JS代码片段"。

2、语法

  • 插值语法使用 {{}}–>必须是定义再data中的数据
  • 例如：{{ 变量名/对象.属性名 }}
  • {{}}中可以放：字符串，数字，对象，数组，函数执行，修改变量值，三目运算符。
  • {{}}中不可以放：
    • 不能定义变量
    • 不能渲染标签

3、案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./vue/vue.js"></script></head>
<body>
<div id="app"><h1>字符串：{{name}}</h1><h1>数字：{{age}}</h1><h1>对象:{{userinfo}}-->取对象的值：{{userinfo.name}}</h1><h1>数组：{{hobby}}--->数组取值：{{hobby[0]}}</h1><h1>运算：{{11+11}}----》变量运算：{{age+userinfo.height}}</h1><h1>三目运算符：{{11<10?'真':'假'}}--->变量形式：{{b?'为真':'为假'}}</h1><h1>标签：{{a}}</h1><h1>可以放函数执行</h1><h1>var a =100---不行</h1><h1>修改变量值：{{age=99}}</h1><h1>修改变量值：{{++age}}--》++age和age++的区别是，前一个先计算，再赋值，后一个先赋值再计算</h1>
</div>
</body>
<script>var vm = new Vue({el: '#app',data: {name: 'xiao',age: 19,userinfo: {name: '刘大板', height: 168},hobby: ['篮球', '足球', '乒乓球'],b: true,a: '<a href="http://www.baidu.com">点击有惊喜</a>'}})
</script>
</html>

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

1、Flink DataStreamAPI 概述（上）

1、Flink DataStreamAPI 概述（上）

一、DataStream API 1、概述 1&#xff09;Flink程序剖析 1.Flink程序组成 a&#xff09;Flink程序基本组成 获取一个执行环境&#xff08;execution environment&#xff09;&#xff1b;加载/创建初始数据&#xff1b;指定数据相关的转换&#xff1b;指定计算结果的存储…
阅读更多...
图像处理的魔法师：Pillow 库探秘

图像处理的魔法师：Pillow 库探秘

文章目录 图像处理的魔法师&#xff1a;Pillow 库探秘第一部分&#xff1a;背景介绍第二部分&#xff1a;库是什么&#xff1f;第三部分&#xff1a;如何安装这个库&#xff1f;第四部分&#xff1a;库函数使用方法第五部分&#xff1a;场景应用第六部分&#xff1a;常见Bug及解…
阅读更多...
字符串类型漏洞之updatexml函数盲注

字符串类型漏洞之updatexml函数盲注

UPDATEXML 是 MySQL 数据库中的一个函数&#xff0c;它用于对 XML 文档数据进行修改和查询。然而&#xff0c;当它被不当地使用或与恶意输入结合时&#xff0c;它可能成为 SQL 注入攻击的一部分&#xff0c;从而暴露敏感信息或导致其他安全漏洞。 在 SQL 注入攻击中&#xff0…
阅读更多...
Prompt Engineering，提示工程

Prompt Engineering，提示工程

什么是提示工程&#xff1f; 提示工程也叫【指令工程】。 Prompt发送给大模型的指令。比如[讲个笑话]、[用Python编个贪吃蛇游戏]、[给男/女朋友写情书]等看起来简单&#xff0c;但上手简单精通难 [Propmpt]是AGI时代的[编程语言][Propmpt]是AGI时代的[软件工程][提示工程]是…
阅读更多...
【Unity动画系统】详解Root Motion动画在Unity中的应用（一）

【Unity动画系统】详解Root Motion动画在Unity中的应用（一）

Root Motion动画与普通动画的区别 普通动画&#xff1a;动画文件里记录的是物体的绝对坐标和方向&#xff0c;在播放动画时&#xff0c;Unity会根据Animation中记录的值&#xff0c;直接修改游戏对象的坐标和方向&#xff0c;每一帧的坐标和方向都是通过插值计算得出来的&…
阅读更多...
网工学习云计算HCIE感受如何？

网工学习云计算HCIE感受如何？

作为一名网工&#xff0c;我经常会在各种网络论坛里查询搜索一些网络技术资料&#xff0c;以及跟论坛里的网友交流讨论平时在工作、学习中遇到的问题、故障&#xff0c;因此也经常能在论坛的首页看到誉天的宣传信息。机缘巧合之下关注了誉天的B站号&#xff0c;自从关注了誉天的…
阅读更多...
李沐64_注意力机制——自学笔记

李沐64_注意力机制——自学笔记

注意力机制 1.卷积、全连接和池化层都只考虑不随意线索 2.注意力机制则显示的考虑随意线索 &#xff08;1&#xff09;随意线索倍称之为查询(query) &#xff08;2&#xff09;每个输入是一个值value&#xff0c;和不随意线索key的对 &#xff08;3&#xff09;通过注意力池…
阅读更多...
Python 面向对象——6.封装

Python 面向对象——6.封装

本章学习链接如下&#xff1a; Python 面向对象——1.基本概念 Python 面向对象——2.类与对象实例属性补充解释&#xff0c;self的作用等 Python 面向对象——3.实例方法&#xff0c;类方法与静态方法 Python 面向对象——4.继承 Python 面向对象——5.多态 1. 封装的基…
阅读更多...
每日一练-LeeCode-移除链表元素

每日一练-LeeCode-移除链表元素

题目 给你一个链表的头节点 head 和一个整数 val &#xff0c;请你删除链表中所有满足 Node.val val 的节点&#xff0c;并返回 新的头节点 。 示例 1&#xff1a; 输入&#xff1a;head [1,2,6,3,4,5,6], val 6 输出&#xff1a;[1,2,3,4,5] 示例 2&#xff1a; 输入&a…
阅读更多...
【AI开发：音频】二、GPT-SoVITS使用方法和过程中出现的问题（GPU版）

【AI开发：音频】二、GPT-SoVITS使用方法和过程中出现的问题（GPU版）

1.FileNotFoundError: [Errno 2] No such file or directory: logs/guanshenxxx/2-name2text-0.txt 这个问题中包含了两个&#xff1a; 第一个&#xff1a;No module named pyopenjtalk 我的电脑出现的就是这个 解决&#xff1a;pip install pyopenjtalk 第二个&#xff1a…
阅读更多...
156.25MHz的差分晶体振荡器SG3225VEN

156.25MHz的差分晶体振荡器SG3225VEN

数字经济正焕发出勃勃生机,云计算,大数据,5G和人工智能等新技术的发展给行业带来了新的机遇。无论是在数据中心内部还是在数据中心之间,提供低成本,高速的100/200/400G小型化解决方案都是光模块的发展需求。为了使DSP稳定工作&#xff0c;需要一个小型的封装晶体振荡器来提供参…
阅读更多...
13.JAVAEE之HTTP协议

13.JAVAEE之HTTP协议

HTTP 最新的版本应该是 HTTP/3.0 目前大规模使用的版本 HTTP/1.1 使用 HTTP 协议的场景 1.浏览器打开网站 (基本上) 2.手机 APP 访问对应的服务器 (大概率) 学习 HTTP 协议, 重点学习 HTTP 的报文格式 前面的 TCP/IP/UDP 和这些不同, HTTP 的报文格式,要分两个部分来看待.请求…
阅读更多...
「51媒体」城市推介会，地方旅游推荐，怎么做好媒体宣传

「51媒体」城市推介会，地方旅游推荐，怎么做好媒体宣传

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 城市推介会和地方旅游推荐是城市形象宣传的重要组成部分&#xff0c;通过有效的媒体宣传可以提升城市的知名度和吸引力。&#xff1a; 一&#xff0c;活动内容层面&#xff1a; 突出亮点…
阅读更多...
Jenkins CI/CD 持续集成专题四 Jenkins服务器IP更换

Jenkins CI/CD 持续集成专题四 Jenkins服务器IP更换

一、查看brew 的 services brew services list 二、编辑 homebrew.mxcl.jenkins-lts.plist 将下面的httpListenAddress值修改为自己的ip 服务器&#xff0c;这里我是用的本机的ip 三 、重新启动 jenkins-lts brew services restart jenkins-lts 四 、浏览器访问 http://10.…
阅读更多...
【Django】初识Django快速上手

【Django】初识Django快速上手

Django简介 Django是一个高级的、开源的Python Web框架&#xff0c;旨在快速、高效地开发高质量的Web应用程序 https://developer.mozilla.org/zh-CN/docs/Learn/Server-side/Django/Introduction 安装Django pip install Django如果要知道安装的Django的版本&#xff0c;可…
阅读更多...
鸿蒙内核源码分析(进程管理篇) | 谁在管理内核资源？

鸿蒙内核源码分析(进程管理篇) | 谁在管理内核资源？

官方基本概念 从系统的角度看&#xff0c;进程是资源管理单元。进程可以使用或等待CPU、使用内存空间等系统资源&#xff0c;并独立于其它进程运行。 OpenHarmony内核的进程模块可以给用户提供多个进程&#xff0c;实现了进程之间的切换和通信&#xff0c;帮助用户管理业务程序…
阅读更多...
yolov8旋转目标检测输出的角度转化为适合机械爪抓取的角度

yolov8旋转目标检测输出的角度转化为适合机械爪抓取的角度

1. 机械爪抓取时旋转的角度定义 以X轴正方向&#xff08;右&#xff09;为零度方向&#xff0c;角度取值范围[-90&#xff0c;90)。 确认角度的方法&#xff1a; 逆时针旋转X轴&#xff0c;X轴碰到矩形框长边时旋转过的角度记为angleX&#xff1a; 1.如果angleX小于90&#xf…
阅读更多...
【源码】IM即时通讯源码/H5聊天软件/视频通话+语音通话/带文字部署教程

【源码】IM即时通讯源码/H5聊天软件/视频通话+语音通话/带文字部署教程

【源码介绍】 IM即时通讯源码/H5聊天软件/视频通话语音通话/带文字部署教程 【源码说明】 测试环境&#xff1a;Linux系统CentOS7.6、宝塔、PHP7.2、MySQL5.6&#xff0c;根目录public&#xff0c;伪静态laravel5&#xff0c;根据情况开启SSL 登录后台看到很熟悉。。原来是…
阅读更多...
docker容器技术篇：集群管理实战mesos+zookeeper+marathon（二）

docker容器技术篇：集群管理实战mesos+zookeeper+marathon（二）

docker集群管理实战mesoszookeepermarathon&#xff08;二&#xff09; 一 实验环境 操作系统&#xff1a;centos7.9 二 基础环境配置以及安装mesos 安装过程请点击下面的链接查看&#xff1a; 容器集群管理实战mesoszookeepermarathon&#xff08;一&#xff09; 三 安装…
阅读更多...
STM32进入睡眠模式的方法

STM32进入睡眠模式的方法

#STM32进入睡眠模式的方法 今天学习了如何控制STM32进入睡眠模式&#xff0c;进入睡眠模式的好处就是省电&#xff0c;今天学习的只是浅度睡眠&#xff0c;通过中断就能唤醒。比如单片机在那一放&#xff0c;也许好几天好几个月都不用一次&#xff0c;整天的在那空跑while循环…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023