Vue-幼幼班入門篇-W01

發表於

Vue-幼幼班入門篇-W01

在順境中快樂，是自然；在逆境中追求快樂，是修養。

vue.js 幼幼班起手式

安裝 (CDN)

1
2
<!-- vue.js -->
<script src = "https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js" ></script>

基本屬性

  • el : element 的縮寫,要綁定的 DOM element
  • data : 要綁定的資料
  • methods: 定義可以在元件或樣版內使用的方法 
1
2
3
4
5
6
props,      // 可用來接收父元件資料的屬性
template,   // 要解析的樣版，可以是 #id, HTML 或某個 DOM element 實體
computed,   // 定義資料的 getter 與 setter ，即需要**計算後才能使用的屬性**
components, // 定義子元件，可用 ES6 簡寫法，例如 { MyHeader }
propsData,  // 存放預設的 props 內容，方便測試用
replace     // 要不要用 template 取代 el 指向的 DOM Element ，預設為 true
1
2
3
4
5
6
7
8
9
var app = new Vue({
    el:'#app', // 綁入範圍
    data:{ // 數據內容
        message: 'hello vue!!',
        score: 60
    },
    methods: { // 方法
    }
});

基本指令

  • v-if：數值為true才顯示,切換頻繁用v-show
  • v-model：雙向資料綁定
  • v-for：陣列資料呈現
  • v-on：搭配 method,縮寫 @click
  • v-once：單次綁定 (僅更新一次，之後數值更動也不會更新)
  • v-html：把內容當成 HTML 解析
  • v-bind：屬性綁定,縮寫 :href

todolist

生命邏輯

參考資料

下週更新：Vue-幼幼班入門篇-W02