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>
    <h1>Hello Vuejs</h1>
  </div>
</template>

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

<strong>#data</strong>屬性

# #在上面的程式碼中，我們將在<script>標籤內導出預設的空對象，讓我們將data屬性加入到該空對像中。 </script>

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

data

：data屬性值是一個傳回物件的匿名函數。該物件中的每個屬性都被加入到Vue反應系統中，這樣，如果我們更改了該屬性值，那麼vuejs將使用更新的資料重新呈現dom。

讓我們使用{{}}

雙花括號將

title屬性加入到模板標記中。 App.vue

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

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

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

讓我們使用以下命令啟動開發伺服器。 <pre class="brush:php;toolbar:false">npm run serve</pre>

你看到我們的

{{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>
    <h1>Hello {{title}}</h1>
    <h2>{{welcomeMsg()}}</h2>
  </div>
</template>

############################### ###

以上是Vuejs中methods和data屬性的使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！