91精品aⅴ一区二区,九九99综合视频

寫在前面

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

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

Vue是什么

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

Vue.js的特點

簡潔： HTML 模板 + JSON 數(shù)據(jù)，再創(chuàng)建一個 Vue 實例，就這么簡單。
數(shù)據(jù)驅(qū)動：自動追蹤依賴的模板表達(dá)式和計算屬性。
組件化：用解耦、可復(fù)用的組件來構(gòu)造界面。
輕量：生產(chǎn)版本刪除了警告后共30.90KB min+gzip，無依賴（2.5.17版本）。
快速：精確有效的異步批量 DOM 更新。
模塊友好：通過 NPM 或 Bower 安裝，無縫融入你的工作流。

如何學(xué)習(xí)Vue.js

這里介紹幾個比較好的Vue學(xué)習(xí)的網(wǎng)站，都是免費的！大伙可以跟著系統(tǒng)的學(xué)習(xí)下。畢竟我最開始也是看了下面的官方教程以及菜鳥教程里面的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 的瀏覽器。目前最新穩(wěn)定版本是：2.5.17。目前就兩種我認(rèn)為常用的安裝方式羅列如下：至于NPM以及CLI的方式我就不推薦了，專業(yè)的前端玩的東西我感覺高大上，懶得折騰。

直接下載并用 <script> 標(biāo)簽引入（像平時引入js一樣引入即可），Vue 會被注冊為一個全局變量。

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

開發(fā)版本：https://vuejs.org/js/vue.js 包含完整的警告和調(diào)試模式

生產(chǎn)版本：https://vuejs.org/js/vue.min.js 刪除了警告，30.90KB min+gzip
CDN 方式直接引入csn地址即可

官方推薦鏈接到一個你可以手動更新的指定版本號：
```
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
```
你可以在 cdn.jsdelivr.net/npm/vue 瀏覽 NPM 包的源代碼。

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

請確認(rèn)了解不同構(gòu)建版本并在你發(fā)布的站點中使用生產(chǎn)環(huán)境版本，把 vue.js 換成 vue.min.js。這是一個更小的構(gòu)建，可以帶來比開發(fā)環(huán)境下更快的速度體驗。

Vue.js輸出一個Hello World

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

新建一個html文件，不要跟我說你不知道怎么創(chuàng)建一個html文件，不然你會被“達(dá)絲蒂”。這里我們用Visual Studio Code來進(jìn)行代碼的編寫。

1543406875477
打開上面新建的helloworld.html文件，并輸入如下的內(nèi)容：
```
<!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>
</div>

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

</body>
</html>


然后在瀏覽器中打開這個html文件看到如下的結(jié)果：![1543407902072](http://upload-images.jianshu.io/upload_images/2767091-8e889e8731e6f6e8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

我們已經(jīng)成功創(chuàng)建了第一個 Vue 應(yīng)用！看起來這跟渲染一個字符串模板非常類似，但是 Vue 在背后做了大量工作?，F(xiàn)在數(shù)據(jù)和 DOM 已經(jīng)被建立了關(guān)聯(lián)，所有東西都是**響應(yīng)式的**。我們要怎么確認(rèn)呢？打開你的瀏覽器的 JavaScript 控制臺 (就在這個頁面打開)，并修改 `app.__vue__.message` 的值并按回車，你將看到上例相應(yīng)地更新。

![1543408250085](http://upload-images.jianshu.io/upload_images/2767091-2facf5c983cc6160.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

### Vue.js常用的指令

Vue.js的指令是以v-開頭的，它們作用于HTML元素，指令提供了一些特殊的特性，將指令綁定在元素上時，指令會為綁定的目標(biāo)元素添加一些特殊的行為，我們可以將指令看作特殊的HTML特性（attribute）。
接下來我們就給大家分別來介紹一下Vue中比較常用的指令
#### v-mode
在Vue.js中可以使用v-model指令，它能輕松實現(xiàn)表單輸入和應(yīng)用狀態(tài)之間的雙向綁定。
為了演示這個效果，我們新建一個sample02.html的文件，然后輸入如下的代碼：

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
<!-- 開發(fā)環(huán)境版本，包含了有幫助的命令行警告 -->
<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>

可以看到文本框的內(nèi)容發(fā)生變化后，對應(yīng)的文本框上面的文本也發(fā)生了變化，這里沒有截成動態(tài)圖，大家可以自行測試。

1543408771232

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

條件判斷指令,大家看著是不是覺得很熟悉呢，簡直就跟c#中的if, else if,else 一毛一樣?。ó?dāng)然又有些區(qū)別，不過用法一樣）下面我們給出要一個實例代碼來進(jìn)行演示
，這里我們新建要給sample03.html的文件，然后輸入如下的代碼：

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>Hello World</title>
  <!-- 開發(fā)環(huán)境版本，包含了有幫助的命令行警告 -->
  <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">
        優(yōu)秀
      </div>
      <div v-else-if="score>=80&&score<90">
        優(yōu)
      </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>

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

1543410028342

當(dāng)你在輸入框中改變值的時候，對應(yīng)的文本框上面及下面的值都會發(fā)生變化，大伙可以自己試一下。

1543410084702

v-show

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

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

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

然后在瀏覽器中看到如下的結(jié)果

1543410497835

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

1543410567542

v-for

循環(huán)使用 v-for 指令。
v-for 指令需要以 site in sites 形式的特殊語法， sites 是源數(shù)據(jù)數(shù)組并且 site 是數(shù)組元素迭代的別名。
v-for 可以綁定數(shù)據(jù)到數(shù)組來渲染一個列表
下面我們創(chuàng)建一個sample05.html的文件，然后輸入如下的代碼進(jìn)行測試：

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>Hello World</title>
  <!-- 開發(fā)環(huán)境版本，包含了有幫助的命令行警告 -->
  <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: '必應(yīng)' },
                    { name: '百度' },
                    { name: '群里問別人'}
                ]
            }
        })
    </script>
  </body>
</html>

然后再瀏覽器中打開，看到如下的結(jié)果：

1543411227704

v-bind

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

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>Hello World</title>
  <!-- 開發(fā)環(huán)境版本，包含了有幫助的命令行警告 -->
  <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>

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

1543411831503

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

v-on

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

下面我們簡單的進(jìn)行下代碼的演示，老規(guī)矩，新建一個sample07.html文件，然后輸入如下的代碼：

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>Hello World</title>
  <!-- 開發(fā)環(huán)境版本，包含了有幫助的命令行警告 -->
  <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">您點擊了{(lán){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>

總結(jié)

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

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

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

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

寫在前面

Vue是什么

Vue.js的特點

如何學(xué)習(xí)Vue.js

快速開始運行Vue.js

Vue的安裝

Vue.js輸出一個Hello World

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

v-show

v-for

v-bind

v-on

總結(jié)

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

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

寫在前面

Vue是什么

Vue.js的特點

如何學(xué)習(xí)Vue.js

快速開始運行Vue.js

Vue的安裝

Vue.js輸出一個Hello World

v-if ，v-else,v-else-if

v-show

v-for

v-bind

v-on

總結(jié)

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

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

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