iT邦幫忙

2021 iThome 鐵人賽

DAY 11
1
Modern Web

菜鳥學前端,一起vue起來 !系列 第 11

Day 11. Money money Vue的$$哪裡來-數據和方法

昨天我們講到了Vue的實體還有實體內會有的一些物件,今天就來用範例看看它內外互相響應的過程吧٩(ˊᗜˋ )و

數據和方法

當Vue實例被創建時,它會將data中所有property加入Vue的響應式系統中,當property的值發生改變時,View會產生響應,更新為新的值。

我們先創建一個data,裡面有一個msg為Hello Vue!

<script>
    var data = { 
        msg:'Hello Vue!'
     }
</script>

https://ithelp.ithome.com.tw/upload/images/20210921/201314001Z4tO3UkON.png

當我們啟動Vue並把data綁進去,data就會從我們本來看到的Hello Vue!脫胎換骨成observer,這裡就表示Vue已經對我們這個data動了手腳,也就是我們的data會被存在vm.$data中,兩者的內容會是一樣的,會同時連動,所以當我們改變資料時,畫面也會跟著連動響應去改變。

    <script>
        var data = { 
            msg:'Hello Vue!'
         }

        var vm = new Vue({
            el:'#app',
            data: data
        })
    </script>

https://ithelp.ithome.com.tw/upload/images/20210921/20131400AWbaA6G8F2.png

不論我們改變data或是vm.$data的值,都可以看到畫面跟著改變。
https://ithelp.ithome.com.tw/upload/images/20210921/20131400r8ynnrVJzX.png
https://ithelp.ithome.com.tw/upload/images/20210921/201314001lEdIz2zk5.png

但當我們使用Object.freeze( ),會防止更改我們現有的屬性,我們會看到它不會被Vue變成observer,也就是它不會做連動做響應,資料畫面也不會即時去做更改。

 var data = { 
            msg:'Hello Vue!'
         }
         Object.freeze(data)
         
        var vm = new Vue({
            el:'#app',
            data: data
        })

https://ithelp.ithome.com.tw/upload/images/20210921/20131400xu7VIdnoMj.png

Vue的前綴$

在前面的範例中我們可以看到像是vm.$data有使用到錢錢符號($),大家一定會很疑惑,這個錢錢是拿來幹嘛的呢? 還是Vue跟我們一樣也愛錢錢[̲̅$̲̅(̲̅ ͡° ͜ʖ ͡°̲̅)̲̅$̲̅]
vm是我們new出來的實體,而vue實體裡面會有許多功能,為了區別vue的私有功能跟我們自己做的功能,所以它會把它自己的功能加上一個錢錢的符號,作為一個辨識的代表符號,所以$系列大概都是vue預設公用的東東!

簡單來說,我們可以把$就看作是一個符號就好,沒有太特別的意思,就是vue預設提供給我們的功能 乁( ˙ ω˙乁)

Instance Properties

  • vm.$data : Vue instance觀察的數據對象,也相當於我們定義的data,所以我們想改變畫面可以更改vm.$data.a、data.a或vm.a(像上面的範例那樣!) 。
  • vm.$el : Vue instance使用的根DOM 元素。
  • vm.$props
  • vm.$options
  • vm.$parent
  • vm.$root
  • vm.$children
  • vm.$slots

這邊是Vue Instance Properties提供的部分項目,但光看上面簡略的介紹我們可能都不知道他們要拿來幹嘛,好喇 其實是我看不太懂,所以之後有用到再來理解他們吧!

除了上面那些還有一些Instance Methods,像是vm.$watch,還有下一篇生命週期中我們會用到的vm.$mount、vm.$destroy等等。

參考資料
Vue Instance Properties


上一篇
Day 10. 實實在在的實體 - Vue Instance
下一篇
Day 12. 生命週期 - Lifecycle Hooks
系列文
菜鳥學前端,一起vue起來 !30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言