做网站的没有进项票怎么办,张家口市一建公司官网,电商网站创建的几个阶段,asp网站授权码如何做Vue 3 的优势
更容易维护#xff08;组合式API#xff09;更快的速度更小的体积更优的数据响应
创建 Vue 3 项目
前提环境条件#xff1a;已安装 16.0 或更高版本的 Node.js
node -v创建一个 Vue 应用#xff08;下面的指令将会安装并执行 create-vue #xff09;
np…Vue 3 的优势
更容易维护组合式API更快的速度更小的体积更优的数据响应
创建 Vue 3 项目
前提环境条件已安装 16.0 或更高版本的 Node.js
node -v创建一个 Vue 应用下面的指令将会安装并执行 create-vue
npm init vuelatestsetup
组合式API - setup选项
setup 函数在什么时候执行
script
export default {setup() {console.log(setup函数比八大钩子中最早执行的beforeCreate函数还要早一点)},beforeCreate() {console.log(我是beforeCreate函数)}
}
/scriptsetup 函数的原始复杂写法
script
export default {// 在 setup 的最后加上 return才能使用 数据 和 函数setup() {// 数据const message hello world// 函数const logMessage () {console.log(message)}return {message,logMessage}}
}
/scriptsetup 函数的语法糖写法
script setup
// 数据
const message hello world
// 函数
const logMessage () {console.log(message)
}
/scripttemplatediv{{ message }}/divbutton clicklogMessage点我/button
/templatestyle
/stylereactive
接收一个对象类型的数据返回一个响应式的对象
script setup
// reactive接收一个对象类型的数据返回一个响应式的对象
import { reactive } from vue// 对象类型
const state reactive({count: 100
})// 进行 1 的函数
const setCount () {state.count
}
/scripttemplatediv{{ state.count }}/divbutton clicksetCount1/button
/templateref
接收简单类型或者对象类型的数据传入并返回一个响应式的对象推荐统一使用 ref
script setup
// ref接收简单类型或者对象类型的数据传入并返回一个响应式的对象
import { ref } from vue// 简单类型 或者 复杂数据类型
const count ref(100)// 注意
// 1. 在脚本中访问数据需要通过 .value 的形式
// 2. 在template中.value不需要加
const setCount () {count.value
}console.log(count.value)/scripttemplatediv{{ count }}/divbutton clicksetCount1/button
/templatestyle
/stylecomputed
计算属性函数
script setup
// const 计算属性 computed(() {
// return 计算返回结果
// })import { computed, ref } from vue;// 声明数据
const list ref([1, 2, 3, 4, 5, 6, 7, 8, 9])
console.log(list.value) // 打印list的值// 过滤 5 的数据
const computedList computed(() {return list.value.filter(item item 5)
})/scripttemplatedivdiv原始数据{{ list }}/divdiv计算后的数据{{ computedList }}/div/div
/templatewatch
作用监听一个或者多个数据的变化数据变化时执行回调函数
script setup
import { ref, watch } from vue;
const count ref(0)
const nickname ref(张三)const changeCount () {count.value
}const changeNickname () {nickname.value 哈
}// 1. 监视单个数据的变化
// watch(ref对象, (newValue, oldValue) {...})// 2. 监视多个数据的变化
// watch([ref对象1, ref对象2], (newArr, oldArr) {...})/scripttemplatediv{{ count }}/divbutton改数字/buttondiv{{ nickname }}/divbutton改昵称/button
/templateimmediate
script setup
import { ref, watch } from vue;
const count ref(0)
const nickname ref(张三)const changeCount () {count.value
}const changeNickname () {nickname.value 哈
}// immediate 一进入页面就立即执行
watch(count, (newValue, oldValue) {console.log(newValue, oldValue)
}, { immediate: true })/scripttemplatediv{{ count }}/divbutton改数字/buttondiv{{ nickname }}/divbutton改昵称/button
/templatedeep
集体式的深度监视只要有一个变化了就会执行函数
script setup
import { ref, watch } from vue;
const count ref(0)
const nickname ref(张三)const changeCount () {count.value
}const changeNickname () {nickname.value 哈
}// deep 深度监视默认 watch 进行的是浅层监视
// const ref1 ref(简单类型) 可以直接监视
// const ref2 ref(复杂类型) 监视不到复杂类型内部数据的变化
watch(count, (newValue, oldValue) {console.log(newValue, oldValue)
}, {immediate: true,deep: true
})/scripttemplatediv{{ count }}/divbutton改数字/buttondiv{{ nickname }}/divbutton改昵称/button
/template精确的为某一个元素对象进行深度监视它变化了才会触发函数
script setup
import { ref, watch } from vue;
const userInfo ref({name: zs,age: 18
})const setUserInfo () {userInfo.value.age
}// 深度监视之精准定位
watch(() { userInfo.value.age }, (newValue, oldValue) {console.log(newValue, oldValue)
})/scripttemplatediv{{ userInfo.age }}/divbutton clicksetUserInfo改年龄/button
/template生命周期
选项式API组合式APIbeforeCreate/createdsetupbeforeMountonBeforeMountmountonMountedbeforeUpdateonBeforeUpdateupdatedonUpdatedbeforeUnmountonBeforeUnmountunmountedonUnmounted
script setup
import { onMounted } from vue;// beforeCreate 和 created 的相关代码一律放在 setup 中
const getList () {console.log(发送请求成功)
}
getList()// 如果有些代码需要在 mounted 生命周期中执行就调用对应函数
onMounted(() { console.log(mounted生命周期函数 - 逻辑1) })// 可以使用多次 mounted并不会冲突它会按顺序执行
onMounted(() { console.log(mounted生命周期函数 - 逻辑2) })
/scripttemplatediv/div
/templatestyle
/style父子数据传递
父级内容
script setup// 父传子
// 1. 给子组件添加属性的方式传值
// 2. 在子组件通过props接收import { ref } from vue;
import SonCom from /components/son-com.vue // 局部组件(导入进来就能用)const money ref(100)
const makeMoney () {money.value
}
const reduce () {money.value--
}
/scripttemplatedivh3这是父组件的地盘/h3hrSonCom info父组件的余额: :nummoney reduceMoneyreduce/SonComhrh3还是父组件的地盘/h3div当前余额: {{ money }}/divbutton clickmakeMoney点击赚钱/button/div
/templatestyle
/style子级内容
script setup// 注意由于写了 setup所以无法直接配置 props 选项
// 所以此处需要借助于编译器宏函数接收子组件传递的数据const props defineProps({info: String,num: Number
})console.log(props.info)
console.log(props.num)const emit defineEmits([reduceMoney])
const payment () {emit(reduceMoney, 5) // 通过emit触发父组件SonCom标签的reduceMoney属性
}
/scripttemplatediv我是子组件/divdiv{{ info }}{{ num }}/div !-- 对于props传递过来的数据模板中可以直接使用 --button clickpayment点击消费/button
/templatestyle
/style模板引用
父级内容
script setupimport TestCom from /components/test-com.vue;
import { onMounted, ref } from vue;// 模板引用 (可以用来获取dom元素也可以用来获取组件)
// 1. 调用ref函数生成一个对象
const inp ref(null)// 3. 在加载渲染完DOM后才能访问到绑定的元素
// 这时候我们需要使用到 生命周期钩子函数onMounted
onMounted(() {console.log(inp.value) // 输出绑定的元素内容 input typetextinp.value.focus() // 实现:进入页面立即聚焦输入框
})// 4. 使用同样的方法获取组件
const testRef ref(null)// 6. 渲染结束后当用户点击按钮将触发下面获取组件的函数
const getCom () {console.log(testRef.value) // 输出该组件对象console.log(testRef.value.num) // 输出该组件对象中的一些数据console.log(testRef.value.sayHi()) // 输出该组件对象中的一些数据}
/scripttemplatediv!-- 2. 通过ref属性进行标识完成绑定 --input refinp typetextbutton点击让输入框聚焦/button/div!-- 5. 通过ref属性进行标识完成绑定 --TestCom reftestRef/TestCombutton clickgetCom点击获取组件/button
/template子级内容
script setupconst num 999
const sayHi () { console.log(hi) }// 上面定义的数据或方法在 script setup 语法糖下只能在内部自己使用
// 它不会开放给父组件访问
// 为了解决这种默认的限制我们可以通过 defineExpose 编译宏指定哪些属性和方法允许父组件访问
defineExpose({num,sayHi
})/scripttemplatediv我是用于测试的文本当前数量: {{ num }}/div
/template跨层传递普通数据
基本介绍
顶层组件通过 provide 函数提供数据
provide(key, 顶层组件中的数据)底层组件通过 inject 函数获取数据
const message inject(key)具体演示
顶层组件
script setup
import CenterCom from /components/center.vue
import { provide, ref } from vue// 1. 跨层级传递普通数据
provide(theme-color, That is pink)// 2. 跨层级传递响应式数据
const money ref(999)
provide(userMoney, money)// 3. 跨层级传递函数
const earning () { money.value }
provide(earningFn, earning)
/scripttemplatedivh3我是顶层组件/h3CenterCom/CenterCom/div
/template中间层中间
script setup
import BottomCom from /components/bottom.vue
/scripttemplatedivh3我是中间层组件/h3BottomCom/BottomCom/div
/template底层组件
script setup
import { inject } from vue;// 接收顶层组件传递过来的数据
const themeColor inject(theme-color)
const money inject(userMoney)
const earning inject(earningFn)
/scripttemplatedivh3我是底层组件/h3div颜色{{ themeColor }}/divdiv余额{{ money }}/divbutton clickearning点我赚钱/button/div
/templateVue3.3 新特性
defineOptions
在 Vue3.3 中引入了 defineOption 宏。
顾名思义主要是用来定义 Options API 的选项。
可以用 defineOptions 定义任意的选项propsemitexposeslots除外
因为这些可以使用 definePropsdefineEmit、defineXXX来做到script setup// 1. defineOptions 里面的代码与 setup 平级
defineOptions({name: LoginIndex,// ... 这里写更多自定义属性
})// 2. 这里写其他需要写在 setup 里面的代码
// ...
/scripttemplateh3Hello World/h3
/templatedefineModel
原版的操作
父级组件
script setup
import MyInput from /components//temp.vue
import { ref } from vue;
const txt ref(123456)
/scripttemplatedivMyInput v-modeltxt/MyInput{{ txt }}/div
/template子级组件
script setup
defineProps({modelValue: String
})
const emit defineEmits([update:modelValue])/scripttemplateinput typetext :valuemodelValue inpute emit(update:modelValue, e.target.value)
/template使用 defineModel
修改 vite.config.js 配置文件在 vue( ) 括号里面加上{ script:{ defineModel: true } }具体如下所示
vue({script: {defineModel: true}}),重启服务具体使用方法如下所示
script setup
import MyInput from /components//temp.vue
import { ref } from vue;
const txt ref(123456)
/scripttemplatedivMyInput v-modeltxt/MyInput{{ txt }}/div
/templatescript setup
import { defineModel } from vue;
const modelValue defineModel()/scripttemplateinput typetext :valuemodelValue inpute modelValue e.target.value
/templatePinia
概念简述
Pinia 是 Vue 的最新状态管理工具是 Vuex 的替代品
回顾 Vuex 涉及哪些概念statemutaionsactionsgettersmodulesPinia 涉及的概念stateactionsgetters注意在实际开发项目的时候关于Pinia的配置可以在项目创建时自动添加而手动添加的方式如下
安装 Pinia 包 npm install pinia 或 npm i pinia配置 Pinia
import { createApp } from vue
import { createPinia } from pinia // 导入 Pinia 包
import App from ./App.vueconst pinia createPinia() // 创建 Pinia 实例
const app createApp(App) // 创建根实例
app.use(pinia) // pinia 插件的安装配置
app.mount(#app) // 视图的挂载基本使用(store)
在 src 文件夹下创建一个 store 文件夹在 store 里面新建一个 js 文件这里演示为 counter.js
import { defineStore } from pinia
import { computed, ref } from vue// 定义store
// defineStore(仓库的唯一标识() { ... })export const useCounterStore defineStore(counter, () {// 声明数据 stateconst count ref(999)// 声明操作数据的方法 actionconst addCount () count.valueconst reduceCount () count.value--// 声明基于数据派生的计算属性 gettersconst double computed(() count.value * 2)// 与上面类似const msg ref(hello pinia)const changeMsg () { msg.value _plus }// 返回要被访问的数据return {count,double,addCount,reduceCount,msg,changeMsg}
})src/App.vue
script setup
import Son1Com from /components/Son1Com.vue;
import Son2Com from /components/Son2Com.vue;import { useCounterStore } from /store/counter.js
const counterStore useCounterStore()/scripttemplatedivh1我是App.vue根组件 - {{ counterStore.count }} - {{ counterStore.double }}/h1button clickcounterStore.changeMsg改变/button{{ counterStore.msg }}hrSon1Com/Son1ComSon2Com/Son2Com/div
/templatesrc/components/Son1Com.vue
script setup
import { useCounterStore } from /store/counter.js
const counterStore useCounterStore()
/scripttemplatedivh3我是Son1Com子组件 - {{ counterStore.count }} button clickcounterStore.addCount/button/h3/div
/templatesrc/components/Son2Com.vue
script setup
import { useCounterStore } from /store/counter.js
const counterStore useCounterStore()
/scripttemplatedivh3我是Son2Com子组件 - {{ counterStore.count }} button clickcounterStore.reduceCount-/button/h3/div
/template异步实现(action)
src/store/channel.js
import { defineStore } from pinia
import { ref } from vue;
import axios from axiosexport const useChannelStore defineStore(channel, () {const channelList ref([])const getList async () {const res await axios.get(http://geek.itheima.net/v1_0/channels)// 解构: 在返回的信息中找到真正需要的数据const { data: { data: { channels } } } reschannelList.value channels}return {channelList,getList}
})src/App.vue
script setupimport { useChannelStore } from /store/channel.js
const channelStore useChannelStore()/scripttemplatedivbutton clickchannelStore.getList获取数据频道/buttonulli v-foritem in channelStore.channelList :keyitem.id{{ item.name }}/li/ul/div
/template持久化存储插件
官方文档https://prazdevs.github.io/pinia-plugin-persistedstate/zh/guide/
AI 插件
Github Copilot 插件安装步骤
登录 GitHub试用 Copilot打开 VScode搜索并安装插件 Copilot
Github Copilot 插件使用说明
删除键表示不接受本次 AI 的智能生成代码Tab键表示接收本次 AI 的智能生成代码Ctrl Enter查看更多方法
