新开传奇网站新开网,做天然文化石的网站,个人主页怎么申请,商城系统下载目录
一、项目准备
1.1、Vite搭建项目
1.2、vue_cli创建项目
二、组合式API(基于setup)
2.1、ref
2.2、reactive
2.3、toRefs
2.4、watch和watchEffect
2.5、computed
2.6、生命周期钩子函数
2.7、setup(子组件)的第一个参数-props
2.8、setup(子组件)的第二个参数…目录
一、项目准备
1.1、Vite搭建项目
1.2、vue_cli创建项目
二、组合式API(基于setup)
2.1、ref
2.2、reactive
2.3、toRefs
2.4、watch和watchEffect
2.5、computed
2.6、生命周期钩子函数
2.7、setup(子组件)的第一个参数-props
2.8、setup(子组件)的第二个参数-context
2.8.1、context.attrs【$attrs】
2.8.2、context.slots【$slots】
2.8.3、context.emit【$emit】
2.8.4、context.expose
2.9、provide-inject
2.10、在单文件组件(SFC)中使用组合式API的编译时语法糖
三、路由VueRouter
3.1、引入和安装
3.2、带参数的动态路由匹配
3.3、路由正则与重复参数
3.4、嵌套路由与重定向
3.5、替换页面和堆栈中的前进后退(js跳转)
3.6、路由组件传参
3.7、路由懒加载
四、pinia
4.1、安装
4.2、Option Store与Setup Store的定义与使用
4.3、State的基本使用
4.5、Getter的基本使用
4.6、Action的基本使用
4.7、Pinia与vuex的区别
一、项目准备
1.1、Vite搭建项目 Vue3官网地址快速上手 | Vue.js Vite官网地址开始 | Vite 官方中文文档 检查自己电脑npm -v版本按照以下命令自己选择合适的命令
node -v检查node版本14.18,可以在官网自行下载Node.js # npm 6.xnpm create vitelatest my-vue-app --template vue # 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 注意只有Node版本在14.18及以上Vite搭建项目才能生效
创建好项目以后可以在依赖包看一下有没有Vite,没有就npm i一下然后npm run dev,至此项目创建成功!
1.2、vue_cli创建项目 先全局安装了CLI命令npm install -g vue/cli 检查版本vue --version 创建项目vue create vue_app(项目名) 可以自定义Manually select features 选择需要的css、router等然后一直回车在项目终端npm run serve即可 二、组合式API(基于setup)
形式区别Vue3采用组合式APIVue2采用选项式API 。
组合式API将同一个逻辑关注点的相关代码收集在一起。
组件被创建之前执行不需要使用this,this不会指向实例。
2.1、ref
响应式变量通过引入ref定义响应式变量ref返回带有value属性的对象
在函数里进行修改时要加.value
2.2、reactive
响应式的引用类型通过引入reactive定义引用类型的数据
2.3、toRefs
因为ES6扩展运算符进行解构会使得对象中的属性不是响应式
所以通过引入toRefs(object)函数使解构后的数据重新获得响应式
vue2里是在data里进行定义而vue3以上内容代码演示如下
script
import { ref, reactive, toRefs } from vue;
export default {setup() {// 非响应式msg相关代码let msg hello;console.log(msg);function changeMsg() {msg nihao;console.log(msg); //nihao,但是视图上不会改变}// 响应式counter相关代码// 通过引入ref定义响应式变量【counter0】,ref返回带有value属性的对象let counter ref(0);function changeCounter() {counter.value; //视图上自加1}// 响应式obj相关代码// 通过引入reactive定义引用类型的数据let obj reactive({name: 张三,age: 19,children: {son: 小宝贝,},});function changeObj() {obj.name 李四; //视图改变obj.children.name 大王; //视图改变}// ES6扩展运算符进行解构会使得对象中的属性不是响应式// 故通过引入toRefs(object)使解构后的数据重新获得响应式return {msg,changeMsg,counter,changeCounter,obj,changeObj,...toRefs(obj),};},
};
/script
templatedivh1{{ msg }}/h1button clickchangeMsg改变msg/buttonhr /h1{{ counter }}/h1button clickchangeCounter改变counter/buttonhr /h1{{ obj.name }}/h1h1{{ children.name }}/h1 !-- 一开始没出现改变后才出现 --button clickchangeObj改变name/button/div
/template
2.4、watch和watchEffect
这两个写在setup之内return之前 watch和watchEffect区别 (1)语法 watch(监听的响应式变量回调函数) watchEffect(回调函数) (2)作用 watch监听响应式变量无法监听引用类型 watchEffect监听引用类型不需要指定监听属性组件初始化时会自动收集依赖执行一次回调只要属性值发生改变回调就会执行。 import {watch, watchEffect } from vue;
watch(counter, (newVal, oldVal) {console.log(newVal, newVal);console.log(oldVal, oldVal);});
watchEffect(() {console.log(obj.name);});
2.5、computed
输出响应式变量xxx.value,引用类型不用加.value
import { ref,computed } from vue; let Msg ref(hello);let reverMsg computed(() {return Msg.value.split().reverse().join();});console.log(reverMsg.value); //olleh
2.6、生命周期钩子函数
在vue2基础上加个on;setup本身就相当于beforeCreate 和created在页面初始化时会执行onBeforeMount、onMounted数据发生变化时会执行onBeforeUpdate、onUpdated销毁时执行onBeforeUnmount、onUnmounted。
import { onBeforeMount, onBeforeUpdate, onMounted, onUpdated } from vue;setup() {onBeforeMount(() {console.log(onBeforeMount);//onBeforeMount});onMounted(() {console.log(onMounted);//onMounted});onBeforeUpdate(() {console.log(onBeforeUpdate);});onUpdated(() {console.log(onUpdated);});},
2.7、setup(子组件)的第一个参数-props 父组件与子组件的传值和vue2一样在子组件里面获取父组件传来的值就是通过setup的第一个参数props获取。值改变了就在onUpdated里面获取改变后的值。 2.8、setup(子组件)的第二个参数-context
2.8.1、context.attrs【$attrs】
Attribute 非响应式对象
console.log(context.attrs);
//{class: classBox, id: IdBox, __vInternal: 1}
给组件上添加class/id在子组件这边可以拿到组件的类名然后做一些样式操作
2.8.2、context.slots【$slots】
插槽 非响应式对象
比如context.slots.default() 判断子组件标签类型
2.8.3、context.emit【$emit】
(子组件触发事件等同于$emit) 2.8.4、context.expose
暴露公共 property这样子组件本身就是变成暴露的内容记得引入h //通过expose暴露context.expose({counter,sendParent,});//返回渲染函数 没有暴露数据return () h(div, counter.value);
2.9、provide-inject
provide-inject用于跨组件传值如果想要响应式改变就要将值用rer/reactive进行定义 2.10、在单文件组件(SFC)中使用组合式API的编译时语法糖
总结
script setup相当于setup() {函数【顶层的绑定会被暴露给模板】
优势引入组件不需要注册定义变量、方法不需要暴露。
script setup
// 顶层的绑定会被暴露给模板
import { ref } from vue;
// 引入组件不需要注册
import Hello from ./components/HelloWorld.vue;
// 定义变量、方法不需要暴露
const a 20;
console.log(a);
const b ref(10);
function addB() {b.value;
}
/script
templatedivh2{{ a }}/h2h2{{ b }}/h2button clickaddB改变B/buttonHello//div
/template
三、路由VueRouter
路由相关内容地址入门 | Vue Router
3.1、引入和安装
npm install vue-router4 或者 yarn add vue-router4
在src包下新建router文件夹在index.js里面引入配置的路径
import { createRouter, createWebHashHistory } from vue-router
// 1. 定义路由组件.也可以从其他文件导入
import Home from ../views/HomeView.vue
import User from ../views/UserView.vue
// 2. 定义一些路由每个路由都需要映射到一个组件。
const routes [{ path: /, component: Home },{ path: /user, component: User },
]
// 3. 创建路由实例并传递 routes 配置
const router createRouter({// 4. 内部提供了 history 模式的实现。为了简单起见我们在这里使用 hash 模式。history: createWebHashHistory(),routes, // routes: routes 的缩写
})
export default router
main.js中进行挂载
import { createApp } from vue
import ./style.css
import App from ./App.vue
import router from ./router
const app createApp(App)
app.use(router)
app.mount(#app)
路由跳转运用
router-link to/Go Home/router-link
router-link to/userGo User/router-link!-- 路由出口 占位符 --!-- 相当于组件 路由匹配到的内容页面将渲染在这里 --
router-view/router-view
3.2、带参数的动态路由匹配 路径参数 用冒号表示 { path: /user/:id, component: User } router-link to/user/1234Go User/router-link 页面获取参数: Vue2: 在mounted里面通过 this.$route.params.xx 获取 vue3:引入useRoute通过useRoute().params.xx获取 script setup
import { useRoute } from vue-router;
console.log(useRoute().params.id);
/script
3.3、路由正则与重复参数 404页面: { path: /:path(.*), component: NotFound },//使用正则匹配任意的路径,一般放最后 参数限制 (1)动态路由的参数一定是数字:{ path: /about/:id(\\d), component: About } (2)多个参数:{ path: /about/:id, component: About } (3)参数可有可无,可以重复添加:{ path: /about/:id*, component: About } (4)参数可有可无,不可以重复添加:{ path: /about/:id?, component: About } 3.4、嵌套路由与重定向
children里面写要嵌套的路由。 {path: /,redirect: /home //重定向。下面肯定有这个路径},
{ path: /home, component: Home },
3.5、替换页面和堆栈中的前进后退(js跳转)
纯js跳转与带对象跳转:pathquery;nameparams
页面接收this.$route.query.name。。。
this.$router.push(/xxx);
this.$router.push({path: /xxx,query: {name: zhangsan,},});
this.$router.push({name: xxx,params: {name: zhangsan,},});
//replace:true 替换当前页面
this.$router.replace({path: /xxx,query: {name: zhangsan,},}); this.$router.go(xx) //正值为前进负值为后退 this.$router.back() //后退等于go(-1) this.$router.forword() //前进等于go(1) 3.6、路由组件传参
defineProps 3.7、路由懒加载
路由守卫同vue2
将import ShopTwo from ../views/shop/ShopTwo.vue
替换成const ShopTwo ()import(../views/shop/ShopTwo.vue)
达到用到它时再加载的效果
四、pinia
4.1、安装
pinia官网地址Pinia | The intuitive store for Vue.js
下载npm install pinia
在main.js创建一个pinia实例: 4.2、Option Store与Setup Store的定义与使用
import { defineStore } from pinia
// option store
export const useAgeStore defineStore(dingding, {state: () {//相当于data属性return { age: 30 }},getters: {//相当于computed属性gettersAge(state) {return state.age 5}},actions: {//相当于methods属性addAge() {this.age;//this指向对应的store仓库}}
})
import { defineStore } from pinia
import { ref, computed } from vue
// setup store
export const useCounterStore defineStore(main, () {const counter ref(30);//stateconst gettersCounter computed(() {//gettersreturn counter.value 5})function addCounter() {//actionscounter.value;}return { counter, gettersCounter, addCounter }
})
使用 4.3、State的基本使用 为了完整类似推理推荐使用箭头函数在Pinia中state被定义为一个返回初始状态的函数这使得Pinia可以同时支持服务端和客户端。data(){return{}}防止数据污染(针对于服务端)。
button clickchangeAge修改age值/button
script setup
import { useAgeStore } from ../stores/index.js;
const ageStore useAgeStore();
// 修改state中的状态
function changeAge() {// 方式一 直接修改ageStore.age;ageStore.name 张三丰;// 方式二 批量修改 $patch(对象) 建议使用ageStore.$patch({age: 40,name: 张三丰,arr: [...ageStore.arr, 5],});// 方式三 批量修改 $patch(函数) 强烈推荐ageStore.$patch((state) {state.age 40;state.name 张三丰;state.arr.push(8);});// 方式四在actions里面进行修改
}
/script
store中的statestate: () {//相当于data属性return { age: 30, name: 王富贵, arr: [1, 2, 3] }},
扩展(1)重置state: xx.$reset(); (2)监听state: xx.$subscribe();
4.5、Getter的基本使用 getters: {//相当于computed属性gettersAge(state) {return state.age 5},// 通过this访问其他的getters注意不能使用箭头函数gettersName(state) {return this.gettersAge state.name},// 向getters传递参数返回函数的方式接收参数和普通函数一样没有缓存的作用gettersAge(state) {return (data) state.age data},// 访问其他的store中的gettersgettersAge(state) {const counterStore useCounterStore()return state.age counterStore.gettersCounter},},
4.6、Action的基本使用 actions: {//相当于methods属性既可以处理同步又可以处理异步addAge() {this.age;//this指向对应的store仓库},// 访问其他store中的actionsasync getList() {const counterStore useCounterStore()if (counterStore.addCounter()) {let res await axios.get(http://xxx).then(res {console.log(res);})console.log(res);}}}
4.7、Pinia与vuex的区别 (1)Pinia搭配TS一起使用时有非常可靠的类型推断支持; (2)Pinia没有mutations,而actions的使用不同在actions中可以处理同步也可以处理异步getters的使用是一致的state与vue2中data是相似的; (3)Pinia没有总入口全是模块化需要定义模块名称当多个模块需要协作的时候需要引入多个模块vuex是有总入口的在使用模块化的时候不需要引入多个模块; (4)Pinia在修改状态的时候不需要通过其他api,vuex需要通过commit、dispatch去修改所以在语法上比vuex更容易理解和使用灵活; (5)Pinia就是更好的vuex,建议在项目中可以直接使用它了尤其是使用了TS的项目。
