首页 > 其他分享 >06-MVVM模型

06-MVVM模型

时间:2023-09-10 10:00:56浏览次数:48  
标签:Vue 06 MVVM 模型 vm 视图 实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的:

const vm = new Vue({
  // 选项
})

Vue 的设计虽然没有完全遵循 MVVM模型,但是也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。

 

MVVM模型

M:模型(Mdel),对应Vue的data数据

V:视图(View),对应Vue的模板代码

VM:视图模型(ViewModel),对应Vue实例对象

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Vue中的MVVM</title>
      <!--  引入Vue  -->
      <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器 -->
    <div id="root">
      <h1>学校名称:{{name}}</h1>
      <h1>学校地址:{{adress}}</h1>
    </div>
  </body>
  <script type="text/javascript">
    // 阻止 vue 在启动时生成生产提示
    Vue.config.productionTip = false

    const vm =new Vue({
      el:"#root",
      data(){
        return{
          name:"东华理工大学",
          adress:"江西省南昌市东华理工大学广兰校区"
        }
      }
    })
  </script>
</html>

 

标签:Vue,06,MVVM,模型,vm,视图,实例
From: https://www.cnblogs.com/REN-Murphy/p/17690817.html

相关文章

  • 系统熵增是怎么产生的?————数据对象模型里添加属性欠思考
    熵增定律指出,在没有外力作用下的封闭系统中,熵(或混乱度)总是增加的。就是说,任何封闭系统中、在没有外力作用下,都会陷入混乱。屋子不收拾会变乱;人不自律会懒散;生活不规律或无节制,人就会出现健康问题;同样,对于我们的信息系统,一旦缺乏规范和管控,就会越来越难于迭代和维护。这些例子......
  • 实验1实验2_212106091_林佳铭
    实验1基础代码实验1进阶代码pingall截图同一交换机内部的主机间连通性及通信带宽测试(h1h2)相同汇聚交换机下不同机架的主机间测试(h1h3)相同核心交换机不同汇聚交换机下的主机间测试(h1h5)实验2基础Pingall命令截图Ovs流表的命令结果截图H1pingH3抓包H2pin......
  • 【Qt6】列表模型——抽象基类
    列表模型(ItemModel),老周没有翻译为“项目模型”,因为Project和Item都可以翻译为“项目”,容易出现歧义。干脆叫列表模型。这个模型也确实是为数据列表准备的,它以MVC的概念为基础,在原始数据和用户界面视图之间搭建桥梁,使两者可以传递数据(提取、修改)。Qt里面使用列表控制比较......
  • JVM内存模型,JVM、JRE、JDK之间的关系,Java程序是如何执行的
    一、什么是JVMJVM是JavaVirtualMachine(Java虚拟机)的简称,是一个虚构出来的计算机,通过在实际的计算机上仿真模拟各种计算机功能来实现的。JVM屏蔽了与具体操作系统平台相关的信息,Java程序只需生成在Java虚拟机上运行的字节码,就可以在多种平台上不加修改的运行。JVM在执行字节码时,实......
  • MVVM备忘
    1、数据改变通知:((INotifyPropertyChanged)this).PropertyChanged+=this.OnPropertyChanged;2、IsEnabled="{BindingHasDataChange,Converter={dxmvvm:BooleanNegationConverter}}">3、TreeViewControl或GridControl出不来数据的可能原因:绑定的数据不是集合类型的4、OnPa......
  • P2206题解
    题目大意:给定一些指令,计算需要多大的舞台。这是一道大模拟!!!只要遍历每次指令,然后判断是否摔倒,摔倒输出`-1`否则记录,最后求出面积就行了。最后附上代码1#include<bits/stdc++.h>2usingnamespacestd;3constintxx[]={-1,0,1,0},yy[]={0,1,0,-1};//不同......
  • CF1106F
    题目链接description定义数列\(f\),当\(i>k\)时,\(f_i=\prod\limits_{j=1}^kf_{i-j}^{b_k}\)模998244353。已知数组\(b\)且\(f_1,f_2,\dots,f_{k-1}\)均等于1,给定\(n,m\)。求任意一个合法的\(f_k\)的取值(在\([0,998244352]\)间),使得\(f_n=m\)无解输出-1\(k......
  • 代码随想录算法训练营第三天| 203.移除链表元素 707.设计链表 206.反转链表
    203.移除链表元素链表定义structListNode{intval;ListNode*next;ListNode():val(0),next(NULL){};ListNode(intx):val(x),next(NULL){};ListNode(intx,ListNode*next):val(x),next(next){};}1.在原链表上移除链表元素classSolut......
  • Model关联模型,一对一,一对多,多对多
    一、一对一关系1、我们在models中创建一个新的模型,叫做StudentInfo点击查看代码classStudentInfo(BaseModel):"""学生信息附加表"""address=models.CharField(max_length=255,verbose_name="家庭地址")#当设置字段为外键时,ORM会自动根据当前外键属性名拼......
  • IDEFICS 简介: 最先进视觉语言模型的开源复现
    引言CodeLlama是为代码类任务而生的一组最先进的、开放的Llama2模型,我们很高兴能将其集成入HuggingFace生态系统!CodeLlama使用与Llama2相同的社区许可证,且可商用。今天,我们很高兴能发布HuggingFace对CodeLlama的全面支持,包括:Hub上的模型支持,包括模型......