Vue基礎入門(第一節)
--------------------------------------------------------------------------------------------------------------------------
一、概述
二、Vue基礎語法
=============================================================
demo代碼地址：https://github.com/darkcityX/vueDemo
--------------------------------------------------------------------------------------------------------------------------
一、VueJS概述
1、what：vue是一個構建用戶界面（ui）漸進式的js框架
2、where：餓了麼、滴滴...
3、why：
（1）中文文檔支持
（2）容易上手，學習曲線緩和
(3）速度快
（4）體積小
（5）基於組件化的開發方式
（6）代碼的可讀性好，可維護性比較好
（7）極大的降低了耦合度（解耦：降低耦合度）
4、how
（1）、引入vue.js文件
（2）、使用cli進行項目搭建
二、Vue基礎語法
1、雙花括號
interploation 插值表達式
語法：<any>{{表達式}}</any>
將表達式執行的結果輸出到當前調用雙花括號的元素的innerHTML中
練習：創建一個demo：將一個對象數組（學生：sex、age、score）、thead中有3列，分別是性別、年齡、成績
2、循環指令
程序：順序結構、選擇結構、循環結構
語法： <any v-for="臨時變量 in 集合"></any>
<any v-for="(臨時變量,下標) in 集合"></any>
作用：（1）遍歷集合 （2）在遍歷的同時創建多個調用v-for的元素
練習：使用v-for改寫上面的練習
3、選擇指令
語法：<any v-if="表達式"></any>
多重分支判斷：
<p v-if=""></p>
<p v-else-if=""></p>
<p v-else=""></p>
作用：根據表達式執行結果的真假，來決定是否要將當前的元素掛載到DOM中
4、事件綁定
語法：<any v-on:eventName="處理函數"></any>
給指定的標籤綁定上當eventName事件觸發時，要執行的處理函數
eg: <input type="text" v-on:change="handleChange" />
練習：在試圖中有一個列表，有一個按鈕，當點擊按鈕時，向列表中插入一條100以內的隨機數據；當列表的長度大於10的時候，別表自動從DOM中移除。
編程方式發生了變化，從DOM驅動變成了數據驅動型的。
5、屬性綁定
（1）基本用法： <any v-bind:屬性名稱="表達式"></any>
作用： 將表達式執行的結果的值綁定給屬性
eg: new Vue({
data:{
myUrl : "www.baidu.com",
imgUrl : "img/1.jpg",
imgName : "1.jpg"
}
});
<a v-bind:href="myUrl"></a>
<img v-bind:src="imgUrl" />
<img v-bind:src="'img/'+imgName" />
6、其它綁定
（1）、雙向數據綁定
方向1：將數據綁定到視圖中，當數據發生變化，視圖會自動的更新
方向2： 將表單元素中用戶操作的結果綁定到一個變量上
語法; v-model
（2）、其它... ...（v-html/v-show）