Vue.js介紹

Vue.js的作者為Evan You（尤雨溪），曾任職於Google Creative Lab。

Vue文檔：https://cn.vuejs.org

　Vue github：https://github.com/vuejs/vue

　Vue是前端主流框架中的集大成者，它吸取了angular，react的經驗，支持各種模式寫法，入門很簡單，記錄學習vue中的點點滴滴。

接下來我們來簡單介紹一下Vue的生命周期

Vue實例的生命周期(圖)

在beforeCreate和created鉤子函數間的生命周期

在beforeCreate和created之間，進行數據觀測(data observer) ，也就是在這個時候開始監控data中的數據變化了，同時初始化事件

生命周期我們就簡單介紹到這如果需要詳細可以去看看這篇文章

http://www.cnblogs.com/penghuwan/p/7192203.html

接下來我們開始簡單使用Vue

html代碼：

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

js代碼：

new Vue({
    el: ‘#app‘,
    data: {
    message: ‘Hello Vue.js!‘
    }
})

打印結果：

Hello Vue.js!

咱們分析一下上述代碼，一句簡單的{{message}}，就把數據綁定到到了dom中，在當前的代碼中創建Vue對象的時候，傳遞的參數{el:‘#app‘,data:{message:‘hello vue.js!‘}},其中el是vue掛載的元素，也就是作用的範圍，創建一個根作用域，data對象就是代理vue對象中數據和template的橋梁。

下面我們來看看vue雙向數據綁定

html：

    <div id="root">
        <div :title="title">hello world</div>
        <input  v-model="content"/>
        <div>{{  content }}</div>
    </div>

js：

    <script>
        new Vue({
            el:"#root",
            data:{
                title:
 
"this is hello world",
                content:"this is content",
            }
        })
    </script>

Vue是一個輕量級的框架，簡單輕量的同時還非常的人性化，API也是非常容易理解，同時也提供了一些很便捷的指令和屬性。

<div v-text="content"></div>

實現效果也就是給div的內容社會為 content

<div v-on:click="hanleClick" ></div>

可以簡寫為

<div @click="hanleClick" ></div>

實現效果也就是給div綁定一個click事件

<a v-bind:href="url"></a>

可以簡寫為

<a :href="url"></a>

實際就是給a標簽綁定一個屬性

列表渲染

1.語法v-for：通過v-for可遍歷js對象集合，然後用可以直接輸出每一項的數據。下面的代碼直接用文本輸出items的每項數據。

html代碼：

<ul id="app">
    <li v-for="item in items">
        {{ item.message }}
    </li>
</ul>

js代碼：

var app = new Vue({
    el: ‘#app‘,
    data: {
        items: [
            { message: ‘小明‘ },
            { message: ‘小王‘ }
        ]
    }
})

獲取遍歷項索引：使用v-for遍歷有時候想得到每一項的索引值，可通過index直接獲取，index直接獲取，index是vue直接提供的特性。我們也可以給索引取別名：

<div v-for="(item,index) in items">
    {{ index}} {{ item.message }}
</div>

接下來我們說說計算機屬性與偵聽器

html

    <div id="root">
        姓<input v-model="firstName" />
        名<input v-model="lastName"/>

        <div>
            {{fullName}}
        </div>
        <div>
            {{count}}
        </div>
    </div>

js

    <script>
        new Vue({
            el:"#root",
            data:{
                firstName:‘‘,
                lastName:‘‘,
                count:0,
            },
            computed:{
                fullName:function(){
                    return this.firstName+this.lastName;
                }
            },
            watch:{
                fullName:function(){
                    this.count++;
                }
            }
        })
    </script>

　　computed：相當屬性的一個實時計算，如果實時計算裏關聯了對象，那麽當對象的某個值改變的時候，同事會出發實時計算，上面當我們的firstName或者lastName唄更改時它就會觸發我們的computed的fullName從而更改了我們的fullName值

　　 watch：它用於觀察Vue實例上的數據變動。對應一個對象，鍵是觀察表達式，值是對應回調。值也可以是方法名，或者是對象，包含選項。上面當我們的fullName發生變化時，我們的watch就會觸發fullName使count加1

總結

說起小巧，我們可以關註Vue的源碼大小，Vue的成產版本（即min版）源碼僅為72.9kb，官網稱gzip壓縮後只有25.11kb，相比Angular的144kb縮小了一半。

小巧的一種好處就是可以讓用戶更自由的選擇相應的解決方案，在配合其他庫方面它給了用戶更大的空間。

本人第一次寫文章，如果寫的有錯誤的地方還請大家多多指教。

【Vue】Vue快速入門