A1066223647的博客

Vue41-路由文章目录Vue41-路由0、路由1.基本使用2.几个注意点3.多级路由（多级路由）4.路由的query参数5.命名路由6.路由的params参数7.路由的props配置8.``````的replace属性9.编程式路由导航10.缓存路由组件11.两个新的生命周期钩子12.路由守卫13.路由器的两种工作模式13.路由器的两种工作模式0、路由理解： 一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。前端路由：key是路径，va

Vue40-Vuex文章目录Vue40-Vuex一、概念二、何时使用？三、搭建vuex环境四、基本使用五、getters的使用六、四个map方法的使用七、模块化+命名空间一、概念​ 在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-idAiJkri-1653963822140)(C:\Users\LiuJia

Vue39-插槽文章目录Vue39-插槽一、插槽二、默认插槽三、具名插槽四、作用域插槽一、插槽作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件 。分类：默认插槽、具名插槽、作用域插槽二、默认插槽父组件中： <Category> <div>html结构1</div> </Category>子组件中： <

Vue38-Github用户搜素案例文章目录Vue38-Github用户搜素案例<template> <div class="row"> <!-- 展示用户列表 --> <div v-show="info.users.length" class="card" v-for="user in info.users" :key="user.login"> <a :href="user.html_url" target="_blank"&gt

Vue37-配置服务器代理文章目录Vue37-配置服务器代理方法一方法二方法一​ 在vue.config.js中添加如下配置：devServer:{ proxy:"http://localhost:5000"}说明：优点：配置简单，请求资源时直接发给前端（8080）即可。缺点：不能配置多个代理，不能灵活的控制请求是否走代理。工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源）方法二​ 编写vue.config.js配置具体代

Vue36-Vue封装的过度与动画文章目录Vue36-Vue封装的过度与动画一、手动加入动画二、调用Animate第三方库一、手动加入动画作用：在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。图示：写法：准备好样式：元素进入的样式：v-enter：进入的起点v-enter-active：进入过程中v-enter-to：进入的终点元素离开的样式：v-leave：离开的起点v-leave-active：离开过程中v-leave-to：离开

Vue35-TodoList_编辑文章目录Vue35-TodoList_编辑nextTick语法：this.$nextTick(回调函数)作用：在下一次 DOM 更新结束后执行其指定的回调。什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。<template> <div id="root"> <div class="todo-container"> <div class="todo

Vue34-TodoList_pubsub文章目录Vue34-TodoList_pubsub<template> <div id="root"> <div class="todo-container"> <div class="todo-wrap"> <MyHeader @addTodo="addTodo"/> <MyList :todos="todos"/> <MyFooter :todo

Vue33-消息订阅与发布（pubsub）文章目录Vue33-消息订阅与发布（pubsub）一种组件间通信的方式，适用于任意组件间通信。使用步骤：安装pubsub：npm i pubsub-js引入: import pubsub from 'pubsub-js'接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。methods:{ demo(_,data){......}}......mounted() { this.pid = pub

Vue32-TodoList_事件总线文章目录Vue32-TodoList_事件总线APP.vue<template> <div id="root"> <div class="todo-container"> <div class="todo-wrap"> <MyHeader @addTodo="addTodo"/> <MyList :todos="todos"/> <MyFooter :

Vue31-全局事件总线文章目录Vue31-全局事件总线一种组件间通信的方式，适用于任意组件间通信。安装全局事件总线：new Vue({ ...... beforeCreate() { Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm }, ......}) 使用事件总线：接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。methods(){ demo(dat

Vue30-TodoList_自定义事件文章目录Vue30-TodoList_自定义事件APP.vue<template> <div id="root"> <div class="todo-container"> <div class="todo-wrap"> <MyHeader @addTodo="addTodo"/> <MyList :todos="todos" :checkTodo="checkTodo

Vue29-组件自定义事件文章目录Vue29-组件自定义事件一种组件间通信的方式，适用于：子组件 ===> 父组件使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。绑定自定义事件：第一种方式，在父组件中：<Demo @atguigu="test"/>或 <Demo v-on:atguigu="test"/>第二种方式，在父组件中：<Demo ref="demo"/>......

Vue28-TodoList_本地存储文章目录Vue28-TodoList_本地存储在APP.vue中开启深度监视，初始化数据均从localStorge中获取<template> <div id="root"> <div class="todo-container"> <div class="todo-wrap"> <MyHeader :addTodo="addTodo"/> <MyList :todos="

Vue27-webStorage文章目录Vue27-webStorage存储内容大小一般支持5MB左右（不同浏览器可能还不一样）浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。相关API：xxxxxStorage.setItem('key', 'value');该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。xxxxxStorage.getItem('pers

Vue26-TodoList案例文章目录Vue26-TodoList案例组件化编码流程：​ (1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。​ (2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：​ 1).一个组件在用：放在组件自身即可。​ 2). 一些组件在用：放在他们共同的父组件上（状态提升）。​ (3).实现交互：从绑定事件开始。props适用于：​ (1).父组件 ==> 子组件 通信​ (2).子组件

Vue25-scoped样式文章目录Vue25-scoped样式作用：让样式在局部生效，防止冲突。写法：<style scoped><template> <div class="demo"> <h2 class="title">学生姓名：{{name}}</h2> <h2 class="atguigu">学生性别：{{sex}}</h2> </div></template>

Vue24-插件文章目录Vue24-插件功能：用于增强Vue本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。定义插件：对象.install = function (Vue, options) { // 1. 添加全局过滤器 Vue.filter(....) // 2. 添加全局指令 Vue.directive(....) // 3. 配置全局混入(合) Vue.mix

Vue23-mixin(混入)文章目录Vue23-mixin(混入)功能：可以把多个组件共用的配置提取成一个混入对象使用方式：第一步定义混合：{ data(){....}, methods:{....} ....}第二步使用混入：​ 全局混入：Vue.mixin(xxx)​ 局部混入：mixins:['xxx'] <template> <div> <h2 @click="showName">学校名称：{{na

Vue22-props属性文章目录Vue22-props属性功能：让组件接收外部传过来的数据传递数据：<Demo name="xxx"/>接收数据：第一种方式（只接收）：props:['name'] 第二种方式（限制类型）：props:{name:String}第三种方式（限制类型、限制必要性、指定默认值）：props:{ name:{ type:String, //类型 required:true, //必要性 default:'老王' //默认

Vue21-ref属性文章目录Vue21-ref属性被用来给元素或子组件注册引用信息（id的替代者）应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）使用方式：打标识：<h1 ref="xxx">.....</h1>或 <School ref="xxx"></School>获取：this.$refs.xxx<template> <div> <h1 v-text="msg

Vue20-分析脚手架文章目录Vue20-分析脚手架安装脚手架步骤脚手架文件结构关于不同版本的Vuevue.config.js配置文件安装脚手架步骤第一步（仅第一次执行）：全局安装@vue/cli。npm install -g @vue/cli第二步：切换到你要创建项目的目录，然后使用命令创建项目vue create xxxx第三步：启动项目npm run serve备注：如出现下载缓慢请配置npm 淘宝镜像：npm config set registry https://regist

Vue19-单文件组件文章目录Vue19-单文件组件单文件组件在使用时将每一个组件都单独写成.vue文件，vue文件格式内容如下：<template> <div class="demo"> <h2>学校名称：{{name}}</h2> <h2>学校地址：{{address}}</h2> <button @click="showName">点我提示学校名</button> </div&

Vue18-非单文件组件文章目录Vue18-非单文件组件一、基本使用二、几个注意点三、组件的嵌套四、VueComponent五、一个重要的内置关系一、基本使用Vue中使用组件的三大步骤：​ 一、定义组件(创建组件)​ 二、注册组件​ 三、使用组件(写组件标签)一、如何定义一个组件？​ 使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；​ 区别如下：​ 1.el不要写，

Vue17-生命周期文章目录Vue17-生命周期一、引出生明周期二、分析生命周期三、总结生命周期一、引出生明周期1.又名：生命周期回调函数、生命周期函数、生命周期钩子。2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。4.生命周期函数中的this指向是vm 或 组件实例对象。<!DOCTYPE html><html> <head> <meta charset="U

Vue16-自定义指令文章目录Vue16-自定义指令需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。自定义指令总结：​ 一、定义语法：​ (1).局部指令：​ new Vue({ new Vue({​ directives:{指令名:配置对象} 或 directives{指

Vue15-内置指令文章目录Vue15-内置指令一、v-text指令二、v-html指令三、v-cloak指令三、v-once指令四、v-pre指令一、v-text指令我们学过的指令：​ v-bind : 单向绑定解析表达式, 可简写为 :xxx​ v-model : 双向数据绑定​ v-for : 遍历数组/对象/字符串​ v-on : 绑定事件监听, 可简写为@​ v-if : 条件渲染（动态控制节点是否存存在）​ v-else : 条件渲染（动态控制节点

Vue14-过滤器文章目录Vue14-过滤器定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。语法：​ 1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}​ 2.使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”备注：​ 1.过滤器也可以接收额外参数、多个过滤器也可以串联​ 2.并没有改变原本的数据, 是产生新的对应的数据<!DOCTYPE ht

Vue13-收集表单数据文章目录Vue13-收集表单数据若：<input type=“text”/>，则v-model收集的是value值，用户输入的就是value值。若：<input type=“radio”/>，则v-model收集的是value值，且要给标签配置value值。若：<input type=“checkbox”/>​ 1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）​ 2.配置input

Vue12-列表渲染文章目录Vue12-列表渲染一、基本列表二、key的原理三、列表过滤四、列表排序五、更新列表信息的一个问题六、Vue监测数据改变的原理_对象七、模拟一个数据监测八、Vue.set的使用九、Vue监测数据改变的原理_数组十、总结数据监视一、基本列表v-for指令:​ 1.用于展示列表数据​ 2.语法：v-for=“(item, index) in xxx” :key=“yyy”​ 3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）<!DOCTYPE

Vue11-条件渲染文章目录Vue11-条件渲染1.v-if​ 写法：​ (1).v-if=“表达式”​ (2).v-else-if=“表达式”​ (3).v-else=“表达式”​ 适用于：切换频率较低的场景。​ 特点：不展示的DOM元素直接被移除。​ 注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。2.v-show​ 适用于：切换频率较高的场景。​ 特点：不展示的DOM元素未被移除，仅仅是使

Vue10-绑定样式文章目录Vue10-绑定样式1.class样式​ 写法:class=“xxx” xxx可以是字符串、对象、数组。​ 字符串写法适用于：类名不确定，要动态获取。​ 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。​ 数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。2.style样式​ :style="{fontSize: xxx}"其中xxx是动态值。​ :style="[a,b]"其中a、b是样式对象。<!DO

Vue09-监视（侦听）属性文章目录Vue09-监视（侦听）属性一、天气案例二、监视（侦听）属性三、深度监视四、监视属性-简写五、watch实现一、天气案例<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>天气案例</title> <!-- 引入Vue --> <script type=

Vue08-计算属性文章目录Vue08-计算属性一、姓名案例-插值语法实现二、methods实现三、计算属性实现四、计算属性简写一、姓名案例-插值语法实现<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>姓名案例_插值语法实现</title> <!-- 引入Vue --> <script

Vue07-事件处理文章目录Vue07-事件处理一、事件的基本使用二、事件修饰符三、键盘事件一、事件的基本使用使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；事件的回调需要配置在methods对象中，最终会在vm上；methods中配置的函数，不要用箭头函数！否则this就不是vm了；methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；@click=“demo” 和 @click=“demo($event)” 效果

Vue06-数据代理文章目录Vue06-数据代理一、回顾Object.defineproperty二、数据代理定义三、Vue中的数据代理一、回顾Object.defineproperty<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>回顾Object.defineproperty方法</title> </head&

Vue05-MVVM模型文章目录Vue05-MVVM模型MVVM模型​ 1.M：模型(Model) ：data中的数据​ 2.V：视图(View) ：模板代码​ 3.VM：视图模型(ViewModel)：Vue实例观察发现：​ 1.data中所有的属性，最后都出现在了vm身上。​ 2.vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。<!DOCTYPE html><html> <head>

Vue04-el与data的两种写法文章目录Vue04-el与data的两种写法data与el的2种写法​ 1.el有2种写法​ (1).new Vue时候配置el属性。​ (2).先创建Vue实例，随后再通过vm.$mount(‘#root’)指定el的值。​ 2.data有2种写法​ (1).对象式​ (2).函数式​ 如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。​ 3.一个重要的原则：

Vue03-数据绑定文章目录Vue03-数据绑定一、数据绑定一、数据绑定Vue中有2种数据绑定的方式：​ 1.单向绑定(v-bind)：数据只能从data流向页面。​ 2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。​ 备注：​ 1.双向绑定一般都应用在表单类元素上（如：input、select等）​ 2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值 。​ 3.v

Vue02-模板语法文章目录Vue02-模板语法一、模板语法一、模板语法Vue模板语法有2大类：​ 1.插值语法：​ 功能：用于解析标签体内容。​ 写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。​ 2.指令语法：​ 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）。​ 举例：v-bind:href=“xxx” 或 简写为 :href=“xxx”，xxx同样要写js表达式， 且可以直接读取到data中的所有属性。<!DO