哪里建设网站好,国内优秀网站案例,wordpress登录加验证码,网页与制作Vue入门——WebApi vue3项目搭建组合式API响应式APIreactive()ref() 生命周期钩子computed计算属性函数watch监听函数父子通信模板引用组合选项 vue3项目搭建
简单看下Vue3的优势吧 下载安装npm及node.js16.0以上版本#xff08;确保安装成功可用如下代码检查版本#xff0… Vue入门——WebApi vue3项目搭建组合式API响应式APIreactive()ref() 生命周期钩子computed计算属性函数watch监听函数父子通信模板引用组合选项 vue3项目搭建
简单看下Vue3的优势吧 下载安装npm及node.js16.0以上版本确保安装成功可用如下代码检查版本
npm -v
node -v下一步创建vue3项目输入项目名字后并进行选择插件可以直接回车全部no
npm init vuelatest然后找到项目用vsCode打开并进行初始化
npm install初始化完成后把项目跑起来可点击链接进行查看看到如下画面就完成咯
npm run dev组合式API
响应式API reactive()
接收一个普通对象然后返回该普通对象的响应式代理众所周知括号里的内容一般才是最重要的没错reactive只能封装对象类型的参数 个
script setup
//1、导入函数
import { reactive } from vue;
//2、执行函数传入一个对象类型参数用变量接收
const state reactive({count: 0 //参数是常规对象不会引起视图更新
})
//使用reactive函数包装后会变成响应式对象
const addCount () {state.count
}const state2 {count2: 0 //参数是常规对象不会引起视图更新
}
const addCount2 () {state2.count2
}
/script
templatedivbutton clickaddCount idbtn1{{ state.count }}/button !--这个按钮中的参数被reactive包裹会被视图响应--button clickaddCount2 idbtn2{{state2.count2}}/button!--这个参数没有被包裹不会响应--!--但是会累积点击在下一次点击第一个按钮时会被响应一次性累计添加--/div
/template ref()
接受一个参数值并返回一个响应式且可改变的 ref 对象。(找不同咯对没错ref()支持任何类型的参数对其进行封装)
script setup
//1、导入函数
import { ref } from vue;
//2、执行函数传入一个参数(简单类型与对象类型均可)用变量接收
const count ref(0)
const addCount () {//脚本区域修改ref产生的响应式对象必须通过.value属性修改count.value
}const person ref({name: 芋头
})
const setPerson () {person.value.name 一哑7
}
/script
templatedivbutton clickaddCount{{ count }}/button!--点击button数字添加--/divdivbutton clicksetPerson{{ 这个人是 person.name }}/button!--点击button修改人名--/div
/template 冷知识ref函数内部实现时依赖reactive函数一般使用ref更多
生命周期钩子
先来看一张图熟悉一下api
详细的生命周期API使用请参考Vue3官网API介绍 生命周期函数引入函数后执行并传入回调会自动执行回调 多次执行生命周期函数时回调会依次执行 script setup
//引入函数
import { onMounted } from vue//执行函数并传入回调
onMounted( () {console.log(执行回调)console.log(执行回调)
}) //多次执行函数时依次执行
onMounted( () {console.log(执行回调2)console.log(执行回调2)
})/scriptcomputed计算属性函数
script setup
//1、导入函数
import { ref , computed } from vue;
let list ref([1 , 2 , 3 , 4 , 5 , 6 , 7 , 8])
//2、执行函数return经过计算的值用变量接受这个值
const computedList computed(() {return list.value.filter(item item 2)
})
//计时器观察实时更新
setTimeout(() {list.value.push(-1 , 10 , 12 , 0)
} , 3000)
/script
templatediv{{原始数组是[${list}]}}/divdiv{{新数组是[${computedList}]}}/div
/template watch监听函数 监听单个数据 watch需要两个参数第一个参数是需要监听的数据第二个参数是在所需要监听的数据发生变化时所需要执行的回调函数。 script setup
//1、导入函数
import { ref , watch } from vue;
//2、设置需要监听的数据和回调函数
const count ref(0)
const setCount () {count.value
}
//3、watch监听单个数据
watch(count , () {alert(哦豁变了哦)
})
/script
templatedivbutton clicksetCount{{count}}/button/div
/template 监听多个数据 这时只需要用数组把需要监听的数据封装起来就好了 script setup
//1、导入函数
import { ref , watch } from vue;
//2、设置需要监听的数据和回调函数
const count ref(0)
const setCount () {count.value
}const name ref(芋头)
const setName () {name.value 一哑7
}
//3、watch监听多个数据用数组把需要监听的数据封装起来就好了
watch([count , name] , ([newCount , newName] , [odlCount , oldName]) {alert(哦豁变了哦 [odlCount , oldName] 变成了 [newCount , newName] )
})
/script
templatedivbutton clicksetCount{{count}}/buttonbutton clicksetName{{name}}/button/div
/template 不要忘了关于watch还有两个参数哦immediate立即执行deep深度监听 immediate 在第一次刚刚监听到的时候就先执行一次 script setup
watch(count , () {alert(变了哦) } , {immediate: true}
)
/scriptdeep 通过watch监听的ref对象默认浅层监听直接修改嵌套对象都不会出发回调函数此时便需要开启deep 没理解把下面代码复制下来删掉deep对比一下就知道咯 script setup
watch(name , () {alert(变了哦) } , {deep: true}
)
/script精确监听监听多个属性中的一个属性deep会有性能损耗建议不开启deep而是使用精确监听 只需要把watch函数的参数变成两个回调函数第一个是需要监听的东西第二个是监听到之后需要执行的回调函数 个
script setup
import { ref, watch } from vue
const state ref({name: 芋头,age: 22,sex: 男})
const chanheName () {//修改姓名state.value.name 一哑7
}
const changeAge () {//修改年龄~state.value.age 23
}
const changeSex () {//去一趟泰国state.value.sex 女
}
//精确侦听具体属性
watch(() state.value.age,() {console.log(长大一岁了哦)}
)
watch(() state.value.name,() {console.log(还顺路改了个名字)}
)
/script
templatedivdiv这个人现在的名字{{state.name}}/divdiv这个人现在的年龄{{state.age}}/div/divdivbutton clickchanheName修改姓名/buttonbutton clickchangeAge修改年领/button/div
/template父子通信 父传子在子组件中用defineProps接收父组件中绑定的数据就好了 //父亲页
templatedivI am dadTest/divdivsonTest //divdiv父传子!-- 父亲上绑定属性 --sonTest messagefather Data //div
/template
script setup
import sonTest from ./views/sonTest.vue;
/script
//儿子页
templatedivI am sonTest {{message}}/div
/template
script setup//用defineProps接收数据就好了defineProps({message: String})
/script子传父父组件通过绑定事件子组件内部通过defindEmits函数生成emit方法触发事件 defindEmits 传递参数是数组哦~因为可传递所有绑定事件 //儿子页
templatedivbutton clicksendMsg点击按钮查看来自子组件的信息/button/div
/template
script setup//利用defindEmits函数生成emit方法const emit defineEmits([giveMeMessqge])const sendMsg () {//出发绑定事件emit(giveMeMessqge , 儿子消息)}
/script//父亲页
templatedivsonTest giveMeMessqgegetMessage//div
/template
script setup
import sonTest from ./views/sonTest.vue;
const getMessage (msg) {alert(msg)
}
/script
模板引用
默认情况下script setup语法糖下组件内部的属性与方法不对父组件开放可以通过defineExpose编译宏指定哪些属性和方法允许访问
//子组件
templatedivTest 组件/div
/template
script setupimport { ref } from vue;const name ref(nameTest)const setName () {name.value newNameTest}// defineExpose({// name,// setName// })
/script//父组件
templatediv!-- 用ref标识绑定ref对象 --h1 refh1Refdom标签h1/h1sonTest refsonRef//div
/template
script setup
import sonTest from ./views/sonTest.vue;
import { ref , onMounted } from vue//调用ref函数生成ref对象当然组件也是可以的
const h1Ref ref(null)
const sonRef ref(null)//不过要注意在获取对象时要等组件挂在完毕哦可以使用
onMounted(() {alert(h1Ref.value)alert(sonRef.value)
})
/script
组合选项
顶层组件向任意底层组件传递参数和方法实现跨层组件通信顶层组件通过provide函数提供数据底层组件通过inject函数获取数据 跨层传递普通数据 跨层传递响应式数据 跨层传递方法顶层组件可以向底层组件传递方法底层组件调用方法修改顶层组件中的数据
