v-on 事件綁定及readonly 唯讀

:::

2-1 響應式資料 ref、reactive及 v-model 雙向綁定

2-3 v-for 迴圈、v-bind 屬性綁定、v-show及v-if、computed next

Vue.js 3.0 筆記

2-2 v-on 事件綁定及readonly 唯讀

可以利用 v-on:事件="函式" 來進行事件綁定，簡寫：@事件="函式"

readonly 讓該變數值無法做任何調整

<div id="app">
  <h1>一般：{{Num}}</h1>
  <button v-on:click="addFn">新增</button>
  <button v-on:click="removeFn">減少</button>
  <h1>唯讀：{{roNum}}</h1>
  <button @click="addRoFn">新增</button>
  <button @click="removeRoFn">減少</button>
</div>
<script src="./js/vue.js"></script>
<script>
  const { ref, readonly } = Vue;
  const App = {
    setup() {
      const Num = ref(0);
      const roNum = readonly(Num);
      const addFn = () => {
        Num.value++;
      };
      const removeFn = () => {
        Num.value--;
      };
      const addRoFn = () => {
        roNum.value++;
      };
      const removeRoFn = () => {
        roNum.value--;
      };
      return {
        Num,
        roNum,
        addFn,
        removeFn,
        addRoFn,
        removeRoFn,
      };
    },
  };
  Vue.createApp(App).mount("#app");
</script>