Vue方法是與Vue實例關聯的函數。方法在內部定義methods
財產。讓我們看看它們是如何工作的。
什麼是Vue.js方法
Vue方法是與Vue實例關聯的函數。
方法在內部定義methods
財產:
new Vue({
methods: {
handleClick: function() {
alert('test')
}
}
})
或在“單個文件組件”的情況下:
<script>
export default {
methods: {
handleClick: function() {
alert('test')
}
}
}
</script>
當您需要執行某項操作並附加一個v-on
要處理的元素上的指令大事記。像這樣,handleClick
單擊元素時:
<template>
<a @click="handleClick">Click me!</a>
</template>
將參數傳遞給Vue.js方法
方法可以接受參數。
在這種情況下,您只需在模板中傳遞參數,然後
<template>
<a @click="handleClick('something')">Click me!</a>
</template>
new Vue({
methods: {
handleClick: function(text) {
alert(text)
}
}
})
或在“單個文件組件”的情況下:
<script>
export default {
methods: {
handleClick: function(text) {
alert(text)
}
}
}
</script>
如何從方法訪問數據
您可以使用來訪問Vue組件的任何數據屬性。this.propertyName
:
<template>
<a @click="handleClick()">Click me!</a>
</template>
<script>
export default {
data() {
return {
name: ‘Flavio’
}
},
methods: {
handleClick: function() {
console.log(this.name)
}
}
}
</script>
我們不必使用this.data.name
, 只是this.name
。 Vue確實為我們提供了透明的綁定。使用this.data.name
會引發錯誤。
如您之前在事件描述中所看到的,方法與事件緊密關聯,因為它們被用作事件處理程序。每次事件發生時,都會調用該方法。
免費下載我的Vue手冊
更多vue教程:
- Vue.js概述
- Vue.js CLI:學習如何使用它
- Vue.js開發工具
- 為Vue開發配置VS代碼
- 使用Vue.js創建您的第一個應用
- Vue.js單個文件組件
- Vue.js模板和插值
- Vue.js指令
- Vue.js方法
- Vue.js計算屬性
- 使用CSS樣式化Vue.js組件
- Vue.js觀察者
- Vue方法vs觀察者vs計算的屬性
- Vue.js過濾器
- Vue.js組件
- Vue.js插槽
- Vue.js組件道具
- Vue.js活動
- Vue.js組件通信
- Vuex,Vue.js狀態管理器
- Vue,在另一個組件內部使用一個組件
- Vue,如何使用prop作為類名
- 如何將SCSS與Vue.js單個文件組件一起使用
- 在Vue.js中使用Tailwind
- Vue路由器
- 動態顯示Vue組件
- Vue.js備忘單
- 使用Vuex將Vue數據存儲到localStorage
- 如何使用Vue動態應用類
- Vue,如何使用v模型
- Vue,為什麼數據必須是函數
- Roadmap to become a Vue.js developer in 2020