郑州做网站第一人,个人定制网站,wordpress用户名忘记,个人网站名可以和别人一样吗Vue3 create-vue搭建Vue3项目 注意要使用nodejs16.0版本以上#xff0c;windows升级node可以西安使用where node查看本地node位置#xff0c;然后到官网下载msi文件#xff0c;在本地路径下安装即可 安装完可以使用node -v检查版本信息
项目目录和关键文件 组合式API - s…Vue3 create-vue搭建Vue3项目 注意要使用nodejs16.0版本以上windows升级node可以西安使用where node查看本地node位置然后到官网下载msi文件在本地路径下安装即可 安装完可以使用node -v检查版本信息
项目目录和关键文件 组合式API - setup选项 script
// setup函数
// 1. 执行时机比beforeCreate还要早
// 2. setup函数中获取不到thisthis是undefined
export default{setup(){// console.log(setup函数,this);},beforeCreate(){console.log(beforeCreate函数);}
}
/scripttemplatediv学习Vue3/div
/templatescript
// setup函数
// 1. 执行时机比beforeCreate还要早
// 2. setup函数中获取不到thisthis是undefined
// 3. 数据和函数需要在setup最后return才能在模板中应用
export default{setup(){// console.log(setup函数,this);// 数据const message hello Vue3// 函数const logMessage () {console.log(message)}return {message,logMessage}},beforeCreate(){console.log(beforeCreate函数);}
}
/scripttemplatediv{{ message }}/divbutton clicklogMessage按钮/button
/template!-- script
// setup函数
// 1. 执行时机比beforeCreate还要早
// 2. setup函数中获取不到thisthis是undefined
// 3. 数据和函数需要在setup最后return才能在模板中应用
export default{setup(){// console.log(setup函数,this);// 数据const message hello Vue3// 函数const logMessage () {console.log(message)}return {message,logMessage}},beforeCreate(){console.log(beforeCreate函数);}
}
/script --script setup
const message hello Vue3
const logMessage(){console.log(message)
}
/scripttemplatediv{{ message }}/divbutton clicklogMessage按钮/button
/template组合式API - reactive和ref函数
reactive() script setup
// reactive语法接受对象类型数据的参数传入并返回一个响应式的对象
import { reactive } from vue;
const state reactive({count:100
})
const setCount(){state.count
}
/scripttemplatedivdiv{{ state.count }}/divbutton clicksetCount1/button/div
/templateref() script setup
// reactive语法接受对象类型数据的参数传入并返回一个响应式的对象
// import { reactive } from vue;
// const state reactive({
// count:100
// })
// const setCount(){
// state.count
// }// 如果是简单类型怎么办
// 脚本中访问数据需要通过value
// 在template中.value不需要加
import { ref } from vue
const count ref(0)
const setCount(){count.value
}
/scripttemplatedivdiv{{ count }}/divbutton clicksetCount1/button/div
/template日后编码统一使用ref()
组合式API - computed script setup
// const 计算属性 computed(() {return计算返回的结果})import { computed, ref } from vue;
// 声明数据
const list ref([1, 2, 3, 4, 5, 6, 7, 8]);// 基于list派生一个计算属性从list中过滤出大于2
const computedList computed(() {return list.value.filter((item) item 2);
});// 定义一个修改数组的方法
const addFn(){list.value.push(666)
}
/scripttemplatediv原始数据{{ list }}/divdiv计算后的数据{{ computedList }}/divbutton clickaddFn typebutton修改/button
/template 组合式API - watch 基础使用 - 侦听单个数据 基础使用 - 侦听多个数据 script setup
import {ref,watch} from vue
const count ref(0)
const nickname ref(张三)const changeCount(){count.value
}
const changeName(){nickname.value 里四
}// 1.监视单个数据的变化
// watch(ref对象,(newValue,oldValue){...})
watch(count,(newValue,oldValue){console.log(newValue,oldValue)
})
// 2.监视多个数据的变化
// watch([ref对象1,ref对象2],(newArr,oldArr){...})
watch([count,nickname],(newArr,oldArr){console.log(newArr,oldArr)
})
/scripttemplatediv{{ count }}/divbutton clickchangeCount改数字/buttondiv{{ nickname }}/divbutton clickchangeName改昵称/button
/templateimmediate deep script setup
import {ref,watch} from vue
const count ref(0)
const nickname ref(张三)const changeCount(){count.value
}
const changeName(){nickname.value 里四
}// 1.监视单个数据的变化
// watch(ref对象,(newValue,oldValue){...})
// watch(count,(newValue,oldValue){
// console.log(newValue,oldValue)
// })// 2.监视多个数据的变化
// watch([ref对象1,ref对象2],(newArr,oldArr){...})
// watch([count,nickname],(newArr,oldArr){
// console.log(newArr,oldArr)
// })// 3.immediate立即执行
// watch(count,(newValue,oldValue){
// console.log(newValue,oldValue)
// },{
// immediate:true
// })// 4.deep深度监视:默认watch进行的是浅层监视
const useInfo ref({name:张三,age:18
})
const setUserInfo(){// 修改了useInfo.value 修改了对象的地址,才能监视到// useInfo.value {name : ls,age:50}useInfo.value.age
}
watch(useInfo,(newValue){console.log(newValue)
},{deep:true
})
/scripttemplatediv{{ count }}/divbutton clickchangeCount改数字/buttondiv{{ nickname }}/divbutton clickchangeName改昵称/buttondiv{{ useInfo }}/divbutton clicksetUserInfo修改userInfo/button
/template精确侦听对象的某个属性 script setup
import {ref,watch} from vue
const count ref(0)
const nickname ref(张三)const changeCount(){count.value
}
const changeName(){nickname.value 里四
}// 1.监视单个数据的变化
// watch(ref对象,(newValue,oldValue){...})
// watch(count,(newValue,oldValue){
// console.log(newValue,oldValue)
// })// 2.监视多个数据的变化
// watch([ref对象1,ref对象2],(newArr,oldArr){...})
// watch([count,nickname],(newArr,oldArr){
// console.log(newArr,oldArr)
// })// 3.immediate立即执行
// watch(count,(newValue,oldValue){
// console.log(newValue,oldValue)
// },{
// immediate:true
// })// 4.deep深度监视:默认watch进行的是浅层监视
const useInfo ref({name:张三,age:18
})
const setUserInfo(){// 修改了useInfo.value 修改了对象的地址,才能监视到// useInfo.value {name : ls,age:50}useInfo.value.age
}// 4. deep深度监视
// watch(useInfo,(newValue){
// console.log(newValue)
// },{
// deep:true
// })// 5. 对于对象中的属性,进行监视
watch(()useInfo.value.age,(newValue,oldValue){console.log(newValue,oldValue)
})
/scripttemplatediv{{ count }}/divbutton clickchangeCount改数字/buttondiv{{ nickname }}/divbutton clickchangeName改昵称/buttondiv{{ useInfo }}/divbutton clicksetUserInfo修改userInfo/button
/template组合式API - 生命周期函数 生命周期函数基本使用 执行多次 script setupimport { onMounted } from vue;
// beforeCreated 和 created 的相关代码放在 setup 中执行
const getList () {setTimeout((){console.log(发送请求,获取数据)},2000)
}// 已进入页面的请求
getList()// 如果有写代码需要在mounted生命周期中执行
onMounted((){console.log(mounted生命周期函数)
})
// 可调用多次,不会冲突,按照顺序依次执行
onMounted((){console.log(mounted生命周期函数1)
})
/scripttemplatediv/div
/template 组合式API - 父子通信
组合式API下的父传子 script setup
// 注意:由于写了setup,所以无法直接配置props
// 此处要借助于编译器宏函数接收
const props defineProps({car:String,money:Number
})
console.log(props.car)
console.log(props.money)
/scripttemplatediv classson我是子组件 - {{ car }}/div
/templatestyle scoped
.son {border: 1px solid #000;padding: 30px;
}/stylescript setup
import SonCom from /components/son-com.vue
import {ref} from vue
// 局部组件导入进来就能用
const money ref(100)
const getMoney () {money.value10
}
/scripttemplatedivh1父组件 - {{ money }}button clickgetMoney挣钱/button/h1!-- 给子组件,以添加属性的方式传值 --SonCom car宝马车 :moneymoney/SonCom/div
/template 组合式API下的子传父 组合式API - 模版引用 如何使用以获取dom为例 组件同理 defineExpose() 组合式API - provide和inject 跨层传递普通数据 跨层传递响应式数据 跨层传递方法 script setup
import CenterCom from /components/center-com.vue;
import { provide, ref } from vue;// 1.跨层传递普通数据
provide(theme-color, pink);// 2.跨层传递响应式数据
const count ref(100);
provide(count, count);setTimeout(() {count.value 500;
}, 2000);// 3.跨层级传递函数,给子孙后代传递可以修改数据的方法
provide(changeCount, (newCount) {count.value newCount;
});
/scripttemplatedivh1顶层组件/h1CenterCom/CenterCom/div
/template
script setup
import BottomCom from ./bottom-com.vue/scripttemplatedivh2中间组件/h2BottomCom/BottomCom/div
/template
script setup
import {inject} from vue
const themeColor inject(theme-color)
const count inject(count)
const changeCount inject(changeCount)
const clickFn(){changeCount(1000)
}
/scripttemplatedivh3底层组件 - {{ themeColor }} - {{ count }}/h3button clickclickFn更新count/button/div
/template Vue3.3新特性-defineOptions Vue3.3新特性-defineModel
