序言：核心還是後端開發------->web開發----->重點在：網頁渲染，資料互動，表單驗證

補充：UI框架(css bootstrop-jquery element-vue) 資料顯示框架(vue react angular) 獲取資料(ajax axios) 伺服器架構(nodeJS python伺服器 mysql )

1案例：tab重做

1. 步驟：確定盒子，按鈕繫結事件，資料改變，盒子改變

2. Vue改寫：1-選擇最大的盒子 2-資料控制 3-class的條件表示式

3. var tab_con = new Vue({
       el:
    
   '.tab_con',
       data:{
           num:0
       },
       methods:{
           
       }
   })
   <input type="button" @click="num=0" :class="[(num==0)?'active':'']"></input>
   <div :class="[(num==0)?'current':'']"></div>
   
   

2.Vue控制style----格式 :style=“字典，物件，列表”

1. 以字典，物件，列表(多個物件的引用)形式

   ---行內式css  style=
    
   "color:red font-size:20px"---
   <div class="box">
   </div>
       var my_vue = new Vue({
           el:".box",
           data:{
               mycolor:"red",
               myfontsize:"20px",
               myobj1:{
                   color:"green",
                   fontSize:"20px"
               },
               myobj2:
    
   {
                   background:"blue"
               }
           }
       })
   
   

3.條件渲染------->控制標籤的顯示與隱藏

1. bool型–控制條件 v-if=“false” 刪除標籤隱藏

2. v-if v-else 與多重渲染 v-if v-else v-else-if

3. v-show="true"顯示 v-show="false"隱藏---->style=“display:none” 只能控制一個標籤

4. var myVue = new Vue({
       el:"",
       data:{
           bool1:true,
           bool2:false,
           type:"a"
       }
       
   })
   <div v-if="bool1">v-if</div>
   <div v-else>v-else</div>
   -----多重控制------
   <div v-if="type=='a'">v-if</div>
   <div v-else-if="type=='b'">v-else</div>
   <div v-else>v-else</div>
   
   
   

4.列表渲染和物件渲染==>迴圈增加標籤顯示迭代內容

1. v-for=“臨時變數 in 序列” v-for="(臨時變數1,臨時變數2) in 序列" 變數1=資料 變數2=下標

2. 物件中只有一個變數=value或變數1=value 變數2=key

3. 臨時變數只在當前標籤內部使用

4. var myvue = new Vue({
       el:"",
       data:{
           lst1:[1,2,3,4,5],
           obj:{"name":"laowang","age":50}
       }
   })
   <li v-for="i in lst1">{{i}}</li>
   <li v-for="(i,j) in obj">value{{i}}key{{j}}</li>
   

5.獲取表單資料

1. v-model=“變數”---->將表單內的value值傳遞個data內的變數

2. 資料是雙向繫結的，標籤內value<=====>data內變數

3. 單項:資料改變==>頁面改變 雙向: 在表單元素中 資料改變<==>頁面改變

4. var myvue = new Vue({
       el:"",
       data:{
           myval:"",
           myopt:0
       }
   })
   <input type="text" v-model="myval">
   <p>{{myval}}</p>
   <select v-model="myopt">
       <option value=0>111</option>
       <option value=1>222</option>
       <option value=2>333</option>
   </select>
   
   

5. 案例：單選和複選練習

6.案例：聊天頁面

1. 列表套字典儲存資料{person:A,sentence:“ni hao”}

2. 獲取a說value 和 對話的value

3. v-for顯示對話內容 :class控制顯示風格

4. 點選繫結增加資料內容

5. var myvue = new Vue({
       el:"",
       data:{
           lst1:[],
           person1:0,
       	sentence1:""
       },
       methods:{
           fnSay:function(){
               var person2 = [this.person1?'B':'A'];
               this.lst1.push({person:person2,sentence:this.sentence1});
           }
       }
       
   })
   <li v-for="i in lst1" :class="[person1?'B':'A']">{{i.person}}:{{i.sentence}}</li>
   

7.案例

TODO–list

1. 確定v-for顯示的列表
2. 確定顯示的列表資料
3. 增加列表，列表的資料來源value
4. 刪除列表
5. 移動列表內的資料排序

8.生命週期

1. Vue物件建立過程中的鉤子函式

2. 搭建空架構—填充內容—繫結控制標籤 資料，方法----mounted

3. 重點在mounted,Vue物件在標籤生效後，相當於第一個執行的函式，用來獲取資料和顯示資料

4. mounted:function(){
       axios({
           url:"",-------連結路徑
           method:"get/post",
       }).then(function(data){
           在這裡this指向window,使用物件直接使用物件名
       }).catch(function(err){
           console.log(err)
       })
   }
   

9.axios取資料案例：

1. 確定迴圈的資料，迴圈顯示的標籤行

2. 通過axios獲取資料 將資料加入Vue的data中

3. 檢視獲取過來的資料

4. var vm = new Vue({
       el:"",
       data:{
           lst:[]
       },
       methods:{
           
       },
       mounted:function(){
           _this = this; 
           axios({
               url:"/index_data",
               method:"get"
           }).then(function(data){
               console.log(data);
               vm.lst = data.data;
               或者 _this.lst = data.data
           })
       }
   })
   
   <tr v-for="i for i in lst"></tr>