复习VUE.JS第二天

事件

  事件冒泡：
          阻止冒泡：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=""
               <img src="{{url}}" alt=""> //效果能出来，但是会报一个404错误
              <img v-bind:src="url" alt="">  //效果可以出来，不会发404的请求。
      class 和 style:
              :class=""       v-bind:class=""
              :style=""        v-bind:style=""
              :class="[red]"  red 是数据
              :class="[red,b,c]";
              :class="json"
                          data:{
                                  json:{red:a,blue:false}
                          }
             :style="[c]"
             :style="[c,d]"
                        注意：复合样式：驼峰命名法
             :style="json"

模板

  {{msg}}    数据更新模板变化
  {{*msg}}  数据只绑定一次
  {{{msg}}}   HTML转意输出

过滤器

  过滤器模板数据
  系统提供一些过滤器
  {{ msg | filterA}}
  {{ msg | filterB | filterA}}
   uppercase
   lowercase

交互

  $http (ajax)
  如果想做交互
  引入vue-resource.js
  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.$htttp.post('post.php',{
            a:1,
            b:20
        }，{
              emulateJSON:true
        }).then(function(res){
              alert(res.data);
        },function(res){
              alert(res.status);
        })
  jsonp:
        this.$http.jsonp('http://sp0.baidu.com/~~~',{
            wd:'a'
        },{
              jsonp:'cb' //callback名字
        }).then(function(res){
             alert(res.data.s);
        },function(res){
             alert(res.status);
        })

发送请求的例子Demo

  methods:{
        add:function(){
        //发送请求
        this.$http({
               url:URL,
               data:{ //后台发送数据
                    act:'add',
                    content:this.t1
              }
        }).then(function(res){
              console.log(res.data);
        })
      }

  }