外贸网站的特色wordpress下载页插件下载地址

当前位置： 首页 > news >正文

外贸网站的特色,wordpress下载页插件下载地址,装修品牌,镇平微网站建设1.ref函数调用的方式生成响应式数据#xff0c;可以传复杂和简单数据类型 script setup // reactive接收一个对象类型的数据 import { reactive } from vue;// ref用函数调用的方式生成响应式数据#xff0c;可以传复杂和简单数据类型 import { ref } from vue // 简…1.ref函数调用的方式生成响应式数据可以传复杂和简单数据类型 script setup // reactive接收一个对象类型的数据 import { reactive } from vue;// ref用函数调用的方式生成响应式数据可以传复杂和简单数据类型 import { ref } from vue // 简单数据类型 const count ref(0)// 复杂数据类型 const user ref({name: 小夏,age: 18 })const subCount () {count.value– }function addCount() {count.value }/scriptstyle/styletemplate!– ref –div{{ count }}/divbrbutton clicksubCount-1/buttonbutton clickaddCount1/buttondiv{{ user.name user.age }}/divbr /template2.computed计算属性依赖的数据发生变化时实时更新) script setup import { ref } from vue const list ref([1, 2, 3, 4, 5, 6])//计算属性 import { computed } from vue; const computedList computed(() {return list.value.filter(item item 2) })const addFn () {list.value.push(4) } console.log(list.value) /scriptstyle/styletemplatediv{{ computedList }}/divbutton clickaddFn添加/button /template 3.watch监视单个数据的变化相当于操作日志 script setup import { ref, watch } from vueconst num ref(1) const name ref(李四)const changeNum () {num.value } const changeName () {name.value name.value 1 }const obj ref({name:老夏,age:18 }) const changeObjName (){obj.value.name 小夏 }//监视单个数据的变化 // 1.watch默认浅层监视不会监视对象里的属性的值的改变 watch(obj,(newValue,laoValue){console.log(监视单个数据的变化)console.log(newValue,laoValue) },{// 2.深层监视可以监视对象里的属性的值的改变deep:true } )//监视多个数据的变化 watch([num,name], (newArr, oldArr) {console.log(监视多个数据的变化)console.log(新数据 newArr, 老数据 oldArr) },// 3.immediate一进页面就立即刷新一次{immediate: true,} )//监视单个对象属性的变化 watch(()obj.value.name,(newValue,oldValue){console.log(监视单个对象属性的变化)console.log(newValue,oldValue) }) /scriptstyle/styletemplatediv{{ num }}/divbutton clickchangeNum/buttondiv{{ name }}/divbutton clickchangeName改名字/buttondiv{{ obj.name }}/divbutton clickchangeObjName改对象里面属性的值/button /template 4.Props-Emits组件相互传数据 父组件 script setup import son from /components/04-son.vue import { ref } from vueconst money ref(1000) // ele就是子组件传来的属性值 const changeMoney (attributeValue) {console.log(子组件花了 attributeValue) } /scriptstyle/styletemplatediv!– carmoney里面的属性值直接传给了子组件 –!– layOut是子组件向父组件传的值 –son car车车 :moneymoney layOutchangeMoney/son/div /template 子组件 script setup //子组件 // defineProps是固定的写法,定义接收数据的属性名和属性值类型 const props defineProps({car: String,money: Number })//defineEmits([自定义一个属性名]) const emit defineEmits([layOut])// 通过emit向父组件发送数据 const buy () {emit(layOut, 100) } console.log(props.car) console.log(props.money) /script style scoped .son {width: 100px;height: 100px;border: 1px solid; } /style templatediv classson子组件/divdiv父组件给了{{ props.money }}/divbutton clickbuy花钱/button /template5.defineExpose开放属性和方法 父组件 script setup import { ref,onMounted } from vue import son05 from /components/05-son.vueconst input ref()// 生命周期钩子 onMounted 一进页面输入框就聚焦 onMounted(() {// input.value.focus() })//绑定事件聚焦 const onClick (){input.value.focus() }const getSonData ref() const putSonData (){const fatherName getSonData.value.nameconsole.log(getSonData.value.greeting())console.log(fatherName) }/scriptstyle/styletemplate input typetext refinput button clickonClick聚焦/button son05 refgetSonData/son05 button clickputSonData获取儿子组件中的数据/button /template 子组件 script setup const name 儿子的数据 const greeting () {console.log(hello儿子的数据)return 默认rturn未定义 }// setup语法糖下的组件内部的属性和方法不供外部组件访问 // 可以通过defineExpose编译宏指定哪些属性和方法允许访问 defineExpose({name,greeting })/script template/template6.provide-inject提供和注入数据 父组件 script setup import inject from /components/06-inject.vue import { provide,ref } from vue;//1.提供普通数据给其他组件 provide(commonData,这是我提供的普通数据哦)//2.提供响应数据给其他组件 const responseData ref({msg:这是我提供的响应数据哦, }) provide(responseData,responseData)//3.提供给数据调用者修改数据的权力 provide(setResponseData,(newResponseData){responseData.value.msg newResponseData }) /scriptstyle/styletemplate inject/inject /template 子组件 script setup import {inject,ref} from vue //注入数据 const getResponseData inject(responseData) const getCommonData inject(commonData)//注入修改数据的set方法 const setData inject(setResponseData) const changeData (){setData(这是调用者修改后的数据) } /script templatediv {{getResponseData.msg}}/divdiv{{getCommonData}}/divbutton clickchangeData点击按钮修改数据/button /template7.defineModel数据双向绑定 其他组件使用v-model就可以获取此属性数据 父组件 script setup import sonDefineMOdel from /components/07-defineModel.vue import { ref } from vue;// 其他组件传来的数据也可以修改 const getSonData ref() /scriptstyle/styletemplate sonDefineMOdel v-modelgetSonData/sonDefineMOdel div{{ getSonData }} /div /template 子组件 script setup import { defineModel } from vue;// 数据双向绑定 其他组件使用v-model就可以获取此属性数据 const modelValue defineModel()/script template!– input事件用于实时监控输入框的变化每次用户输入都会触发该事件。 –input typetext :valuemodelValueinpute modelValue e.target.value!– 箭头函数 e modelValue 的意思是当事件触发时将事件对象 e 作为参数传递给箭头函数并将输入框的新值即 e.target.value赋给 modelValue。 – /template8.pinia管理自己创建的store.js仓库 自己创建的仓库 // store的作用类似于Java的父类被子类继承数据和方法 import {defineStore } from pinia import {ref,computed } from vue// 声明一个store export const useStore defineStore(myStore, {state: () {const name ref(小夏)// 声明数据 statelet age ref(17)// 声明操作数据的方法 action普通函数const func () {console.log(我是方法)}const addAge () {age.value}// 声明基于数据派生的计算属性const judge computed((){if (age.value18){return 已成年}else{return 未成年}})return {name,age,func,addAge,judge}} })在组件中引入自己创建的仓库 script setup import Pinia08 from /components/08-pinia.vue // 引入自己创建的store import { useStore } from /store/myStore const getStoreData useStore() /scripttemplatediv{{ getStoreData.name }}/divPinia08/Pinia08div{{ getStoreData.func() }}/divdiv{{ getStoreData.judge}}/divbutton clickgetStoreData.addAge加年龄/button /templatestyle scoped/style