正文

前言：關於Vue框架，好幾個月之前就聽說過，瞭解一項新技術之後，總是處於觀望狀態，一直在猶豫要不要系統學習下。正好最近有點空，就去官網瞭解了下，看上去還不錯的一個元件，就抽空研究了下。最近園子裡vue也確實挺火，各種入門博文眼花繚亂，博主也不敢說寫得多好，就當是個學習筆記，有興趣的可以看看。

回到頂部

一、MVVM大比拼

關於MVVM，原來在介紹knockout.js的時候有過講解，目前市面上比較火的MVVM框架也是一抓一大把，比如常見的有Knockout.js、Vue.js、AvalonJS、Angularjs等，每一款都有它們自己的優勢。

Knockout：微軟出品，可以說是MVVM的模型領域內的先驅，使用函式偷龍轉鳳，最短編輯長度演算法實現DOM的同步，相容IE6，實現高超，但原始碼極其難讀，最近幾年發展緩慢。

Vue：是最近幾年出來的一個開源Javascript框架，語法精簡，實現精緻，但對瀏覽器的支援受限，最低只能支援IE9。
AvalonJS：是一個簡單易用迷你的MVVM框架，由大神司徒正美研發。使用簡單，實現明快。
React：React並不屬於MVVM架構，但是它帶來virtual dom的革命性概念，受限於檢視的規模。
Angularjs：Google出品，已經被用於Google的多款產品當中。AngularJS有著諸多特性，最為核心的是：MVC、模組化、自動化雙向資料繫結、語義化標籤、依賴注入等等。入門容易上手難，大量避不開的概念也是很頭疼的。

更多MVVM框架優缺點比較，可以看下這裡

。

其實在博主的博文裡面，說得最多的還是那句：任何技術和框架都有它存在的價值和意義！由上也可以看出沒有哪個框架是真正完美的，關鍵看你如何取捨，在你的專案中用好了以上任何一種框架，你就是技術大牛。不過話雖這樣說，博主覺得多瞭解一些框架對我們並無壞處，至少能開闊我們的眼界吧。

回到頂部

二、Vue常用網址

上文說了，Vue是一個開源框架，最新版本已經更新到了2.0，是一個獨立的Javascript框架，不依賴於任何其他框架（例如jquery），下面是博主收集的一些常用網址。

回到頂部

三、Vue基礎入門

回到頂部

1、MVVM圖例

說到MVVM，先來看看下面下面這張圖

這張圖足以說明MVVM的核心功能，在這三者裡面，ViewModel無疑起著重要的橋樑作用。

一方面，通過ViewModel將Model的資料繫結到View的Dom元素上面，當Model裡面的資料發生變化的時候，通過ViewModel裡面資料繫結的機制，觸發View裡面Dom元素的變化；
另一方面，又通過ViewModel來監聽View裡面的Dom元素的資料變化，當頁面上面的Dom元素髮生變化的時候，ViewModel通過Dom樹的監聽機制，觸發對應的Model的資料變化。

當然在Vue.js裡面ViewModel也是核心部件，它就是一個Vue例項。這個例項作用於單個或者多個html元素，從而實現Dom樹監聽和資料繫結的雙向更新操作。

回到頂部

2、第一個Vue例項

關於第一個例項，無疑是最簡單的應用。要使用vue，不用多說，肯定是先去github上面下載原始碼嘍，然後引入到我們的專案中來，需要引用的js就一個vue.js，版本是2.0.5。

先來看一個最簡單的例子：

<body>
    <div id="app">
        <h1>姓名：{{ Name }}</h1>
        <h1>年齡：{{ Age }}</h1>
        <h1>學校：{{ School }}</h1>
    </div>

    <script src="Content/vue/dist/vue.js"></script>
    <script type="text/javascript">
    //Model
    var data = {
        Name: '小明',
        Age: 18,
        School:'光明小學',
    }

    //ViewModel
    var vue = new Vue({
        el: '#app',
        data: data,
    });
   
    </script>
</body>

這段程式碼不難理解，我們的Model就是data變數，而ViewModel就是這裡的new Vue()得到的物件。這裡兩個最簡單的屬性相信大家一看就能明白。

el：表示繫結的Dom元素，此例子中表示的是父級的Dom元素。
data：需要繫結的資料Model。

如果僅僅是展示，只需要姓名：{{ Name }} 這樣寫就好了。執行的效果如下：

值得一提的是 {{ Name }} 這種寫法僅僅只能實現單向繫結，只有在Model裡面資料發生變化的時候會觸發介面Dom元素的變化，反之並不能觸發Model資料的變化。可以通過瀏覽器的Console來驗證這一理論。

那麼，對於雙向繫結的機制，Vue是如何實現的呢？

回到頂部

3、雙向繫結

vue裡面提供了v-model指令，為我們方便實現Model和View的雙向繫結，使用也非常簡單。還是上文的例子，我們加入一個文字框，裡面使用v-model指令。

<body>
    <div id="app">
        <h1>編輯姓名：<input type="text" v-model="Name" /></h1>
        <h1>姓名：{{ Name }}</h1>
        <h1>年齡：{{ Age }}</h1>
        <h1>學校：{{ School }}</h1>
    </div>

    <script src="Content/vue/dist/vue.js"></script>
    <script type="text/javascript">
    //Model
    var data = {
        Name: '小明',
        Age: 18,
        School:'光明小學',
    }

    //ViewModel
    var vue = new Vue({
        el: '#app',
        data: data,
    });
    </script>
</body>

得到效果：

雙向繫結效果展示：

通過v-model指令，很方便的實現了Model和View之間的雙向繫結。單從這種繫結的方式來看，還是比Knockout要簡單一點，至少不用區分什麼普通屬性和監控屬性。

回到頂部

四、常用指令

本來按照Vue文件說明，常用指令應該是放在後面介紹的，但是從使用的層面考慮，先介紹常用指令還是非常必要的，因為博主覺得這些指令是我們入手使用Vue的橋樑，沒有這些基石，一切的高階應用都是空話。

Vue裡面為我們提供的常用指令主要有以下一些。

每一個指令都可以連結到相關文件，博主覺得文件裡面每種指令的語法寫得非常詳細，在此就沒必要重複做說明了，下面博主打算將一些常用的指令以分組的形式分別結合demo來進行解釋說明。

回到頂部

1、v-text、v-html指令

v-text、v-html這兩者分為一組很好理解，一個用於繫結文字，一個用於繫結html。上文使用到的 {{ Name }}這種寫法就是v-text的的縮寫形式。這個很簡單，沒什麼好糾結的，看一個Demo就能明白。

<body>
    <div id="app">
        <h1>姓名：<label v-text="Name"></label></h1>
        <h1>姓名：{{ Name }}</h1>
        <div style="font-size:30px;font-weight:bold;" v-html="Age">年齡：</div>
    </div>

    <script src="Content/vue/dist/vue.js"></script>
    <script type="text/javascript">
    //Model
    var data = {
        Name: '小明',
        Age: "<label>20</label>",
        School:'光明小學',
    }

    //ViewModel
    var vue = new Vue({
        el: '#app',
        data: data,
    });
    </script>
</body>

效果如下：

程式碼說明：

{{Name}}這種寫法和v-text的作用是相同的，用於繫結標籤的text屬性。注意如果標籤沒有text屬性，該繫結會失效，比如你在一個文字框上面使用v-text是沒有效果的
由得到的效果可以看出，v-html繫結後會覆蓋原來標籤裡面的內容（比如上面的“年齡：”），記住此處是覆蓋而非append。
對於v-html應用的時候要慎重，在網站上動態渲染任意 HTML 有一定的危險存在，因為容易導致 XSS 跨站指令碼攻擊。所以最好是在信任的網址上面使用。
注意v-text和v-html繫結都是單向的，只能從Model到View的繫結，不能實現View到Model的更新。

JS元件系列——又一款MVVM元件：Vue（一：30分鐘搞定前端增刪改查）

一、MVVM大比拼

二、Vue常用網址

三、Vue基礎入門

1、MVVM圖例

2、第一個Vue例項

3、雙向繫結

四、常用指令

1、v-text、v-html指令

JS元件系列——又一款MVVM元件：Vue（一：30分鐘搞定前端增刪改查）

Go元件學習——gorm四步帶你搞定DB增刪改查

JS元件系列——又一款MVVM元件：Vue（二：構建自己的Vue元件）

使用unity製作的一款生存類遊戲demo（一）

laravel中的數據庫操作（增刪改查）方法一

cocos2d-x-lua基礎系列教程六（lua-table增刪改查）

js 建立連結串列（增刪改查）

SpringMVC增刪改查（附原始碼，新手學SpringMVC最好的辦法就是自己寫一套增刪改查）

C#元件系列——又一款日誌元件：Elmah的學習和分享

C#元件系列——又一款Excel處理神器Spire.XLS，你值得擁有（二）

C#元件系列——又一款Excel處理神器Spire.XLS，你值得擁有

JS元件系列——BootstrapTable+KnockoutJS實現增刪改查解決方案（一）

JS元件系列——兩種bootstrap multiselect元件大比拼[轉載]

JS元件系列——BootstrapTable+KnockoutJS實現增刪改查解決方案（二）

C#進階系列——一步一步封裝自己的HtmlHelper元件：BootstrapHelper（三：附原始碼）

JS元件系列——BootstrapTable+KnockoutJS實現增刪改查解決方案（三）：兩個Viewmodel搞定增刪改查

JS元件系列——BootstrapTable+KnockoutJS實現增刪改查解決方案（四）：自定義T4模板快速生成頁面

JS元件系列——兩種bootstrap multiselect元件大比拼

JS元件系列——Bootstrap檔案上傳元件：bootstrap fileinput

spring-boot react一步一步實現增刪改查元件化

JS元件系列——又一款MVVM元件：Vue（一：30分鐘搞定前端增刪改查）

一、MVVM大比拼

二、Vue常用網址

三、Vue基礎入門

1、MVVM圖例

2、第一個Vue例項

3、雙向繫結

四、常用指令

1、v-text、v-html指令

相關推薦