如何將Vue 與ASP.NET Razor 一起使用 | vue js mvc
如何將Vue與ASP.NETRazor一起使用-HackMD#如何將Vue與ASP.NETRazor一起使用[![hackmd-github-sync-badge](https://hackmd.io/nsii7XJfTZiIi1ei2W1WwQ/badge)](https://hackmd.io/nsii7XJfTZiIi1ei2W1WwQ)##使用版本[email protected]@[email protected]@[email protected]##前言使用Vue2來取代jQuery的原因請參考[議jQuery](https://hackmd.io/@CloudyWing/ry2gQfVzj),本文章仍然使用Vue2,而非最新的Vue3,主因在於不捨棄ModelValidation前端驗證的情況下,目前尚未找到能取代VeeValidate2的套件。##架構大...
如何將 Vue 與 ASP.NET Razor 一起使用 - HackMD# 如何將 Vue 與 ASP.NET Razor 一起使用 [![hackmd-github-sync-badge](https://hackmd.io/nsii7XJfTZiIi1ei2W1WwQ/badge)](https://hackmd.io/nsii7XJfTZiIi1ei2W1WwQ) ## 使用版本 .NET 6 [email protected] [email protected] [email protected] [email protected] [email protected] ## 前言 使用 Vue 2 來取代 jQuery 的原因請參考 [議 jQuery](https://hackmd.io/@CloudyWing/ry2gQfVzj),本文章仍然使用 Vue 2,而非最新的 Vue 3,主因在於不捨棄 Model Validation 前端驗證的情況下,目前尚未找到能取代 VeeValidate 2 的套件。 ## 架構大致說明 Vue 的語法教學請參考官網 [Vue 2.x 教學](https://v2.vuejs.org/v2/guide/),這邊就不多提,僅針對架構上會用到的部分進行說明。 ### 如何建立 Vue 物件 建立 Vue 物件,大致分為兩個部分: 1. 需要有一個根結點的DOM做為 Vue Template,裡面包含需要進行畫面渲染的內容,並提供便於Vue可以使用 Selector 搜尋到此DOM的屬性,一般會設定 id,因為如果Vue找到多個 DOM 元素,也只有第一個會生效。 2. 在 JavaScript 裡建立 Vue object,傳入參數如下: * el:用來尋找根結點 DOM 的 slector 字串,例如:`#app`,尋找 ID 為 app 的 DOM。 * data:一般為 object 或回傳 object 的 function,object 的 property 必須包含會使用到的 key,例如:`{ records: [] }`或`function() { return { records: [] } }` * met...