.NET Core實戰項目之CMS 第六章 入門篇-Vue的快速入門及其使用

来源:https://www.cnblogs.com/yilezhu/archive/2018/11/28/10035275.html
-Advertisement-
Play Games

寫在前面 上面文章我給大家介紹了Dapper這個ORM框架的簡單使用，大伙會用了嘛！本來今天這篇文章是要講Vue的快速入門的，原因是想在後面的文章中使用Vue進行這個CMS系統的後臺管理界面的實現。但是奈何Vue實現的SPA有一定的門檻，不太適合新手朋友，所以為了照顧大多數人，我準備還是採用asp. ...


寫在前面

上面文章我給大家介紹了Dapper這個ORM框架的簡單使用，大伙會用了嘛！本來今天這篇文章是要講Vue的快速入門的，原因是想在後面的文章中使用Vue進行這個CMS系統的後臺管理界面的實現。但是奈何Vue實現的SPA有一定的門檻，不太適合新手朋友，所以為了照顧大多數人，我準備還是採用asp.net core mvc+html+js+css+layui這個傳統的技術棧來實現。但是，不管怎麼說我還是會把Vue的基本使用給大伙介紹一下！
當然，如果這篇文章我也是抱著學習的態度跟大家一起來瞭解Vue的，如果你想通過這篇文章就能熟練的使用Vue那你就太天真了！目前，作為後端的我對Vue的掌握也僅僅停留在入門階段。後期再帶著大家一起把這個項目升級到Vue吧！

本篇文章已經收納入《.NET Core實戰項目之CMS 第一章 入門篇-開篇及總體規劃》另附上.NET Core實戰項目交流群：637326624 有興趣的朋友可以共同交流技術經驗。
作者：依樂祝
原文地址：https://www.cnblogs.com/yilezhu/p/10035275.html

Vue是什麼

Vue (讀音 /vjuː/，類似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關註視圖層，不僅易於上手，還便於與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。
說白了Vue.js就是當下很火的一個JavaScript MVVM庫（前端庫）。相比於Angular.js，Vue.js提供了更加簡潔、更易於理解的API，使得我們能夠快速地上手並使用Vue.js。
如果你之前已經習慣了用jQuery操作DOM，學習Vue.js時請先拋開手動操作DOM的思維，因為Vue.js是數據驅動的，你無需手動操作DOM。它通過一些特殊的HTML語法，將DOM和數據綁定起來。一旦你創建了綁定，DOM將和數據保持同步，每當變更了數據，DOM也會相應地更新。
當然了，在使用Vue.js時，你也可以結合其他庫一起使用，比如jQuery。

Vue.js的特點

  • 簡潔： HTML 模板 + JSON 數據，再創建一個 Vue 實例，就這麼簡單。

  • 數據驅動： 自動追蹤依賴的模板表達式和計算屬性。

  • 組件化： 用解耦、可復用的組件來構造界面。

  • 輕量： 生產版本刪除了警告後共30.90KB min+gzip，無依賴（2.5.17版本）。

  • 快速： 精確有效的非同步批量 DOM 更新。

  • 模塊友好： 通過 NPM 或 Bower 安裝，無縫融入你的工作流。

如何學習Vue.js

這裡介紹幾個比較好的Vue學習的網站，都是免費的！大伙可以跟著系統的學習下。畢竟我最開始也是看了下麵的官方教程以及菜鳥教程裡面的Vue教程的。
Vue的官方中文教程：https://cn.vuejs.org/v2/guide/index.html
Vue.js菜鳥教程：http://www.runoob.com/vue2/vue-tutorial.html
GitHub地址：https://github.com/vuejs/vue
Releases地址：https://github.com/vuejs/vue/releases

快速開始運行Vue.js

Vue的安裝

這裡需要註意的是Vue 不支持 IE8 及以下版本，因為 Vue 使用了 IE8 無法模擬的 ECMAScript 5 特性。但它支持所有相容 ECMAScript 5 的瀏覽器。目前最新穩定版本是：2.5.17。目前就兩種我認為常用的安裝方式羅列如下：至於NPM以及CLI的方式我就不推薦了，專業的前端玩的東西我感覺高大上，懶得折騰。

  1. 直接下載並用 標簽引入（像平時引入js一樣引入即可），Vue 會被註冊為一個全局變數。

    在開發環境下不要使用壓縮版本，不然你就失去了所有常見錯誤相關的警告!

    開發版本：https://vuejs.org/js/vue.js 包含完整的警告和調試模式

    生產版本：https://vuejs.org/js/vue.min.js 刪除了警告，30.90KB min+gzip

  2. CDN 方式直接引入csn地址即可

    官方推薦鏈接到一個你可以手動更新的指定版本號：

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

    你可以在 cdn.jsdelivr.net/npm/vue 瀏覽 NPM 包的源代碼。

    Vue 也可以在 unpkg 和 cdnjs 上獲取 (cdnjs 的版本更新可能略滯後)。

    請確認瞭解不同構建版本併在你發佈的站點中使用生產環境版本，把 vue.js 換成 vue.min.js。這是一個更小的構建，可以帶來比開發環境下更快的速度體驗。

Vue.js輸出一個Hello World

程式員界萬年不變的定理，開始一門語言就從Hello World開始。下麵就讓我們快速開始用Vue.js輸出一個“Hello World!”吧

  1. 新建一個html文件，不要跟我說你不知道怎麼創建一個html文件，不然你會被“達絲蒂”。這裡我們用Visual Studio Code來進行代碼的編寫。

    1543406875477

  2. 打開上面新建的helloworld.html文件，並輸入如下的內容：

    然後在瀏覽器中打開這個html文件看到如下的結果：1543407902072

    我們已經成功創建了第一個 Vue 應用！看起來這跟渲染一個字元串模板非常類似，但是 Vue 在背後做了大量工作。現在數據和 DOM 已經被建立了關聯，所有東西都是響應式的。我們要怎麼確認呢？打開你的瀏覽器的 JavaScript 控制台 (就在這個頁面打開)，並修改 app.__vue__.message 的值並按回車，你將看到上例相應地更新。

    1543408250085

Vue.js常用的指令

Vue.js的指令是以v-開頭的，它們作用於HTML元素，指令提供了一些特殊的特性，將指令綁定在元素上時，指令會為綁定的目標元素添加一些特殊的行為，我們可以將指令看作特殊的HTML特性（attribute）。
接下來我們就給大家分別來介紹一下Vue中比較常用的指令

v-mode

在Vue.js中可以使用v-model指令，它能輕鬆實現表單輸入和應用狀態之間的雙向綁定。
為了演示這個效果，我們新建一個sample02.html的文件，然後輸入如下的代碼：

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>Hello World</title>
  <!-- 開發環境版本，包含了有幫助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <p>{{ message }}</p>
      <input v-model="message">
    </div>

    <script>
      new Vue({
        el: '#app',
        data: {
          message: 'Hello World!'
        }
      })
    </script>
  </body>
</html>

可以看到文本框的內容發生變化後，對應的文本框上面的文本也發生了變化，這裡沒有截成動態圖，大家可以自行測試。
1543408771232

v-if ，v-else,v-else-if

條件判斷指令,大家看著是不是覺得很熟悉呢，簡直就跟c#中的if, else if,else 一毛一樣啊（當然又有些區別，不過用法一樣）下麵我們給出要一個實例代碼來進行演示
，這裡我們新建要給sample03.html的文件，然後輸入如下的代碼：

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>Hello World</title>
  <!-- 開發環境版本，包含了有幫助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <p>{{ score }}</p>
      <input v-model="score">
      <div v-if="score>=90">
        優秀
      </div>
      <div v-else-if="score>=80&&score<90">
        優
      </div>
      <div v-else-if="score>=70&&score<80">
        良
      </div>
      <div v-else-if="score>=60&&score<70">
        及格
      </div>
      <div v-else>
        不及格
      </div>
    </div>

    <script>
      new Vue({
        el: '#app',
        data: {
            score: 100
        }
      })
    </script>
  </body>
</html>

在瀏覽器中打開看到如下的界面，因為初始值我們設置的是100

1543410028342

當你在輸入框中改變值的時候，對應的文本框上面及下麵的值都會發生變化，大伙可以自己試一下。1543410084702

v-show

v-show也是條件渲染指令，和v-if指令不同的是，使用v-show指令的元素始終會被渲染到HTML，它只是簡單地為元素設置CSS的style屬性。
下麵我們創建一個sample04.html的文件，然後輸入如下的代碼進行測試：

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>Hello World</title>
  <!-- 開發環境版本，包含了有幫助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <p v-show="score<60">成績為：{{ score }}不及格了！</p>
      <p v-show="score>=60">成績為：{{ score }}及格了！</p>
      <input v-model="score">
    </div>

    <script>
      new Vue({
        el: '#app',
        data: {
          score: 50
        }
      })
    </script>
  </body>
</html>

然後在瀏覽器中看到如下的結果

1543410497835

這時候我們查看一下源文件，可以看到下麵的那個多了一些style="display:none" 的樣式。但是html代碼還是被渲染出來了

1543410567542

v-for

迴圈使用 v-for 指令。
v-for 指令需要以 site in sites 形式的特殊語法， sites 是源數據數組並且 site 是數組元素迭代的別名。
v-for 可以綁定數據到數組來渲染一個列表
下麵我們創建一個sample05.html的文件，然後輸入如下的代碼進行測試：

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>Hello World</title>
  <!-- 開發環境版本，包含了有幫助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
        <h2>解決問題途徑</h2>
        <ol>
            <li v-for="method in methods">
                {{ method.name }}
            </li>
        </ol>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                methods: [
                    { name: '谷歌' },
                    { name: '必應' },
                    { name: '百度' },
                    { name: '群里問別人'}
                ]
            }
        })
    </script>
  </body>
</html>

然後再瀏覽器中打開，看到如下的結果：

1543411227704

v-bind

v-bind指令可以在其名稱後面帶一個參數，中間放一個冒號隔開，這個參數通常是HTML元素的特性（attribute）,如：<div v-bind:class="{ active: isActive }"></div>
我們新建一個sample06.html的文件，然後輸入如下的代碼

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>Hello World</title>
  <!-- 開發環境版本，包含了有幫助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <style>
        .active {
            font-size: 20px;
            color: red;
        }
        </style>
  </head>
  <body>
    <div id="app">
      <p v-bind:class="{active:isActive}">{{ message }}</p>
      <input v-model="message">
    </div>

    <script>
      new Vue({
        el: '#app',
        data: {
          message: 'Hello World!',
          isActive: true
        }
      })
    </script>
  </body>
</html>

再瀏覽器中打開可以看到如下的結果

1543411831503

v-bind指令可以縮寫為一個冒號 ，<div :class="{ active: isActive }"></div>

v-on

v-on指令用於監聽DOM事件，它的用語法和v-bind是類似的，例如監聽button元素的點擊事件：
<button v-on:click="doSomething">

下麵我們簡單的進行下代碼的演示，老規矩，新建一個sample07.html文件，然後輸入如下的代碼：

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>Hello World</title>
  <!-- 開發環境版本，包含了有幫助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <style>
        .active {
            font-size: 20px;
            color: red;
        }
    </style>
  </head>
  <body>
    <div id="app">
      <p class="active">您點擊了{{counter}}次！</p>
      <button v-on:click="addCounter">快點我看效果吧！</button>
    </div>

    <script>
      new Vue({
        el: '#app',
        data: {
            counter:0
        },
        methods:{
            addCounter:function(){
                this.counter++;
            }
        }
      })
    </script>
  </body>
</html>

然後在瀏覽器中打開，並點擊按鈕按下效果吧

1543412504766

註：v-on指令可以縮寫為@符號，如：<button @click="addCounter">快點我看效果吧！</button>

總結

今天帶著大家學習了一下Vue.js這個前端框架。首先通過一個Hello World的實例開始，然後給大家介紹了Vue.js中常用的一些指令，並且每個指令都給出了一個實例代碼，大伙可以自己跑一下看下效果。當然這也僅僅是Vue的基礎，像涉及比較深的組件，路由，動畫等等內容沒有過多的講解。主要還是讓大家快速的瞭解一下Vue。同時為了照顧更多的朋友。有興趣的朋友可以加下我們的.NET Core實戰項目交流群637326624，跟大伙進行交流。好了，到這裡.NET Core實戰項目之CMS的入門篇就結束了。接下來我們就將進入設計篇的內容了！大家準備好了嘛？


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Python常用Tips
    pip安裝使用 i參數指定源 指定豆瓣源，快如閃電：pip install i http://pypi.douban.com/simple/ 使用sys.modules查看導入包的路徑 sys.modules是一個全局字典，可以通過它來瞭解當前環境載入了什麼包，包的路徑 ...
  • Kibana安裝及使用說明
    Kibana安裝及使用說明 Kibana是一個針對Elasticsearch的開源分析及可視化平臺，用來搜索、查看交互存儲在Elasticsearch索引中的數據。 官方地址：https://www.elastic.co/cn/products/kibana 一、Kibana安裝 1.環境準備 Ki ...
  • 進程一
    一、什麼是進程 進程（Process）是電腦中的程式關於某數據集合上的一次運行活動，是系統進行資源分配和調度的基本單位，是操作系統結構的基礎。在早期面向進程設計的電腦結構中，進程是程式的基本執行實體；在當代面向線程設計的電腦結構中，進程是線程的容器。程式是指令、數據及其組織形式的描述，進程是程 ...
  • 關於leal和mov
    最近在學習leal的時候遇到了一點非常迷惑的地方，就是leal是用來取有效地址的，但是為什麼它也可以實現賦值呢？偶然發現一個博客講的不錯，遂自己記錄一下 一個這樣的例子 如果寄存器edx裡面存的值為x，我們知道這句結束之後edx裡面的值會被置為5x+7，但是看起來為什麼是值而不是地址呢？ 實際上這之 ...
  • Core官方DI解析(4)--CallSiteRuntimeResolver
    ​ 類型是一個創建或獲取服務實例的類型,這個類型繼承了 這個類型,也是使用了訪問者模式,下麵一一來解析此類 ServiceProviderEngineScope 在解析 之前先看一下 類型,這個類型就可以是一個容器類型,最後實例化的服務對象就緩存在此類之中, 從下麵代碼中可以看出此類實現了 和`IS ...
  • WCF入門教程
    這一系列文章的內容是從MSDN中COPY過來的，講述的是最簡單的WCF程式示例：如何在控制台應用程式實現和承載WCF服務，以及如何創建、配置和使用WCF客戶端。 文章主體可分為兩部分，分別介紹伺服器端和客戶端的編程實現。細分的話，可以分為六項任務。 伺服器端 定義WCF服務協定（任務一） 這是創建基 ...
  • 【ABP框架系列學習】啟動配置(5)
    ABP提供了在啟動時配置模塊的基礎設施和模型。 1.配置ABP 配置ABP是在模塊的PreInitialize方法中完成的，例如： public class SimpleTaskSystemModule : AbpModule { public override void PreInitialize ...
  • ASP.NET Core MVC 授權的擴展：自定義 Authorize Attribute 和 IApplicationModelProvide
    ASP.NET Core MVC 提供了基於角色( Role )、聲明( Chaim ) 和策略 ( Policy ) 等的授權方式。在實際應用中，可能採用部門（ Department , 本文采用用戶組 Group ）、職位 ( 可繼續沿用 Role )、許可權( Permission )的方式進行... ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類