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 帳戶了！

參考資料

Vue

Git本地端操作

安裝 git請參閱
檢查 git 版本 指令

1
2
git  ---version
git version 2.15.0

git

列出目前設定的參數:git config –list

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
//指令：列出目前設定的參數
git config --list
如下
core.excludesfile=~/.gitignore
core.legacyheaders=false
core.quotepath=false
mergetool.keepbackup=true
push.default=simple
color.ui=auto
color.interactive=auto
repack.usedeltabaseoffset=true
alias.s=status
alias.a=!git add . && git status
alias.au=!git add -u . && git status
alias.aa=!git add . && git add -u . && git status
alias.c=commit
alias.cm=commit -m
alias.ca=commit --amend
alias.ac=!git add . && git commit
alias.acm=!git add . && git commit -m
alias.l=log --graph --all --pretty=format:'%C(yellow)%h%C(cyan)%d%Creset %s %C(white)- %an, %ar%Creset'
alias.ll=log --stat --abbrev-commit
alias.lg=log --color --graph --pretty=format:'%C(bold white)%h%Creset -%C(bold green)%d%Creset %s %C(bold green)(%cr)%Creset %C(bold blue)<%an>%Creset' --abbrev-commit --date=relative
alias.llg=log --color --graph --pretty=format:'%C(bold white)%H %d%Creset%n%s%n%+b%C(bold blue)%an <%ae>%Creset %C(bold green)%cr (%ci)' --abbrev-commit
alias.d=diff
alias.master=checkout master
alias.spull=svn rebase
alias.spush=svn dcommit
alias.alias=!git config --list | grep 'alias\.' | sed 's/alias\.\([^=]*\)=\(.*\)/\1\	 => \2/' | sort
include.path=~/.gitcinclude
include.path=.githubconfig
include.path=.gitcredential
diff.exif.textconv=exif
user.name=lara huang
user.email=lara1105huang@gmail.com
core.excludesfile=/Users/larahuang/.gitignore_global
core.autocrlf=false
difftool.sourcetree.cmd=opendiff "$LOCAL" "$REMOTE"
difftool.sourcetree.path=
mergetool.sourcetree.cmd=/Applications/Sourcetree.app/Contents/Resources/opendiff-w.sh "$LOCAL" "$REMOTE" -ancestor "$BASE" -merge "$MERGED"
mergetool.sourcetree.trustexitcode=true
commit.template=/Users/larahuang/.stCommitMsg
color.ui=true
core.repositoryformatversion=0
core.filemode=true
core.bare=false
core.logallrefupdates=true
core.ignorecase=true
core.precomposeunicode=true
remote.origin.url=git@github.com:lara1105huang/blog_lara.git
remote.origin.fetch=+refs/heads/*:refs/remotes/origin/*
branch.main.remote=origin
branch.main.merge=refs/heads/main

設定使用者名稱及信箱（總體）

1
2
git config --global user.name、
git config --global user.email

設定查看配置

1
2
git config --global --list
git config --local --list

Git本地端操作

新增版控初始化

1
2
3
4
5
mkdir 資料夾名稱 //新增資料夾名稱
cd 資料夾名稱  //到資料夾內
git  init //加入版控，初始化

Initialized empty Git repository in /Users/larahuang/Desktop/2023-10m/newtest/.git/

為什麼我看不到隱藏檔案
Mac＝>

如何停止整個版本控制

1
rm -r .git

版控內的忽略檔案（不加入版控寫在這個檔案內）
新增 .gitignore

1
touch .gitignore //新增 .gitignore版控內的忽略檔案

時常檢查狀態

1
git status

取消追蹤

1
git rm --cached <file>

本地端又分為：

工作目錄（Working Directory）
放入暫存區（Stating Area）
1
git add .
### 加入本地端儲存庫 
1
git commit -m '版本訊息'
本地端檔案庫（local repo）
1
git commit -am 'message'

檢視 commit 紀錄

1
git log

輸出更簡潔的 log

1
git log —-oneline
# 指令 解析
1 ＄git config global user.name 配置name
2 ＄git config global user.email 配置email
1-1查看配置 ＄ git config --list 列出目前設定的參數
1-2查看配置 ＄ git config --global --list 查看當前global用戶配置
1-2查看配置 ＄ git config --local --list 查看當前local用戶配置
3 .gitignore 忽略檔案,新增.gitignore 加入要忽略的檔案
4.1 $ git init 新增版控，初始化
4.2 $ rm -r .git 停止整個版本控制
4.3 $ git add . 放入暫存區
4.4 $ git status 時常檢查狀態
4.5 $ git rm --cached 取消追蹤
4.6 $ git log 檢視 commit 紀錄
4.7 $ git log --oneline 檢視 輸出更簡潔的 log
4.8 $ git log 檔案名稱 檢視 檔案名稱
4.9 $ git rm 檔案名稱 刪除檔案
4.10 $ $ git rm --cached welcome.html 讓檔案不再受 git 版控（並不是刪除！）
4.11 $ git mv
ex. $ git mv welcome.html hello.html
 變更檔名
4.12
$ git checkout
ex.切換到最新版本：$ git checkout master
 切換版本/分支
4.13
$ git diff
ex.比對工作目錄與暫存區(Stating Area)全部檔案的差異：$ git diff --cached
ex.比對當前文件與暫存區(Stating Area)全部檔案的差異：$ git diff filename
比對工作目錄（Working Directory）與指定 commit 之間的差異 ：$ git diff commit-id
比對兩個 commit 之間的差異 $ git diff [commit-id][new commit-id]
比對兩個 branch 之間的差異 $ git diff branch1 branch2
 比對工作目錄

git 參考資料