1. VUE介紹

時間 2021-02-19

標籤 php css html 前端 vue java python jquery webpack c++ 欄目 PHP 简体版

原文原文鏈接

今天開始系統學習vue前端框架. 我是有前端基礎的, 剛工做那會, 哪裏分那麼清楚啊, 先後端我都得作, 因此, css, js, jquery, bootstrap都會點, 還系統學過ext, 哈哈,是否是都不知道是啥, 沒事, 都過期了. 如今開始, 學習最流行的Vue, 後端不會頁面, 說不過去呀.....php

言歸正傳, Ready, Go!css

一. 認識Vuejs

　　1. 爲何學習Vuejs

- 這幾年Vue.js成爲前端框架中最火的一個。愈來愈多的網站前端開始採用Vue.js開發。前端開發必備技能.
- Vuejs是開源世界華人的驕傲，其做者是我國尤雨溪。學習門檻低，成本低，可跨設備和多平臺開發Vue.js.
- 前端換工做, 面試必問的框架.

　　2. 簡單認識一下Vuejs

- 官網地址: https://cn.vuejs.org/
- 是一套用於構建用戶界面的漸進式框架, 什麼是漸進式框架呢?

　　　　　　　　漸進式框架是說, vue能夠做爲應用的一部分嵌入.html

　　　　　　　　好比:以前項目使用的是jquery開發的, 項目體量比較大, 如今知道vue使用上,效果上都更方便, 想要替換爲vue, 可問題是以前的頁面特別多,若是所有替換,工做量太大,那麼不要緊, vue容許你部分嵌入, 也就是說原來的頁面依然使用jquery, 然後開發的頁面使用Vuejs. vue能夠做爲一部分嵌入到項目中. 後面再逐漸替換.前端

- 若是是使用vue開發新項目, 那麼可使用vue的全家桶. 包括核心庫和和生態系統. 好比: Core+Vue Router + Vuex.

　　3. Vuejs的核心功能

- 解耦視圖和數據
- 可複用的組件
- 前端路由技術
- 狀態管理
- 虛擬DOM

二. Vuejs安裝方式

vuejs的安裝有三種方式, vue

　　1. CDN引入

CDN引入有兩個版本: 開發環境和生產環境. 也就是說, 不用本地安裝vue, 而是引入CDN中vue的包

<!-- 開發環境 -->
<script src= "https://cdn.jsdelivr.net/npm/vue/dist/vue.js></script>
<!-- 生產環境 -->
<script src= "https://cdn.jsdelivr.net/npm/vue/vue.js></script>


生產環境建議帶上版本號, 避免因版本問題產生異常
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

使用這個版本的優勢是: 速度快. 缺點也很明顯: 那就是每次打開都要去cdn上下載, 浪費時間. 學習不建議使用這種方式java

　　2. 下載和引入

- 這裏也有兩個版本, 開發環境和生產環境, 在CDN上下載很慢, 那麼咱們能夠將vue.js下載到本地, 引入到項目中
```
開發環境
https://vuejs.org/js/vue.js

生產環境
https://vuejs.org/js/vue.min.js
```
  開發時可使用開發包, 能夠看到源碼. 生產環境的包更穩定, 體積也會更小python

　　3. NPM安裝管理

- 在用 Vue 構建大型應用時推薦使用 NPM 安裝
- vuejs能夠和webpack和CLI等模塊配合使用
- 後續學習都是用這種方式操做的.

三. Vuejs初體驗

　　1. Hello Vuejs

　　　　咱們學習程序, 經典代碼helloworld. 這裏說一下開發工具, 開發工具建議使用vscode, 由於裏面有不少插件, 可是其餘也不是不能夠哈jquery

　　　　咱們在感覺vue的時候, 爲了簡單, 方便, 咱們使用第二種方式, 下載vue.js, 並引入到項目中. 接下來開始操做.webpack

- 第一步: 先搭建一個簡單的項目. 個人項目名稱就叫vue-study. 在裏面建立一個文件夾js, 項目結構以下:

第二步: 而後下載vue.js, 將其放入到js文件夾中
第三步: 寫一個html頁面, 並引入vue.js.
```
<html>
    <head>
        <title>第一個vue程序</title>
        <script src="../js/vue.js"></script>
    </head>
    <body>
        
    </body>
</html>
```
咱們看到, 第一步引入了vue.js. 其實這裏有個簡單的辦法, 只須要把項目中js拖進來, 就能夠了.引入了vue.js, 那麼要如何使用呢? vue.js咱們能夠理解爲對象. 使用使用new Vue()的方式.c++
```
<html>

    <head>
        <title>第一個vue程序</title>
        <script src="../js/vue.js"></script>
    </head>

    <body>
        <div id="app">{{message}}</div>
        <script> const app = new Vue({ el: "#app", data: { message: "hello, 怒放的太陽!" } }); </script>
    </body>
</html>
```
如上, 咱們看到了new Vue(), 至關於把這個對象構建了一份. 而後賦值給了一個常量const app. 這裏須要說一下, 之前,咱們都是直接使用var, 既能夠設置變量也能夠設置常量, 但在vue中, 咱們的變量和常量都有本身的聲明方式
```
聲明方式:  常量使用const, 變量使用let.
```
建立vue對象的時候, 傳入了一個option, option中有兩個元素
```
el:全稱element, 表示指向的元素.其值使用的是jquery表達式. 該屬性決定了這個vue對象掛載到那個元素上, 能夠看出, 咱們這裏是掛載到了id="app"的元素上

data: 這個屬性用來存儲數據, 這些數據能夠試試手動寫的, 也能夠是動態從服務端取的
```
data定義數據. 這裏須要重點說一下了. vue採用的是VMMV的設計模式, 也就是數據和試圖分離. 這裏的data指的就是數據. 而id="app"的div是視圖. 當頁面解析的時候, 解析到script腳本時發現, 咱們已經將div交給vue容器了, 那麼, 這時候, vue就會去尋找目標元素是否有待填補的變量. 這裏咱們看到<div id="app">{{message}}</div>裏面定義了一個變量message, 而這個變量在vue容器中進行了聲明, 所以能夠進行對應的自動填充.

這裏若是暫時不理解, 也不要緊, 先混個眼熟, 後面還有詳細講解

第四步: 分析瀏覽器執行代碼的流程

 1 <html>
 2 
 3     <head>
 4         <title>第一個vue程序</title>
 5         <script src="../js/vue.js"></script>
 6     </head>
 7 
 8     <body>
 9         <div id="app">{{message}}</div>
10         <script>
11             const app = new Vue({
12                 el: "#app",
13                 data: {
14                     message: "hello, 怒放的太陽!"
15                 }
16             });
17         </script>
18     </body>
19 </html>

頁面渲染, 首先加載1-10行, 顯示出對應的html. 執行到第11行的時候, 建立了vue實例, 而且對照html進行解析和修改.

　　2. Vue列表展現

　　　　下面來看一個稍微複雜一點的例子---列表展現

　　　　先來看看效果

　　　　下面思考, 若是咱們使用jquery會如何實現呢? 須要些一個for循環, 而後在裏面定義n個li, 而後拼裝數據. 很複雜. 然而, 使用vue徹底不須要在js代碼中拼裝html元素的數據, 下面來看看怎麼作

第一步: 新建一個html頁面, 命名爲02-list.html, 而後引入vue.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表頁面</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    
</body>
</html>

第二步構建vue對象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{title}}</h1>
        <ul>
            <li v-for = "item in languages">{{item}}</li>
        </ul>
    </div>
    <script>
        const app = new Vue({ el: "#app", data:{ title: "常見的後端編程語言有哪些?", languages: ["python", "go", "java", "net", "php", "c++"] } }); </script>
</body>
</html>

這裏指定了當前構建的vue對象掛載在id="app"的元素上. 並填充值title和languages. 和上一個案例不一樣, 這裏有一個數組元素languages. 那麼數組元素應該如何取值呢?

<ul>
    <li v-for = "item in languages">{{item}}</li>
</ul>

注意紅色粗體部分. 使用了一個vue的指令v-for, 這是表示for循環, 這個第一次見到, 先熟悉一下. 後面還會具體講. 咱們之前使用jquery會怎麼寫呢?

<ul>
    <li >python</li>
    <li >go</li>
    <li >java</li>
    <li >php</li>
    <li >.net</li>
    <li >...</li>
</ul>

之前咱們要這麼寫一大堆, 若是是動態從服務端取數據, 那麼還要拼li代碼, 很容易出錯, 還很費勁. 但使用了vue指令, 咱們發現一句話就搞定了, 這裏是否是能夠傲嬌一下. 怪不得vue能這麼流行.

　　3. 案例:計數器

　　　　計數器是一個小的綜合案例, 經過這個案例來再次感覺一下vue的強大. 咱們先來看一下效果

　　　　分析: 這裏有一個變量, 兩個按鈕. 點擊+, 數字加1, 點擊-, 數字減1. 下面咱們就來實現這個功能

第一步: 建立一個html文件03-計數器.html　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app"> 當前數字: {{counter}} <br>
        <button v-on:click="counter++"> + </button>
        <button v-on:click="counter--"> - </button>
    </div>
    <script>
        const app  = new Vue({ el: "#app", data:{ counter: 0 } }); </script>
</body>
</html>

引入vue.js, 並建立一個Vue對象. 這些以前都說過, 就很少說了. 接下來看看

<button v-on:click="counter++"> + </button>

這是什麼意思呢? 這是vue的寫法. v-on是vue的指令, 這裏先有個印象, 後面會詳細講解. v-on表示要執行一個事件, :click就是具體的事件, 這裏是點擊事件, 點擊後執行什麼邏輯呢? 執行counter ++. 是否是很神奇? 也許尚未感受, 那麼咱們來看看, 若是是jQuery, 要怎麼作吧?

1. 給+按鈕添加一個點擊事件
2. 獲取counter計數器對象的值
3. 對counter進行++
4. 再講counter計算後的結果賦值給計數器對象.

如今感覺到了吧, jquery是命令式編程, 一行命令執行一個語句. 這裏要執行好幾句話, 而vue一句話就搞定了.

第二步: 這裏click事件中就有一句話, counter++, 那麼要是有好多邏輯怎麼辦呢? 那就須要提出來單獨處理了.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        當前數字: {{counter}}
        <br>
        <button v-on:click="add"> + </button>
        <button v-on:click="sub"> - </button>
    </div>
    <script>
        const app  = new Vue({
            el: "#app",
            data:{
                counter: 0
            },
            methods: { add: function() { console.info("add方法被執行") this.counter ++; }, sub: function () { console.info("sub方法被執行") this.counter --; } }
        });
    </script>
</body>
</html>

在vue裏面,要想增長一個事件, 那就放在methods屬性裏就能夠了. 這裏有一點須要注意. 在方法裏要對data中的變量執行counter ++, 直接這麼寫是不行的, 須要加上this.counter++. this表示的是new出來的Vue對象. 有朋友可能就要說了, this在方法裏面, 不該該是表示當前方法麼?vue作了一層代理, 因此, 這裏的this指的是new Vue()對象.　　

四. Vuejs的MVVM

　　1. 什麼是MVVM

　　　　MVVM是Model-View-ViewModel的簡寫。它本質上就是MVC 的改進版。MVVM 就是將其中的View 的狀態和行爲抽象化，讓咱們將視圖 UI 和業務邏輯分開。固然這些事 ViewModel 已經幫咱們作了，它能夠取出 Model 的數據同時幫忙處理 View 中因爲須要展現內容而涉及的業務邏輯。View綁定到ViewModel，而後執行一些命令在向它請求一個動做。而反過來，ViewModel跟Model通信，告訴它更新來響應UI。這樣便使得爲應用構建UI很是的容易。

　　　　MVVM有助於將圖形用戶界面的開發與業務邏輯或後端邏輯（數據模型）的開發分離開來，這是經過置標語言或GUI代碼實現的。MVVM的視圖模型是一個值轉換器，這意味着視圖模型負責從模型中暴露（轉換）數據對象，以便輕鬆管理和呈現對象。在這方面，視圖模型比視圖作得更多，而且處理大部分視圖的顯示邏輯。視圖模型能夠實現中介者模式，組織對視圖所支持的用例集的後端邏輯的訪問。

　　2. MVVM的優勢

　　　　MVVM模式和MVC模式同樣，主要目的是分離視圖（View）和模型（Model），有幾大優勢

- 低耦合。視圖（View）能夠獨立於Model變化和修改，一個ViewModel能夠綁定到不一樣的"View"上，當View變化的時候Model能夠不變，當Model變化的時候View也能夠不變。
- 可重用性。你能夠把一些視圖邏輯放在一個ViewModel裏面，讓不少view重用這段視圖邏輯。
- 獨立開發。開發人員能夠專一於業務邏輯和數據的開發（ViewModel），設計人員能夠專一於頁面設計，使用Expression Blend能夠很容易設計界面並生成xaml代碼。
- 可測試。界面素來是比較難於測試的，測試能夠針對ViewModel來寫。

　　3. MVVM模式的組成部分

- 模型

　　　　　　模型是指表明真實狀態內容的領域模型（面向對象），或指表明內容的數據訪問層（以數據爲中心）。

- 視圖

　　　　　　就像在 MVC和 MVP模式中同樣，視圖是用戶在屏幕上看到的結構、佈局和外觀（UI）。

- 視圖模型

　　　　　　視圖模型是暴露公共屬性和命令的視圖的抽象。MVVM沒有MVC模式的控制器，也沒有MVP模式的presenter，有的是一個 綁定器。在視圖模型中，綁定器在視圖和數據綁定器之間進行通訊。

- 綁定器
  
  聲明性數據和命令綁定隱含在MVVM模式中。綁定器使開發人員免於被迫編寫樣板邏輯來同步視圖模型和視圖。在微軟的堆以外實現時，聲明性數據綁定技術的出現是實現該模式的一個關鍵因素

　　4. Vue中的VMMV

　　　　下圖不只歸納了MVVM模式（Model-View-ViewModel），還描述了在Vue.js中ViewModel是如何和View以及Model進行交互的。

　　　　ViewModel是Vue.js的核心，它是一個Vue實例。Vue實例是做用於某一個HTML元素上的，這個元素能夠是HTML的body元素，也能夠是指定了id的某個元素。

　　　　當建立了ViewModel後，雙向綁定是如何達成的呢？

　　　　首先，咱們將上圖中的DOM Listeners和Data Bindings看做兩個工具，它們是實現雙向綁定的關鍵。
　　　　從View側看，ViewModel中的DOM Listeners工具會幫咱們監測頁面上DOM元素的變化，若是有變化，則更改Model中的數據；
　　　　從Model側看，當咱們更新Model中的數據時，Data Bindings工具會幫咱們更新頁面中的DOM元素。

　　　　拿第一個案例來講

<html>

    <head>
        <title>第一個vue程序</title>
        <script src="../js/vue.js"></script>
    </head>

    <body>
        <div id="app">{{message}}</div>
        <script>
            const app = new Vue({ el: "#app", data: { message: "hello, 怒放的太陽!" } }); </script>
    </body>
</html>