.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
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類