学习Vue.js Day1

126 阅读1分钟

Vue中的MVVM

View -----ViewModel-----Model

View层:

  • 视图层
  • 在前端开发中,通常是指DOM层
  • 主要是展示各种信息

什么是DOM层?

DOM全拼为Document Object Model(文档对象模型)是一种用于HTML和XML文档的编程接口,它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式。我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来。

DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。可以把DOM认为是页面上数据和结构的一个树形表示,不过页面当然可能并不是以这种树的方式具体实现。
Model层:

  • 数据层
  • 数据可以是固定的数据,也可以是服务器或者爬取的数据

VueModel层:

  • 视图模型层
  • 视图模型层是View和Model之间的桥梁
  • 一方面实习了Data Binding(数据绑定),将model中的改变实时的反应到View中
  • 另一方面实现了DOM Listener(事件监听),可以监听到并在需要的情况下改变对应的data

基本语法

const app = new Vue({
        el:'#app',
        data:{
            message:'HelloVue'
        }
        methods:{
            add: function(){
                
            }
        }
    })
    

el:

类型: string | HTMLElement

作用:决定之后Vue实例会管理哪一个DOM

data:

类型:object | function

作用:Vue实例对象的数据

methods:

类型:{ [key:string] : function }

作用:定义属于Vue的一些方法在其他里面调用,也可以在指令中调用