摘要：只要數(shù)據(jù)發(fā)生改變，立即更新，由表單等帶來的數(shù)據(jù)改變，數(shù)據(jù)相應(yīng)字段也會發(fā)生相應(yīng)改變。三界面的更新的輸入，導(dǎo)致的值更新，元素內(nèi)，任何表達式與有關(guān)的，都將重新計算，斌企鵝自動更新界面。作為組件化思維的先驅(qū)當(dāng)年統(tǒng)計的組件多達多個。

Vue 是現(xiàn)在最火的前端JavaScript 開發(fā)框架。
首先，接受它的思想
View 模板即html，靜態(tài)界面
Model 數(shù)據(jù)源 模型 界面所有的數(shù)據(jù)負責(zé)提供及管理
Vue 負責(zé)將view 及 Model結(jié)合起來。

    {{message}}

id為app的一段html 即模板，里面有一個{{message}}表達式等待被填充 {{}} 兩個大括號即Vue 表達式

var exampleData = {
        message:"Hello World!"
    }
    
    exampleData模型 提供了view 需要的數(shù)據(jù)message 
    vue 做什么呢？ 告知雙方，View 的Model 在哪里，
    Model 為哪個view服務(wù)
    
 new Vue({
        el:"#app",
        data:exampleData
    })

實例化一個Vue 配置參數(shù) el指向html 元素
data參數(shù)指向數(shù)據(jù)

**MVVM
Model View ViewMode(vue,el,data)**

數(shù)據(jù)綁定是vue 最核心 也是最酷的一個能力。
我們可以將html 與數(shù)據(jù)綁定起來。 只要數(shù)據(jù)發(fā)生改變，html(view)立即更新，html由form表單等帶來的數(shù)據(jù)改變，數(shù)據(jù)相應(yīng)字段也會發(fā)生相應(yīng)改變。即V-model
一 viewmodel關(guān)聯(lián)
el:"#app",data:{message:"hello world!"}
div#app{{message}}表達式就會顯示數(shù)據(jù)模型model里的message的值 Hello world!

二 數(shù)據(jù)綁定
v-model將input 和 message綁在了一起，任何一方的改變都會影響彼此
比如：剛開始，message的值為hello world input value顯示為hello world! 數(shù)據(jù)綁定了 input顯示message的值
接著 input用戶輸入，value 發(fā)生了改變，通知數(shù)據(jù)message更新他的值，雙向互通。

三 界面的更新
input的輸入，導(dǎo)致message的值更新，#app元素內(nèi)，任何表達式與message有關(guān)的，都將重新計算，斌企鵝自動更新界面。
所以，

{{message}}

指令 綁定在html元素上，類似于屬性的特殊命令，用于增強html的能力
v-if 表達式，true 則輸出 false 不輸出，頁面上不會輸出其html
v-model 雙向數(shù)據(jù)綁定指令 主要用于form 表單，input 輸入值會傳給數(shù)據(jù)更新，數(shù)據(jù)更新會直接在界面數(shù)據(jù)上反映。

v-show 與v-if 一樣 接受一個boolean 值得表達式，但不一樣的地方
不管真心急啊都會在頁面上輸出，只是style display:none 而已。

MVVM核心做的是數(shù)據(jù)驅(qū)動的界面，如果數(shù)據(jù)是數(shù)組怎么辦？
v-for 負責(zé)循環(huán)輸出數(shù)據(jù)到模板上，item in items
循環(huán)的數(shù)組是 items 當(dāng)前的對象是item
在循環(huán)中item對象的所有屬性都可以使用item.property調(diào)用。
items 來自于vue 實例的data數(shù)據(jù)源
v-on指定 事件監(jiān)聽指令
v-on:event_type="function_name"
在vue 實例里有一個methods API 專門用于提供各種方法，
供html調(diào)用

v-for=“（index,n） in 4”
循環(huán)指令，執(zhí)行 4次
index 當(dāng)前的下標，n為當(dāng)前的數(shù)字

v-bind:class="{on:(tab==index)}"
簡寫:class
屬性綁定指令，動態(tài)屬性輸出
比如.activ,.on

on:(tab == index)
on是要輸出的類名，是常量，：右邊是表達式，如果為真
則輸出左邊的類，
數(shù)據(jù)驅(qū)動的屬性綁定 改變tab的值就可以，讓第幾個tab有on 這個類

v-on:mouseover = "setCurrent()"
添加DOM 事件監(jiān)聽

methods:{
        setCurrent:function(index) {
        this.tab = index;
    }
}

component 組件
組件化思維是mvvm 最重要的思想，可以讓網(wǎng)頁像搭積木一樣的來開發(fā)。
react 作為組件化思維的先驅(qū) facebook 當(dāng)年統(tǒng)計的組件多達5w多個。
優(yōu)點是：
1 復(fù)用 組件化開發(fā)的過程就是一個選取組件拼裝的過程
2 易維護 一個組件過時了或者有新的需求直接下架（可拔插）
3 協(xié)作 一個開發(fā)者負責(zé)自己的一些組件
組件化開發(fā)適合大型應(yīng)用

組件語法

 
     
        
     
    //定義一個組件名為my component
    Vue.component("my-component",{
        //template 屬性 組件的html
        template:"
A custom component!
"
    })

定義在vue實例化之前

Vue.component("組件名稱"，option)
template 屬性是基本屬性，用于設(shè)置組建的模板，即view
data,methods 等等，其實它跟Vue實例一樣，具有那些復(fù)雜的功能

表現(xiàn)
組件的名字 可以像自定義的html元素一樣，插入html文檔，擴展html的功能
本質(zhì)上組件就是一堆html代碼的集合，除了html之外，還有數(shù)據(jù)集交互邏輯，讓這個組件變得功能強大.
原本的html太簡單 功能太貧瘠。

優(yōu)點：使用的直觀性

組件時屬于實例的 也可能是屬于其他組件的。
父組件，子組件。。。 組件之間有關(guān)系
組件最后通過自定義html的形式掛到vue實例上去 或父組件上去

components 屬性 子組件的集合，
語法是一個json對象

var vm = new Vue({
  el:"#app",
  data:{
  },
  components:{
      "my-component":Child
  }
})

my-component 是我們給組件取的別名，html內(nèi)插入的就是這個名字
Child是我們的組件。

組件內(nèi)數(shù)據(jù)的聲明 與vue 實例數(shù)據(jù)的聲明有些不同，必須為函數(shù)

data:function(){
        return{
        message:"hello"
    }
}

return 返回一個json 對象

filter 過濾去
在開發(fā)中 經(jīng)常有這樣的需求 數(shù)據(jù)庫中存放的是原始數(shù)據(jù)，離我們顯示的需求，還差那么一點點。
或者是數(shù)據(jù)需要整個容，換個形式，filter負責(zé)
數(shù)據(jù)在 | 管道 后將由一個函數(shù)來化妝

組件或者實例中 有一個屬性filters 里面放置filter函數(shù)在vue2.0以前 默認提供一些常用的過濾器，比如capitalize sortBy
Vue 2.0以后需要自行定義。
可以自行定義，數(shù)據(jù)最后顯示的方式。

聲明周期函數(shù)
組件有他的聲明周期，即創(chuàng)建前后，銷毀前后
在配置選項中有一些預(yù)定義的生命周期函數(shù)鉤子，就在相應(yīng)的周期那一刻會觸發(fā)。
比如經(jīng)常會在組件加載完成后,發(fā)起數(shù)據(jù)請求ajax
放在created 方法中
在組件銷毀前解綁數(shù)據(jù)源。

v-html 指令用途：用于將數(shù)據(jù)顯示為html而不是字符串

Ajax
異步無刷新 網(wǎng)頁技術(shù)，通常用于瀏覽器JavaScript 主動向
后端請求數(shù)據(jù) 并實時更新界面的操作中

Ajax 工程師 RIA富互聯(lián)網(wǎng)應(yīng)用開發(fā)工程師

傳統(tǒng)請求 同步
HTTP 請求的過程
網(wǎng)友在瀏覽地址里輸入url請求后，解析DNS IP地址找到網(wǎng)頁所在的服務(wù)器。
通知服務(wù)器，需要這個頁面的html
服務(wù)器收到請求指令后，去數(shù)據(jù)庫里取出數(shù)據(jù)，動態(tài)渲染html模板，最后通過與網(wǎng)友的連接
,將網(wǎng)頁字符串發(fā)送給瀏覽器，我們就看到網(wǎng)頁了

Ajax 異步請求
與同步請求不同，Ajax 是在網(wǎng)頁已經(jīng)渲染，跟服務(wù)器斷開連接后，客戶端JavaScript 通過用戶點擊事件（換一批）鼠標滾動（下一頁）主動向服務(wù)器端請求數(shù)據(jù)
而且并不是一直等待結(jié)果再執(zhí)行，而是在服務(wù)器端接到指令后，完成運算由服務(wù)器端異步的調(diào)用callback來繼續(xù) 執(zhí)行頁面邏輯{動態(tài)DOM操作}
服務(wù)器成功執(zhí)行，調(diào)用callback,
失敗，調(diào)用error 不會刷新頁面的就是ajax

一 瀏覽器原生的異步請求對象 XMLHttpRequest
XML 數(shù)據(jù)的格式 現(xiàn)在主要是JSON
HttpRequest javascript 發(fā)出http請求的能力
流程

1 打開請求，這是并沒有真正發(fā)送請求 而是去做了http握手
xhr.open("GET",URL);
URL 是服務(wù)器端提供給你取數(shù)據(jù)的地址，是預(yù)定好的。
服務(wù)端只需要根據(jù)前端的需求，準備好數(shù)據(jù)，并在預(yù)定的地址（URL）,
以JSON的格式返回給用戶即可

2 定義回調(diào)

xhr.onload = function() {
        xhr.responseText;
}

xhr 請求后服務(wù)器端返回的數(shù)據(jù)，會異步賽道xhr.responseText屬性里面。
JSON.parse()將返回數(shù)據(jù)變成json 對象
xhr.send()真正發(fā)送請求

xhr的優(yōu)點在于，帶來了web2.0革命，傳統(tǒng)了的請求，頁面是靜態(tài)的，死板的
而xhr時代的頁面是動態(tài)的，富交互的，

$.getJSON(url,params,function(data){
        
});
$.post(url,params,function(data){
        
});

平時我們不會去直接用XMLHttpRequest

input radio 切換后，ajax 的數(shù)據(jù)操作由watch 方法來負責(zé)

watch:{
        propertypeName:"函數(shù)名"
}