vue.js精讲02

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue.js精讲02相关的知识,希望对你有一定的参考价值。

  • 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>

以上是关于vue.js精讲02的主要内容,如果未能解决你的问题,请参考以下文章

使用带有渲染功能的 Vue.js 3 片段

Vue.js 组件精讲

vue.js精讲01

VueJs精讲全套视频教程

Vue.js 中的片段

vue.js 2 - 将单个文件组件的 html 片段提取到独立文件中