1.ajax簡寫

1. $(function(){
       $.ajax({
           url:"index_data",
           type:"get",
           dataType:"json"
       })
           .done(function(data){
           var str = "";
           for(var i=0;i<data.length;i++){
               str += '<tr><td>'+ dat[i].id +'</td><td>'+ dat[
    
   i].code +'</td><td>'+ dat[i].sname +'</td><td>10.01%</td><td>4.40%</td><td>全新好</td><td>16.05</td><td>2017-07-18</td><td><input type="button" value="新增" name="toAdd"></td></tr>'
           }
           $("table").html(str)
    
   
       })
           .fail(function(){
           alert("error");
       })
   })
   

2.ajax傳參---->新增關注

1. 觸發傳參：事件委託

   $("table").delegate("input","click",function(){
       alert(111);
       
   })
   

2. 在新新增的每條資料上新增按鈕上加上自己命名的屬性 mycode="’+dat[i].code+’"

    '<tr><td>'+ dat[i].id +'</td><td>'+
    
    dat[i].code +'</td><td>'+ dat[i].sname +'</td><td>10.01%</td><td>4.40%</td><td>全新好</td><td>16.05</td><td>2017-07-18</td><td><input type="button" value="新增" name="toAdd"></td></tr>'
                   str += '<tr><td>'+ dat[i].id +'</td><td>'+ dat[i].code +'</td><td>'+ dat[i].sname +'</td><td>10.01%</td><td>4.40%</td><td>全新好</td><td>16.05</td><td>2017-07-18</td><td><input type="button" value="新增" name="toAdd" mycode="'+dat[i].code+'"></td></tr>'
                   // html允許自定義屬性以完成自己想要的功能 -- 自定義一個html屬性：獲取股票程式碼
                   // 雙引號：k=“v”的引號
                   // 單引號：字串拼接的引號
   

3. 按下新增按鈕談一下自己的mycode

   $("table").delegate("input","click",function(){
       alert( $(this).attr('mycode') )  // 自定義的html屬性用attr();
   })
   // alert( $(this).prop('mycode') )   //已有的html屬性
   

4. 將獲取到的股票程式碼傳送出去，以text方式接受返回資料----->ajax

   ajax---->將mycode這份資料傳送給 add_data 介面-------->介面再將

   資料彈出

    var mycode =  $(this).attr('mycode');
       $.ajax({
           url:"/add_data",
           type:"get",
           data:{
               'code':mycode
           },
           dataType:"text",
           success:function(data){
           	alert(data);
           },
           error:function(){
               alert("error");
           }
           
       })
   

5. 整個關注涉及到的新知識

   1. 對input按鈕增加自定義屬性
   2. 將得到的自定義屬性作為引數傳輸給add_data頁面，也就是伺服器----->ajax裡面的data鍵值儲存傳輸資料

3.ajax與jsonp

jsonp跨域請求通過script裡面的scr屬性請求的jsonpcallback

1. 跨域請求：

   1.將資料傳送到360
   $(function(){
       $.ajax({
           url:"https://www.baidu.com",------->跨域http
           type:"get",
           dataType:"jsonp",--------->跨域一定是jsonp
           data:{"word":"b"},------>傳送的引數
           success:function(data){
           console.log(data)
       	}
       })
   })
   

2. 案例：從360拿資料

   $(function(){
       $("input").keyup(function(){
           var vals = $(this).val();
           var str = "";
           $.ajax({
               url:"http://www.360.com",----->連結域名
               type:"get",
               dataType:"jsonp"----->接收資料型別
               data:{"word":vals,
                    "encodeout":"utf-8"},------>傳送引數
               success:function(dat){
                   console.log(dat);
                   for(var i=0;i<dat.s.length;i++){
                       str += '<li>'+dat.s[i]+'</li>';
                   }
                   $("ul").html(str);---->收到加入列表
               }
           })
       })
   })
   

4.vue的定義

1. jq----->獲取物件----->繫結事件----->操作方法------>ajax獲取資料

2. Vue資料驅動檢視

3. el,data,methods三個引數定義

4. <script src="js/vue.min.js"></script>
   <div id="box">{{str}}</div>------->4
   <script>
       var bianliang =  new Vue({
        ----控制的標籤-----說明控制範圍
           el:"#box",
        ----儲存的資料-----用到的資料都在裡面
           data:{
               mystr:"jin"
           },
           methods:{
   		   fnAdd:function(){alert(this.mystr)}
           }
       })
   </script>
   
   

5.Vue的使用

1. Vue使用從建立物件開始---------Vue可以控制所選標籤內的所有東西包括子級標籤

2. 通過js，入口函式window.onload -----不使用------通常寫在控制標籤後面

3. 呼叫Vue內部data裡面屬性 {{Vue裡面data的鍵名}}

   1. 可以對data裡面的屬性進行計算表示式

   2. 也可以書寫 條件表示式 變數?“成立表示式”:“不成立表示式”

   3. vued定義函式呼叫時-----this.data裡的變數名

   4. <div id="box">{{my_num+1}}  {{my_str+2}}{{my_bool?"jin":"yi"}} </div>
      <script>
          var my_vue = new Vue({
              el:"#box",
              data:{
              my_num:11,
              my_bool:true,
              my_str:"jin"
          }
          }) 
      </script>
      

4. 對標籤屬性的操作：v-bind:屬性=" “------>控制html屬性 -----> :屬性=” "

   1. a標籤跳轉地址傳入data裡的屬性 v-bind:href=“變數名” 或者:href=“變數名”

   2. <a :href="url" id="mylink"></a>
      <script>
          var my_vue = new Vue({
              el:"#mylink",
              data:{
                  ulr:"http://www.baidu.com"
              }
          })
      </script>
      

5. 繫結事件呼叫Vue物件裡的methods內函式：v-on:click=“函式名” 或者 @click=“函式名()”

   1. <button id="my_btn" @click="fnSay()">點點點{{num}}</button>
      <script>
      var my_vue = new Vue({
          el:"#my_btn",
          data:{
              my_str:"my name is lao wang",
              num:0
          },
          methods:{
              fnSay:function(){
                  alert(this.my_str);
                  this.num += 1;
              }
          }
      })
      </script>
      

6.Vue控制css------->控制class和style

1. Vue裡面的data資料改變，整個頁面就會發生改變

2. 控制class屬性，字典，列表，物件

3. 控制class手法通用於控制style

4. <style>
       .my_class_a{
           width:100px;
           height:100px;
           background: blue;
       }
   	.my_class_b{
       	width:100px;
           height:100px;
           background: green ;
   	}
   </style>
   <div id="box">
   --------以字典形式控制class--格式  :class="{存在的類:Vue物件data裡的bool變數}"---------
   <div id="box1" :class={'my_class_a':bool1,'my_class_b':bool2}>我 是 盒 子1</div>
   <button id="btn1" @click="funC()">我 是 按 鈕1</button>
   
   
   -------以物件形式控制class--格式   在data裡面增加一個包含類名的物件，將物件在給class    :class="cls_obj"-----
   <div id="box2" :class="cls_obj">我 是 盒 子2</div>
   <button id="btn2" @click="funC2()">我 是 按 鈕2</button>
   
   
   -----以列表形式控制class，在data裡面定義兩個變數，關聯已存在的類，將兩個變數放在列表中給class----格式   :class="[變數1,變數2]"   或者  :class="[布林表示式?變數1:變數2]"----------
   <div id="box3" :class="[bool1?cls_a:cls_b]">我 是 盒 子3</div>
   <button id="btn3" @click="funC()">我 是 按 鈕3</button>
   </div>
   <script>
       var my_vue = new Vue({
           el:"#box",
           data:{
               bool1:true,
               bool2:false,
               cls_obj:{
                   my_class_a:false,
                   my_class_b:true,
               }，
               cls_a:"my_class_a",
               cls_b:"my_class_b"
           },
           methods:{
               funC:function(){
                   this.bool1 = !this.bool1;
                   this.bool2 = !this.bool2;
               },
               funC2:function(){
                   this.cls_obj.my_class_a =!this.cls_obj.my_class_a;
                   this.cls_obj.my_class_b =!this.cls_obj.my_class_b;
               }
           }
           
       })
   </script>