Vue基础三

事件处理

<button v-on:click="handler">事件一</button>
<button @click="handler">事件二</button>
<button @click="eventHandler">获取原生事件对象</button>
<button @click="arguHandler(5,5)">事件参数</button>
<button @click="arguEventHandler( 5,$event )">事件参数里面有事件对象</button>

修饰符

事件修饰符

 <div class="big" @click.self="bigHandler">
    <div class="middle" @click.self="middleHandler">
        <div class="small" @click.self="smallHandler">
        </div>
    </div>
</div>

.stop
.prevent
.capture
.self
.once
.passive
//修饰符可以串联
v-on:click.stop.prevent
//Vue 还对应 addEventListener 中的 passive选项提供了 .passive 修饰符

键盘修饰符

<input type="text" @keyup.enter="getInputVal">
<input type="text" @keyup.13="getInputVal">

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
使用 keyCode 特性也是允许的：
<input v-on:keyup.13="submit">

自定义事件

• 自定义事件 - node.js的events模块
• 事件的发布 $on 发布【 声明一个事件 】
• 事件的订阅 $emit 订阅【 触发一个事件 】

<!-- 自定义事件 -->
<button @click="myEvent"> 自定义事件 </button>

 methods: {
            myEvent() {
                vm.$emit('a1', 100)
            }
        }
        
        
vm.$on('a1', function(val) {
        console.log('a1' + val)
    })
        

一部分指令

• v-pre
  • 跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

 <p v-pre>
    {{ info }}
 </p>
 
 new Vue({
        el: '#app',
        data: {
            info: '666666'
        }
    })
    
    输出：{{ info }}
    

• v-cloak
  • 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

<style>
    [v-cloak] {
      display: none;
    }
  </style>
  
  
  new Vue({
    el: '#app',
    data: {
      info: 'Hello 骏哥'
    }
  })

• v-once
  • 只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

<div id="app">
    <input type="text" v-model = "num">
    <p v-once> {{ num }} </p>
  </div>
  
  
   new Vue({
    el: '#app',
    data: {
      num: 0
    }
  })

自定义指令

自定义指令有两种定义形式
1. 全局定义
2. 局部定义

 <div id="root">
        <!-- <input type="text" v-focus.stop = "info"> -->
        <input type="text" v-my-focus>
 </div>

一、全局定义

// Vue.directive( 指令名称, 指令的配置选项 )
// /*  v-focus  */
Vue.directive('focus', {
        /* 每一个选项中都有四个参数 */
        bind: function() { //当指令绑定到dom元素时触发
            console.log('bind')
        },
        inserted: function(el, b, c, d) { // 当指令绑定的dom元素插入页面时触发
            console.log("兵哥: el", el) //这个就是指令绑定的dom
            el.focus()
                // el.style.background = 'red'
            console.log("兵哥: b", b)
            if (b.modifiers.stop) {
                //true 
                el.style.background = 'green'
            } else {
                //false 
                el.style.background = 'red'
            }

            el.value = b.expression
            console.log("兵哥: c  -  vNode", c)
            console.log("兵哥: d  - oldVNode", d)
        }
    })

二、局部定义

    new Vue({
         el: '#app',
         data: {
             info: '焦点'
         },
         directives: {
             // 指令名称：选项
            'my-focus': {
                 inserted: function(el) {
                     el.focus()
                 }
             }
         }
     })

axios

前端模拟数据形式

<button @click = "getMockData"> Mock数据 </button>
<button @click = "getJsonPlaceHolder"> JsonPlaceholder </button>



methods: {
      getMockData () {
        // axios.get( url, 配置项 ).then().catch()
        axios.get('./mock/data/data.json')
          .then( res => {
            console.log( res )
          })
          .catch( err => console.log( err ))
      },
      getJsonPlaceHolder () {
        axios.get('http://jsonplaceholder.typicode.com/albums')
          .then( res => {
            console.log( res )
          })
          .catch( err => console.log( err ))
      }
     }

后端接口形式

<button @click = "register"> 后端接口 - 注册 </button>
<button @click = 'login'> 后端接口 - 登录 </button>
<button @click = "shop"> 后端接口 - shop </button>

method:{
 shop () {
        axios.get(`${ DEV_BACK_URL }/shop`,{
          params: { //get请求携带参数
            a: 1,
            b: 2
          }
        }).then( res => {
          console.log( res )
        }).catch( error => console.log( error ))
      },
      register () {
        // axios.post(url,config).then().catch()
        const p = new URLSearchParams() //得到参数携带对象
        // p.append( 参数，参数值 )
        p.append( 'username','张骏' )
        p.append( 'password','123' )
        p.append( 'name','骏哥' )
        axios({
          url: `${ DEV_BACK_URL }/register`,
          data: p,// post请求携带参数的配置项
          method: 'POST',
          withCredentials: true,
        }).then( res => console.log( res ))
          .catch( err => console.log( err ))
      },
      login () {
        axios.post(`${ DEV_BACK_URL }/login`,{
          username: '张三',
          password: '123'
        }).then( res => {
          console.log( res )
        }).catch( err => console.log( err ))
      }
}