×

Vue每日一学:了解下MVVM模型与data及methods属性

作者:andy0012022.11.02来源:Web前端之家浏览:707评论:0
关键词:vuejs

早安,又是居家办公的一天,今天我们聊聊一个Vue基础知识:了解下MVVM模型与data及methods属性。

MVVM模型

MVC和MVVM都是一种软件的体系结构

  • MVC是Model – View –Controller的简称,是在前期被使用非常框架的架构模式,比如iOS、前端;

  • MVVM是Model-View-ViewModel的简称,是目前非常流行的架构模式;

Vue的整个设计受到MVVM模型的影响。

image.png

MVVM模型:

  • M:模型(Model):data中的数据

  • V:视图(view):模板代码

  • VM:视图模型(ViewModel):Vue实例

<div id="root">
      <h1>school:{{name}}</h1>
      <h1>address:{{address}}</h1>
      <h1>test:{{1+1}}</h1>
 </div>
<script type="text/javascript">
Vue.config.productionTip = false; //设置为 false 以阻止 vue 在启动时生成生产提示。
const vm = new Vue({
      el: "#root",
      data: {
        name: "xiaozhao",
        address: "henan",
        a: 1,
      },
    });
console.log(vm);
  • data中所有的属性,最后都出现在了vm身上

  • vm身上的所有属性,及vue原型上的所有属性,在Vue模板中都可以直接使用

data属性

data属性是传入一个函数,并且该函数需要返回一个对象:

  • 在Vue2.x的时候,可以传入一个对象或者一个函数;

  • 在Vue3.x的时候,必须传入一个函数

data中返回的对象会被Vue的响应式系统劫持,之后对该对象的修改或者访问都会在劫持中被处理:

  • 所以我们在template或者app中通过 {{counter}} 访问counter,可以从对象中获取到数据;

  • 所以我们修改counter的值时,app中的 {{counter}}也会发生改变;

data有2种写法

  • 对象式

  • 函数式

对象式

data: {
 name: "zj",
},

函数式

data function(){} data不能写箭头函数 this指向问题。

data() {
  console.log("@@@", this); //此处的this是vue实例对象
  return {
    name: "zj",
  };
},
<div id="app">
      <h2>{{message}}</h2>
      <button @click="changeMessage">改变message</button>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
      const app = Vue.createApp({
        data: function () {
          return { message: "Hello Data" };
        },
        //函数式
        methods: {
          changeMessage: function () {
            this.message = "hello hhh";
          },
        },
      });
      app.mount("#app");

methods属性

methods属性是一个对象,通常我们会在这个对象中定义很多的方法:

  • 这些方法可以被绑定到 模板中;

  • 在该方法中,我们可以使用this关键字来直接访问到data中返回的对象的属性;

<script src="./lib/vue.js"></script>
    <script>
      const app = Vue.createApp({
        data: function () {
          return {
            counter: 0,
          };
        },
        //methods:option api
        methods: {
          increment: function () {
            this.counter++;
          },
          increment() {},
          // methods中的函数不能写成箭头函数
          increment: () => {
            console.log(this);
          },
        },
      });
app.mount("#app");

在方法中访问属性

在 methods 方法中访问 data 的数据,可以直接通过 this.属性名 的形式来访问。

您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/vuejs20221102a1.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • jenny

    VUE的总结的不错啊,收藏了。下次搞点React的啊...

  • jenny

    win7最经典,想当初win8出来后都没它好用,怀恋经典。。。...

  • Terry

    谢谢提醒,插件已经修复。...

  • 访客

    士大夫士大夫...

  • 访客

    用這甚麼顏色...

  • fg123

    提示什么报错信息?...

  • 访客

    为什么第一步点击提交后弹出框点击确认后没有反应?...

  • fati

    刚好遇到setState的问题,感谢分享!...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2023 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.7.2