Vue.js之初印象

標籤：sse   nbsp   來源   style   com   rip   img   target   color   

一、背景

MVVM模式，很多人在說在用，好吧，我落後了，我目前的項目木有用到MVVM模式的架構，vuejs，reactjs，angularjs，nonono，自己去搗鼓過ng，項目木有用到。實在不敢稱自己是front-end developer。趁這個失業期，vuejs的學習起喲。

二、簡介

1、vue.js是什麼

Vue.js是當下很火的一個JavaScript MVVM庫，它是以資料驅動和組件化的思想構建的。相比於Angular.js，Vue.js提供了更加簡潔、更易於理解的API，使得我們能夠快速地上手並使用Vue.js。

中文文檔地址：https://cn.vuejs.org

2、熱得飛起的MVVM是什麼

MVVM（Model-View-ViewModel）,在常用的MVC（Model-View-Controller）模式的基礎上，增加了一層ViewModel，核心，它能夠實現資料驅動，也是常說的雙向繫結的前提：不僅View的更改可以反映到Model，Model的更改也可以反映到View，二者實現的前提也就是ViewModel把二者聯絡起來了。注意啦，view和model的相互更改相互影響，也就是雙向繫結啦。

舉個栗子：

代碼如下

<!-- 這是view --><div id="app">    {{ message }}</div><script type="text/javascript" src="../assets/js/vue.js"></script><script type="text/javascript">    // 這是 model    var model = {        message: ‘hello vue.js‘    };    // 這是view執行個體，連結view和model之間    new Vue({        el: ‘#app‘,    // 執行個體掛載到#app的標籤上        data: model    // 資料來源於model對象    })</script>

 

view  model之間的關係用一張微妙的圖顯示，圖片來源於網路。

三、開始熟悉vue.js的文法

女司機要開車了，找個地方躲好，我可是隨時會把油門當刹車的銀，嘻嘻，寫幾個小demo。

1、vuejs允許採用模板式的將資料渲染進DOM的系統。

<div class="app"> 

　　{{ message }}    output: hello vue.js

</div>

js:

var app = new Vue({

　　el: ‘#app‘,

　　data: {

　　　　message: ‘hello vue.js‘

　　}

});

開啟瀏覽器瀏覽時，此時vue已經把資料和dom綁定在一起了，在console修改app.message = ‘hello‘,會看到div裡面的資料改變。

網路找的圖，根據上面的代碼應該是app.message =‘hello‘,test 一下就明白。

使用方法：

產生一個vue執行個體，掛在在某個標籤下，就可以使用vuejs了。nice~

2、條件與迴圈

很有意思，這些指令都是v-開頭的，跟angular一樣，用ng-開頭。一種特徵吧。

v-if=

v-for=

3、v-on：監聽事件

舉個栗子，翻轉hello vue.js!

<div id="app-5">    <p>{{ message }}</p>    <button v-on:click=reverseMessage>ReverseMessage</button></div><script type="text/javascript" src="../assets/js/vue.js"></script><script type="text/javascript">    var app5 = new Vue ({        el: ‘#app-5‘,        data: {            message: ‘Hello Vue.js‘        },        methods: {            reverseMessage: function() {                this.message = this.message.split(‘‘).reverse().join(‘‘);            }        }    });</script>

 

4、v-model雙向繫結的栗子：

<div id="app-6">    <p>{{ message }}</p>    <input v-model="message"/></div><script type="text/javascript" src="../assets/js/vue.js"></script><script type="text/javascript">    var app6 = new Vue ({        el: ‘#app-6‘,        data: {            message: ‘‘        }    });</script>

 

注意哦，v-model這個指令只能用在 <input> ,  <select> , <textarea>這些表單元素上，所謂雙向繫結，指的就是我們在js中的vue執行個體中的data與其渲染的dom元素上的內容保持一致，兩者無論誰被改變，另一方也會相應的更新為相同的資料。

初印象到這裡結束，明天繼續學習，理解不對的地方請斧正，謝謝！

 

Vue.js之初印象