vue01

vue到底是什么?

一個(gè)mvvm框架(庫)、和angular類似,比較容易上手、小巧

官網(wǎng):http://cn.vuejs.org/ 
手冊： http://cn.vuejs.org/api/

vue和angular區(qū)別?

vue——簡單、易學(xué)
    指令以 v-xxx
    一片html代碼配合上json，在new出來vue實(shí)例
    個(gè)人維護(hù)項(xiàng)目

    適合: 移動(dòng)端項(xiàng)目,小巧

    vue的發(fā)展勢頭很猛，github上start數(shù)量已經(jīng)超越angular
angular——上手難
    指令以 ng-xxx
    所有屬性和方法都掛到$scope身上
    angular由google維護(hù)
    
    合適: pc端項(xiàng)目

共同點(diǎn): 不兼容低版本IE

vue基本雛形:

• angular展示一條基本數(shù)據(jù):
  var app=angular.module('app',[]);

  app.controller('xxx',function($scope){  //C
      $scope.msg='welcome'
  })
  
  html:
  div ng-controller="xxx"
      {{msg}}
  

• vue展示一條基本數(shù)據(jù):

  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(){}
    

    指令: 擴(kuò)展html標(biāo)簽功能,屬性

  • vue

  v-model 一般表單元素(input) 雙向數(shù)據(jù)綁定

循環(huán):v-for

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

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

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

事件:v-on

    v-on:click="函數(shù)"--->簡寫:@click=""

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

    new Vue({
        el:'#box',
        data:{ //數(shù)據(jù)
            arr:['apple','banana','orange','pear'],
            json:{a:'apple',b:'banana',c:'orange'}
        },
        methods:{
            show:function(){    //方法
                alert(1);
            }
        }
    });

事件對象$event

@click="show($event)"

• vue1.0

    事件冒泡:
        阻止冒泡:  
            a). ev.cancelBubble=true;
            b). @click.stop 推薦
    默認(rèn)行為(默認(rèn)事件):
        阻止默認(rèn)行為:
            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-show

        v-show=“true/false”

屬性綁定:v-bind

v-bind:src="" 簡寫為:src=""
![]({{url}})    效果能出來，但是會(huì)報(bào)一個(gè)404錯(cuò)誤
![](url)    效果可以出來，不會(huì)發(fā)404請求

class和style:

:class=""   v-bind:class=""
:style=""   v-bind:style=""

:class="[red]"  red是數(shù)據(jù) red:'red'
:class="[red,b,c,d]"

:class="{red:a, blue:false}"

:class="json"
    
    data:{
        json:{red:a, blue:false}
    }
--------------------------
style:
:style="[c]"
:style="[c,d]"
    注意:  復(fù)合樣式，采用駝峰命名法
:style="json"

模板:

{{msg}}     數(shù)據(jù)更新模板變化
{{*msg}}    數(shù)據(jù)只綁定一次,數(shù)據(jù)更新模板不變化
{{{msg}}}   HTML轉(zhuǎn)意輸出,可以msg解析數(shù)據(jù)中標(biāo)簽

過濾器:過濾模板數(shù)據(jù)

vue1.0系統(tǒng)提供一些過濾器:

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

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

currency    錢(不傳參默認(rèn)$)
{{12|currency '￥' }}
angular----{{12|currency '￥' }}
{{msg| filterA 參數(shù)}}

交互:

如果vue1.0想做交互,需要引入: vue-resouce.js
在組件內(nèi)的方法里寫入:

get:
    獲取一個(gè)普通文本數(shù)據(jù):
    this.$http.get('aa.txt').then(function(res){
        alert(res.data);
    },function(res){
        alert(res.status);
    });
    給服務(wù)發(fā)送數(shù)據(jù):√
    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.#/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名字，默認(rèn)名字就是"callback"
    }).then(function(res){
        alert(res.data.s);
    },function(res){
        alert(res.status);
    });

百度下拉列表案例

    window.onload=function(){
        new Vue({
            el:'body',
            data:{
                myData:[],
                t1:'',
                now:-1
            },
            methods:{
                get:function(ev){
                    if(ev.keyCode==38 || ev.keyCode==40)return;
                    if(ev.keyCode==13){
                        window.open('https://www.baidu.com/s?wd='+this.t1);
                        this.t1='';
                    }
                    this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
                        wd:this.t1
                    },{
                        jsonp:'cb'
                    }).then(function(res){
                        this.myData=res.data.s;
                    },function(){
                        
                    });
                },
                changeDown:function(){
                    this.now++;
                    if(this.now==this.myData.length)this.now=-1;
                    this.t1=this.myData[this.now];
                },
                changeUp:function(){
                    this.now--;
                    if(this.now==-2)this.now=this.myData.length-1;
                    this.t1=this.myData[this.now];
                }
            }
        });
    };
//html代碼
<div id="box">
    <input type="text" v-model="t1" @keyup="get($event)" @keydown.down="changeDown()" @keydown.up.prevent="changeUp()">
    <ul>
        <li v-for="value in myData" :class="{gray:$index==now}">
            {{value}}
        </li>
    </ul>
    <p v-show="myData.length==0">暫無數(shù)據(jù)...</p>
</div>