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.mzph.cn/news/830879.shtml

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

相关文章

acwing算法提高之数据结构--可持久化数据结构

目录 1 介绍2 训练 1 介绍 本专题用来记录可持久化数据结构相关的题目。 本专题主要讲如下两类数据结构的可持久化&#xff1a; trie的可持久化线段树的可持久化&#xff0c;即主席树 可持久化的前提&#xff1a;本身的拓扑的结构不变。 解决什么类型的问题&#xff1a;可…

【图论】图论基础

图论不同地方讲的不太一样&#xff0c;本文仅限作者的理解 定义 图一般由点集 V V V 和边集 E E E 组成。 对于 v ∈ V v\in V v∈V&#xff0c;称 v v v 为该图的一个节点。 对于 e ∈ E e\in E e∈E&#xff0c;一般用二元组 ( u , v ) (u,v) (u,v) 表示 e e e&…

Linux 根据提交记录生成补丁及新旧文件对比

#!/bin/bash#解决/bin/bash^M: bad interpreter: Text file busy #sed -i s/\r$// test1.shCMD1$1 CMD2$2 CMD3$3 echo "CMD1 > $CMD1" echo "CMD2 > $CMD2" echo "CMD3 > $CMD3" # 运行时的入参 CMD1提交记录1 CMD2提交记录2 CMD3输出…

短视频素材有哪些方法获得?推荐8个短视频素材免费资源

在这个视觉内容至关重要的时代&#xff0c;拥有高质量视频素材对于任何视频创作者来说都是必不可少的。视频素材不仅可以增强叙事的深度&#xff0c;还能显著提升观众的参与度。为了帮助你找到理想的视频素材&#xff0c;以下是全球范围内提供顶级视频素材的网站列表&#xff0…

基于FPGA的数字信号处理(5)--Signed的本质和作用

前言 Verilog中的signed是一个很多人用不好&#xff0c;或者说不太愿意用的一个语法。因为不熟悉它的机制&#xff0c;所以经常会导致运算结果莫名奇妙地出错。其实了解了signed以后&#xff0c;很多时候用起来还是挺方便的。 signed的使用方法主要有两种&#xff0c;其中一种…

笔记-用Python脚本启停JAR程序

用Python脚本启停JAR程序&#xff0c;需要用到python中的以下内置模块 subprocess 是 Python 的一个标准库模块&#xff0c;用于在新进程中执行子命令&#xff0c;获取子进程的输入/输出/错误以及返回码等os 是 Python 的一个标准库模块&#xff0c;它提供了与操作系统交互的功…

金融案例:统一查询方案助力数据治理与分析应用更高效、更安全

随着企业数据规模的增长和业务多元化发展&#xff0c;海量数据实时、多维地灵活查询变成业务常见诉求。同时多套数据库系统成为常态&#xff0c;这既带来了数据管理的复杂性&#xff0c;又加大了数据使用的难度&#xff0c;面对日益复杂的数据环境和严格的数据安全要求&#xf…

flexpaper 远程命令执行

flexpaper 远程命令执行 这个是有POC的&#xff0c;先简单复现一下 GET /ipg/static/appr/lib/flexpaper/php/view.php?doc1.docx"%26echoshell>shel233l.txt%23&pageexp&formatswf&callbackcallback&isSplittrue HTTP/1.1 Host: 192.168.50.22 Use…

【蓝桥杯】第十五届蓝桥杯C/C++B组省赛补题

文章目录 估分试题 A: 握手问题试题 B: 小球反弹试题 C: 好数试题 D: R 格式试题 E: 宝石组合试题 F: 数字接龙试题 G: 爬山试题 H: 拔河 估分 测试网址&#xff1a;民间测试数据 5 0 9 5 2 5 18 2 46 5 0 9 5 2 5 18 2 46 50952518246 试题 A: 握手问题 #inc…

【PSINS函数讲解】IMU误差设置方法——imuerrset

所用函数 imuerrset 函数使用形式 此函数用于输入IMU的相关误差参数,返回对应的IMU误差设置,工具箱中的一般使用形式为: imuerr = imuerrset(0, 0, 0.01, 100);上述的四个输入为函数的基本输入,分别为: 陀螺仪常值误差(单位:/小时)加速度常值误差(单位:ug,即约为…

Python 机器学习 基础 之 学习 基础环境搭建

Python 机器学习 基础 之 学习 基础环境搭建 目录 Python 机器学习 基础 之 学习 基础环境搭建 一、简单介绍 二、什么是机器学习 三、python 环境的搭建 1、Python 安装包下载 2、这里以 下载 Python 3.10.9 为例 3、安装 Python 3.10.9 4、检验 python 是否安装成功&…

Systemback Ubuntu14.04 制作自定义系统ISO镜像

工作需要&#xff0c;要基于ubuntu自定义一些编译环境并将自己配置好的ubuntu做成镜像。 硬件准备 ​ 为保证能够顺利完成系统iso镜像的制作与系统还原&#xff0c;推荐准备一个较大容量的U盘或者移动固态硬盘&#xff0c;同时确保自己的Ubuntu系统还有比较大的可用空间。 1 S…

【DevOps】Docker安装和使用示例

一、Ubuntu 20.04 上安装 Docker 在 Ubuntu 20.04 上安装 Docker 可以通过几种不同的方法完成&#xff0c;其中最简单和最常见的方法是使用 Docker 的官方安装脚本&#xff0c;或者通过 Ubuntu 的包管理工具 apt 手动安装。这里我将介绍两种方法&#xff1a;使用 Docker 的便捷…

jenkins教程

jenkins 一、简介二、下载安装三、配置jdk、maven和SSH四、部署微服务 一、简介 Jenkins是一个流行的开源自动化服务器&#xff0c;用于自动化软件开发过程中的构建、测试和部署任务。它提供了一个可扩展的插件生态系统&#xff0c;支持各种编程语言和工具。 Jenkins是一款开…

美团代付系统源码搭建ZHU16728

2024美团外卖点单代付系统源码基于php 基础开发&#xff0c;这套系统搭载了外卖系统属性&#xff0c;可添加物流信息。 1.完美对接微信支付&#xff0c;支付宝支付。 2.这套系统全新UI界面&#xff0c;完美搭建可以用作商用系统服务。 3.前端UI界面内容丰富&#xff0c;功能齐全…

有关CSS中排版常见问题(清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题)

前言&#xff1a;在练习CSS排版的时候&#xff0c;我们经常会遇到一些排版上的问题&#xff0c;那么我们如何去解决这些问题呢&#xff1f;本篇文章给出了一些新手在练习排版时候可能会遇到的问题的解决方案。 ✨✨✨这里是秋刀鱼不做梦的BLOG ✨✨✨想要了解更多内容可以访问我…

【消息队列】RabbitMQ五种消息模式

RabbitMQ RabbitMQRabbitMQ安装 常见的消息模型基本消息队列SpringAMQPWorkQueue消息预取发布订阅模式Fanout ExchangeDirectExchangeTopicExchange 消息转换器 RabbitMQ RabbitMQ是基于Erlang语言开发的开源消息通信中间件 官网地址&#xff1a;https://www.rabbitmq.com/ R…

【VUE】Vue中实现树状表格结构编辑与版本对比的详细技术实现

Vue中实现树状表格结构编辑与版本对比的详细技术实现 在Vue中&#xff0c;创建一个可编辑的树状表格并实施版本对比功能是一种需求较为常见的场景。在本教程中&#xff0c;我们将使用Vue结合Element UI的el-table组件&#xff0c;来构建一个树状表格&#xff0c;其中包含添加、…

速盾:什么是cdn架构

CDN&#xff08;Content Delivery Network&#xff09;即内容分发网络&#xff0c;是一种分布式的架构&#xff0c;用于提高互联网上的内容传输速度和用户体验。CDN架构通过将内容分发到全球多个节点&#xff0c;使用户能够从最近的节点获取内容&#xff0c;从而减少延迟和网络…

第15届蓝桥杯-蒟蒻の反思与总结

基本情况 第15届蓝桥杯&#xff0c;参加c大学A组&#xff0c;完整做出的只有两道填空题。 然后后面的题目基本只拿了20%这样的分数&#xff0c;最后两道15分题目空白。 满分100分&#xff0c;估计总分在15-20分这样。 对于二分答案还是没有太熟练&#xff0c;考试的时候没有…