[GN] Vue3.2 快速上手 ---- 核心语法2

文章目录


标签的 ref 属性

  • 用在普通DOM标签上,获取的是DOM节点。
  • 用在组件标签上,获取的是组件实例对象。
  1. 用在普通DOM标签上:
js 复制代码
<template>
  <div class="person">
    <h3 ref="title">Vue</h3>
    <button @click="showLog">点我打印</button>
  </div>
</template>

<script lang="ts" setup name="Person">

  import {ref} from 'vue'
  let title = ref()

  function showLog(){
    // 通过id获取元素
    const t1 = document.getElementById('title')
    // 打印内容
    console.log(t1?.innerText) //获取的是`DOM`节点。
    // 通过ref获取元素
    console.log(title.value)
  }
</script>
  1. 用在组件标签上:
    • 父组件App使用子组件Person
    • Person组件标签上使用ref 可以获取组件实例
    • 但需要子组件代码中 使用defineExpose暴露内容
js 复制代码
<!-- 父组件App.vue -->
<template>
  <Person ref="ren"/>
  <button @click="test">测试</button>
</template>

<script lang="ts" setup name="App">
  import Person from './components/Person.vue'
  import {ref} from 'vue'

  let ren = ref()

  function test(){
    console.log(ren.value.name)
    console.log(ren.value.age)
  }
</script>


<!-- 子组件Person.vue中要使用defineExpose暴露内容 -->
<script lang="ts" setup name="Person">
  import {ref,defineExpose} from 'vue'
	// 数据
  let name = ref('张三')
  let age = ref(18)

  // 使用defineExpose将组件中的数据交给外部
  defineExpose({name,age})
</script>

props

  • App.vue是父组件,Person是子组件
  • 父组件中 使用子组件 < Person :list="persons" /> 。并给子组件传送list值
  • 父中定义了发送对象格式 子中也可定义接受格式
  • 详见下方代码

新建文件type.ts定义接口

js 复制代码
// 定义一个接口,限制每个Person对象的格式
export interface PersonInter {
	id:string,
	name:string,
	age:number
}

// 定义一个自定义类型Persons
export type Persons = Array<PersonInter>

App.vue

js 复制代码
<template>
	<Person :list="persons"/>
</template>

<script lang="ts" setup name="App">
import Person from './components/Person.vue'
import {reactive} from 'vue'
import {type Persons} from './types'  

 let persons = reactive<Persons>([ //Persons类型的数据 <>是数组
  	{id:'e98219e12',name:'张三',age:18},
    {id:'e98219e13',name:'李四',age:19},
    {id:'e98219e14',name:'王五',age:20}
  ])
</script>

Person.vue中:

js 复制代码
<template>
<div class="person">
<ul>
  <li v-for="item in list" :key="item.id">
     {{item.name}}--{{item.age}}
   </li>
 </ul>
</div>
</template>

<script lang="ts" setup name="Person">
import {defineProps} from 'vue'
import {type Persons} from '@/types'

// 第一种写法:仅接收
// const props = defineProps(['list'])

// 第二种写法:接收+限制类型
// defineProps<{list:Persons}>()

// 第三种写法:接收+限制类型+指定默认值+限制必要性
let props = withDefaults(defineProps<{list?:Persons}>(),{
  list:()=>[{id:'asdasg01',name:'小猪佩奇',age:18}]
})
console.log(props)
</script>

生命周期

Vue3的生命周期

创建阶段:setup

挂载阶段:onBeforeMountonMounted

更新阶段:onBeforeUpdateonUpdated

卸载阶段:onBeforeUnmountonUnmounted

常用的钩子:onMounted(挂载完毕)、onUpdated(更新完毕)、onBeforeUnmount(卸载之前)

自定义hook

  • hook------ 本质是一个函数,把setup函数中使用的Composition API进行了封装

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

useSum.ts中内容如下:

js 复制代码
import {ref,onMounted} from 'vue'

export default function(){
  let sum = ref(0)

  const increment = ()=>{
    sum.value += 1
  }

  //向外部暴露数据
  return {sum,increment}
}		

-useDog.ts中内容如下:

js 复制代码
import {reactive,onMounted} from 'vue'
import axios,{AxiosError} from 'axios'

export default function(){
  let dogList = reactive<string[]>([])

  // 方法
  async function getDog(){
      // 发请求
      let {data} = await axios.get('https://dog.ceo/api/breed/pembroke/images/random')
      // 维护数据
      dogList.push(data.message)
  }

  //向外部暴露数据
  return {dogList,getDog}
}

-组件中具体使用:

js 复制代码
<template>
  <h2>当前求和为:{{sum}}</h2>
  <button @click="increment">点我+1</button>
  <hr>
  <img v-for="(u,index) in dogList.urlList" :key="index" :src="(u as string)"> 
  <span v-show="dogList.isLoading">加载中......</span><br>
  <button @click="getDog">再来一只狗</button>
</template>

<script setup lang="ts">
  import useSum from './hooks/useSum' // 引入hook
  import useDog from './hooks/useDog'
	
  let {sum,increment,decrement} = useSum() //直接调用
  let {dogList,getDog} = useDog()
</script>

总结

下一篇将会更新vue3.0核心语法最后篇章 --- 路由部分!!

相关推荐
有梦想的刺儿16 分钟前
webWorker基本用法
前端·javascript·vue.js
cy玩具37 分钟前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
customer081 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
清灵xmf1 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据1 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161771 小时前
防抖函数--应用场景及示例
前端·javascript
334554322 小时前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test2 小时前
js下载excel示例demo
前端·javascript·excel
Yaml42 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事2 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro