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: 3,533



意見

# 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,原來如此,另外我也發現第一項套件的版本比較新,是較好的選擇,已修改本文,謝謝你的補充。

你的看法呢?

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

5 + 3 =

搜尋

Go

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

Tags 分類檢視
關於作者

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

文章典藏
其他功能

這個部落格


Syndication