Vue计算属性、方法、侦听器
生活随笔
收集整理的這篇文章主要介紹了
Vue计算属性、方法、侦听器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- 一、基礎計算模板
- 二、計算屬性computed
- 三、方法methods
- 四、偵聽器watch
- 五、總結
- 六、源碼地址
一、基礎計算模板
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Vue計算屬性、方法、偵聽器</title><!--引入vue.js庫--><script src="../vue.js"></script> </head><body> <div id="root">{{firstName + " " + lastName}} </div><script>var vm = new Vue({el: '#root',data: {firstName: "gb",lastName: "lfy"}}); </script> </body> </html>升級一下
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Vue計算屬性、方法、偵聽器</title><!--引入vue.js庫--><script src="../vue.js"></script> </head><body> <div id="root">{{firstName+" "+lastName}} </div><script>var vm = new Vue({el: '#root',data: {firstName: "gb",lastName: "lfy"},//計算屬性computed: {fallName: function () {return this.firstName + this.lastName;}}}); </script> </body> </html>二、計算屬性computed
有緩存機制，會用以前計算的結果
當計算的屬性發生變化時會執行一次，當修改的數據不屬于計算屬性時，會從緩存中查詢，不會執行。
三、方法methods
無緩存機制，不管修改什么輸入都會執行一次
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Vue計算屬性、方法、偵聽器</title><!--引入vue.js庫--><script src="../vue.js"></script> </head><body> <div id="root">{{fullName()}}{{age}} </div><script>var vm = new Vue({el: '#root',data: {firstName: "gb",lastName: "lfy",age: 22},methods: {fullName: function () {console.log("計算了一次")return this.firstName + this.lastName;}}}); </script> </body> </html>四、偵聽器watch
和計算屬性一樣有緩存機制，只要我偵聽的數據不發生改變，我就不會執行
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Vue計算屬性、方法、偵聽器</title><!--引入vue.js庫--><script src="../vue.js"></script> </head><body> <div id="root">{{fullName()}}{{age}} </div><script>var vm = new Vue({el: '#root',data: {firstName: "gb",lastName: "lfy",fullName: "gb lfy",age: 22},watch: {firstName: function () {console.log("計算了一次");this.firstName + this.lastName;},lastName: function () {console.log("計算了一次");this.firstName + this.lastName;},}}); </script> </body> </html>五、總結
如果一個功能既可以用計算屬性、方法、偵聽器實現，建議優先選擇計算屬性
六、源碼地址
總結
以上是生活随笔為你收集整理的Vue计算属性、方法、侦听器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： vsftpd：500 OOPS: vsf
- 下一篇： CentOS 7 CentOS7查看开