一、vueJs基礎知識01

初識vue.jsphp

  讀音:同view,視圖的意思html

  vue究竟是什麼:一個mvvm框架(庫),和angular相似,比較容易上手、小巧vue

  mvc思想:module層(數據)和view層(視圖)分離,由數據驅動視圖,相似的有ios

        mvp,mvvm,mv*,mvx等git

  官網:http://cn.vuejs.org/github

  手冊:http://cn.vuejs.org/api/ajax

vue和angular的區別json

  vue----簡單,易學axios

     指令以v-xxx的形式api

     它是一片html代碼(view層),配合上json數據(module層),而後再new出vue實例(vm層即controller)組成

     是有我的維護的項目

     適合:移動端項目,小巧靈活

     vue的發展勢頭很猛,github上start數量已經超越angular

  angular----上手困難,學習成本高
      指令以 ng-xxx的形式
      全部屬性和方法都掛到$scope身上
      angular由google維護
      合適: pc端項目

  共同點: 不兼容低版本IE

 vue基本雛形

    angular展現一條基本數據:
        var app=angular.module('app',[‘注入依賴’]);

        app.controller('xxx',function($scope){    //C
            $scope.msg='welcome'
        })

        html:
        div ng-controller="xxx"
            {{msg}}

    vue展現數據:
        html:
            <div id="box">
                {{msg}}
            </div>

            var c=new Vue({
                el:'#box',    //選擇器  class tagName
                data:{
                    msg:'welcome vue'
                }
            });            

經常使用指令

  angular:
    ng-model    ng-controller
    ng-repeat
    ng-click
    ng-show

 

    $scope.show=function(){}

  vue:
    指令: 擴展html標籤功能,(其實就是html元素的屬性

    v-model 通常用於表單元素(input) 雙向數據綁定   

    循環:
      v-for="name in arr"
          {{$index}}

      v-for="name in json"
          {{$index}} {{$key}}

      v-for="(k,v) in json"

    事件:

      v-on:click="函數"

      v-on:click/mouseout/mouseover/dblclick/mousedown.....    

      new Vue({
        el:'#box',
        data:{ //數據
          arr:['apple','banana','orange','pear'],
          json:{a:'apple',b:'banana',c:'orange'}
        },
        methods:{
          show:function(){ //方法註冊到實例中
            alert(1);
          }
        }
      });

     顯示隱藏:

       v-show=「true/false」

事件

  v-on:click/mouseover......
    
    簡寫的:
    @click=""        推薦

    事件對象:
        @click="show($event)"
    事件冒泡:
        阻止冒泡:  
            a). ev.cancelBubble=true;
            b). @click.stop    推薦
    默認行爲(默認事件):
        阻止默認行爲:
            a). ev.preventDefault();
            b). @contextmenu.prevent    推薦
    鍵盤:
        @keydown    $event    ev.keyCode
        @keyup

        經常使用鍵:
            回車
                a). @keyup.13
                b). @keyup.enter
            上、下、左、右
                @keyup/keydown.left
                @keyup/keydown.right
                @keyup/keydown.up
                @keyup/keydown.down
            .....

屬性

v-bind:src=""
    width/height/title....
    
簡寫:
:src=""    推薦

<img src="{{url}}" alt="">    效果能出來,可是會報一個404錯誤
<img v-bind:src="url" alt="">    效果能夠出來,不會發404請求(推薦使用bind動態綁定

class和style:

    :class=""    v-bind:class=""  //能夠跟單個類
    :style=""    v-bind:style=""

    :class="[red]"    //red是數據,能夠跟數組
    :class="[red,b,c,d]"
    
    :class="{red:a, blue:false}"  //a是數據,能夠跟對象

    :class="json"  //能夠跟總體一個json數據
        
        data:{
            json:{red:a, blue:false}
        }
    --------------------------
    style:
    :style="[c]"
    :style="[c,d]"
        注意:  複合樣式,採用駝峯命名法
    :style="json"

模板 

  {{msg}} 數據更新模板變化
  {{*msg}} 數據只綁定一次

  {{{msg}}} HTML轉義輸出html標籤

過濾器:過濾模板數據

    系統提供一下過濾器:

   {{msg| filterA}}
    {{msg| filterA | filterB}}

    uppercase    eg:    {{'welcome'| uppercase}}
    lowercase
    capitalize

    currency    錢

    {{msg| filterA 參數}} (參數以空格分開)

    ....

交互

  全局調用http和實例調用http

  (全局使用)Vue.http.get....../ (實例使用)this.$http.get...    $http (相似於jq中的ajax功能)

 若是vue想作交互 引入: vue-resouce (vue2.0已不維護,推薦使用axios) get: 獲取一個普通文本數據: this.$http.get('aa.txt').then(function(res){ alert(res.data); },function(res){ alert(res.status); }); 給服務發送數據:√ this.$http.get('get.php',{ a:1, b:2 }).then(function(res){ alert(res.data); },function(res){ alert(res.status); }); post: this.$http.post('post.php',{ a:1, b:20 },{ emulateJSON:true }).then(function(res){ alert(res.data); },function(res){ alert(res.status); }); jsonp: https://sug.so.360.cn/suggest?callback=suggest_so&word=a https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=jshow this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{ wd:'a' },{ jsonp:'cb' //callback名字,默認名字就是"callback" }).then(function(res){ alert(res.data.s); },function(res){ alert(res.status); });
    
    

      this.$http.get()/post()/jsonp()

 
 

      this.$http({         url:地址         data:給後臺提交數據,         method:'get'/post/jsonp         jsonp:'cb' //cbName       });

相關文章
相關標籤/搜索