XOOPS輕鬆架

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

2. 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>
   

完整範例