![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
Vue相关
後來9527
这个作者很懒,什么都没留下…
展开
-
同时安装Vue2和Vue3
当我们的工作中使用的还是脚手架还是基于Vue2.x的版本,那么我们想要学习和使用Vue3怎么办?直接升级脚手架的话,会影响到我们现在的项目,那就需要去处理下关于Vue3的东西了。打开高级系统设置 -> 高级 -> 环境变量 -> 新建 -> 输入变量名和变量值 -> 确定。,点击选中它 -> 点击编辑,会弹出一个新的弹窗 -> 点击新建 -> 输入。Vue3的脚手架下载以后,还需要配置对应的环境变量,不然没办法全局使用。,但是需要注意的是,这个文件夹的名字不能包含中文字符。,输出版本号就代表我们成功了。原创 2022-11-28 15:13:09 · 1278 阅读 · 1 评论 -
Vue3-pinia(状态管理)
pinia是什么?这个是 vue3 新的状态管理工具,简单来说相当于之前 vuex,它去掉了 Mutations 但是也是支持 vue2 的,尤大推荐。因为其logo像是一个菠萝,所以我们还称呼它为大菠萝。官网https://pinia.vuejs.org/下载npm i pinia使用mian.js 中引入 pinia,全局注册import { createApp } from 'vue'import { createPinia } from 'pinia'import Ap原创 2022-05-30 15:56:52 · 1234 阅读 · 0 评论 -
Vue3中新的API
常用的 Composition API(组合API)setupVue3.0新增的配置项,值为一个函数setup是所有Composition API的组件中所用到的:数据,方法等等,均需要配置在setup函数中setup函数的两种返回值:若返回是一个对象,对象中的属性,方法,在模板中军可以直接使用若返回一个渲染函数,则可以自定义渲染内容setup的两个注意点:setup的执行时机:在beforeCreate之前执行一次,this是undefinedsetup的参数:props原创 2022-01-21 10:23:10 · 845 阅读 · 0 评论 -
Vue3-Suspense组件
Suspense试验性Suspense 是一个试验性的新特性,其API可能随时会发生变动。特此声明,以便社区能够为当前的实现提供反馈。生产环境请勿使用。以上是官方的警告!等待异步组件渲染一些额外的内容,让应用有更好的用户体验<suspense> 组件有两个插槽。它们都只接收一个直接子节点。default 插槽里的节点会尽可能展示出来。如果不能,则展示 fallback 插槽里的节点。这里就是之前说到setup的时候提到的,setup的返回值不能使用异步,但是如果像下面这样使用原创 2022-01-20 09:47:01 · 482 阅读 · 0 评论 -
Vue3-customRef
customRef作用:创建一个自定义的ref,并对其依赖项跟踪和更新触发进行显式控制。demo:实现输入数据,防抖效果<template> <input v-model="keyword"> <div>{{keyword}}</div></template> <script> import { customRef } from 'vue' export default {原创 2022-01-20 09:45:38 · 172 阅读 · 0 评论 -
Vue-provide和inject
provide和inject作用:实现祖孙组件间通信,即父组件定义,后面所有子代组件都能用套路:父组件有一个provide选项来提供数据,后代组件有一个inject选项来开始使用这些数据// 祖组件import {reactive} from 'vue'setup() { let car = reactive({ name: '奥迪', price: '100W' }) provide('car',car)}// 后代组件impor原创 2022-01-19 10:34:37 · 495 阅读 · 0 评论 -
Vue3-hook函数
什么是hook本质是一个函数,把setup函数中使用的composition API进行了封装类似于Vue2中的mixin其优势,复用代码,让setup中的逻辑更清楚易懂Demohook函数文件:通常在src文件下新建一个hooks文件夹存放不同的hook函数,名称随便起,但是,一般来说,可能会使用use开头命名的文件// src/hooks/usePageXY.jsimport {reactive,onMounted,onBeforeUnmount} from 'vue'export原创 2022-01-18 09:59:09 · 642 阅读 · 0 评论 -
Vue3-computed
computed简写和完整版写法和Vue2都一样,只是使用不一样,需要单独引入使用,变成了一个函数<template> <h1><input v-model="firstName" /></h1> <h1><input v-model="lastName" /></h1> <div>{{fullName}}</div></template><scrip原创 2022-01-18 09:57:46 · 318 阅读 · 0 评论 -
Vue3-watchEffect函数
watchEffect函数watch:需要指明监视的属性,也要指明监视的回调watchEffect:不需要指明监视哪个竖向,监视的回调中用到哪个属性,就监视那个属性watchEffect有点类似于computed:computed注重的是计算出来的值,所以必须写返回值watchEffect更注重的是过程,所以不需要写返回值<template> <h1>{{num}}</h> <h1>{{msg}}</h>&l原创 2022-01-17 09:48:57 · 263 阅读 · 0 评论 -
Vue3-watch
watch和Vue2基本相似,配置是一样的两个坑:监视reactive定义的响应式数据时:oldVal无法正确的获取,强制开启了深度监视(deep配置无效)监视reactive定义的响应式数据中的某个属性(对象)时:deep配置有效<template> <h1>{{num}}</h> <h1>{{msg}}</h></template><script>import {ref,reac原创 2022-01-17 09:47:46 · 309 阅读 · 0 评论 -
Vue3-ref函数和reactive函数
ref函数作用:定义一个响应式的数据,或者说是生成一个引用实现对象语法:const xxx = ref(initValue)创建一个包含响应式数据的引用对象(reference对象)JS中操作数据需要:xxx.value模板中读取数据:直接使用即可PS:ref接收的数据可以是基本类型数据,也可以是对象类型基本类型的数据:响应式是靠Object。defineProperty()的get和set完成的对象类型的数据:内部使用了reactive函数<template>原创 2022-01-14 09:24:48 · 171 阅读 · 0 评论 -
Vue3-setup
setupVue3.0新增的配置项,值为一个函数setup是所有Composition API的组件中所用到的:数据,方法等等,均需要配置在setup函数中setup函数的两种返回值:若返回是一个对象,对象中的属性,方法,在模板中军可以直接使用若返回一个渲染函数,则可以自定义渲染内容setup的两个注意点:setup的执行时机:在beforeCreate之前执行一次,this是undefinedsetup的参数:props:值为对象,包含外部传递过来,且组件内部申明接收了的属原创 2022-01-14 09:23:34 · 904 阅读 · 0 评论 -
Vue3的响应式数据的原理-Proxy
Proxy简介Proxy 也就是代理,它是window内置的函数,我们直接window.Proxy就可以使用语法// target: Proxy代理的源对象,可以是,对象,数组,函数,甚至是另一个Proxy// handler: 这个值,可以不配置,但是不允许不写,至少写一个空对象,不然报错const p = new Proxy(target,handler)使用let person = { name: '景天', age: 18}const p = new Proxy原创 2022-01-13 10:55:22 · 511 阅读 · 0 评论 -
Vue3生命周期
Vue3和Vue2生命周期对比更名beforeDestroy改名为beforeUnmountdestroyed改名为unmountedVue3中提供了Composition API形式的生命周期狗子,与Vue2中的狗子对应关系如下:beforeCreate — setup()created — setup()beforeMount — onBeforeMountmounted — onMountedbeforeUpdate — onBeforeUpdateupdated — o原创 2022-01-13 10:53:00 · 364 阅读 · 0 评论 -
Vue-nextTick
使用this.$nextTick(回调函数)作用在下一次DOM更新结束后执行其指定的函数什么时候用在改变数据后,要基于更新后的DOM进行某些操作时,要在nextTick指定的回调函数中执行demo// 页面渲染好以后,搜索框获取焦点this.$nextTick(() => { this.$refs.search.focus()})...原创 2022-01-08 14:11:45 · 313 阅读 · 0 评论 -
Vue-Router路由守卫
全局路由守卫const router = new Router({ mode: 'history', routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld } ]})// 前置路由守卫router.beforeEach((to,from,next) => { // flag是你的判断条件 const flag = true if(flag)原创 2022-01-06 10:07:46 · 526 阅读 · 0 评论 -
Vue-Router
Vue Router官方介绍Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:嵌套的路由/视图表模块化的、基于组件的路由配置路由参数、查询、通配符基于 Vue.js 过渡系统的视图过渡效果细粒度的导航控制带有自动激活的 CSS class 的链接HTML5 历史模式或 hash 模式,在 IE9 中自动降级自定义的滚动条行为安装和使用1.直接使用// 1. 下载下来直接使用<scrip原创 2022-01-06 10:06:16 · 273 阅读 · 0 评论 -
Vuex了解
Vuex是什么概念:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。适用于任意组件之间通信。PS:集中式(可以理解为学生都在课堂,老师给他们上课),还有分布式(可以理解为老师会72变,变成N个人,去学生家里给每个学生上课)什么时候使用Vuex如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。那么当我们开大大型单页面组件的时候,一定要用Vuex吗?当多个组件依赖于同意状态当原创 2022-01-05 14:30:09 · 380 阅读 · 0 评论 -
Vue-transition
基本概念Vue给我们提供的一个内置组件Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果使用方法1.用v-if/v-show控制显示隐藏,使用transition组件控制其变化过程<template> // 子组件 <transition name="animate1"> <child></child> </transition> // if/show控制 &l原创 2022-01-05 14:23:27 · 307 阅读 · 0 评论 -
Vue-手写插件
初步了解功能:用于增强Vue本质:包含install方法的一个对象,install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据。使用插件// main.jsimport plugins from './plugins'Vue.use(plugins)定义一个插件// plugins.jsexport default { install(Vue) { console.log('使用插件了') // 自定义全局获取焦点指令原创 2022-01-04 16:36:50 · 661 阅读 · 0 评论 -
Vue-EventBus
定义全局定义,可以将eventBus绑定到vue实例的原型上,也可以直接绑定到window对象上。//main.js(可以是任意JS写)//方式一Vue.prototype.$EventBus = new Vue();// 在mian中,方式一可以这么写new Vue({ router, render: h => h(App), beforeCreated() { Vue.prototype.$EventBus = this }}).$mount('#app')原创 2022-01-04 16:35:03 · 343 阅读 · 0 评论 -
Vue组件-slot
插槽分类默认插槽(匿名插槽)(单个插槽)具名插槽作用域插槽插槽的作用让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式。插槽显示不显示,怎么显示,是父组件及控制。显示在什么位置,是子组件控制。使用方式1.默认插槽// 父组件<template> <div class="father"> <h3>这里是父组件</h3> <child> <d原创 2021-12-31 10:21:51 · 233 阅读 · 0 评论 -
Vue-mixins
简单介绍可以把多个组件共有的数据,方法,提取成一个混合文件data中数据自己和混合文件都有时,以自己的数据为主生命周期还有方法这些都是独立的全局混合// 这样引入所有的页面,组件都会使用这个混合import mixin from './components/mixin/mixin'Vue.mixin(mixin)局部混合// 常用引用方式// mixin.jsexport default { data() { return {原创 2021-12-31 10:20:13 · 366 阅读 · 0 评论 -
Vue-props
props接收值的几种写法props是只读的,不允许直接修改传进来的props的值,修改就会有警告// 最简单的接收值的方式,接收的是一个数组props: [name,age]// 接收参数是一个对象props: { name: String, age: Number}// 最完整的方式props: { name: { type: String, // 数据的类型限制 required: true // 数据是否必传原创 2021-12-30 09:45:33 · 295 阅读 · 0 评论 -
Vue组件
VUE组件全局组件注意事项组件中的data必须是一个函数,这样就能让各个组件的数据独立。template必须有个明确的根元素,简单说就是最外层必须是一个标签,还可以使用ES6模板语法可以是用短横线的方式命名,也可以使用驼峰的方式(驼峰的方式,在组件的模板中可以直接使用,但是在vue的html代码中必须使用横线的方式使用)// 注册组件// Vue.component('BtnCounter',function(){Vue.component('btn-counter',function(原创 2021-12-30 09:43:42 · 343 阅读 · 0 评论 -
Object.difineProperty
Vue的双向数据绑定原理vue.js 则是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。Demolet number = 18;let person = { name: '张三', sex: '男'}Object.difineProperty(person,'age',{ // value: 18, // 可以设置默认值 //原创 2021-12-29 13:41:49 · 185 阅读 · 0 评论 -
Vue过滤器
过滤器格式化数据,比如将字符串格式化为字母大写,日期格式等自定义过滤器// 字母转大写Vue.filter('toUpperCase', function(val){ return val.toUpperCase();});// 字母转小写Vue.filter('toLowerCase', function(val){ return val.toLowerCase();});使用自定义过滤器<div>{{ msg | toUpperCase }}</d原创 2021-12-29 13:40:39 · 215 阅读 · 0 评论 -
Vue生命周期
生命周期主要阶段挂载(初始化相关属性)beforeCreate: vue实例刚刚初始化,生命周期,时间,数据代理还未开始,所以无法访问到data中的数据,methods的方法。created: 初始化数据金策和数据代理,所以,可以访问到数据中的data和methods的方法了。beforeMount: Vue开始解析模板,生成虚拟DOM(内存中),页面还不能显示解析好的内容,所以,页面呈现的是没有经过Vue编译的DOM结构,所有的DOM操作,也都是不生效的。mounted: Vue将内存中的原创 2021-12-28 13:44:38 · 234 阅读 · 0 评论 -
Vue计算属性和监听属性
计算属性 computed使用场景:当页面中有某些数据依赖其他数据进行变动的时候,可以使用计算属性计算属性 computed 是基于data中数据进行处理的,data数据变化,他也跟着变化当data中数据没有发生改变时,我们调用computed中函数n次,只会进行缓存(执行一次)每个计算属性都包含两个set、get 属性监听属性 watch使用场景:数据变化时执行异步或开销较大的操作,可以随时修改状态的变化watch:类似于监听机制+事件机制。在大部分情况下我们都会使用computed,但如果原创 2021-12-28 13:43:11 · 223 阅读 · 0 评论 -
Vue指令和事件
模板语法{{ msg }}指令VUE自带13种指令1. v-html2. v-text3. v-bind4. v-show5. v-if6. v-else7. v-else-if8. v-model9. v-for10. v-on11. v-pre12. v-cloak13. v-once自定义指令注意:自定义指令中的this指向都是window一个指令定义对象可以提供如下几个钩子函数 (均为可选):bind:只调用一次,指令第一次绑定到元素时调用。在这里可以原创 2021-12-27 13:52:41 · 255 阅读 · 0 评论