Vue3 - 随笔分类 - 香香鲲

Vue3与Vue2的区别（面试题）

摘要：模板指令 1、v-if、v-for优先级区别 3.0依然不建议写在一个元素上但是依然可以同时绑定 Vue2：当在同一个元素上使用v-if时，将优先v-for Vue3：v-if优先，再v-for 2、v-model对的组件使用进行了返工，替换v-bind.sync v-model重新设计了组件中阅读全文

posted @ 2022-09-23 19:46 香香鲲阅读(4523) 评论(0) 推荐(0)

Vue：数据仓库配置--Pinia

摘要：pinia作用 Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。 pinia安装 npm i pinia 创建文件夹store // store/index.js文件 import { defineStore } from 'pinia' //这里官网是单独导出是可以写成默认导出的阅读全文

posted @ 2022-09-22 21:09 香香鲲阅读(380) 评论(0) 推荐(0)

Vue：use函数、插件配置(把axios封装为公共属性)

摘要：同2.0一样use函数接受一个函数或者对象(对象有install函数) 然后会调用这个传入的回调函数给它传参app对象,以此来实现第三方插件 //main.js文件 import { createApp} from 'vue' import App from './App.vue' const a 阅读全文

posted @ 2022-09-22 17:08 香香鲲阅读(268) 评论(0) 推荐(0)

Vue中网络环境配置

摘要：代理配置 vite环境中 //vite.config.js文件中 export default defineConfig({ plugins: [vue()], server: { // port:"8080", // host proxy: { '/api': { target: 'http:// 阅读全文

posted @ 2022-09-22 16:55 香香鲲阅读(112) 评论(0) 推荐(0)

Vue3：响应式 API-工具函数 isRef()、unref()、toRef()、toRefs()、readonly()

摘要：isRef() 检查某个值是否为 ref。 <script setup> import {ref,isRef} from "vue" let msg=ref(0) function fn(){ console.log(isRef(msg)) //判断是否为响应性变量 } < /script> unr 阅读全文

posted @ 2022-09-22 16:26 香香鲲阅读(298) 评论(0) 推荐(0)

Vue3：Suspense

摘要：等待异步组件时渲染一些额外的内容,让应用有更好的用户体验 <suspense> 组件有两个插槽。它们都只接收一个直接子节点。default 插槽里的节点会尽可能展示出来。如果不能，则展示 fallback 插槽里的节点。 <template> <div class="fa"> <h1>父组件Home 阅读全文

posted @ 2022-09-20 22:40 香香鲲阅读(142) 评论(0) 推荐(0)

Vue3：注册组件

摘要：注册组件组件内部 <script> import Box1 from "./Box1.vue" export defult{ components:{ Box1 }, setup(){} } </script> vue3组件内部组合式API setup语法糖中注册组件 <script setup> 阅读全文

posted @ 2022-09-20 22:38 香香鲲阅读(1488) 评论(0) 推荐(0)

Vue3：状态驱动的动态 CSS

摘要：状态驱动的动态 CSS 单文件组件的 <style> 标签可以通过 v-bind 这一 CSS 函数将 CSS 的值关联到动态的组件状态上 <template> <div class="box1">hello</div> <button @click="changcolor">修改box1的样式</ 阅读全文

posted @ 2022-09-20 22:33 香香鲲阅读(575) 评论(0) 推荐(0)

Vue3：自定义事件

摘要：事件名与组件和 prop 一样，事件名提供了自动的大小写转换。如果在子组件中触发一个以 camelCase (驼峰式命名) 命名的事件，你将可以在父组件中添加一个 kebab-case (短横线分隔命名) 的监听器。 //父组件HomeView <template> <div> <MyBox1 @ 阅读全文

posted @ 2022-09-20 22:32 香香鲲阅读(1661) 评论(0) 推荐(0)

Vue3：Teleport-传送组件

摘要：Teleport-传送组件 Vue 鼓励我们通过将 UI 和相关行为封装到组件中来构建 UI。我们可以将它们嵌套在另一个内部，以构建一个组成应用程序 UI 的树。然而，有时组件模板的一部分逻辑上属于该组件，而从技术角度来看，最好将模板的这一部分移动到 DOM 中 Vue app 之外的其他位置模阅读全文

posted @ 2022-09-20 22:30 香香鲲阅读(73) 评论(0) 推荐(0)

Vue3：生命周期

摘要：Vue3.x的生命周期在Vue3.x中，新增了一个setup生命周期函数，setup执行的时机是在beforeCreate生命函数之前执行，因为在这个函数中不能通过this来获取实例的；同时为了命名的统一，将beforeDestory改名为beforeUnmount，destoryed改名为unm 阅读全文

posted @ 2022-09-20 22:28 香香鲲阅读(697) 评论(0) 推荐(0)

Vue3：监听属性

摘要：监听属性与vue2.x中的watch配置功能一致注意监视reactive定义的响应式数据时，oldvalue无法正确获取，强制开始了深度监视（deep的配置失效）监视reactive定义的响应式数据的某一个值时：deep配置有效 <template> <div class="home"> < 阅读全文

posted @ 2022-09-20 22:23 香香鲲阅读(338) 评论(0) 推荐(0)

Vue3：面试题整理

摘要：ref响应式是怎样设计的？监听了value 的改变劫持value属性的setter gatter, 因此ref一般用在基本数据，或者引用数据的嵌套层级不深得数据上 relative也是响应式的设计怎么设计的？跟ref一样但是底层采用的是ES6的Proxy代理了整个引用数据什么是组合式AP 阅读全文

posted @ 2022-09-16 20:29 香香鲲阅读(945) 评论(0) 推荐(0)

Vue3：常用的Composition API（组合API）

摘要：常用的Composition API（组合API） 1、setup setup函数的两种返回值：若返回一个对象，则对象中的数据、方法、在模板中均可直接使用（重点） <template> <div class="home"> <h1{{msg}}</h1> </div> </template> <s 阅读全文

posted @ 2022-09-16 20:17 香香鲲阅读(145) 评论(0) 推荐(0)

Vue3：环境集成，使用vite创建或cli创建

摘要：创建vue3 指令： vue create filename 1.使用vue-cli创建 1.查看@vue/cli的版本,确保@vue/cli版本在4.5.0以上 vue --version 2.安装或者升级你的@vue-cli 3.创建 vue create vueproject 4.启动 cd 阅读全文

posted @ 2022-09-16 19:41 香香鲲阅读(129) 评论(0) 推荐(0)

仓库Vuex

摘要：Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 vuex3.0适用于vue2.0 vuex4.0适用于vue3.0和2.0 引入方式 1、安装 npm i vuex 导入阅读全文

posted @ 2022-09-15 21:09 香香鲲阅读(42) 评论(0) 推荐(0)

随笔分类 - Vue3