【Vue3】知识点

已于 2023-03-23 10:45:44 修改
阅读量948 收藏 1
点赞数
分类专栏： Vue3 文章标签： 前端 javascript vue.js
于 2022-09-19 09:36:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Qxn530/article/details/126895425
版权

目录

 1、使用ESlint之后，文件的name的编写

2、使用import引入图片

3、动态添加属性

4、使用ref获取dom元素

5、ref、reactive、toRefs函数的使用

6、watch监听的使用

7、父子组件通信

（1）典型的示例引用——弹窗

8、自定义hook函数

 1、使用ESlint之后，文件的name的编写

添加ESlint之后，项目组件的name必须是写成‘XXXName’的格式，也就是驼峰式命名，不能为单个单词。或者关闭eslint的组件命名规则，在.eslintrc.js中修改

module.exports = {
  rules: {
    //在rules中添加自定义规则
    //关闭组件命名规则
    "vue/multi-word-component-names": "off",
  },
};

2、使用import引入图片

在<script>标签内使用import 引入例如

import zhIcon from"@/static/zh.png";

import enIcon from"@/static/en.png";

使用setup的return抛出到template

import { reactive，toRefs } from "vue";

setup() {
  const state = reactive({f);
  return {
     ..toRefs(state),
     zhIcon,
     zhIcon,
  }
}

在template内部使用

<img :src="zhIcon”/>

或者是直接在template中直接使用，不过注意的是好像不能使用@的方式

 <img src="../../assets/imgs/daiban.png" style="width: 20px; height: 20px" />

3、动态添加属性

可以使用ts提供的interface接口进行定义

setup(props: any, context: any) {
    
    interface theObj {
      Name:string  //固定属性
      [x: string]: any //动态添加属性
    }

    const a: theObj = [
      {
        id: 1,
        Name: 'He',
        area: '11',
      },
      {
        id: 2,
        Name: 'Nan',
        area: '65',
      },
    ]

    a.forEach((i:any) => {
      i['show'] = true
    })
    console.log(a)

    return {
      a,
    }
  },

当然也可以有固定属性

 interface theObj {
      Name:string  //固定属性
      [x: string]: any //动态添加属性
    }

可选属性

 interface theObj {
      color？:string  //可选属性
    }

4、使用ref获取dom元素

获取dom要在onMounted钩子函数中 获取，或者添加一个点击事件

<template>
  <div ref="box"></div>
</template>
 
<script>
import { ref, onMounted } from "vue";
export default {
  setup() {
    const box = ref(null);
    onMounted(() => {
      console.log(box.value);
    });
    return { box };
  },
};
</script>

5、ref、reactive、toRefs函数的使用

简单数据类型使用ref

ref也可以用来定义对象（或数组）类型数据，它内部会自动通过reactive转为代理对象

<script>
import {ref} from 'vue'
export default {
  setup() {
      let num=ref(1),
      funtion addNum(){
          num.value++
          console.log(num);
      }
      return {num,addNum}
  },
};
</script>

复杂数据类型使用reactive

<template>
  <div>
    {{ obj.num}}
    <button @click="addNum">加1</button>
  </div>
</template>
 
<script>
import {reactive} from 'vue'
export default {
  setup() {
      const obj = reactive({num:1}) 
      const addNum = ()=>obj.num++
      return {obj,addNum}
  },
};
</script>

toRefs函数进行解构

定义完响应式数据后，我们每次都要在模板中 通过对象.的形式进行渲染数据，这样就太麻烦了，所以可以通过toRefs函数进行解构。 toRefs与reactive配套使用。

<template>
  <div>
    {{ num }}
    <button @click="addNum">加1</button>
  </div>
</template>
 
<script>
import {reactive,  toRefs} from 'vue'
export default {
  setup() {
      const obj = reactive({num :1}) 
      const addNum = ()=>obj.num ++
      return {...toRefs(obj),addNum}
  },
};
</script>

6、watch监听的使用

//immediate首次监听，deep深度监听

watch( 数据|数组|get函数，
      (newValue，oldValue)=>{ 回调处理逻辑 }, 
      {immediate:true|false, deep: true|false}
     )

单个简单数据类型

<script>
import {ref,watch} from 'vue'
export default {
  setup() {
      let num=ref(1),
      addNum=()=>{
          num.value++
      }
      watch(()=>{
          return num
      },(newValue)=>{
          console.log(newValue);
      })
      return {num,addNum}
  },
};
</script>

多个简单数据类型

<script>
import {ref,watch} from 'vue'
export default {
  setup() {
      let num=ref(1)
      let num2=ref(2)
    const addNum=()=>num.value++
    const addNum2=()=>num2.value++
      watch([num,num2],(newValue)=>{
          console.log(newValue);
      })
      return {num,num2,addNum,addNum2}
  },
};
</script>

复杂数据类型整体

<template>
  姓名:{{ stu.name }},公司:{{ stu.company }}
  月薪 {{ stu.money.salary }}
  <button @click="stu.company ='CSDN'">跳槽到CSDN</button>
</template>
 
<script>
import { reactive, watch } from 'vue'
export default {
  setup() {
    const stu = reactive({
      name: '小王',
      company:'JD',
      money: {
        salary: 100
      }
    })
    watch(stu, () => {
      // 数据变化之后的回调函数
      console.log('stu发生了变化')
    })
    return { stu }
  }
}
</script>

复杂数据类型中的某一个属性为简单数据类型

<script>
import { reactive, watch } from 'vue'
export default {
  setup() {
    const stu = reactive({
      name: '小王',
      company:'CSDN',
      money: {
        salary: 100
      }
    })
    watch(()=>{
        return stu.money.salary
    }, () => {
      // 数据变化之后的回调函数
      console.log('薪资发生变化了')
    })
    return { stu }
  }
}
</script>

复杂数据类型中的某多个属性为简单数据类型

<script>
import { reactive, watch } from 'vue'
export default {
  setup() {
    const stu = reactive({
      name: '小王',
      company:'CSDN',
      money: {
        salary: 100
      }
    })
    watch([()=>stu.name,()=>stu.company], (newValue,oldValue) => {
      // 数据变化之后的回调函数
      console.log(newValue,oldValue)
    })
    return { stu }
  }
}
</script>

复杂数据类型中的某一个属性为复杂数据类型，深层次的对象

<script>
import { reactive, watch } from 'vue'
export default {
  setup() {
    const stu = reactive({
      name: '小王',
      company:'JD',
      money: {
        salary: 100,
        bonus:200
      }
    })
    watch(() => {
      return stu.money
    }, () => {
      console.log('stu.money发生了变化')
    }, {
      deep: true //  只有为true，才能监听money下所有属性的变化
    })
    return {
      stu
    }
  }
}
</script>

7、父子组件通信

（1）父传子

父

<template>
  <div>
    <Son :dialog="dialog"></Son>
  </div>
</template>
 
<script>
import { ref } from 'vue';
import Son from "./son.vue";
export default {
  components: {
    Son,
  },
  setup() {
      const dialog= ref(false)
        return { dialog }
  },
};
</script>

子

<template>
  <div>
    子组件 {{dialog}}
  </div>
</template>
 
<script>
export default {
    props:{
        dialog:{
            type: Boolean,
            default: false,
        }
    },
    setup(props,context){
        console.log(props.dialog);
    }
};
</script>

（2）子传父

子

<script>
export default {
    props:{
        dialog:{
            type: Boolean,
            default: false,
        }
    },
    setup(props,context){
        context.emit('update:dialog',false)
    }
};
</script>

父

<template>
    <Son @dialog="dialog" ></Son>
</template>
 

<script>
export default {
    setup(props,context){
         const dialog= (dialog)=>console.log(dialog);
        return {dialog}
    }
};
</script>

（1）典型的示例引用——弹窗

子

<template>
  <div id="history">
    <el-dialog
      title="弹窗"
      v-model="dialogShow"
      width="65%"
      :before-close="Close"
      append-to-body
    >
      <div class="box1"></div>
    </el-dialog>
  </div>
</template>

<script lang='ts'>
/* eslint-disable */
// eslint-disable-next-line vue/no-setup-props-destructure
import { defineComponent, ref, toRefs, computed, watch, reactive } from 'vue'

export default defineComponent({
  props: {
    dialog: {
      type: Boolean,
      default: false,
    },
  },
  setup(props: any, context: any) {

    const dialogShow = computed({
      get() {
        return props.dialog
      },
      set(value) {
        context.emit('update:dialog'，false)
      },
    })

    // 关闭弹窗
    function Close() {
      context.emit('update:dialog', false)
    }

    return {
      dialogShow,
      Close,
    }
  },
})
</script>

父

<template>
  <div>
    <HistoricalDetails
      v-model:dialog="dialog"
      ref="DetailsDialog"
    ></HistoricalDetails>
  </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, computed, ref, toRefs } from 'vue'
import { useStore } from 'vuex'
import type { TabsPaneContext } from 'element-plus'
import HistoricalDetails from '@/components/Information/HistoricalDetails.vue'

export default defineComponent({
  name: 'Information',
  components: {
    HistoricalDetails,
  },
  setup(props: any, context: any) {
    const dialog = ref(false) //弹窗显示
    return {
      dialog
    }
  },
})
</script>

8、自定义hook函数

把setup函数中使用的Composition API进行了封装

新建src/hook/add.js

import {reactive,onMounted,onBeforeUnmount } from 'vue'
function savePoint(){
    let point = reactive({
        x: null,
        y: null
    })
    const savePoint = (e)=>{
         point.x = e.pageX
         point.y = e.pageY
    } 
    onMounted(()=>{
        window.addEventListener('click',savePoint)
    })
    onBeforeUnmount(()=>{
        window.removeEventListener('click',savePoint)
    })
    return point
}
export default savePoint

组件使用

<template>
  <p>当前求和为： {{sum}} </p>
  <button @click="sum++">加一</button>
  <hr>
  <h2>当前点击时候的坐标： x: {{point.x}}  y:{{point.y}}</h2>

</template>

<script>
import { ref } from 'vue'
import add from '../hooks/add '
export default {
    name: 'test8',
    setup(props,context){
        let sum = ref(0)
        let point = add ()
        return {
            sum,
            point
        }
    }
}
</script>

哇哦Q
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前台-选择城市-简历
hktkkkk的博客
06-03 106
【代码】前台-选择城市-简历。
组件封装 - Tabs组件
hmxs_hmbb的博客
01-14 3008
Tabs组件封装
vue3 中遇到的问题
weixin_41807530的博客
02-21 391
例： v-if 的值变为true 的时候。页面上 没有实时更新显示。
vue3.0 axios封装
qt的博客
09-30 1475
vue3 + ts + axios 封装请求
element-plus的el-tabs切换后，刷新浏览器状态丢失
最是人间留不住，朱颜辞镜花辞树。
11-25 1805
原因：当浏览器刷新后，v-model绑定的数据也会重置，所以选中的状态会丢失。
vue3知识点练习项目（包含所有常用的知识点）
04-29
适合于刚学vue3，对于知识点掌握不是很好的人群。可参考该项目如何使用到的知识点。 包括了Options API，Composition API的使用。 该资源直接解压导入自己的编译工具， 1.使用npm install 下载node_modules依赖包。 ...
前端-Vue3.x-知识图谱
02-19
Vue3.x是Vue.js框架的最新版本，它在性能、API设计、响应式系统等多个方面进行了重大改进，为开发者带来了更高效、更灵活的开发...通过深入理解和实践这些知识点，开发者可以更好地利用Vue3.x构建高性能的前端应用。
vue 知识点.docx
01-05
Vue.js 知识点概述 在本文中，我们将对 Vue.js 进行详细的介绍，包括其定义、特性、优点、安装环境、项目搭建、Webpack 配置等方面的知识点。 什么是 Vue.js Vue.js 是一套构建用户界面的渐进式框架。与其他重量...
Vue知识点以及面试题
11-24
Vue知识点以及面试题
vue3基础知识点快速掌握
最新发布
06-07
其核心知识点包括：响应式系统、组件化开发、生命周期钩子、指令系统、模板语法、计算属性和侦听器、Vue Router（路由管理）、Vuex（状态管理）等。Vue 3 相较于 Vue 2 带来了性能提升、更小的包体积、更好的 ...
tab组件，前一个tab项内容里点击按钮，跳转到下一个tab项
qq_52845451的博客
03-01 1347
tab组件，前一个tab项内容里点击按钮，跳转到下一个tab项
麦当劳点餐结账页面
LUOZONGW的博客
12-01 391
麦当劳收银系统页面
swift 学习笔记(6)-typealias
UncleX的专栏
11-14 436
typealias:类型别名给类型起别名// 这样就声明了一个新的数据类型 distance, 对应的是double typealias distance = Double// 给元组从新定义一个类型typealias Person = (String,Int,String) var zhangsan:Person = ("wangwu",9,"hahe") print(zhangsan)可以看
vue3实战tabs切换时添加动画效果
m0_53273062的博客
12-20 2837
js部分，需要大家新建几个组件导入。然后解析一下把，首先导入两个组件。然后定义tabs当前选中name，然后点击tabs触发事件，给定义的变量赋值。然后定义选中tabs所显示的组件，监听name的变化，然后赋值给变量。刚开始想通过给页面添加样式，来实现tabs跳转时过渡效果。但是我发现我好像不太会写。然后我知道有transition这个内置组件，来实现此效果。经过查看确实可以实现组件间的效果。此处就不贴图了，代码也不多。过渡效果大家自行设置。
【web系列十二】element plus的一些实用技巧
Nicholson的博客
07-21 6782
主要记录一下element-plus组件的一些实用技巧和注意事项，同时会提供对应的代码示例。
山东大学软件学院项目实训weblab-14
xjunjin的博客
05-26 121
前言 项目地址 本项目是为开发一套容器化的开发、运行、测试环境，用以支持Web开发、程序设计等课程的实验教学。 学生项目管理 获取已有项目 const handleProjectTabClick = (pane: TabsPaneContext, ev: Event) => { if (pane.paneName == '3' && projectData.value.length == 0) { request('/weblab/project/getProjectLis
element-plus中tabs切换
wuxingwuyou的博客
10-24 1089
tabs切换+父子组件传值监听并重新调用接口
手写一个富文本编辑器
Formattor的博客
09-28 1013
简易的富文本编辑器
Element UI之el-tabs的样式修改字体颜色、下划线、选中/未选中
蒾酒的博客
12-24 8398
注意事项：一定要在 不然修改的样式不会覆盖生效。
vue3知识点整理汇总
10-16
好的，以下是我整理的 Vue3 的知识点汇总： 1. Composition API：Vue3 中引入了 Composition API，它是一种基于函数的 API，可以让我们更灵活地组织组件逻辑。 2. Teleport：Vue3 中新增了 Teleport 组件，可以让...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值