父组件
<template>
<h1>{{msg}}</h1>
<button @click="handleMsg">修改信息</button>
<span>我的名字:{{user.name}}</span>
<input type="text" v-model="user.name">
<span>信息颠倒{{reMsg}}</span>
<div>
<button @click="count++">{{count}}</button>
</div>
<div>
<Child :msg="msg" @sendParents="getFn"></Child>
</div>
<div>
<p>测试循环</p>
<h6 v-for="(item,i) in oddStars" :key="i">{{item}}</h6>
</div>
</template>
<script setup>
import { ref, reactive, computed, watch, watchEffect, onMounted, onBeforeMount, onUpdated, onBeforeUpdate } from "vue";
import Child from "./components/Child.vue"
// ref用于基础数据类型,reactive用于对象,computed:计算属性,watch:监听,watchEffect:也属于监听(深度监听);on开头的生命周期
let msg = ref("helloword");
let count = ref(0);
let user = reactive({
name: "张三",
})
function handleMsg() {
console.log("asg");
msg.value = "世界"
}
let reMsg = computed(() => {
return msg.value.split("").reverse().join("")
})
//监听单个数据(基本数据类型)
// watch(count,(newValue,oldValue)=>{
// console.log("newValue",newValue);
// console.log("oldValue",oldValue);
// })
//监听计算对象(对象)
// watch(()=>user.name,(newValue,oldValue)=>{
// console.log("newValue",newValue);
// console.log("oldValue",oldValue);
// })
//监听多个属性
watch([count, () => user.name], (newValue, oldValue) => {
console.log("newValue", newValue);
console.log("oldValue", oldValue);
})
//深度监听(立即执行)
watchEffect(() => {
console.log(count.value);
})
//父子方法
function getFn(val) {
msg.value = val.msg;
}
//生命周期
onMounted(() => {
console.log("挂在之后");
})
onBeforeMount(() => {
console.log("挂载之前");
})
onUpdated(() => {
console.log("修改之后");
})
onBeforeUpdate(() => {
console.log("修改之前");
})
//for循环和if优先顺序
//循环里面进行判断的时候vue3不能再标签上做,只能用计算属性
var stars = reactive(["张三", "李四", "王二麻子"]);
var oddStars = computed(() => {
return stars.filter((item, i) => i % 2 == 0)
})
</script>
<style scoped>
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
子组件
<template>
<h1>父组件传递过来的数据:{{props.msg}}</h1>
<button @click="sentBtn">点击按钮发送</button>
</template>
<script setup>
import {defineProps,defineEmits} from "vue"
//defineProps:子接收参数,defineEmits:子接收函数
//父传子
const props= defineProps({
msg:String
})
//子传父
const emit = defineEmits(["sendParents","sentRoots"]);
function sentBtn(){
emit("sendParents",{msg:"我已发送消息"})
}
//异步同步的操作
// let result = await axios.get("http://api.cpengx.cn/finance/api");
// console.log(result);
</script>
<style scoped>
</style>