Vue基礎語法

阿新 • • 發佈：2021-08-01

學前準備

vue官網：https://cn.vuejs.org/

工具： webstorm， vscode

Vue基礎

初體驗

<div id="app">{{message}}</div>

<script>
    // 宣告式程式設計
    const app = new Vue({
        //用於掛載要管理的元素
        el: '#app',
        // 定義資料
        data: {
            message: '你好， 李銀河！'
        }
    })
</script>

效果

你好， 李銀河！

列表展示

<body>
    <div id="app">
        <ul>
            <li v-for="item in movies">{{item}}</li>
        </ul>
    </div>

    <script>
        const app = new Vue({
            el: '#app',
            data:{
                message: "電影名單",
                movies:['星際穿越', '大話西遊', '少年派', '盜夢空間']
            }
        })
    </script>
</body>

效果展示

瀏覽器追加資料

app.movies.push('海王')

小案例：計數器

<div id="app">
    <h2>當前計數:{{counter}}</h2>
    <button @click="add">+</button>
    <button @click="sub">-</button>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data:{
            counter:0
        },
        methods:{
            add: function () {
                this.counter++
            },
            sub:function () {

                if(this.counter <= 0){
                    this.counter = 0;
                }else if(this.counter>0){
                    this.counter--;
                }

            }
        }
    })
</script>

實現效果

mvvm思想

mvvm簡介

MVVM（Model–view–viewmodel）是一種軟體架構模式。

MVVM有助於將圖形使用者介面的開發與業務邏輯或後端邏輯（資料模型）的開發分離開來，這是通過置標語言或GUI程式碼實現的。MVVM的檢視模型是一個值轉換器，[1] 這意味著檢視模型負責從模型中暴露（轉換）資料物件，以便輕鬆管理和呈現物件。在這方面，檢視模型比檢視做得更多，並且處理大部分檢視的顯示邏輯。[1] 檢視模型可以實現中介者模式，組織對檢視所支援的用例集的後端邏輯的訪問。

MVVM是馬丁·福勒的PM（Presentation Model）設計模式的變體。[2][3] MVVM以相同的方式抽象出檢視的狀態和行為，[3] 但PM以不依賴於特定使用者介面平臺的方式抽象出檢視（建立了檢視模型）。
MVVM和PM都來自MVC模式。

MVVM由微軟架構師Ken Cooper和Ted Peters開發，通過利用WPF（微軟.NET圖形系統）和Silverlight（WPF的網際網路應用派生品）的特性來簡化使用者介面的事件驅動程式設計。[3] 微軟的WPF和Silverlight架構師之一John Gossman於2005年在他的部落格上發表了MVVM。

MVVM也被稱為model-view-binder，特別是在不涉及.NET平臺的實現中。ZK（Java寫的一個Web應用框架）和KnockoutJS（一個JavaScript 庫）使用model-view-binder。[3][4][5]

MVVM模式的組成部分

模型

模型是指代表真實狀態內容的領域模型（面向物件），或指代表內容的資料訪問層（以資料為中心）。
檢視

就像在MVC和MVP模式中一樣，檢視是使用者在螢幕上看到的結構、佈局和外觀（UI）。[6]
檢視模型

檢視模型是暴露公共屬性和命令的檢視的抽象。MVVM沒有MVC模式的控制器，也沒有MVP模式的presenter，有的是一個繫結器。在檢視模型中，繫結器在檢視和資料繫結器之間進行通訊。[7]
繫結器

宣告性資料和命令繫結隱含在MVVM模式中。在Microsoft解決方案堆中，繫結器是一種名為XAML的標記語言。[8] 繫結器使開發人員免於被迫編寫樣板式邏輯來同步檢視模型和檢視。在微軟的堆之外實現時，宣告性資料繫結技術的出現是實現該模式的一個關鍵因素。[4][9]

理論基礎

MVVM旨在利用WPF中的資料繫結函式，通過從檢視層中幾乎刪除所有GUI程式碼（程式碼隱藏），更好地促進檢視層開發與模式其餘部分的分離。[10] 不需要使用者體驗（UX）開發人員編寫GUI程式碼，他們可以使用框架標記語言（如XAML），並建立到應用程式開發人員編寫和維護的檢視模型的資料繫結。角色的分離使得互動設計師可以專注於使用者體驗需求，而不是對業務邏輯進行程式設計。這樣，應用程式的層次可以在多個工作流中進行開發以提高生產力。即使一個開發人員在整個程式碼庫上工作，檢視與模型的適當分離也會更加高效，因為基於終端使用者反饋，使用者介面通常在開發週期中經常發生變化，而且處於開發週期後期。

MVVM模式試圖獲得MVC提供的功能性開發分離的兩個優點，同時利用資料繫結的優勢和通過繫結資料的框架儘可能接近純應用程式模型。[10][11][12] 它使用繫結器、檢視模型和任何業務層的資料檢查功能來驗證傳入的資料。結果是模型和框架驅動儘可能多的操作，消除或最小化直接操縱檢視的應用程式邏輯（如程式碼隱藏）。

MVVM模式不同於MVC，在MVVM模式中，將ViewModel層繫結到View層後，它基本不使用點選事件，而是使用命令(Command)來控制。資料的顯示也是不同於MVC，而是使用Binding來繫結相關資料。

值得一提的是，MVVM通常會使用屬性更改通知，即資料驅動而不是事件驅動。在WPF中當資料發生改變時，會通過介面INotifyPropertyChanged通知到對應的元件繫結的資料，實現同步資料重新整理。

MVVM簡述

View層：

檢視層
在我們前端開發中，通常就是DOM層。
主要的作用是給使用者展示各種資訊。

Model層：

資料層
資料可能是我們固定的死資料，更多的是來自我們伺服器，從網路上請求下來的資料。
在我們計數器的案例中，就是後面抽取出來的obj，當然，裡面的資料可能沒有這麼簡單。

VueModel層：

檢視模型層
檢視模型層是View和Model溝通的橋樑。
一方面它實現了Data Binding，也就是資料繫結，將Model的改變實時的反應到View中
另一方面它實現了DOM Listener，也就是DOM監聽，當DOM發生一些事件(點選、滾動、touch等)時，可以監聽到，並在需要的情況下改變對應的Data。