碼上快樂

相關內容    簡體    繁體

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

本文轉載自   查看原文   2018-11-28 22:04   6445    asp.net core/ .NET Core實戰項目/ CMS系統

寫在前面

上面文章我給大家介紹了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. 直接下載並用

    {{ message }}

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

    然后在瀏覽器中打開這個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的入門篇就結束了。接下來我們就將進入設計篇的內容了！大家准備好了嘛？


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 .NET Core實戰項目之CMS 第二章 入門篇-快速入門ASP.NET Core看這篇就夠了 .NET Core實戰項目之CMS 第四章 入門篇-Git的快速入門及實戰演練 .NET Core實戰項目之CMS 第五章 入門篇-Dapper的快速入門看這篇就夠了 .NET Core實戰項目之CMS 第一章 入門篇-開篇及總體規划 明解C語言 入門篇 第六章答案 【.NET Core項目實戰-統一認證平台】第六章 網關篇-自定義客戶端授權 .NET Core實戰項目之CMS 第三章 入門篇-源碼解析配置文件及依賴注入 【無私分享：ASP.NET CORE 項目實戰（第六章）】讀取配置文件（一） appsettings.json .NET Core IdentityServer4實戰 第六章-Consent授權頁 Python編程：從入門到實踐——【作業】——第六章（字典）
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM