Vue MVVM模型與data及methods屬性超詳細(xì)講解

更新時(shí)間：2022年10月08日 14:56:49 作者：東非不開森

MVVM旨在利用WPF中的數(shù)據(jù)綁定函數(shù),通過從視圖層中幾乎刪除所有GUI代碼（代碼隱藏）,更好地促進(jìn)視圖層開發(fā)與模式其余部分的分離,這篇文章主要介紹了Vue MVVM模型與data及methods屬性

1.MVVM模型

MVC和MVVM都是一種軟件的體系結(jié)構(gòu)

MVC是Model – View –Controller的簡稱，是在前期被使用非常框架的架構(gòu)模式，比如iOS、前端；
MVVM是Model-View-ViewModel的簡稱，是目前非常流行的架構(gòu)模式；

Vue的整個(gè)設(shè)計(jì)受到MVVM模型的影響

MVVM模型：

M：模型(Model):data中的數(shù)據(jù)
V：視圖（view）：模板代碼
VM：視圖模型（ViewModel）：Vue實(shí)例

<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; //設(shè)置為 false 以阻止 vue 在啟動時(shí)生成生產(chǎn)提示。
const vm = new Vue({
      el: "#root",
      data: {
        name: "xiaozhao",
        address: "henan",
        a: 1,
      },
    });
console.log(vm);

data中所有的屬性，最后都出現(xiàn)在了vm身上
vm身上的所有屬性，及vue原型上的所有屬性，在Vue模板中都可以直接使用

2.data屬性

data屬性是傳入一個(gè)函數(shù)，并且該函數(shù)需要返回一個(gè)對象：

在Vue2.x的時(shí)候，可以傳入一個(gè)對象或者一個(gè)函數(shù)；
在Vue3.x的時(shí)候，必須傳入一個(gè)函數(shù)

data中返回的對象會被Vue的響應(yīng)式系統(tǒng)劫持，之后對該對象的修改或者訪問都會在劫持中被處理：

所以我們在template或者app中通過 {{counter}} 訪問counter，可以從對象中獲取到數(shù)據(jù)；
所以我們修改counter的值時(shí)，app中的 {{counter}}也會發(fā)生改變；

data有2種寫法

對象式
函數(shù)式

對象式

      data: {
        name: "zj",
      },

函數(shù)式

data function(){} data不能寫箭頭函數(shù) this指向問題

      data() {
        console.log("@@@", this); //此處的this是vue實(shí)例對象
        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" };
        },
        //函數(shù)式
        methods: {
          changeMessage: function () {
            this.message = "hello hhh";
          },
        },
      });
      app.mount("#app");

3.methods屬性

methods屬性是一個(gè)對象，通常我們會在這個(gè)對象中定義很多的方法：

這些方法可以被綁定到模板中；
在該方法中，我們可以使用this關(guān)鍵字來直接訪問到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中的函數(shù)不能寫成箭頭函數(shù)
          increment: () => {
            console.log(this);
          },
        },
      });
app.mount("#app");

在方法中訪問屬性

在 methods 方法中訪問 data 的數(shù)據(jù)，可以直接通過 this.屬性名的形式來訪問。

到此這篇關(guān)于Vue MVVM模型與data及methods屬性超詳細(xì)講解的文章就介紹到這了,更多相關(guān)Vue MVVM模型內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: