建网站要会什么,wordpress主题修改不了,重庆百度推广优化,燕郊网站制作多少钱简介
https://cn.vuejs.org/guide/introduction.html
创建vue3工程
【基于 vue-cli创建】
基本和vue-cli的过程类似#xff0c;只是选择的时候用vue3创建
【基于vite创建】【推荐】
【官网】https://vitejs.cn/ 【可以先去学一下webpack】
步骤 【https://cn.vitejs.…简介
https://cn.vuejs.org/guide/introduction.html
创建vue3工程
【基于 vue-cli创建】
基本和vue-cli的过程类似只是选择的时候用vue3创建
【基于vite创建】【推荐】
【官网】https://vitejs.cn/ 【可以先去学一下webpack】
步骤 【https://cn.vitejs.dev/guide/】 npm create vuelatest pnpm create vue 你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如要构建一个 Vite Vue 项目运行: bash
# npm 7, extra double-dash is needed:
npm create vitelatest my-vue-app -- --template vue# yarn
yarn create vite my-vue-app --template vue# pnpm
pnpm create vite my-vue-app --template vue# bun
bun create vite my-vue-app --template vue查看 create-vite 以获取每个模板的更多细节vanillavanilla-ts, vue, vue-tsreactreact-tsreact-swcreact-swc-tspreactpreact-tslitlit-tssveltesvelte-tssolidsolid-tsqwikqwik-ts。
命令行创建 小结 VUE3核心语法
【optionsAPI】和【compositionAPI】-【vue2】和【vue3】 拉开序幕的【setup】 新的配置项setup语法糖出现时机在beforecreated之前setup的返回值也是一个渲染函数
【面试题】setup和vue2中的data、method有什么区别
可以同时存在setup执行的比data的早data可以拿到setup中的值但是反过来拿不到
Setup语法糖
之前的写法 缺点是每次都要返回数据和方法 语法糖写法 不需要返回setup自动给你返回只关注数据和方法 因为最新的语法糖省去了name,则利用插件npm i vite-plugin-vue-setup-extend -D来命名 一般其实和文件名一样可以不写
ref_可以实现【基本类型】响应式数据 【让数据动起来】
vue2-都放在data中就是响应式了 vue3-ref 和 reative 此ref不是vue2中的ref
什么时候需要value和什么时候不需要value是需要注意的点模块中不需要。JS中操作需要
作用
reactive_创建【对象类型】【只能定义】响应式数据 ref_可以实现【对象类型】响应式数据 【让数据动起来】 需要注意的是
使用ref的时候必须加上.value去拿到值ref的实现也是基于reactive实现的底层逻辑ref既可以定义基本类型也可以对象类型
【ref对比reactive】 可以用volar插件【目前是官方vue插件】自动添加.value
在设置中进行设置-勾上即可
toRefs 和 toRef templateh1hello/h1h1姓名{{ name }}/h1h1年龄{{ age}}/h1button clickchangeName修改名字/buttonbutton clickchangeAge修改年龄/button/templatescript setup langtsimport { reactive,toRefs } from vue;let person reactive({name: John,age:22})// toRefs 就是将reactive中的数据都取出来 数据还是具备响应式let {name, age} toRefs(person)const changeName () {name.value lisi}const changeAge () {age.value 1}
/scriptstyle/stylecomputed属性【是有缓存的】 template姓input typetext v-modelnamesbr名input typetext v-modelmingbr姓名: h1{{fullname}}/h1button clickchangeFullname修改全名/button
/templatescript setup langts
import { ref ,computed} from vue;let names ref(张三)
let ming ref(ming)// 只读的不可修改的
// let fullname computed((){
// return names.value ming.value.slice(0,1).toUpperCase() ming.value.slice(1)
// })
// 这样可读可写
let fullname computed({get(){return names.value ming.value.slice(0,1).toUpperCase() ming.value.slice(1)},set(vals){const x vals.split(-)names.value x[0]ming.value x[1]console.log(x);},
})
let changeFullname (){console.log(fullname.value);fullname.value li-si}
/scriptstyle/stylewatch监视数据的变化 情况一【常用】 templatediv classpersonh1情况一/h1h1sum{{ sum }}/h1button clickchangeName点我sum1/button/div
/templatescript setup langts
import {ref,watch} from vue
let sum ref(100)let changeName (){sum.value 100
}
const stopWatch watch(sum,(newValue,oldValue){console.log(newValue,oldValue);if(newValue1000){stopWatch()}
})
/scriptstyle/style情况二 templatediv classpersonh1姓名{{person.name }}/h1h2年龄{{person.age}}/h2button clickchangename修改年龄/buttonbutton clickchangeperson修改person/button/div
/templatescript langts setup
import {ref,watch} from vuelet person ref({name:zhangsan,age:22,})const changename () {person.value.age 1;}const changeperson () {// 如果是recative 就要用object.assginperson.value {name:zha33ngsan, age:2342}}watch(person,(newValue,oldValue){console.log(newValue,oldValue);},{deep:true,immediate:true})/scriptstyle.person{background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 10px;}
/style情况三 看一个案例ref 和 reactive 对象赋值的区别
templatediv classpersonh1姓名{{person.name }}/h1h2年龄{{person.age}}/h2button clickchangename修改年龄/buttonbutton clickchangeperson修改person/button/div
/templatescript langts setup
import {ref,watch,reactive} from vuelet person reactive({name:zhangsan,age:22,})const changename () {person.age 1;}const changeperson () {// 如果是recative 就要用object.assginObject.assign(person,{name:zha33ngsan, age:2342})}watch(person,(newValue,oldValue){console.log(newValue,oldValue);})/scriptstyle.person{background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 10px;}
/style情况四【常用】【函数式】: 结论: 监视的要是对象里面的属性最好写成函数注意若是监视的是地址值需要关注对象内部。需要开启手动深度监视
templatediv classpersonh1姓名{{person.name }}/h1h2年龄{{person.age}}/h2h2汽车{{person.car.car1}}-{{ person.car.car2 }}/h2button clickchangename修改年龄/buttonbutton clickchangeperson修改person/buttonbutton clickchangeCar1修改car1/buttonbutton clickchangeCar2修改car2/buttonbutton clickchangeAll修改全部/button/div
/templatescript langts setup
import {ref,watch,reactive} from vuelet person reactive({name:zhangsan,age:22,car:{car1:hello1,car2:hello2}})const changename () {person.age 1;}const changeperson () {// 如果是recative 就要用object.assginObject.assign(person,{name:zha33ngsan, age:2342})}const changeCar1 (){person.car.car1 world1}const changeCar2 (){person.car.car2 world2}const changeAll (){person.car {car1:hello221, car2:hello241}}watch((){return person.age},(newValue,oldValue){console.log(newValue,oldValue);})watch(()person.car,(newValue,oldValue){console.log(newValue,oldValue);},{deep:true})
/scriptstyle.person{background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 10px;}
/style情况五:
监视上述的多个数据【多个函数】 watch([()person.name,()person.car.car1],(newValue,oldValue){console.log(newValue,oldValue);},{deep:true})【多写项目-练习】
watchEffect 标签中ref属性 回顾TS中的接口_泛型_自定义类型 Props的使用
vue2【父子之间的通信】 vue3通信 注意点【区别一下的绑定和 ref的区别】 【父子之间的传值的多种方式】 【注意宏函数不用引入例如defineProps】
理解生命周期【组件的一生】 创建、挂载、更新、销毁【每个时期都调用特定的函数】 created 、 mounted 、updated 、destoyed 叫法生命周期、生命周期函数、生命周期钩子
vue2的生命周期
创建、前与后beforeCreate|Created 挂载、前与后beforeMount|Mounted) 更新、前与后beforeUpdate|updated) 销毁、前与后beforeDestory|destoryed)
vue3的生命周期
创建、setup ---------------------------- 前与后beforeCreate|Created 挂载、onBeforeMount|onMounted—前与后beforeMount|Mounted) 更新、onBeforeUpdate|onUpdated—前与后beforeUpdate|updated) 卸载、onBeforeUnmount|onUnmounted----前与后beforeDestory|destoryed)
自定义hooks【mixin】【重】 路由 两个注意点 路由组件pages/views 一般组件components
to的两种写法 路由器工作模式
【history 和 hash模式】
命名路由 嵌套路由 路由_query参数 路由_params参数 必须为name参数如果可传可不传则添加在占位的地方参数不能为数组和对象 路由的Props配置 【注意】
一般组件和路由组件传参的区别
路由的_replace属性
push【默认】replace【替换】 【编程式导航】 出了routerlink进行跳转还有编程式路由导航 什么时候进行编程式导航 需要再某个条件下跳转 路由重定向 Pinia【对比VUE2中vuex】【集中式状态数据管理】
【redux vuex pinia】 是vue的最新的状态管理工具是vuex的替代品
手动添加pinia
官网https://pinia.vuejs.org/zh/introduction.html
使用vite创建一个新的vue3项目安装pinia到项目中
用vite安装时注意node的版本
案例 lovetalk.vue
templatediv classlovetalkbutton clickgetLoveTalkhello/buttonulli v-foritem in newsList :keyitem.id{{ item.title }}/li/ul/div
/templatescript langts setup
import { reactive } from vue;
import axios from axios;
import { nanoid } from nanoid;
const newsList reactive([{ id: 12423421, title: hel123 },{ id: 1224231, title: h424el123 },{ id: 1242341, title: he4243l123 },
]);
async function getLoveTalk() {// 下面的写法连续解构赋值 重命名let {data: { content:title },} await axios.get(https://api.uomg.com/api/rand.qinghua?formatjson);// nanoid 可以随机生成IDlet obj { id: nanoid(),title};console.log(obj);newsList.unshift(obj);
}
/scriptstyle
.lovetalk {background-color: skyblue;box-shadow: 0 0 10px;border: 1px solid black;
}
/style
count.vue
templatediv classcounth2当前求和为{{sum}}/h2select v-model.numbernoption value11/optionoption value22/optionoption value33/option/selectbutton clickadd加/buttonbutton clickminus减 /button/div
/templatescript setup langts
import {ref} from vue
let sum ref(1)
let n ref(1)
function add(){sum.value n.value
}
function minus(){sum.value - n.value
}
/scriptstyle
.count {background-color: skyblue;box-shadow: 0 0 10px;border: 1px solid black;
}
/style【注意】引入了axios和nanoid【随机生成id】
搭建pinia环境
npm i pinia
存取读取数据 修改数据的三种方式 storeToRefs【只关注store数据】【对数据进行解构操作】 getters 对数据的加工
$subscribe store的组合式写法【推荐】 组件通信_方式1_props 【父子】 组件通信_方式2_自定义事件【子传父】 组件通信_方式3_mitt【任意组件通信】
pubsub$busmitt 组件通信_方式4_v-model【通常用于表单】
作用在组件和html的方式【底层】
组件通信_方式5_$atters【祖孙之间通信】【打扰了中间人】 组件通信_方式6_ r e f s − refs- refs−parent【父-子|子-父】 组件通信_方式7_provide_inject【提供-注入】【向后代之间通信】【零打扰】 插槽
默认插槽 具名插槽【template 中 v-solt #】【重】【动态的摆放】 可以用【#s1 、#s2代替v-slot】
作用域插槽 总结 其他API
shallowRef 和 shallowReactive readonly 和 shallowReadonly roRaw 和 markRow customRef Teleport【转移】 Suspense 全局api到应用对象 其他【非兼容性改变】 面试题vue3相比vue2做了哪些改变?
https://v3-migration.vuejs.org/zh/breaking-changes/
