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 17: 人工神经网路初探 损失函数(下)

>>:  Day10 - 如何用手机连 Ruby on Rails Local 开发中的专案

程序进化论:一行表达式 Single-expression functions

「学姐,你今天发生什麽事了吗?」 「嗯⋯⋯」唯心没有马上回应诗忆的问题。 「是不是太累了?其实剩下的...

{DAY9} SQL查询语法1

前言 今天要来练习SQL的查询语法 使用的软件是SQLite Studio 我上的课程是郭耀仁老师在...

[DAY11]跟 Vue.js 认识的30天 - Vue 的模组注册(`component`)

模组的命名 一个模组的命名关系到我们是否能快速地知道这个模组的功能是甚麽,同时可以避免跟现有的 HT...

Day29 procfs, sysfs, debugfs

前言 讲完了复杂了中断处理,铁人赛的倒数第二天,要来看看一些虚拟的文件系统了,首先是 procfs ...

关於 Scratch 3

关於 Scratch 3 教学原文参考:关於 Scratch 3 Scratch 是由美国麻省理工学...