vue.js的庫 用來構(gòu)建頁面的。入門簡單稚虎，更容易上手。
常用：vue ?Angular ? React
el:是element的簡寫
vue 由個人維護(hù) ??Angular ? React由團(tuán)體維護(hù) ?尤雨溪是vue.js的框架作者.
vue是一個輕量級的框架偎捎。
vue由個人維護(hù)蠢终。
vue是簡化Dom的操作。
vue的指令：（命令）
Vue.js也稱為Vue
版本 v1.0 v2.0
是一個用來構(gòu)建用戶界面的框架
是一個輕量級的MVVM框架(Model-View-ViewModel)框架茴她，其實就是數(shù)據(jù)的雙向綁定
數(shù)據(jù)驅(qū)動+組件化的前端開發(fā)(核心思想)
通過簡單的API可以實現(xiàn)響應(yīng)式的數(shù)據(jù)綁定和組合的視圖組件
參考官網(wǎng)：vuejs.org
由個人維護(hù)寻拂，尤雨溪，華人丈牢，目前就職于阿里巴巴
2014年2月開源了vue.js的源代碼
都不兼容低版本的IE
循環(huán)指令：v-for（示例如下：）
<div id="itany">
? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? ? ? ? ? <li v-for='v in arr'>{{v}}</li>
? ? ? ? ? ? ? ? ? ? ? ? <li v-for='v-value in obj'>{{value}}</li>
? ? ? ? ? ? ? ? ? ? ? ? <li v-for="(value,ind) ?in ?arr">{{ind}}---{{value}}</li>
? ? ? ? ? ? ? ? ? ? ? ? <li v-for="val in arrs"></li>
? ? ? ? ? ? </ul>
</div>
js部分：
<script src="js/vue.js"></script>
<script>
? ? ? ? new ?Vue({
? ? ? ? ? ? ? ? ? ? el:'#itany'祭钉，
? ? ? ? ? ? ? ? ? ? data:{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? arr:['1','2','3','4'],
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? obj:{name:'jiao',age;'18'}
? ??????????????????????????????arrs:[
? ? ? ? ? ? ????????????????????? ? ? {num:1,name:'蘋果',price:3},
? ? ? ? ? ? ? ????????????????????? ? {num:2,name:'香蕉',price:2},
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {num:3,name:'鴨梨',price:1}
? ? ? ? ? ? ? ]
}
})
</script>
雙向數(shù)據(jù)綁定：v-model ? 一般只適用于表單元素 ?（示例如下：）
<div id="lhf">
? ? ? ? <input ?type="text" v-model="msg">
? ?????<p>{{msg}}</p>
</div>
<script src="js/vue.js></script>
<script>
? ? ? ? ? ? new Vue({
? ? ? ? ? ? ? ? ? ? el:'#lhf',
? ? ? ? ? ? ? ? ? ? data:{
? ? ? ? ? ? ? ? ? ? ? ? ? ? mag:" "
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
????????})
</script>
事件：v-on：事件名 ?v-on:click=“ ” 點(diǎn)擊事件 ? ?（示例如下：）
<div id="lhf">
? ? ? ? <button v-on:click='alt'>按鈕</button>
</div>
<script src="js/vue.js"></script>
<script>
? ? ? ? ? ? ? ? var vm=new Vue({
????????????????????????????????el:'#lhf',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? data:{
? ? ????????????????????????????????????msg:"hello vue"
????????????????????????????????},
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? methods:{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? alt:function(){
????????????????????????????????????????????????????alert(vm.msg)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? alert(this.msg)
????????????????????????????????????????????}
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? })
</script>
練習(xí)小例子：
<style>
? ? ? ? ? ? ? ? table{
? ? ? ? ? ? ? ? ? ? ? ? ? ? width:360px;
????????????????????????????text-align:center；
? ? ? ? ? ? ? ? ? ? }
</style>
<div class="lgy">
? ? ? ? ? ? ? ? <table border='1' cellspacing='0'>????
? ? ? ? ? ? ? ? ? ? ? ? ? ? <thead>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <th>編號</th>????
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <th>名稱</th>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <th>價格</th>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </tr>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?</thead>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <tbody>????????
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <tr v-for="lbx in arr">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <td>{{lbx.num}}</td>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <td>{{lbx.name}}</td>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <td>{{lbx.price}}</td>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?</tbody>
? ? ? ? ? ? ? ? </table>
</div>
<script src="js/vue.js"></script>
<script>
? ? ? ? ? ? ? ? ? ? new Vue({
? ? ? ? ? ? ? ? ? ? ? ? ? ? el:'.lgy',
? ? ? ? ? ? ? ? ? ? ? ? ? ? data:{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? arr:[
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {num:1,name:'蘋果',price:3}己沛，
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {num:2,name:'橘子'慌核，price:3’},
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?{num:3,name:'香蕉'，price:3}
? ? ? ? ? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? ? }
})
</script>
