Vuejs中methods和data屬性的使用方法

這篇文章主要介紹了Vuejs中methods和data屬性的使用方法，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

在本篇文章中，我們將給大家介紹如何在Vue JS中使用methods和data屬性。

注，我們使用Vue cli生成項目。

創建我們的項目

讓我們通過運行以下命令快速創建我們的vue項目。

vue create vue-app

以上命令將下載vue-app文件夾中所需的文件。

使用cd vue-app更改工作目錄，然后使用你喜愛的代碼編輯器打開項目文件夾。

在src文件夾中導航到App.vue文件并刪除所有內容，然后用下面的代碼替換。

App.vue

<template>
  <div>
    <h2>Hello Vuejs</h2>
  </div>
</template>

<script>
export default {};
</script>

data屬性

在上面的代碼中，我們將在<script>標簽內導出默認的空對象，讓我們將data屬性添加到該空對象中。

<script>
export default {
   data:function(){
       return {
           title: "Vuejs"
       }
   }
};
</script>

data：data屬性值是一個返回對象的匿名函數。該對象中的每個屬性都被添加到Vue反應系統中，這樣，如果我們更改了該屬性值，那么vuejs將使用更新的數據重新呈現dom。

讓我們使用{{}}雙花括號將title屬性添加到模板標記中。

App.vue

<template>
  <div>
    <h2>Hello {{title}}</h2>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      title: "Vuejs"
    };
  }
};
</script>

在Vuejs中，我們需要使用雙花括號{{js expression}}來傳遞JavaScript表達式。

讓我們使用以下命令啟動開發服務器。

npm run serve

你看到我們的{{title}}被Vuejs替換了嗎?

methods屬性

讓我們使用methods屬性創建第一個方法。methods屬性值也是一個對象。

<script>
export default {
  data: function() {
    return {
      title: "Vuejs"
    };
  },
  methods:{
      welcomeMsg:function(){
          return `Welcome to ${this.title} world`
      }
  }
};
</script>

在上面的代碼中，我們添加了一個返回字符串的welcomeMsg方法。

在methods內部，我們可以使用this.propertyname訪問數據對象。

讓我們在template標簽中調用welcomeMsg方法。

<template>
  <div>
    <h2>Hello {{title}}</h2>
    <h3>{{welcomeMsg()}}</h3>
  </div>
</template>

感謝你能夠認真閱讀完這篇文章，希望小編分享Vuejs中methods和data屬性的使用方法內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!