79、自定义hook、事件修饰符、按键事件、axios补充、uni-app、开源前端项目今日内容概要自定义hook 事

自定义hook

1.什么是hook？
	本质是一个函数，把setup函数中使用的Composition API进行了封装。
	类似于vue2.x中的mixin。

2.自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。

打点功能

<template>
  <h2>点击的x坐标：{{ point.x }},y坐标：{{ point.y }}</h2>

</template>

<script>

import {reactive} from 'vue'
import {onMounted, onBeforeUnmount} from 'vue'

export default {
  name: 'Point',
  setup() {
    const point = reactive({
      x: 0,
      y: 0
    })

    function getPoint(event) {
      console.log(event.pageX)
      console.log(event.pageY)
      point.x = event.pageX
      point.y = event.pageY
    }

    // 挂在完成开始执行
    onMounted(() => {
      window.addEventListener('click', getPoint)
    })
    // 接除挂载时执行
    onBeforeUnmount(() => {
      console.log('sss')
      window.removeEventListener('click', getPoint)
    })
    return {point}
  },
}
</script>

<template>
  <div>
    <button @click="isShow=!isShow">点我显示隐藏</button>
    <Point v-if="isShow"></Point>

  </div>

</template>

<script>
import {ref, reactive} from 'vue'
import Point from "./components/Point.vue";
import Demo from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {Demo, Point},
  setup() {
    const isShow = ref(true)
    return {isShow}
  },
}
</script>

使用hook实现打点

uesPoint.js

import {onBeforeUnmount, onMounted, reactive} from "vue";

export default function () {
    let point = reactive({
        x: 0,
        y: 0
    })
    function getPoint(event) {
        console.log(event.pageX)
        console.log(event.pageY)
        point.x = event.pageX
        point.y = event.pageY
    }
    // 挂在完成开始执行
    onMounted(() => {
        window.addEventListener('click', getPoint)
    })
    // 接除挂载时执行
    onBeforeUnmount(() => {
        console.log('sss')
        window.removeEventListener('click', getPoint)
    })
    return point
}

Point.vue

<template>
  <h2>点击的x坐标：{{ point.x }},y坐标：{{ point.y }}</h2>

</template>

<script>

import usePoint from '../hooks/usePoint.js'
export default {
  name: 'Point',
  setup() {
    let point = usePoint()
    console.log(point)
    return {point}
  },
}
</script>

事件修饰符

事件修饰符	释义
.stop	只处理自己的事件，不再把事件冒泡给父标签（阻止事件冒泡),在知标签身上自己加
.self	只处理自己的事件，子控件冒泡的事件不处理
.prevent	阻止a链接的跳转
.once	事件只会触发一次（适用于抽奖页面）

ps：使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生
    1.用 v-on:click.prevent.self 会阻止所有的点击
    2.而 v-on:click.self.prevent 只会阻止对元素自身的点击

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件修饰符</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
<!--    <ul @click="handleUl">-->
    <ul @click.self="handleUl">
<!--        <li v-for="data in dataList" @click="handleLi">{{data}}</li>-->
        <li v-for="data in dataList" @click.stop="handleLi">{{data}}</li>
        <li><a href="http://www.baidu.com">不拦截</a></li>
        <li><a href="http://www.baidu.com" @click="handleLink($event)">点击拦截</a></li>
        <li><a href="https://www.baidu.com" @click.prevent="handleLink">点击拦截</a></li>
        <li><button @click.once="test">只执行一次</button></li>
    </ul>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            dataList: ['1','22','333','4444']
        },
        methods: {
            handleUl(ev){
                console.log('ul被点击了')
            },
            handleLi(){
                console.log('li被点击了')
                ev.stopPropagation()    // 点击事件停止 冒泡（向父组件传递时间）
            },
            handleLink(ev){
                ev.preventDefault()
            },
            test(){
                alert('只触发1次')
            }
        }
    })
</script>
</html>

按键事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按键修饰符</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
    <!--    <input type="text" v-model="myInput" @keyup="handleKey">-->
    <!--    <input type="text" v-model="myInput" @keyup.13="handleKey">-->
    <input type="text" @keyup="handleKey1">
    <input type="text" @keyup.enter="handleKey2">
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            dataList: ['1', '22', '333', '4444']
        },
        methods: {
            handleKey1(ev) {
                console.log('按下了' + ev)
                // if (ev.keyCode==13){
                //     console.log('回车键被按下了')
                // }
            },
            handleKey2(ev) {
                console.log('按下了回车键')
            }
        }
    })
</script>
</html>

axios补充

1.axios.get('请求地址',{name:lqz,age:19},{headers:{请求头}}).then(res=>{
        res.data  响应体内容  {code:xx,msg:xx,result:{data:{}}}
        res.data.result.data
    })
2.axios.post('请求地址',{name:lqz,age:19},{headers:{请求头}})

uni-app

1.网址：https://uniapp.dcloud.net.cn/tutorial/app-useragent.html

2.快速上手：
	1.HBuilderX：官方IDE下载地址https://www.dcloud.io/hbuilderx.html

开源前端项目

1.网址：https://search.gitee.com/?q=uni-app&type=repository&pageno=2