iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 6
1
Modern Web

用Vue與firebase開發訂便當系統實錄系列 第 6

Day6. 開始學習Vue(el、data、mount)

因為訂單的呈現很多都是資料與畫面的關係,我們決定用Vue作為前端框架
所以趕快來臨時抱佛腳開始學Vue現學現賣(咦

Vue是一種宣告式渲染的框架,不同於命令式的一個口令一個動作的取值塞值,Vue直接把資料與畫面綁定,讓畫面與資料能夠單向或雙向的更新。

一、mount
使用Vue首先創建一個Vue實例,而後再把他掛載在DOM樹上,Vue的作用域就會發生在此節點之下的所有子節點。

掛載(mount)的方式有兩種:

  1. 使用el
    把CSS選擇器寫在el裡,值得注意的是,如果選擇器寫的是像是class這種一次選擇多個元素,Vue仍然只會掛載在第一個選到的元素,而不是所有class。
let vm = new Vue({
    el:'#app'
});

2.使用$mount

let vm = new Vue({});

vm.$mount('#app');

二、data

Vue實例裡的data屬性的資料可以使用雙刮號{{}}即時更新在畫面上
data的寫法有兩種,一種是直接寫在Vue實例裡,一種是寫在外面

const data = {
    x : 1,
    y : 2
}

let vm = new Vue({
    el:'#app',
    data :data
});

data : data 因為ES6的shorthand可以直接寫data就好
這時候要存取Vue實例裡的x的值可以直接

vm.x = 3

Vue實例裡的data就等於外面的data

vm.$data === data  //true

上一篇
Day5. 資料結構ver.1
下一篇
Day7. Vue – (v-for、template)
系列文
用Vue與firebase開發訂便當系統實錄13

尚未有邦友留言

立即登入留言