vue.js 的起手式
1
| <script src="https://unpkg.com/vue@next"></script>
|
1
2
3
4
| <div id="app">
<h1>{{msg}}</h1>
<button @click="handAddInt">Add</button>
</div>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
| const { ref } = Vue;
const App = {
setup() {
const msg = ref(0);
const handAddInt = () => msg.value++;
return {
msg,
handAddInt,
};
},
};
Vue.createApp(App).mount("#app");
|
以往 VUE2 使用 new Vue 創建實體，VUE3 使用 createApp 來創建應用程式(App)的實體，並掛載到 DOM 上
setup() 放入所有跟 vue.js 相關的操作內容
return 放入要回傳到 HTML 的資料
透過 ref 讓資料做綁定，ref 需要透過.value 存取資料
ref & reactive
選擇 ref 還是 reactive
在大多數情況下兩者可以互相替換使用，主要取決於個人喜好或者團隊習慣，根據具體情況去決定要使用哪個就好
1
2
| <h1>{{msg}}</h1>
<h2>{{message.text}}</h2>
|
1
2
3
4
5
6
7
8
9
10
11
| const { ref, reactive } = Vue;
const App = {
setup() {
const msg = ref("hello");
const message = reactive({ text: "hello" });
return {
msg,
message,
};
},
};
|
ref()
可以接受任何型態的資料，但是不會對物件或陣列內部的屬性變動做監聽，需要透過.value存取資料。
reactive()
只能接受物件或陣列，可以做深層的監聽，以及訪問資料不需要.value
v-model 資料雙向綁定
1
2
3
4
| <h1>{{msg}}</h1>
<input type="text" v-model="msg" />
<h2>{{message.text}}</h2>
<input type="text" v-model="message.text" />
|
1
2
3
4
5
6
7
8
9
10
11
| const { ref, reactive } = Vue;
const App = {
setup() {
const msg = ref("hello");
const message = reactive({ text: "hello" });
return {
msg,
message,
};
},
};
|
v-on:Event 事件綁定
1
2
3
| <h1>{{count}}</h1>
<button @click="addCount">Add</button>
<button @click="reduceCount">Reduce</button>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| const { ref } = Vue;
const App = {
setup() {
const count = ref(0);
const addCount = () => {
count.value++;
};
const reduceCount = () => {
count.value--;
};
return {
count,
addCount,
reduceCount,
};
},
};
|
readonly
readonly 就是讓你的 ref 或是 reactive 的資料只可以讀取不可以被修改
非常適合用在參數傳遞的時候避免不小心被修改資料
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| const { ref, readonly } = Vue;
const App = {
setup() {
const count = ref(0);
const copyCount = readonly(count);
const addCount = () => {
copyCount.value++;
};
const reduceCount = () => {
copyCount.value--;
};
return {
count,
addCount,
reduceCount,
};
},
};
|
點擊按鈕時 copyCount 無法被修改
v-for
1
2
3
| <ul>
<li v-for="(item, idx) in dogs" :key="item.name">{{idx+1}}-{{item.name}}</li>
</ul>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| const { reactive } = Vue;
const App = {
setup() {
const dogs = reactive([
{ name: "蝴蝶犬" },
{ name: "柴犬" },
{ name: "博美犬" },
{ name: "哈士奇" },
{ name: "法國鬥牛犬" },
]);
return {
dogs,
};
},
};
|
KEY
為了不要重複渲染，v-for 必須加上 key，修改資料時就不會全部的 DOM 一起修改
使用 v-for 時一定要給 key
使用 v-for 時不要拿索引當 key
使用唯一的值當 key 的值
v-if 與 v-show
顯示、隱藏 DOM 元素
1
2
3
| <div v-if="isShow">{{text}}</div>
<div v-show="isShow">{{text}}</div>
<button @click="handDomShow">show text</button>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| const { ref } = Vue;
const App = {
setup() {
const isShow = ref(false);
const text = ref("hello VUE!");
const handDomShow = () => {
isShow.value = !isShow.value;
};
return {
isShow,
text,
handDomShow,
};
},
};
|
v-if
直接將 DOM 從頁面上移除跟加入
v-if 可以減少渲染速度的效能
可用於權限或一開始就不該出現的區塊
如果是 DOM 元素切換的功能，消耗的資源比較高，建議用 v-show
v-show
透過 CSS 的 display : none; 跟 display : block; 來顯示關閉
v-show 可以提升切換速度效能
適合做 tab 切換的功能
v-bind:attribute 屬性綁定
1
2
3
4
5
6
| .red {
color: red;
}
.blue {
color: blue;
}
|
1
2
3
4
5
6
7
8
9
| <ul>
<li
v-for="(list, idx) in listArr"
v-bind:class="list.status"
v-bind:key="list.name"
>
{{idx + 1}}. {{list.name}}
</li>
</ul>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| const { reactive } = Vue;
const App = {
setup() {
const listArr = reactive([
{ name: "蝴蝶犬", status: "red" },
{ name: "柴犬", status: "blue" },
{ name: "博美犬", status: "red" },
{ name: "哈士奇", status: "red" },
{ name: "法國鬥牛犬", status: "blue" },
]);
return {
listArr,
};
},
};
|
如要綁定兩個以上的 class 可寫成
1
| :class="['box', {open: isOpen}]"
|
以上是我的學習筆記，希望也有幫助到你哦 😀
🚀實體工作坊分享
最近時賦學苑開了實體體驗課，即使你對程式碼沒有概念也能上手！Lala 會帶你一起做出一個個人品牌形象網站，帶你快速了解前端的開發流程，快跟我們一起玩轉 Web 吧！
🚀線上課程分享
線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。
Hahow 有各式各樣類型的課程，而且是無限次數觀看，對學生或上班族而言，不用擔心被時間綁住
如果你是初學者，非常推薦六角學院哦！
剛開始轉職也是上了六角的課，非常的淺顯易懂，最重要的是，隨時還有線上的助教幫你解決問題！
Udemy 裡的課程非常的多，品質普遍不錯，且價格都滿實惠的，CP值很高！
也是很多工程師推薦的線上課程網站。
