![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
翘阳啦
只有不断学习,才不会落后!做笔记的博客
展开
-
【Vue3】Fragment组件、Teleport组件和Suspense组件
在Vue2中,组件必须有一个根标签在Vue3中:组件可以没有根标签,内部会将多个标签包含在一个Fragment虚拟元素中好处:减少标签层次,减少内侧占用 是一种能够将我们的组件html结构移动到指定位置的技术Suspense组件等待异步组件时渲染一些后备内容,获得更好的用户体验使用步骤:异步引入组件:使用suspense包裹组件,并配置好default与fallback...原创 2022-07-01 15:28:14 · 864 阅读 · 0 评论 -
【Vue3】shallowReactive和shallowRef、readonly 和 shallowReadonly、toRaw和markRaw、customRef、provide和inject
响应式数据的判断shallow Reactive:只处理对象最外层属性的响应式(浅响应式)shallowRef:只处理基本数据类型的响应式,不进行对象的响应式处理什么时候使用: 如果有一个对象数据,后续功能不会修改该对象中的属性,而是生新的对象来替换===>shallowReftoRaw:markRaw...原创 2022-07-01 10:50:18 · 341 阅读 · 0 评论 -
【Vue3】自定义hook函数
1、什么是hook? 本质是一个函数,把setup函数中使用的Composition API进行了封装2、类似于vue2.x中的mixin3、自定义hook的优势:复用代码,让setup中的逻辑更加清楚举例:在HelloWorld中复用hooks文件夹中的usePonit函数...原创 2022-06-29 10:33:11 · 550 阅读 · 0 评论 -
【Vue3】computed计算属性和watch监视
watch函数与Vue2.x中watch配置功能一致两个小坑:监视reactive定义的响应式数据时,oldValue无法正确获取、强制开启了深度监视(deep配置无效)监视reactive定义的响应式数据中某个属性时:deep配置有效。...原创 2022-06-29 09:41:22 · 141 阅读 · 0 评论 -
【Vue3】Vue2和Vue3的响应式原理
实现原理:通过Proxy(代理):拦截对象中任意属性的变化,包括:属性值的读写、属性的添加、属性的删除等。通过Reflect(反射):对被代理对象的属性进行操作。原创 2022-06-28 16:08:26 · 83 阅读 · 0 评论 -
【Vue3】setup、ref函数、reactive函数
1、理解:Vue3中的一个新的配置项,值为一个函数2、setup是所有Composition API(组合API)的“表演舞台”3、组件中所用到的数据、方法等等,都要配置到set up组件中4、setup函数的两种返回值5、注意点:1、尽量不要与VUE2.X配置混用2、setup不能是一个async函数,因为返回值不再是return的对象,而是promise,模板看不到return对象中的属性。举例: ref函数作用:定义一个响应式的数据语法:const xxx =ref (initValue)备原创 2022-06-28 14:24:02 · 678 阅读 · 0 评论 -
【Vue知识点】Vuex相关问题、v-if和v-show区别、v-if和v-for为什么不能一起使用、Vue的生命周期
1、Vuex 有哪些属性state,getters,mutations,actions,modulesstate 类似于组件中的data,存放数据 getters 类似于组件中的computed mutations 类似于组件中的methods actions 提交mutations的 modules把以上4个属性再细分,让仓库更好管理2、Vuex中的mutations和actions的区别actions类似于mutations,不同在于actions提交的是mutations,.原创 2022-04-26 10:06:10 · 1282 阅读 · 0 评论 -
【Vue知识点】 vue组件之间如何传值
1、父组件 传值 子组件父组件:<Header :msg='msg'/>子组件: props:['msg'] props:{ msg:数据类型 }子组件props的内容为冒号后面的内容,不是引号里面的内容,一般来说是:xxx='msg' ,props:['xxx'] ,为了方便一般冒号和引号里的内容一致。2、子组件 传值 父组件 <input...原创 2022-04-25 21:02:28 · 1925 阅读 · 0 评论 -
Element UI 按需引入注意事项,.babelrc 文件修改问题
注意按需引入是可以改标签名字注意最新版的vue脚手架已经将 .babelrc 改为了babel.config.js要在babel.config.js文件里写:注意最新版脚手架原创 2022-04-09 10:58:12 · 1090 阅读 · 0 评论 -
Vue笔记 前置路由守卫和后置守卫
前置路由守卫和后置路由守卫1、作用:对路由进行权限控制2、分类:全局守卫、独享守卫、组件内守卫3、全局守卫://全局前置守卫:初始化时执行、每次路由切换前执行router.beforeEach((to,from,next)=>{ console.log('beforeEach',to,from) if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制 if(localStorage.getItem('school')==原创 2022-04-09 10:09:15 · 2098 阅读 · 0 评论 -
Vue笔记 缓存路由组件、路由独有的两个生命周期钩子
缓存路由组件1、作用:让不展示的路由组件保持挂载,不被销毁2、具体编码//缓存一个路由组件<keep-alive include="News"> //include里面要写组件名 <router-view></router-view></keep-alive>//缓存多个路由组件,利用数组形式<keep-alive :include="['News','Messages']">两个生命周期钩子1、作用:路由原创 2022-04-08 20:30:12 · 859 阅读 · 0 评论 -
Vue笔记 路由的query参数、命名路由、路由的params参数、路由的props配置
一、路由的query参数 1、传递参数<!-- 跳转路由并携带query参数,to的字符串写法 --><router-link :to="`/home/messages/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link> <!-- 跳转路由并携带query参数,to的对象写法 --><router-link ...原创 2022-04-08 15:35:07 · 1020 阅读 · 0 评论 -
Vue笔记 基本路由 嵌套(多级)路由及实例代码
一、基本路由1、基本使用(1)安装vue-router,命令 npm i vue-router(2)应用插件:Vue.use(VueRouter)在main.js文件中修改: import Vue from 'vue' import App from './App.vue' //引入插件 import VueRouter from 'vue-router' //引入路由器 import router from './router' Vue.config.pr原创 2022-04-08 11:58:11 · 2247 阅读 · 0 评论 -
Vue笔记 路由的简介,vue-router
1、vue-routervue的一个插件库,专门用来实现SPA应用。2、对SPA应用的理解(1)单页面Web应用(single page web application,SPA)(2)整个应用只有一个完整的页面(3)点击页面中的导航链接不会刷新页面,只会做页面的局部更新(4)数据需要通过ajax请求获取3、路由的理解(1)什么是路由?一个路由就是一组映射关系(key-value)key为路径,value可能是function或component(2)路由分类后原创 2022-04-06 21:22:09 · 1105 阅读 · 0 评论 -
Vue笔记 Vuex
一、概念:在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且应用于任意组件间通信。二、何时使用?多个组件需要共享数据时。三、Vuex的原理图四、搭建Vuex环境:Vue2要安装Vuex3版本,Vue3要安装Vuex4版本1、终端输入:npm i vuex@3就可以安装3版本,需要在main.js文件里引入vuex,如下:使用插件:2、在src中新建一个store文件夹...原创 2022-04-06 20:51:32 · 2052 阅读 · 0 评论 -
Vue笔记 全局事件总线(GlobalEventBus)、消息订阅与发布(PubSub)
全局事件总线1、一种组件间通信的方式,可以实现任意组件间通信2、安装全局事件总线:new Vue({ ...... beforeCreate(){ Vue.prototype.$bus = this //安装全局事件总线,$bus就是当前应用的vm }, ......})3、使用事件总线:(1)接收数据:A组件想接收数据,则在A组价中给$bus绑定自定义事件,事件的回调留在A组件自身methods(){ demo(d...原创 2022-04-06 15:53:26 · 612 阅读 · 0 评论 -
Vue笔记 组件的自定义事件
App组件:<template> <div> <h1>{{msg}}</h1> <!--通过父组件给子组件传递函数类型的props实现:子给父传递数据--> <School :getSchoolName="getSchoolName"/> <Student/> </div></template> <script>.原创 2022-04-06 14:34:47 · 320 阅读 · 0 评论 -
Vue笔记 组件通信:ref、props mixin scoped
ref属性1、作用:用于给节点打标识(被用来给元素或者子组件注册引用信息,id的替代者)2、应用在html标签上获取的真实DOM元素,应用在组件标签上是组件实例对象(vc)3、使用方式:打标识:<h1 ref="xxx">...</h1>或<School ref="xxx"></School>读取方式:this.$refs.xxxxxxprops属性:让组件接收外部传过来的数据父组件:传递数据<template>原创 2022-03-30 10:00:42 · 745 阅读 · 1 评论 -
Vue笔记 创建脚手架
1、Vue脚手架时Vue官方提供的标准化开发工具(开发平台)。2、最新的版本是4.x3、文档:https://cli.vuejs.org/zh/command line interface ==> CLI具体步骤:第一步:(仅第一次执行)全局安装@vue/clinpm install -g@vue/cli第二步:切换到你要创建项目的目录,然后使用命令创建项目vue create xxx第三步:启动项目npm run serve备注:如下载缓慢请配置npm..转载 2022-03-29 10:16:31 · 70 阅读 · 0 评论 -
Vue笔记 单文件组件
文件就是以vue为后缀。比如school.vue在VS CODE中安装一个新插件,Vetur。可以在vue文件中显示标签高亮。<template> <!--组件的结构--></template><script> //组件交互相关的代码</script><style> /*组件的样式*/</style>下面的文件为School.vue<template>原创 2022-03-29 09:31:08 · 110 阅读 · 0 评论 -
Vue笔记 非单文件组件
Vue中使用组件的三大步骤一、定义组件(创建组件)二、注册组件三、使用组件(写组件标签)一、如何定义一个组件?使用Vue.extend(options)创建,其中options和new Vue(options)时传入的那个options几乎一样,但也有区别:1、el不要写,为什么?最终所有的组件都要经过一个vm的管理,由vm中的el决定服务哪个容器2、data必须写成函数,为什么?避免组件被复用时,数据存在引用关系。备注:使用template可以配置组件结构二、如原创 2022-03-28 21:20:12 · 55 阅读 · 0 评论 -
Vue笔记 生命周期
生命周期1、又名:生命周期回调函数、生命周期函数、生命周期钩子2、是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数3、生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的4、生命周期函数中的this指向的是vm或组件实例对象vm的一生(vm的生命周期) 将要创建==》调用beforeCreate函数 创建完毕==》调用created函数 将要挂载==》调用beforeMount函数 挂载完毕(重要...原创 2022-03-24 21:19:30 · 1370 阅读 · 0 评论 -
Vue笔记 自定义指令
需求1:定义一个v-big指令,和v-text功能类似,但会把绑定的数值放大10倍 需求2:定义一个v-fbind指令,和v-bind类似,但可以让其所绑定的input元素默认获取焦点<body><!-- 需求1:定义一个v-big指令,和v-text功能类似,但会把绑定的数值放大10倍 需求2:定义一个v-fbind指令,和v-bind类似,但可以让其所绑定的input元素默认获取焦点--><div id="root"> ...原创 2022-03-24 11:07:21 · 133 阅读 · 0 评论 -
Vue笔记 内置指令 v-text v-html v-cloak v-once v-pre
v-bind:单向绑定解析表达式,可简写为:xxxv-model:双向数据绑定v-for:遍历数组/对象/字符串v-on:绑定事件监听,可简写为@v-if:条件渲染(动态控制节点是否存在)v-else:条件渲染(动态控制节点是否存在)v-show:条件渲染(动态控制节点是否展示)1、v-text向其所在的节点中渲染文本内容,与插值语法的区别:v-text会替换掉节点中的内容,{{xxx}}不会,还是插值语法用的多<div>{{name}}</div原创 2022-03-24 10:18:12 · 2098 阅读 · 0 评论 -
【Vue笔记】 收集表单数据
简单表单利用Vue收集数据<div id="root"> <form @submit.prevent="demo"> 账号: <input type="text" v-model.trim="account"> <br/><br/> //trim可以省略空格 密码: <input type="password" v-model="password"> <br/><br.原创 2022-03-19 10:26:41 · 958 阅读 · 0 评论 -
Vue中的key有什么作用?(key的内部原理)
1、虚拟DOM中key的作用:key是虚拟DOM对象的标识,当数据发生变化时,Vue会根据【新数据】生成【新的虚拟DOM】,随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较,比较规则如下:2、对比规则: (1)旧虚拟DOM中找到了与新虚拟DOM相同的key:若虚拟DOM中内容没变,直接使用之前的真实DOM!若虚拟DOM中内容变了,则生成新的真实DOM,随后替换掉页面中之前的真实DOM (2)旧虚拟DOM中未找到与新虚拟DOM相同的key创建新的真实DOM,随后...原创 2022-03-18 13:52:46 · 1607 阅读 · 1 评论 -
【Vue笔记】绑定class样式、绑定内联style样式
绑定class样式1.字符串写法,适用于:样式的类名不确定,需要动态指定<div id="root"><div class="basic" :class="a" @class="changeMood">{{name}}</div></div><script type="text/javascript">Vue.config.productionTip = falsenew Vue ({ el:'#root',原创 2022-03-18 11:07:21 · 1184 阅读 · 0 评论 -
【Vue笔记】Vue键盘事件
1.Vue中常用的按键别名:回车=>enter删除=>delete(捕获“删除”和“退格”键)退出=>esc空格=>space换行=>tab上=>up下=>down左=>left右=>right@keyup.enter=showInfo@keydown.tab=showInfo2.Vue未提供别名的按键,可以使用按键原始的key值去绑定,但注意要转为keyab-case(短横线命名)3.系统修饰键(用原创 2022-02-07 16:15:42 · 761 阅读 · 0 评论 -
【Vue笔记】Vue的事件修饰符
事件的基本作用 1.使用v-on:xxx或者@xxx绑定事件,其中xxx是事件名 2.事件的回调需要配置在methods对象中,最终在vm上 3.methods中配置的函数,不要用箭头函数!否则this就不是vm 4.methods中配置的函数,都是被Vue所管理的函数,this的指向是vm或组件实调对象 5.@click=“demo”和@click="demo($event)"效果一致,但后者可以传参事...原创 2022-02-07 13:07:22 · 560 阅读 · 0 评论 -
Chrome浏览器安装Vue.js插件是显示Vue.js is not detected怎么解决
当我们安装谷歌浏览器vue插件时,会出现没有检测到情况,右上角图标显示灰色我们点击右上角 扩展程序,点击下图所示图标出现点击详情,将允许访问文件网址打开按钮就行。请注意以下几点:1、检查你的开发者工具选项是否已经打开2、是否打开了插件的开关3、文件中引入的 vue 文件 ,文件名必须为 ‘ vue.js ’ , 不能为其他4、引入的 vue 文件必须是开发版本的文件,不能是生产版本 , 这是官网下载地址:安...原创 2022-02-06 21:36:51 · 5768 阅读 · 0 评论