• 2017-09-17

笔记及源码地址 ： https://github.com/wll8/vue_note

vue 中的事件深入。

事件： @click/mouseover…
事件简写： @ 如 @clkck
属性简写: : 如 :src
传入原生事件对象： $event

• 事件冒泡：
  原生 ev.cancelBubble=true;
  vue .stop;

• 默认事件：
  原生 ev.preventDefault();
  vue .prevent;

• 键盘事件：
  keydown 文字没出现
  keyup 文字出现
  键码 .13
  键名 .enter

• 属性：
  src=”{{url}}” 废弃
  :src=”url”

• class和style
  class
  style 复合样式驼峰命名

• 模板
  数据更新，视图变化。

• 注，教程失效部分
  属性： src=”{{url}}” 改为 :src=”url”
  单次更新 {{*msg}} 改为 v-once
  解析html {{{msg}}} 改为 v-html

• 过滤器
  过滤模板数据。 {{‘Hi’ | uppercase}}
  uppercase 转大写
  lowercase 转小写

• 注，教程失效部分
  所有内置过滤器已经删除。

数据交互

vue想做数据交互，可以使用 vue-resouce。
引入 vue-resouce ，相当于在 vue 实例是挂载了一个 $http 方法。

• get

  this.$http.get('url').then(function(res){

    alert(res.data); // 成功

  },function(err){

    console.log(err); // 失败

  })

注，教程失效部分：
在教程中在 $http.get(‘url’,{a:1,b:2}) 形式的参数没有传送成功。
使用 $http.get(‘url?a=1&b=2’) 可以传送成功。

• post
  post 正常发送数据需要sglf emulateJSON:true 参数。

  this.$http.post('05.post.php',{a:1, b:2, },{

    emulateJSON:true // post 需要加些参数才能把参数发送成功

  }).then(function(res){

    alert(res.data);

  },function(err){

    console.log(err)

  })

• jsonp
  jsonp 是 get 请求。
  使用 jsonp:'cb' 配置回调用函数。

  this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a',{

    jsonp:'cb' // 配置回调函数名，默认 callback

  }).then(function(res){

    alert(res.data.s);

  },function(err){

    console.log(err);

  })

相关源码

05.数据交互.html

  <meta charset="utf-8">

  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>

  <script src="https://cdn.bootcss.com/vue-resource/1.3.4/vue-resource.js"></script>

  <div id="box">

    <button @click="f1()">get 获取文本</button>

    <hr>

    <button @click="f2()">get 发送参数</button>

    <hr>

    <button @click="f3()">post 发送参数</button>

    <hr>

    <button @click="f4()">jsonp 360</button>

    <hr>

    <button @click="f5()">jsonp 百度</button>

  </div>

  <script>

    var vm=new Vue({

      el:'#box',

      methods:{

        f1:function(){

          this.$http.get('05.data.txt').then(function(res){

            alert(res.data);

          },function(err){

            console.log(err);

          })

        },

        f2:function(){

          this.$http.get('05.get.php?a=1&b=2').then(function(res){

            alert(res.data);

          },function(err){

            console.log(err)

          })

        },

        f3:function(){

          this.$http.post('05.post.php',{

            a:1,

            b:2,

          },{

            emulateJSON:true // post 需要加些参数才能把参数发送成功

          }).then(function(res){

            alert(res.data);

          },function(err){

            console.log(err)

          })

        },

        f4:function(){

          this.$http.jsonp('https://sug.so.360.cn/suggest?word=a').then(function(res){ // jsonp 走 get

            alert(res.data.s);

          },function(err){

            console.log(err);

          })

        },

        f5:function(){

          this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a',{

            jsonp:'cb' // 配置回调函数名，默认 callback

          }).then(function(res){

            alert(res.data.s);

          },function(err){

            console.log(err);

          })

        },

      }

    })

  </script>

06.百度搜索.html

  <meta charset="utf-8">

  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>

  <script src="https://cdn.bootcss.com/vue-resource/1.3.4/vue-resource.js"></script>

  <style>

    .cur{

      background: #ccc;

    }

  </style>

  <div id="box">

    <input v-focus v-model="keyword" @keyup="get_data($event)" @keyup.down="keydown_fn()" @keyup.up.prevent="keyup_fn()">

    <div>

      <ul>

        <li v-for="(item, index) in res_data" :class="{cur:cur_index == index}">{{item}}</li>

      </ul>

      <p v-show="res_data.length==0">暂无数据...</p>

    </div>

  </div>

  <script>

    var vm=new Vue({

      el:'#box',

      data:{

        keyword:'', // 用户输入的关键词

        res_data:[], // 返回的结果列表

        cur_index:-1, // 当前光标所在的结果上面

      },

      directives:{

        focus:{ // 定义局部指令 v-focus

          inserted:function(el){

            el.focus(); // 获取焦点

          }

        }

      },

      methods:{

        get_data:function(ev){

          if(ev.keyCode==38 || ev.keyCode==40) return; // 上下键则不发送请求

          if(ev.keyCode==13) open('https://www.baidu.com/s?wd='+this.res_data[this.cur_index]); // 回车搜索结果

          this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+this.keyword,{

            jsonp:'cb'

          }).then(function(res){

            this.res_data=res.data.s;

          },function(){})

        },

        keydown_fn:function(){

          if(this.cur_index == this.res_data.length) this.cur_index=-1;

          this.cur_index++;

          this.keyword=this.res_data[this.cur_index];

        },

        keyup_fn:function(){

          if(this.cur_index == -1) this.cur_index=this.res_data.length;

          this.cur_index--;

          this.keyword=this.res_data[this.cur_index];

        },

      }

    })

  </script>