上一篇(自我學習 - 簡單認識 Vue)

今天Lucy老師要跟大家一起學習的有二個部分

1. Vue 在 index.html 可以如何使用？
2. 什麼事 Trello ？

Vue 在 index.html 可以如何使用？

在 index.html 裡面新增 <script></script> 等等我們會在裡面使用 Vue

script 裡面新增以下程式碼

var myApp = new Vue({
    el: '#myApp',
    data:{
        message:'Hello Vue.js',
    },
});

來看看這段程式碼在說什麼

//在 javascript new 一個 Vue 的物件 
var myApp = new Vue({})

再來是屬性的部分

這個 el: 是 Vue 的固定屬性，不能任意的改動，就把它想成是一個選擇器會選擇標籤中的 id="myApp"，所有被這個 <div id="myApp"> </div> 包含著的內容都可以使用 Vue。

el: '#myApp'

data:{} 這個屬性也是固定的，主要是在裡面新增 Vue 的變數；有些時候會在不同的地方有同樣的文字，我覺得很方便的地方是往後如果有需要改文字的話直接就可以在 data:{} 裡面找到變數直接修改就可以了，才不會漏改到。

data:{
    message:'Hello Vue.js',
}

那在 <div id="myApp"> </div> 裡面怎麼用 message 這個變數呢？

<div id="myApp">
    {{ message }}
</div>

打開index.html是不是有成功了呢？

什麼事 Trello？

Trello官網

Trello 可以讓你新增你的工作的項目，把工作項目細分之後可以分成「今日目標、ToDo、Doing、Done」，當然這個是你們可以自行去調整的不一定要參考我的！

往後會利用 Vue 製作出簡單版本的 Trello 並藉由這個專案學習 Vue，有更多的屬性會在往後慢慢介紹