Vue

js addEventListener事件監聽

addEventListener語法解析

1
target.addEventListener(event, function, useCapture)

target: 元素
event:事件名稱
function：事件運行函式
useCapture：事件是否應該補獲或是冒泡，默認為false

Ex.新增class，刪除class，toggle

綁定點擊按鈕元件 ＝> 執行事件函式
新增clss, Visible
刪除clss, Visible
toggle, Visible
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
html
<a class="addBtn">Add</a>
<a class="removeBtn">Remove</a>
<a class="toggleBtn">Toggle</a>
<div class="menu-list"> 
  <ul>
    <li>One</li>
    <li>Two</li>
     <li>Three</li>
  </ul>
</div>
Scss
body{
  padding:20px;
}
a {
  padding:6px 22px;
  color:white;
  border-radius: 8px 8px 0px 0px;
}
.addBtn{
   background-color:green;
}
.removeBtn{
   background-color:red;
}
.toggleBtn{
   background-color:#009688;
}
.menu-list{
  display:none;
  background-color:#eee;
   margin-top:8px;
  padding:15px;
  ul{
    padding-inline-start: 30px;
    margin-block-start: 0em;
    list-style-type: none;
    li{
       list-style-type: none;
       padding-inline-start: 0px;
    }
  }
}
.Visible{
  display:flex;
}

js
const addBtn = document.querySelector(".addBtn");
addBtn.addEventListener('click',() => {
  const menuList = document.querySelector(".menu-list");
  menuList.classList.add("Visible")
})

const removeBtn = document.querySelector(".removeBtn");
removeBtn.addEventListener('click',() => {
  const menuList = document.querySelector(".menu-list");
  menuList.classList.remove("Visible")
})

const toggleBtn = document.querySelector(".toggleBtn");
toggleBtn.addEventListener('click',() => {
  const menuList = document.querySelector(".menu-list");
  menuList.classList.toggle("Visible")
})

Ex.新增動態表單

1
2
3
4
5
6
7
8
9
10
11
12
<div class='app'>
    <div>
      <button class="add-btn">新增聯絡人</button>
    </div>
    <div class="contacts">
      <div class="row">
        姓名：<input name="name"/>
        電話：<input name="phone"/>
        <button class="delete-btn">刪除</button>
      </div>
    </div>
  </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
js
// 綁定按鈕
const btn= document.querySelector(".add-btn");
//addEventListener 監聽
btn.addEventListener('click',function () {
  //建立一個 div
  const div = document.createElement("div");
  div.classList.add("row");
  div.innerHTML = `
        姓名：<input name="name" />
        電話：<input name="phone"  />
        <button class="delete-btn">刪除</button>
  `;
  //插入div
  document.querySelector(".contacts").appendChild(div);
})  
  //綁定刪除列
const contacts= document.querySelector(".contacts");
//addEventListener 監聽
contacts.addEventListener('click',function (e) {
  console.log(e.target)
  //e.target包含刪除按鈕
  const deleteBtn= e.target.classList.contains('delete-btn');
  if(deleteBtn){
    // closest.js方法用於檢索該元素的父節點，或者元素的父級與選擇器匹配
    contacts.removeChild(e.target.closest('.row'))
  }
})
參考資料
Vue

Element classList

Element classList add (新增class)

1
2
classList.add('新增名稱')
classList.add('新增名稱', '新增名稱', '新增名稱')

Element classList remove (刪除class)

1
2
.classList.remove("移除名稱");
classList.remove('移除名稱', '移除名稱', '移除名稱')

Element toggle remove (切換class)

1
2
.classList.toggle("切換名稱");

Element classList contains (判斷 class 是否存在)

1
Element.classList.contains('className')

Ex.新增class，刪除class，toggle

綁定點擊按鈕元件 ＝> 執行事件函式
新增clss, Visible
刪除clss, Visible
toggle, Visible
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
html
<a class="addBtn">Add</a>
<a class="removeBtn">Remove</a>
<a class="toggleBtn">Toggle</a>
<div class="menu-list"> 
  <ul>
    <li>One</li>
    <li>Two</li>
     <li>Three</li>
  </ul>
</div>
Scss
body{
  padding:20px;
}
a {
  padding:6px 22px;
  color:white;
  border-radius: 8px 8px 0px 0px;
}
.addBtn{
   background-color:green;
}
.removeBtn{
   background-color:red;
}
.toggleBtn{
   background-color:#009688;
}
.menu-list{
  display:none;
  background-color:#eee;
   margin-top:8px;
  padding:15px;
  ul{
    padding-inline-start: 30px;
    margin-block-start: 0em;
    list-style-type: none;
    li{
       list-style-type: none;
       padding-inline-start: 0px;
    }
  }
}
.Visible{
  display:flex;
}

js
const addBtn = document.querySelector(".addBtn");
addBtn.addEventListener('click',() => {
  const menuList = document.querySelector(".menu-list");
  menuList.classList.add("Visible")
})

const removeBtn = document.querySelector(".removeBtn");
removeBtn.addEventListener('click',() => {
  const menuList = document.querySelector(".menu-list");
  menuList.classList.remove("Visible")
})

const toggleBtn = document.querySelector(".toggleBtn");
toggleBtn.addEventListener('click',() => {
  const menuList = document.querySelector(".menu-list");
  menuList.classList.toggle("Visible")
})
Vue

pnpm & yarn安裝

pnpm安裝

使用 npm 來安裝
我們提供了兩個 pnpm CLI 包裝， pnpm 和 @pnpm/exe。

一般版本的 pnpm 需要 Node.js 才能執行。
@pnpm/exe 則與 Node.js 一起包成一個可執行檔，所以可以用於沒有安裝 Node.js 的系統上。
這裡用node v20.15.1

1
npm install -g pnpm@latest-10

安裝後

1
pnpm -v

9.15.3

參考資料
npm 安裝參考

yarn安裝

依賴npm 安裝

1
2
3
sudo npm install -g yarn

yarn -v
1
yarn install

參考資料
为什么现在我更推荐 pnpm 而不是 npm/yarn?

Vue

JavaScript 初探

JavaScript（簡稱 JS）

具有一級函數 (First-class functions) 的輕量級、直譯式或即時編譯（JIT-compiled）的程式語言。
網頁的腳本語言而大為知名，但也用於許多非瀏覽器的環境，像是 Node.js、Apache CouchDB。
JavaScript 是一個的基於原型的、多範型的、動態語言，支援『物件導向』、指令式以及宣告式（如函數式程式設計）風格。

別搞混了 JavaScript 和 Java 程式語言。雖然「Java」和「JavaScript」都是 Oracle 公司在美國和其他國家的商標或註冊商標，但兩個語言有著非常不同的語法、語意和用途。

JavaScript 初探

JavaScript 是一種腳本，也能稱它為程式語言，可以讓你在網頁中實現出複雜的功能。當網頁不只呈現靜態的內容，另外提供了像是：內容即時更新、地圖交動、繪製 2D/3D 圖形，影片播放控制……等，你就可以大膽地認為 JavaScript 已經參與其中。它是標準網頁技術蛋糕的第三層，而其他兩層（HTML 和 CSS）我們在其他學習單元中有更多詳細的介紹。

Web包含以下：

html是一種標記語言，我們使用它組織網頁裡的內容並給予定義， 例如：定義段落、標題、資料表格，或是在頁面嵌入圖片和影片。. 
1
<p>Lara</p>
css是一種樣式規則的語言，用來幫我們的 HTML 內容上套用樣式，例如：設置背景顏色、字型，或讓內容以多欄的方式呈現。 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
p {
  font-family: "helvetica neue", helvetica, sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  border: 2px solid rgba(0, 0, 200, 0.6);
  background: rgba(0, 0, 200, 0.3);
  color: rgba(0, 0, 200, 0.6);
  box-shadow: 1px 1px 2px rgba(0, 0, 200, 0.4);
  border-radius: 10px;
  padding: 3px 10px;
  display: inline-block;
  cursor: pointer;
}
javascript是一種腳本語言，它使你能夠動態的更新內容、控制多媒體、動畫……幾乎所有事。（好吧，不是所有事情，但神奇的是你可以通過短短幾行 JavaScript 程式碼實現。） 
1
2
3
4
5
6
7
8
9
10
//綁定p元件
const para = document.querySelector("p");

para.addEventListener("click", updateName);

function updateName() {
  let name = prompt("輸入新的名字");
  para.textContent = "Player 1: " + name;
}

JavaScript 語言的核心包含了很多常用的程式功能供你使用
DOM （文件物件模型Document Object Model） API 讓你能操作 HTML 和 CSS，像是建立、移除或改變 HTML 元素，或動態地將新樣式套用到頁面…等等。每當你看到彈出視窗，或有新的內容出現在畫面上（就像上面的範例所展示的）， 那就是 DOM 在動作。
### DOM節點 DOM會形成一個樹狀的結構且擁有各個節點，而其節點通常分為四種，包括 Document、Element、Text 與 Attribute。
  • Document(文件)
    Document是HTML文件的開端，所有標籤都會由此向下延伸。
  • Element(元素)
    Element是文件的各種標籤，像是＜head＞、＜body＞、＜p＞或是＜div＞等，都屬於Element元素節點。
  • Text(文本)
    指的是被標籤包起來的文字。 像是本節點標題「DOM節點」的後端語法是＜h3＞DOM節點＜/h3＞，而其中被Element元素包起來的文字就是Text文本。
  • Attribute(屬性)
    指的是各個標籤內的相關屬性，用來敘述Element元素的相關性質，這種附加在 Element元素上的東西就稱為Attribute屬性。
Vue

表單密碼的顯示與隱藏

javaScript 表單密碼的顯示與隱藏

流程綁定按鈕 ＝>切換表單type 與icon 圖示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//html
<div class="app">
   <div class="login">
      <div class="item">
        <input>
      </div>
     
     <div class="item pad">
    <input type="password" class="input password">
    <i class="togglePassword fa-solid fa-eye not-eye" ></i>
     </div>
</div> 
</div>


//js
//綁定按鈕
const eyeIcon = document.querySelector("i");
const password = document.querySelector(".password");

eyeIcon.addEventListener("click", function () {
  const vm = this;
  const type = password.getAttribute("type") === "password" ? "text" : "password";
  password.setAttribute("type", type);
  vm.classList.toggle("not-eye");
});

Vue3表單密碼的顯示與隱藏

流程綁定按鈕 ＝>切換表單type 與icon 圖示(class)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
    <div class="login">
        <div class="item">
        <input>
        </div>
        <div class="item pad">
            <input  :type="passwordVisible === false ? 'password' : 'input'" class="input">
            <i class="fa-solid" 
        @click="passwordVisible = !passwordVisible" :class="passwordVisible === false ? 'not-eye' : 'fa-eye'">
        </i>
        </div>
    </div> 
</template>



<script setup lang="ts">
   /* const store = useAuthStore()
    const {  formRef, loginForms, rulesLogin, validatorMessage, passwordVisible } = storeToRefs(store)
    const {  submitForm, resetForm  } = store*/


    import { ref } from 'vue';
    const passwordVisible = ref(false);
</script>
Vue

SourceTree & github Clone

Sourcetree Clone from URL(克隆儲存庫)

打開Sourcetree 點擊New下拉Select =>Clone from URL

Clone a repository 克隆儲存庫
Source URL:Clone 來源網址
Destination Path目的地路徑
Name
Advanced Options進階選項
This is not Valid source path / Url這不是有效的來源路徑/網址

Sourcetree push 錯誤訊息

處理方式：
Source URL:Clone 來源網址 必須加TOKEN(令牌) https://@github.com/網址.git

參考資料

Vue

SourceTree & github新增專案

設定帳號

新增一個資料夾叫test_project
在SourceTree內，點選 New…，選擇
Add Existing Local Repository（加入剛剛新增的專案）。

加到本機端的 Git 版本控制，確認資料夾無誤後按下 Create。
加入這個資料夾，＝>資料夾內會多一個.git檔案 （如同git 指令中的初始化 git init），
SourceTree專案看到剛剛新增專案
提交 Commit =>如同git commit -m “新增的內容”

綁定github 專案
到github新增一個專案與剛剛localhost 端新增一個的資料名同名

到SourceTree內右上角setting按鈕按下

出現對話框選擇add 按鈕

回到SourceTree專案內 push 到master (如同 git push master)

git 遠端就出現這個專案剛剛push的內容
Vue

SourceTree 設定帳號與GitHub Personal access token

SourceTree 是一款以 Git 為基礎設計的 GUI 圖形化工具

安裝SourceTree

SourceTree官方

設定帳號

右上角的齒輪，選擇第一個 Accounts（帳戶）

按下左下角的 Add（新增）

  • Host（專案託管、放置的位置，請選擇 GitHub）
  • Auth Type（驗證類型，請選擇基本 Basic）
  • Username（帳號）
  • Password（密碼）
  • Protocol（通訊協定，請選擇 HTTPS）

產生Token令牌,與使用訪問令牌

要在 SourceTree 中使用 GitHub 的兩因素身份驗證，您只需使用訪問令牌而不是密碼即可。執行此操作的步驟如下

  1. 轉到 GitHub 中的個人訪問令牌設置。
  2. 單擊生成新令牌按鈕。
  3. 將令牌命名為描述性的。
  4. 選擇您希望授予此令牌的範圍
  5. 單擊生成令牌按鈕
  6. 複製令牌並將其用作託管存儲庫中的密碼 (保存好密碼）
點擊settings. 如圖 點擊Personal access tokens, click Tokens (classic). 點擊Generate new token (classic).

Save 完成後，就會出現你的 Github 帳戶了！

參考資料