vue项目
文章平均质量分 53
Lmq!
这个作者很懒,什么都没留下…
展开
-
Vue组件间通信--消息订阅与发布
适用于任何组件间通信1.订阅消息:消息名(需要数据的组件)2.发布消息:消息内容(提供数据的组件)使用步骤: i 安装pubsub:npm i pubsub-js ii 引入: import pubsub from 'pubsub-js' iii 接收数据:A组件想接收B组件数据,则在A组件中订阅消息,订阅的回调留在A组件自身。 methods(){ demo(msgName, data){......} }原创 2022-04-28 11:44:54 · 390 阅读 · 0 评论 -
this.$nextTick
什么时候需要用Vue.nextTick():参考文章语法:this.$nextTick(回调函数) 作用:在下一次 DOM 更新结束后执行其指定的回调。 什么时候用:当改变数据后,要基于更新后的新DOM进行某些操作时,要在nextTick所指定的回调函数中执行。 Vue.nextTick(): 在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的DOM。 获取更新后的DOM言外之意就是什么操作需要用到了更新...原创 2022-04-27 21:27:50 · 291 阅读 · 0 评论 -
Vue组件间通信--全局事件总线
一种可以在任意组件间通信的方式,本质上就是一个对象,他必须满足以下条件1.所有的组件对象都必须能看见他2.这个对象必须能够使用 $on $emit $off 方法去绑定、触发和解绑事件使用步骤:安装全局事件总线:new Vue({ ... beforeCreate() { Vue.prototype.$bus = this // 安装全局事件总线,$bus 就是当前应用的 vm }, ...})使用事件总线(1)接收数据:A组件想接收原创 2022-04-27 20:57:40 · 131 阅读 · 0 评论 -
Vue--生命周期回调函数
生命周期:又名:生命周期回调函数、生命周期函数、生命周期钩子。是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数。生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的。生命周期函数中的this指向是vm或组件实例对象...原创 2022-04-24 16:16:06 · 1124 阅读 · 0 评论 -
Vue--class和style绑定
绑定class样式三种写法绑定class样式--字符串写法 适用于:样式的类名不确定 需要动态指定<body><div id="root"> <!--绑定class样式--字符串写法 适用于:样式的类名不确定 需要动态指定--> <div class="basic" :class="mood" @click="changMood">{{name}}</div><script type="text/java原创 2022-04-20 16:43:44 · 709 阅读 · 0 评论 -
Vue组件间通信--Vuex
1.概念 在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。2.何时使用?多个组件依赖于同一状态来自不同组件的行为需要变更同一状态3.vuex工作原理如组件Count进行+2操作,通过store.dispatch('jia',2)分发给actionsActions:对象 key是动作类型 value是个函数,在此函数内调用store.commit提...原创 2022-04-20 16:08:49 · 1450 阅读 · 0 评论 -
Vue-cli解决跨域问题--配置代理服务器
前置知识常用发送ajax请求方式1.xhr :new XMLHttpRequest()真正开发中不常用,一般都是对xhr进行二次封装2.jQuery(对xhr的封装)核心是对DOM操作,在Vue中引入不合适(Vue的核心就是减少DOM操作)3.axios(对xhr的封装) 最推荐!!!是promise风格支持请求拦截器 和响应拦截器体积小 大约是jQuery的1/44.fetch和xhr是平级的,是js里面内置的方法,可以直接new fetch但是fetch.原创 2022-04-18 16:54:36 · 1406 阅读 · 4 评论 -
Vue项目硅谷外卖(三)
将四个路由组件的静态页面写出,对于最上方的一栏,四个组件具有相同的样式,因此将具有相同样式的部分提取出来设计成一个新的组件,方便复用。公共组件HeaderTop.vue代码如下:<template> <header class="header"><!-- 定义一个插槽(等着组件的使用者进行填充) 这个是具名插槽--> <slot name="left"></slot> <sp..原创 2022-04-14 10:53:03 · 1166 阅读 · 0 评论 -
Vue项目硅谷外卖(二)
FooterGuide:底部导航栏组件,属于非路由组件FooterGuide.vue<template> <div class="footer_guide"><!-- vue强制动态绑定class、style class/style绑定就是用来专门实现动态样式效果的技术2.class绑定 :class=‘xxx’xxx是字符串,数组,对象3.style绑定::style=“{color:activeColor,fontSize:原创 2022-04-12 19:57:28 · 198 阅读 · 0 评论 -
Vue项目硅谷外卖(一)项目准备
本项目选自尚硅谷Vue实战教程,基于vue-cli2完成。一、项目准备1.创建vue-cli进入到自己要安装项目的文件夹目录,我这里是 “D:\webpackProject\vue-cli2> ” 执行 “vue init webpack vue-cli2-project ” 命令,出现如下图提示 ,“vue-cli2-project” 是我们的项目文件夹的名字,就是最终显示在index.html中的title标签里和package.json中的,也可以自己进行修改,我们一般不会去改,直接原创 2022-04-12 11:38:04 · 558 阅读 · 0 评论