![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
小破程序员
这个作者很懒,什么都没留下…
展开
-
vue门户首页飘窗功能
【代码】vue门户首页飘窗功能。原创 2023-12-15 11:40:35 · 488 阅读 · 0 评论 -
Vue使用element-ui
安装element-ui npm i element-ui -S 引入并使用 页面中直接使用即可 效果图如下 但是,这属于全部引入 可以借助babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。 安装 babel-plugin-component: npm install babel-plugin-component -D 官方说的是改 .babelrc 文件,实际上并不是,改的是balel.config.js 配置如下...原创 2022-05-24 21:41:30 · 140 阅读 · 0 评论 -
路由守卫学习
全局路由守卫: 全局前置路由守卫:路由初始化时被调用、路由切换之前被调用。 全局后置路由守卫:初始化的时候被调用、每次路由切换之后被调用 mata 属性可以为路由指定一些特殊属性 beforeEach有三个参数,从哪里来,到哪里去,以及最后的next,注意执行完逻辑以后要放行, 执行 next() 函数 afterEach,只有两个参数,to和from 独享守卫: 需要在配置路由的时候增加,只有在访问新闻路由的时候才会触发 组件内路由守卫: 通过路由规则进入该组件时被调用...原创 2022-05-23 21:41:47 · 131 阅读 · 0 评论 -
路由专属的两个生命周期钩子
作用: 用于捕获路由的激活状态 名字 activated : 路由组件被激活时触发 deactivated : 路由组件失活时触发 使用案例:原创 2022-05-23 21:23:02 · 146 阅读 · 0 评论 -
缓存路由组件
作用: 让不展示的路由组件保持挂载,不被销毁。 如何使用,在要缓存的router-view 区域包裹 keep-alive标签 注意,include属性中的 News 是组件名,这里是指定缓存News标签 如果不指定,默认在此处显示的组件都缓存 如果要缓存多个要使用数组...原创 2022-05-25 15:57:43 · 86 阅读 · 0 评论 -
编程式路由导航
作用: 不借助router-link标签实现路由的跳转 router常用api this.$router.go() 需要一个整形参数,this.$router.go(-1) 表示后退一步,this.$router.go(1) 表示前进一步原创 2022-05-23 21:08:16 · 130 阅读 · 0 评论 -
router-link 的replace属性
作用: 控制路由跳转时操作浏览器历史记录的模式 浏览器的历史记录有两种方式,分别为push和replace,push是追加历史记录,raplace是替换当前历史记录。路由跳转的默认方是push。 如何开启replace模式: 在router-link上增加replace属性即可...原创 2022-05-23 21:02:37 · 756 阅读 · 0 评论 -
路由的传参
query参数 有两种写法,字符串写法和对象写法,推荐使用对象写法 接收参数 命名路由 路由的name属性,给路由起个名字 给路由起好名字以后,跳转的时候就可以直接指定路由的名字进行跳转,如下图所示 注意要讲path换为name属性。 params参数 配置路由的时候使用占位符声明接收params参数 传递参数 接收参数,注意使用params 特别注意:路由携带params参数时,若使用to的对象写法,则不能使用path配置项,必须使 用name配置! ...原创 2022-05-23 20:26:36 · 365 阅读 · 0 评论 -
多级路由学习
所谓多级路由,就是在一级路由内部增加一个children属性,如下图所示 children的属性与一级路由一致,需要注意的是,一级路由的path必须加 / ,子路由不需要加。 在Home组件中用于指定News和Message在Home组件中的呈现。...原创 2022-05-23 20:01:38 · 248 阅读 · 0 评论 -
vue-router学习
什么是vue-router? vue的一个插件库,专门用来实现SPA应用,所谓SPA应用,即单页面应用,整个web应用只有一个完整的页面,点击页面中的导航不会刷新页面,只会局部更新,数据需要通过ajax获取。 安装vue-router npm i vue-router@3 注意指定版本号,因为自2022年2月后,vue的默认版本为3.x,对应的vue-router版本为4.x,因为我们此处用的vue2.x所以需要下载对应的vue-router版本。 在工程下创建router文件夹,并创...原创 2022-05-23 19:52:36 · 168 阅读 · 0 评论 -
Vuex的模块化编码
为什么要使用模块化编码,是为了防止所有的功能都在同一个actions,mutations,state 中,导致代码混乱,不同功能的代码写在不同的功能模块里。 准备两个模块,里面实现不同的功能 命名空间必须开启,否在在使用 mapState 等方法的时候无法找到对应的模块。 导出的时候使用modules,为每一个模块起一个名字 映射的时候,需要指定映射哪个模块中的方法和属性 模板中使用的时候还是用原来的方式,{{sum}}即可...原创 2022-05-21 09:28:57 · 142 阅读 · 0 评论 -
Vuex 学习
什么是vuex: 专门在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。 原理图 安装使用vuex注意:vue2.0 对应 vuex3.0,vue3.0 对应vuex4.0,如果版本选中错误就会报错npm i vuex,如果用的是vue2.0 需要指定版本, npm i vuex@3 ,如果不指定版本,默认下载vuex4 vuex 的actions、mutations 、...原创 2022-05-19 22:17:54 · 21529 阅读 · 0 评论 -
Vue插槽
作用: 让父组件可以向子组件指定位置插入html结构,也是组件间传递数据的一种方式 分类:默认插槽、具名插槽、作用域插槽 默认插槽: 在子组件的某个位置定义一个插槽标签,用于表明父组件中的html结构会被插在此处 例如 定义一个插槽,使用slot 标签 每次在父组件种调用子组件的时候,将要传递的html结构传进去就可以了 具名插槽: 用于子组件中有多个插槽的情况,需要为每一个插槽指定名字,使用属性 name,如下图所示,子组件中定义了两个插槽 父组件向子组件中传递htm...原创 2022-05-17 21:56:59 · 337 阅读 · 0 评论 -
vue 批量替换属性
底下那句画的意思是,当给对象赋值的时候,如果传递过来的参数少了一个属性,则保留原来的属性不变,只替换传递过来的属性,而且不用关心属性的顺序。发送方发送的数据原创 2022-05-17 11:06:15 · 660 阅读 · 0 评论 -
Vue axios的使用
为什么使用 axios: 发送ajax请求,解决跨域问题 什么是跨域: 发送ajax请求的时候要求同源,什么是同源,就是协议名、主机名、端口名一致。 怎么解决跨域 开启一个代理服务器,代理服务器与我么所处的位置相同,就是协议名,主机名,端口号一致。我们像代理服务器发送ajax请求,代理服务器收到请求后会向目标服务器发送http请求,http请求是没有跨域问题的,当代理服务器获取到http请求的返回值后,再将数据转发给我们得服务器,这样就解决的服务器的跨域问题。 安装axios...原创 2022-05-17 10:29:32 · 679 阅读 · 0 评论 -
消息发布与订阅pubsub
安装pubsub 进入你项目的根目录,cmd执行命令 npm i pubsub-js 理解pubsub,订阅的一方收数据,发布的一方传数据 使用pubsub发布订阅: 引入pubsub,指定订阅名为getData ,指定回调函数名为 getData(msgName,data),其中第一个参数为调用的订阅名,第二个参数为实际传递过来的参数。 发布消息: 为了保证安全,组件销毁的时候需要取消订阅: 消息的发布订阅,每发布一次订阅都会返回一个id,销毁的时候要根据id去销...原创 2022-05-16 20:41:07 · 209 阅读 · 0 评论 -
Vue的全局事件总线
安装全局事件总线,指定总线名为 $bus 绑定事件,并指定事件被调用时的回调函数 在其他组件中调用绑定的事件,并传递相应的参数,绑定事件的组件就可以接收到其他组件传来的数据。 为了保证事件名不冲突,最好在绑定事件的组件上,增加解绑的操作,就是当组件销毁的时候解绑该事件。...原创 2022-05-16 20:09:26 · 245 阅读 · 0 评论 -
Vue之scoped 样式的使用
为什么要使用scoped 因为在开发.vue的时候可能会开发多个组件,当多个组件汇总到一起的时候,css的样式也会 被汇总到一起,如果样式中有重名的,就可能导致样式冲突。 例如,两个插件的 <style></style>中都有 .demo 这个样式类。 解决: 在 <style scoped ></style> 中加入scoped属性,这样就表明此css样式只在本个.vue文件中 生效。 建议开发的时候都加上scoped 属性...原创 2022-05-12 22:52:07 · 178 阅读 · 0 评论 -
Vue插件
功能: 用于增强vue 本质:包含install方法的一个对象,install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据。 定义一个插件 使用插件原创 2022-05-12 22:34:51 · 122 阅读 · 0 评论 -
Vue属性
ref 属性:被用来给元素或者子组件注册引用信息,(id的替代) 标注了ref的子组件可以通过下面的方式获得: 应用在html上获取的真实的dom,应用在子组件上,获得是组件的实例对象 props:用于父组件给子组件传递数据 传递和接收方式如下 传递 接收:注意使用数组的时候必须加 引号 mixin: 混合 可以把多个组件共用的属性提取出来混合成一个对象 定义混合 局部引入使用 全局引入使用...原创 2022-05-11 21:41:13 · 123 阅读 · 0 评论 -
Vue学习
main.js文件: import Vue from 'vue' 实际上引入的是下面的文件,是一个残缺版的vue,缺少了vue的模板解析器。 可以替换为下面的写法: render的写法可以改为如下方式,意思一样: render的作用: 以为我们引入的vue是残缺版的,没有模板解析器的版本,所以在开发的时候,需要render进行模板的解析,当打包的时候,编译的好的文件会变成浏览器认识的js文件,就不需要模板解析器了,所以打包的时候只有vue的核心功能就可以了。 查看v...原创 2022-05-11 20:11:23 · 194 阅读 · 0 评论 -
本地安装 vue脚手架并创建一个示例项目
先把下载镜像换成淘宝的 npm config set registry https://registry.npm.taobao.org 全局安装 npm install -g @vue/cli 安装完成以后,关闭cmd,再打开,输入vue,如果不报错表明安装成功 切换到要创建项目的目录,创建一个自己的vue项目 vue create vue-test vue-test是要创建的项目名称 然后选择vue的版本, 出现下面的提示,表明项目创建成功。 进入创建好...原创 2022-05-10 22:54:03 · 308 阅读 · 0 评论 -
Vue实现无缝隙循环滚动
vue-seamless-scroll原创 2021-11-09 11:15:31 · 272 阅读 · 0 评论 -
Vue父组件向子组件传值
创建子组件: 注册子组件: 父组件使用子组件:子组件使用title接收父组件的值。原创 2021-09-06 17:17:52 · 64 阅读 · 0 评论