5. Building A First App With Just JavaScript - daniel-qa/Vue GitHub Wiki

5. Building A First App With Just JavaScript

會有三個檔案

app.js

index.html

style.css

用 visual studio 打開程式資料夾

我們導入 app.js ，並編寫代碼，在點擊 button時，取得用戶輸入

我們先使用 javascript , 不用 vue

我們需要一個 button, input

我們還需要訪問 ul，以便增加新的列表項

我們在 app.js 中，用 document.querySelector('button') ，取得 button DOM

我們用 addEventListener 加入 button 的 click 監聽

buttonEl.addEventListener('click');

然後我們將透過 click 作為字符串傳遞(作為第一個參數)來監聽 click 事件

第二個參數，是 click 發生時，應該執行的函數，我們在這裡以定義一個新函數 addGoal

function addGoal() {

}
buttonEl.addEventListener('click',addGoal);

這樣點擊時，這個函數就會被執行

現在我們想要在這個函數中，得到用戶輸入的任何內容

我們可以通過訪問 inputEl 來獲取輸入的值

function addGoal() {
    const enteredValue = inputEl.value;
}

然後，我們可以調用 document 來創建 listitem

document.createElement() 是 Browser 提供的內置方法，用於使用 js 創建新的 DOM 元素

 const listItemEl = document.createElement('ul');

我們可以用新建的 ul DOM，來設置其文本內容，使 ul 的值等於使用者輸入值

function addGoal() {
    const enteredValue = inputEl.value;
    const listItemEl = document.createElement('ul');
    listItemEl.textContent = enteredValue;
}

我們將調用 appendChild ，並添加我們剛剛創建的 listItemEl

以上都做到，就完成了了本節課的內容。

• 清除 input

inputEl.value = '';

---

完整的 app.js

const buttonEl = document.querySelector('button');
const inputEl = document.querySelector('input');
const lstEl = document.querySelector('ul');

function addGoal() {
    const enteredValue = inputEl.value;
    const listItemEl = document.createElement('ul');
    listItemEl.textContent = enteredValue;
    listEl.appendChild(listItemEl);
    inputEl.value = '';
}

buttonEl.addEventListener('click',addGoal);