vue.js 的起手式

1	<script src="https://unpkg.com/vue@next"></script>

<div id="app">
  <h1>{{msg}}</h1>
  <button @click="handAddInt">Add</button>
</div>

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>

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 資料雙向綁定

<h1>{{msg}}</h1>
<input type="text" v-model="msg" />
<h2>{{message.text}}</h2>
<input type="text" v-model="message.text" />

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>

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 的資料只可以讀取不可以被修改
非常適合用在參數傳遞的時候避免不小心被修改資料

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>

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>

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 屬性綁定

.red {
  color: red;
}
.blue {
  color: blue;
}

<ul>
  <li
    v-for="(list, idx) in listArr"
    v-bind:class="list.status"
    v-bind:key="list.name"
  >
    {{idx + 1}}. {{list.name}}
  </li>
</ul>

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}]"

以上是我的學習筆記，希望也有幫助到你哦 😀

🚀線上課程分享

線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。

Hahow

Hahow 有各式各樣類型的課程，而且是無限次數觀看，對學生或上班族而言，不用擔心被時間綁住

六角學院

如果你是初學者，非常推薦六角學院哦！
剛開始轉職也是上了六角的課，非常的淺顯易懂，最重要的是，隨時還有線上的助教幫你解決問題！

Udemy

Udemy 裡的課程非常的多，品質普遍不錯，且價格都滿實惠的，CP值很高！
也是很多工程師推薦的線上課程網站。

Lala的前端大補帖

Vue3基本操作-1