Vue筆記2-在 ASP.NET 專案使用 Vue.js

相信大家看完官方教學已經躍躍欲試,就讓我們動手在 VS2017 ASP.NET 專案開個網頁試試 Vue.js。

好消息是 NuGet 上使用 vue 關鍵字就能找到 Vue.js 作者(Evan You, 尤雨溪)自己維護的 Vue 套件,Developer 版本包含較完整詳細的錯誤訊息,如果你沒有自虐傾向,建議裝 Vue.js.Developers.Version建議裝第一項 vue,它同時包含 vue.js (Developer 版) 與 vue.min.js (Production 版)。(註: 這兩天剛好發佈了 Vue 2.5 版,NuGet Package 版本近期應該會更新)

安裝 Package 後 /Scripts/vue.js 已就定位,新增一個 Lab2\First.html 加入幾行程式:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Vue Lab 2</title>
    
</head>
<body>
    <div id="main">
        <input type="text" v-model="firstName" />
        <input type="text" v-model="lastName" />
        <br />
        <span>{{ fullName }}</span>
    </div>
    
    <script src="../Scripts/vue.js"></script>
    <script>
        new Vue({
            el: "#main",
            data: {
                firstName: "Jeffrey",
                lastName: "Lee"
            },
            computed: {
                fullName: function () {
                    return this.firstName + " " + this.lastName;
                } 
            }
        });
    </script>
</body>
</html>

搞定收工,就這麼簡單!

不過如果要玩真的,我還是會選擇用 TypeScript 寫 Vue,初步試了發現若不依循 npm、webpack、VSC 這類主流前端開發模式,單純用 VS2017 + TypeScript + Vue 這條路不如想像中好走... 但我們先不要破壞寫出 Hello World 的喜悅氣氛,下回再談。

歡迎推文分享:
Published 17 October 2017 08:53 AM 由 Jeffrey
Filed under:
Views: 10,983



意見

# Johnny Li said on 20 October, 2017 01:28 AM

小弟我最近也在試 Vue.js + .Net MVC ,補充給黑大一下

其實透過 Nuget 裝 vue (Vue.js.Developers.Version 上方那個版本)就已經包含了 Development & Production 版本

根據 Vue 官方的說法:

Development 版本為 "~/scripts/vue.js"

Production 版本為 "~/scripts/vue.min.js"

# Jeffrey said on 20 October, 2017 05:37 AM

to Johnny Li,原來如此,另外我也發現第一項套件的版本比較新,是較好的選擇,已修改本文,謝謝你的補充。

# Saint said on 09 January, 2018 10:09 PM

黑大好,看見你開始用vue,我也想跟著你的步伐前進,但還有些許問題要向你請教

未來你是否打算以vue取代原來的cshtml?

小的對於vue它和 .net mvc 整合還有許多迷惑,還請你說說你心中的想法,讓小的參考

謝謝

# Jeffrey said on 10 January, 2018 05:26 AM

to Saint, 我覺得某些場合用 cshtml 直接產出內容會比走 SPA 全靠 AJAX 取回內容更有效率。而講到從伺服器端直接輸出 HTML  ,Vue 也有自己的解決方案

- Server-Side Rendering vuejs.org/.../ssr.html。很多純前端工程師偏好 SSR,以我自己的狀況,因為對 cshtml 已上手,開發起來會比另學 SSR 快,相關經驗也能繼續沿用不浪費,故打算走以 cshtml 產出初始內容,使用 Vue 處理後續互動的策略。以上想法供參。

# Saint said on 25 January, 2018 08:52 PM

再請教有關MVC View設計問題

看你回應對於cshtml熟悉,想請教歡念,我目前有一個view需要放上4個table,每個table我都在DB中把資料做好後回傳,來到view時再利用linq 取出各自的資料,可否分享目前在實作上對於view的資料是如何來處理?

我覺得自己的view很多code感覺肥大,又不知如何下手抽離,謝謝你的分享

# Jeffrey said on 25 January, 2018 11:01 PM

to Saint, 依MVC精神,從DB抽取必要資料應交給Model處理,我的習慣是定義好View裡顯示四個Table所需的ViewModel,在Model寫一個DataHelper或Repository直接傳回該View所需的資料ViewModel,LINQ及資料庫查詢都在其中完成。執行時Controller呼叫Repository取得ViewModel,交給CSHTML呈現。關於Repository與分層,推薦MVP Kevin的系列文章:kevintsengtw.blogspot.tw/.../aspnet-mvc-part1.html

# russell said on 02 March, 2018 09:52 AM

黑大你好

看到這篇.net 結合vue 有所感,請教現況許多新創在尋找全端工程師,後端的需求多是Node.js or Go

劣者看市場歷經而言,.net 的語言經歷應是較為豐富,在安全性、開發思維架構等都提供較為完善的開發體驗,但為何市場供需上會傾向於Node or Go?是因為免費嗎?是因為有google這些大公司的支持嗎?這會是根本的因由嗎?可否以您資深開發經驗和硬底子功夫分享你的見解,在此感謝看完這篇長留言,作為長期潛水的讀者謝謝你一直提供具價值的技術文

# Jeffrey said on 02 March, 2018 05:18 PM

to russell, 程式語言平台的優劣好壞見仁見智,有時甚至已屬於信仰的層次。依我個人看法,現今全端一詞常隱含「前端為主後端為輔」的概念,在技能比重及權重上前端優於後端。前端的語言選擇只有JavaScript,對已精熟JavaScript的前端工程式,寫後端不用多學一套語言是Node.js受到青睞的原因。至於選GO,跨平台及有Google當靠山應是原因。.NET在前端普遍度不高,多少與.NET過去不支援跨平台有關,前端工程師用Mac開發程式的比例高的嚇人,若後端用.NET需要跑VM。隨著Visual Studio Code被前端界開始流行與跨平台的.NET Core日趨成熟,我認為未來狀況會改觀,但以前端優先時,開發環境會以VSC為主流,而不是Visual Studio 2017。

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<October 2017>
SunMonTueWedThuFriSat
24252627282930
1234567
891011121314
15161718192021
22232425262728
2930311234
 
RSS
創用 CC 授權條款
【廣告】
twMVC

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication