Vue中的MVVM模式

最新推荐文章于 2024-05-06 21:59:50 发布
最新推荐文章于 2024-05-06 21:59:50 发布
阅读量856 收藏
点赞数
分类专栏： Vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44031029/article/details/123169615
版权

前言

  在互联网产品快速迭代的背景下，前端开发人员不仅要编写页面，还要通过ajax+js完成页面动态效果，压力较大，为了解决这个问题，因此MVVM开发模式就诞生了。

MVVM是Model-View-ViewModel的简写
- M： 即Model，模型，指的就是数据
- V： 即View， 视图，指的就是页面
- VM：即View-Model，指的是模型和视图的双向绑定。(即view和Model互相影响，Model变了，view随之改变；view变了，Model也随之改变)

在MVVM模式中：

  • Model和View是绑定的，Model变了，view自动变化；view变了，Model自动变化。因此，我们只需要关注Model即可。

附图理解：
在这里插入图片描述
Vue快速入门：

  1. 引入Vue的vue.js文件
  2. 编写Vue代码
  3. 使用Vue向div标签中渲染文字
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<!--使用vue向div中渲染文字-->
<div id="app">
<!--使用插值表达式获取模型中的数据-->
    {{message}}
</div>

<!--1 引入vue的js文件-->
<script src="../js/vue-2.6.12.js"></script>
<!--2 编写vue代码-->
<script>
        const app=new Vue({
            el:"#app",  //让vue获取要操作的标签视图
            data:{     // 定义数据
                message:"哈哈"
            }
        });
</script>

</body>
</html>

Vue快速入门细节

// Vue对象的介绍
const app = new Vue({
   el: "#app",  // el用于挂载视图，就是用css选择器，选中当前vue可以管理的视图范围，注意: vue选择视图必须使用的是双标签，html和body除外
   data:{       // data是一个对象，里面存储的就是视图数据，支持js的各种数据类型(简单  对象 数组)
       message:  ""
   }
})

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--使用vue向div中渲染文字-->
<div id="app">
    {{message}}
</div>

<!--1. 引入vue的js文件-->
<script src="../js/vue-2.6.12.js"></script>

<script>
    //2. 构建一个vue对象
    const app = new Vue({
        el: "#app", // 声明vue管理的视图范围(挂载视图),其实它可以用于所有(html和body除外)的双标签
       
        data: {// 声明数据, 这里的数据支持js的各种数据类型,常见的有: 简单类型, 集合类型[], 对象类型{}
             message:"",  //简单数据格式
             user:{"username":"jack"}, //对象数据格式
             arr:["aaa","bbb","ccc"] //数组数据格式
        }
    });
</script>
</body>
</html>

Vue中的语法

1.插值表达式

  • 插值表达式的语法：{{ 表达式 }}
  • 作用：插值表达式主要作用是从Model中获取数据渲染到View
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue-2.6.12.js"></script>
</head>
<body>
<div id="app">
      {{message}} <br/>
</div>
<script>
        const app=new Vue(
          {
            el:"#app",
            data:{
                message:"<a href='#'>嘿嘿</a>"
            }
        });
</script>
</body>
</html>

2.双向绑定

  • 语法：：v-model
  • 插值表达式可以看做是单向绑定，数据影响了视图渲染，但是反过来就不行。
  • 注意：目前v-model的可使用元素有：input、select、textarea（表单标签） components（vue内置组件）
  • v-model是双向绑定，视图（View）和模型（Model）之间会互相影响。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue-2.6.12.js"></script>
</head>
<body>
<div id="app">

    <h3>姓名：</h3>
    <input type="text" v-model="username" >
    <div>您写的姓名是:{{username}}</div>

    <h3>性别：</h3>
    <input type="radio" value="男" v-model="sex"> 男 <br>
    <input type="radio" value="女" v-model="sex"> 女 <br>
    <div>您选择的性别是:{{sex}}</div>

    <h3>爱好：</h3>
    <input type="checkbox" value="抽烟" v-model="hobby">抽烟<br>
    <input type="checkbox" value="喝酒" v-model="hobby">喝酒<br>
    <input type="checkbox" value="烫头" v-model="hobby">烫头<br>
    <div>您选择的爱好是:{{hobby}}</div>

    <h3>段位：</h3>
    <select v-model="level">
        <option value="">请选择</option>
        <option value="青铜">青铜</option>
        <option value="白银">白银</option>
        <option value="王者">王者</option>
    </select>
    <div>您选择的段位是:{{level}}</div
</div>
<script>
         const app=new Vue({
             el:"#app", //挂载视图
             data:{
                 username:"",
                 sex:"",
                 hobby:['烫头'],
                 level:"白银"
             }
         });
</script>
</body>
</html>

3.事件处理

  1. 事件绑定
  2. 标准语法 v-on:事件名=“js片段或函数名” 如果不想页面爆红，需要单独引入名称空间。
  3. 简化语法 @事件名=“js片段或函数名” 推荐使用
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue-2.6.12.js"></script>
</head>
<body>
<div id="app">
    <b>数量：</b>
    <button @click="numdiff()">-</button>
    <input type="text" v-model="num" style="width: 30px;">
    <!--<button v-on:click="num++">+</button>  写法麻烦-->
    <button @click="num++">+</button>  <!--推荐的写法-->
    <button @mouseover="num++">+</button>  <!--推荐的写法-->
</div>
<script>
    const app = new Vue({
        el: '#app', //挂载视图
        data: {num: 1},   //初始数据
        methods:{ //定义方法（函数）
            numdiff(){
                this.num--;  //在vue内部定义的变量或者是方法 互相调用都要加this
                alert("我减1了");
            }
        }
    })
</script>
</body>
</html>

4.列表遍历

  • 遍历List/数组
  • 在vue中使用v-for实现数组的遍历，格式如下:
  • v-for="(item,index) in items" 细节：注意空格 ！！！！！
    items：要遍历的List
    item： 每次遍历得到的临时变量
    index：每次遍历的索引，从0开始计数(可省略 v-for=“item in items”)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue-2.6.12.js"></script>
</head>
<body>
<!-- v-for="(每次遍历的对象/变量,索引) in 要遍历的集合"   -->
<div id="app">
        <ul>
            <li v-for="(user,index) in users">
                {{index}}-->{{user.id}}--->{{user.name}}-->{{user.address}}
            </li>  <!--vue的v-for标签要写在要循环的标签上-->
        </ul>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            users: [{id: 1, name: 'jack', address: '北京朝阳'}, {id: 2, name: 'lucy', address: '上海外滩'}, {id: 3, name: 'jerry', address: '天津西青'}]
        }
    })
</script>
</body>
</html>

5.遍历Map

  • v-for除了可以遍历数组，也可以Map。

格式如下:

  • v-for="(value,key,index) in items"
    items：要遍历的Map
    key： 每次遍历得到的key
    value：每次遍历得到的value
    index：每次遍历的索引，从0开始计数
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue-2.6.12.js"></script>
</head>
<body>
<div id="app">
    <!--
        语法: v-for="(value,key,index) in map"
    -->
    <ul>
        <li v-for="(value,key,index) in users">{{index}}--{{key}}--{{value}}</li>
    </ul>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {   []
            users: {"张三": "男", "李四": "男", "王五": "女", "赵六": "男"}
        }
    })
</script>
</body>
</html>

6.条件判断

  • 语法：
    v-if=“布尔表达式”
    v-else-if=“布尔表达式”
    v-else
  • 注意：
    v-else元素必须紧跟在带v-if或者v-else-if元素的后面，否则它将不会被识别
    v-if还可以和v-for联合使用，当二者出现在一起时，会先遍历再判断条件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue-2.6.12.js"></script>
</head>
<body>
<div id="app">
    <!--从文本框输入成绩, 然后判断成绩是否及格  >=60:及格    <60:不及格   其他:未知-->
    <h3>考试成绩练习</h3>
    请输入成绩:<input type="text" v-model="score"><br>
    你本次开始成绩:
    <span v-if="score>=60">及格</span>
    <span v-else-if="score<60">不及格</span>
    <span v-else>未知</span>

    <!--遍历users, 但是要求只显示性别为女的用户-->
    <h3>用户列表</h3>
    <ul>
        <li v-for="(user,index) in users" v-if="user.gender == '女'">{{user.name}}--{{user.gender}}</li>
    </ul>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            score: "未知",
            users: [
                {name: 'jack', gender: '女'},
                {name: 'lucy', gender: '女'},
                {name: 'jerry', gender: '男'}
            ]
        }
    })
</script>
</body>
</html>

7.属性绑定

  • 对于HTML标签属性，如果想要动态传值，不能使用{{}}，而应该使用专门的属性绑定语法
    标准语法： v-bind:属性名=“Vue中的变量”
    简写语法： :属性名=‘Vue中的变量’
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue-2.6.12.js"></script>
    <style>
        #cz {
            width: 200px;
            height: 200px;
            border: 1px solid grey;
        }
        .back {
            background-color: red;
        }
        .font {
            font-size: 40px;
            font-weight: bold;
        }
    </style>
</head>
<body>
<div id="app">
    <h3>属性绑定基本使用</h3>
    有两个图片地址分别是:../img/vue.png 和 ../img/lj.jpg,请在下面输入地址,改变图片:<br>
    图片地址: <input type="text" v-model="imgSrc">
    图片宽度: <input type="text" v-model="imgWidth">
    <br>
    <img :src="imgSrc" :width="imgWidth">
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            imgSrc: "../img/vue.png",
            imgWidth: "100px"
        },
    })
</script>
</body>
</html>
@2206
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端面试——Vue篇（什么是MVVM ？）
xiaoxiaoovo的博客
08-17 131
MVVM即M、V、VM，M是model模型，V是视图，VM是视图模型，在vue文件里，M是指data中的数据，V是div里的内容，VM是vue实例。Vue是实现了双向绑定的MVVM框架，当视图改变更新模型层，当模型层改变更新视图层。在vue中，使用了双向绑定技术，就是view的变化能实时让model发生变化，而model的变化也能实时更新到View。（3）VM：视图模型（ViewModel）：Vue实例对象。（1）M：模型（Model）：对应data中的数据。（2）V：视图（View）：模板。
什么是MVVM，vue的MVVM原理
weixin_42901443的博客
05-03 461
Mvvm定义MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心，它是连接view和model的桥梁。
Vue MVVM这一篇就够啦！
最新发布
警警的博客
05-06 869
Vue MVVM详解——经典重整再出发
Vue的MVVM设计模式（第一个Vue程序）
liudachu的博客
09-21 757
二、第一个Vue程序 1. 什么是MVVM MVVM (Model-View-ViewModel) 是一种软件架构设计模式，由微软WPF (用于替代WinForm，以前就是用这个技术开发桌面应用程序的)和Silverlight (类似于Java Applet,简单点说就是在浏览器上运行的WPF)的架构师Ken Cooper和Ted Peters 开发，是一种简化用户界面的事件驱动编程方式。由John Gossman (同样也是WPF和Silverlight的架构师)于2005年在他的博客上发表。 MVV
Vue中的MVVM模型（通俗易懂版）
热门推荐
weixin_54614831的博客
08-18 1万+
一篇文章，让你完全弄明白MVVM模型。
vue中mvvm的解释
wangming2531的博客
09-29 455
1什么是mvvm？ 简单来说，mvvm是modal-view-viewmodel的缩写。 View层 View层是视图层，也就是用户界面。 Model层 Model是指数据模型，也就是后端进行业务处理和数据处理 ViewModel层 ViewModel是由前端开发人员组织生成和维护的视图数据层。在这里，前端可以对从后端获取的model数据进行转换处理，以便于前端的View层使用。 ...
关于vue中mvvm的理解
m0_74017456的博客
09-30 329
MVVM是M-V-VM，M就是Model，V就是View，VM就是ViewModelo Model:代表整个web项目所需的数据模型，含有大量信息，相当于一个数据库，只存放数据，不具有任何行为逻辑。 View:是面向用户，对用户所展示出来的东西，通 常由控制器操作DOM来改变View，View具有主动 性，包括了一些数据绑定、事件和行为，这些都会影响到Model和ViewModelo ViewModel:主要负责用一定的业务逻辑对数据进 行改变或转换，相当于一个传输加工作用;也负责将Model的变化反
Vue-MVVM模式
李利科
01-23 155
Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。 如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作DOM。它通过一些特殊的HTML语法，将DOM和数据绑定起来。一旦你创建了绑定，DOM将和数据保持同步，每当变更了数据，DOM也会相应地更
Vue.js 概述与 MVVM 模式
苏墨
09-01 496
文章目录一、Vue.js1. Vue.js 是什么2. Vue.js 的特性3. MVVM 框架4. Vue 的开发模式5. Vue.js 的优点二、问答1. 简述 MVVM2. 简述 Vue.js 的优点 一、Vue.js 1. Vue.js 是什么 Vue.js 是一个轻巧、高性能、可组件化的 MVVM 库，拥有非常容易上手的 API； Vue.js是一个构建数据驱动的 Web 界面的库。 2. Vue.js 的特性 轻量级的框架 双向数据绑定 指令 插件化（组件化） 3. MVVM 框架 MVV
vue中的mvvm模式讲解
12-10
学习了MVVM模式 起先还觉得有点难，后面与双向数据绑定链接起来还是很容易理解的。 那么什么是MVVM呢？ 不明思议咋们肯定和我想的一样 每个单词的首写字母呗！ 对没错就是它 Model-View-ViewModel。 可以实现我们的...
Vue的MVVM实现方法
12-11
Vue的MVVM（Model-View-ViewModel）架构是一种轻量级的前端开发模式，它将数据模型、视图和视图模型紧密联系在一起，实现了数据与界面的双向绑定。在Vue框架中，MVVM的核心是借助`Object.defineProperty()`这个...
详解Vue中的MVVM原理和实现方法
01-19
下面由我阿巴阿巴的详细走一遍Vue中MVVM原理的实现，这篇文章大家可以学习到： 1.Vue数据双向绑定核心代码模块以及实现原理 2.订阅者-发布者模式是如何做到让数据驱动视图、视图驱动数据再驱动视图 3.如何对元素...
基于vue的MVVM框架的研究与分析
07-20
Vue.js 是一种流行的轻量级前端开发框架，它遵循MVVM（Model-View-ViewModel）设计模式，为开发者提供了一种高效且易用的方式来构建用户界面。Vue的核心特性包括组件化、响应式数据绑定、指令系统以及易于集成的生态...
Vue中的MVVM
XinKun的博客
02-03 3519
一、为什么会有MVVM框架？ 在过去的10年中，我们已经把很多传统的服务端代码放到了浏览器中，这样就产生了成千上万行的javascript代码，它们连接了各式各样的HTML 和CSS文件，但缺乏正规的组织形式，这也就是为什么越来越多的开发者使用javascript框架。比如：angular、react、vue。浏览器的兼容性问题已经不再是前端的阻碍。前端的项目越来越大，项目的可维护性和扩展性、安全性等成了主要问题。当年为了解决浏览器兼容性问题，出现了很多类库，其中最典型的就是jquery。但是这类库没有实
关于对Vue的MVVM的理解
weixin_45687036的博客
02-28 4358
关于对Vue的MVVM的理解
什么是MVVM，对Vue中MVVM模型的简单介绍
背心的博客
08-25 1010
什么是MVVM，对Vue中MVVM模型的简单介绍
Vue--》MVVM模型在Vue中的使用
ztK63LrD的博客
10-21 3885
我们知道了 Vue 借鉴了 MVVM模型的原理，但是我们只知道借鉴这件事，却不知道什么是MVVM模型，这里简单说明一下什么是 MVVM 模型。
【Vue学习】Vue原理—MVVM模式
zx1041561837的博客
02-27 1638
本文介绍了Vue框架的原理。具体包括：1. 介绍了MVVM模式，2. Vue响应式机制，3. Vue监听对象的过程，4. Vue监听数组的实现，5. 使用Object.defineProperty监听数据存在的缺点。
浅谈vue中的MVVM开发模式
m0_67217366的博客
08-30 356
MVVM分为Model、View、ViewModel
vue中的mvvm模式理解
12-25
MVVM是一种前端架构模式，它将应用程序分为三个部分：模型（Model）、视图（View）和视图模型（ViewModel）。在Vue中，MVVM模式的理解如下： 1. 模型（Model）：模型层负责管理应用程序的数据和业务逻辑。它可以是从服务器获取的数据，也可以是本地存储的数据。在Vue中，模型通常是通过发送异步请求获取的数据。 2. 视图（View）：视图层是用户界面的展示部分，它负责将模型中的数据渲染到页面上。在Vue中，视图通常是使用HTML和Vue的模板语法编写的。 3. 视图模型（ViewModel）：视图模型是连接模型和视图的桥梁，它负责处理视图的逻辑和状态。视图模型通过监听模型的变化，将模型中的数据转换为视图可以理解的格式，并将其绑定到视图上。当视图发生变化时，视图模型也会监听到，并更新模型中的数据。在Vue中，视图模型通常是由Vue实例来扮演的。 在Vue中，通过使用指令和数据绑定，可以实现视图和模型之间的双向绑定。这意味着当模型中的数据发生变化时，视图会自动更新；当视图中的数据发生变化时，模型也会自动更新。这种双向绑定的机制使得开发者可以更方便地管理和维护应用程序的状态。 总结起来，MVVM模式在Vue中的理解是：模型负责管理数据和业务逻辑，视图负责展示数据，视图模型负责处理视图的逻辑和状态，并通过双向绑定将模型和视图连接起来。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值