2

有讀者提到：常聽人說「寫過 MVVM 網頁就回不去了」，想試試卻不知如何入門。

看來，不少全端同學仍依賴 JavaScript / jQuery 掛事件串元素的傳統做法寫網頁，沒體驗過 MVVM 的美麗新世界。但當今前端框架(VAR, Vue.js、Angular、React.js)主流做法多需安裝 Node.js、npm 載程式庫、把網頁拆解成元件，經過編譯發佈才產生網頁，與傳統 HTML 網頁掛 .js 搞定的單純做法天差地別，陡峭的學習曲線讓人卻步。尤其是寫網頁只是全端攻城獅的眾多任務之一，需不需要投入大量心力重學一套全新的前端開發方法(然後幾年後可能整套換掉)，會是個好問題。

如果你想維持在 HTML 載入 .js/.css，直接在 VSCode 寫 JavaScript 寫完網頁的簡單做法，又想用主流前端框架實現美妙的 MVVM，那 Vue.js 是你唯一的選擇。延伸閱讀：Vue 3.0 正式版 - 輕前端視角

Vue.js 是一個漸進式框架，允許你像 jQuery 一樣 <script src="https://unpkg.com/vue@3"></script> 載入程式庫就開始使用，不用安裝任何開發軟體或套件，用記事本也能寫網頁。(當然，正常人會用 VSCode 啦)

以下是一個簡單的 Vue.js MVVM 範例：線上展示

簡單的新增修改刪除資料維護，輸入欄位的變更即時反映在資料顯示，大家可以想想若用 jQuery 寫要怎麼實現？猜猜用 MVVM 做出上面的功能要寫幾行程式？

答案是 JavaScript 連 HTML/CSS，不用 100 行。

<!DOCTYPE html>
<html>
<head>
    <title>Vue.js MVVM Demo</title>
    <script src="https://unpkg.com/vue@3"></script>
    <style>
        html,body { font-size: 10pt; }
        .op { 
            > * { 
                margin: 2px; height: 1.6em; box-sizing: border-box; vertical-align: middle;
            } 
        }
        table { 
            font-size: 9pt;
            width: 280px; border-collapse: collapse; margin-top: 12px;
            td,th { border: 1px solid gray; padding: 2px; text-align: center; }
            td:first-child { text-align: left; }
            th { background-color: #f0f0f0; }
            a { cursor: pointer; text-decoration: underline; color: blue; margin-right: 3px; }
        }
        pre { background-color: #eee; font-size: 9pt; margin-top: 12px; padding: 12px; width: 260px; }
    </style>
</head>
<body>
    <div id="app">
        <div class="op">
            <input v-model="editJob.job" placeholder="待辦事項">
            <select v-model="editJob.catg">
                <option v-for="catgOpt in catgOptions" :value="catgOpt">{{catgOpt}}</option>
            </select>
            <button v-show="editJobIdx == -1" :disabled="!editJob.job" @click="addJob">新增</button>
            <button v-show="editJobIdx > -1" :disabled="!editJob.job" @click="updateJob">確定</button>
        </div>
        <table>
            <tr>
                <th width="120">待辦事項</th>
                <th width="50">類別</th>
                <th width="60">操作</th>
            </tr>
            <tr v-for="(job, index) in jobs">
                <td>{{job.job}}</td>
                <td>{{job.catg}}</td>
                <td>
                    <a @click="editJob = job; editJobIdx = index">修改</a>
                    <a @click="delJob(index)">刪除</a>
                </td>
            </tr>
        </table>
        <pre>{{jobs}}</pre>
    </div>
    <script>
        class Job {
            constructor(job, catg) {
                this.job = job;
                this.catg = catg;
            }
        }
        const app = Vue.createApp({
            data() {
                return {
                    editJob: new Job('', '工作'),
                    editJobIdx: -1,
                    catgOptions: ['工作', '家庭', '休閒'],
                    jobs: [
                      new Job('X專案前端程式', '工作'),
                      new Job('換排風扇', '家庭'),
                    ]
                }
            },
            methods: {
                reset() {
                    this.editJob = new Job('', '工作');
                    this.editJobIdx = -1;
                },
                addJob() {
                    this.jobs.push(this.editJob);
                    this.reset();
                },
                updateJob() {
                    this.reset();
                },
                delJob(index) {
                    this.jobs.splice(index, 1);
                }
            }
        });
        app.mount('#app');
    </script>
</body>
</html>

如果你只會用 jQuery 寫網頁，上面的展示有讓你心動想試試 MVVM 但不知怎麼開始，以下有兩個輕前端 Vue.js 入門教學可以參考：

祝還在掛事件串欄位的同學們早日體驗 MVVM 的美妙開發方式，加入回不去的行列。

This article introduces how to use a script to load vue.js to write an MVVM webpage, enjoying a simple and easy development experience.


Comments

# by Chia CY

可以用quasar.dev。裡面的UMD選項

# by 小黑

請教，一些表格資料的呈現與應用，是否有vue 的套件？ 支援，分頁、欄位排序及資料的新刪修

Post a comment