摘要：只要數據發生改變，立即更新，由表單等帶來的數據改變，數據相應字段也會發生相應改變。三界面的更新的輸入，導致的值更新，元素內，任何表達式與有關的，都將重新計算，斌企鵝自動更新界面。作為組件化思維的先驅當年統計的組件多達多個。

Vue 是現在最火的前端JavaScript 開發框架。
首先，接受它的思想
View 模板即html，靜態界面
Model 數據源 模型 界面所有的數據負責提供及管理
Vue 負責將view 及 Model結合起來。

    {{message}}

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

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

實例化一個Vue 配置參數 el指向html 元素
data參數指向數據

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

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

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

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

{{message}}

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

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

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

v-for=“（index,n） in 4”
循環指令，執行 4次
index 當前的下標，n為當前的數字

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

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

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

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

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

組件語法

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

定義在vue實例化之前

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

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

優點：使用的直觀性

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

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

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

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

組件內數據的聲明 與vue 實例數據的聲明有些不同，必須為函數

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

return 返回一個json 對象

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

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

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

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

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

Ajax 工程師 RIA富互聯網應用開發工程師

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

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

一 瀏覽器原生的異步請求對象 XMLHttpRequest
XML 數據的格式 現在主要是JSON
HttpRequest javascript 發出http請求的能力
流程

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

2 定義回調

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

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

xhr的優點在于，帶來了web2.0革命，傳統了的請求，頁面是靜態的，死板的
而xhr時代的頁面是動態的，富交互的，

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

平時我們不會去直接用XMLHttpRequest

input radio 切換后，ajax 的數據操作由watch 方法來負責

watch:{
        propertypeName:"函數名"
}