ykh12345678的博客

【代码】vue门户首页飘窗功能。

安装element-ui npm i element-ui -S 引入并使用 页面中直接使用即可 效果图如下 但是，这属于全部引入 可以借助babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。 安装 babel-plugin-component： npm install babel-plugin-component -D 官方说的是改 .babelrc 文件，实际上并不是，改的是balel.config.js 配置如下...

全局路由守卫： 全局前置路由守卫：路由初始化时被调用、路由切换之前被调用。 全局后置路由守卫：初始化的时候被调用、每次路由切换之后被调用 mata 属性可以为路由指定一些特殊属性 beforeEach有三个参数，从哪里来，到哪里去，以及最后的next，注意执行完逻辑以后要放行， 执行 next() 函数 afterEach，只有两个参数，to和from 独享守卫： 需要在配置路由的时候增加，只有在访问新闻路由的时候才会触发 组件内路由守卫： 通过路由规则进入该组件时被调用...

作用： 用于捕获路由的激活状态 名字 activated ： 路由组件被激活时触发 deactivated ： 路由组件失活时触发 使用案例：

作用： 让不展示的路由组件保持挂载，不被销毁。 如何使用，在要缓存的router-view 区域包裹 keep-alive标签 注意，include属性中的 News 是组件名，这里是指定缓存News标签 如果不指定，默认在此处显示的组件都缓存 如果要缓存多个要使用数组...

作用： 不借助router-link标签实现路由的跳转 router常用api this.$router.go() 需要一个整形参数，this.$router.go(-1) 表示后退一步，this.$router.go(1) 表示前进一步

作用： 控制路由跳转时操作浏览器历史记录的模式 浏览器的历史记录有两种方式，分别为push和replace，push是追加历史记录，raplace是替换当前历史记录。路由跳转的默认方是push。 如何开启replace模式： 在router-link上增加replace属性即可...

query参数 有两种写法，字符串写法和对象写法，推荐使用对象写法 接收参数 命名路由 路由的name属性，给路由起个名字 给路由起好名字以后，跳转的时候就可以直接指定路由的名字进行跳转，如下图所示 注意要讲path换为name属性。 params参数 配置路由的时候使用占位符声明接收params参数 传递参数 接收参数，注意使用params 特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使 用name配置！ ...

所谓多级路由，就是在一级路由内部增加一个children属性，如下图所示 children的属性与一级路由一致，需要注意的是，一级路由的path必须加 / ，子路由不需要加。 在Home组件中用于指定News和Message在Home组件中的呈现。...

什么是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文件夹，并创...

为什么要使用模块化编码，是为了防止所有的功能都在同一个actions，mutations,state 中，导致代码混乱，不同功能的代码写在不同的功能模块里。 准备两个模块，里面实现不同的功能 命名空间必须开启，否在在使用 mapState 等方法的时候无法找到对应的模块。 导出的时候使用modules,为每一个模块起一个名字 映射的时候，需要指定映射哪个模块中的方法和属性 模板中使用的时候还是用原来的方式，{{sum}}即可...

什么是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 、...

作用： 让父组件可以向子组件指定位置插入html结构，也是组件间传递数据的一种方式 分类：默认插槽、具名插槽、作用域插槽 默认插槽： 在子组件的某个位置定义一个插槽标签，用于表明父组件中的html结构会被插在此处 例如 定义一个插槽，使用slot 标签 每次在父组件种调用子组件的时候，将要传递的html结构传进去就可以了 具名插槽： 用于子组件中有多个插槽的情况，需要为每一个插槽指定名字，使用属性 name，如下图所示，子组件中定义了两个插槽 父组件向子组件中传递htm...

底下那句画的意思是，当给对象赋值的时候，如果传递过来的参数少了一个属性，则保留原来的属性不变，只替换传递过来的属性，而且不用关心属性的顺序。发送方发送的数据

为什么使用 axios： 发送ajax请求，解决跨域问题 什么是跨域： 发送ajax请求的时候要求同源，什么是同源，就是协议名、主机名、端口名一致。 怎么解决跨域 开启一个代理服务器，代理服务器与我么所处的位置相同，就是协议名，主机名，端口号一致。我们像代理服务器发送ajax请求，代理服务器收到请求后会向目标服务器发送http请求，http请求是没有跨域问题的，当代理服务器获取到http请求的返回值后，再将数据转发给我们得服务器，这样就解决的服务器的跨域问题。 安装axios...

安装pubsub 进入你项目的根目录，cmd执行命令 npm i pubsub-js 理解pubsub，订阅的一方收数据，发布的一方传数据 使用pubsub发布订阅： 引入pubsub，指定订阅名为getData ，指定回调函数名为 getData(msgName,data)，其中第一个参数为调用的订阅名，第二个参数为实际传递过来的参数。 发布消息： 为了保证安全，组件销毁的时候需要取消订阅： 消息的发布订阅，每发布一次订阅都会返回一个id，销毁的时候要根据id去销...

安装全局事件总线，指定总线名为 $bus 绑定事件，并指定事件被调用时的回调函数 在其他组件中调用绑定的事件，并传递相应的参数，绑定事件的组件就可以接收到其他组件传来的数据。 为了保证事件名不冲突，最好在绑定事件的组件上，增加解绑的操作，就是当组件销毁的时候解绑该事件。...

为什么要使用scoped 因为在开发.vue的时候可能会开发多个组件，当多个组件汇总到一起的时候，css的样式也会 被汇总到一起，如果样式中有重名的，就可能导致样式冲突。 例如，两个插件的 <style></style>中都有 .demo 这个样式类。 解决： 在 <style scoped ></style> 中加入scoped属性，这样就表明此css样式只在本个.vue文件中 生效。 建议开发的时候都加上scoped 属性...

功能： 用于增强vue 本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。 定义一个插件 使用插件

ref 属性：被用来给元素或者子组件注册引用信息，（id的替代） 标注了ref的子组件可以通过下面的方式获得： 应用在html上获取的真实的dom，应用在子组件上，获得是组件的实例对象 props：用于父组件给子组件传递数据 传递和接收方式如下 传递 接收：注意使用数组的时候必须加 引号 mixin: 混合 可以把多个组件共用的属性提取出来混合成一个对象 定义混合 局部引入使用 全局引入使用...

main.js文件： import Vue from 'vue' 实际上引入的是下面的文件，是一个残缺版的vue，缺少了vue的模板解析器。 可以替换为下面的写法： render的写法可以改为如下方式，意思一样： render的作用： 以为我们引入的vue是残缺版的，没有模板解析器的版本，所以在开发的时候，需要render进行模板的解析，当打包的时候，编译的好的文件会变成浏览器认识的js文件，就不需要模板解析器了，所以打包的时候只有vue的核心功能就可以了。 查看v...

先把下载镜像换成淘宝的 npm config set registry https://registry.npm.taobao.org 全局安装 npm install -g @vue/cli 安装完成以后，关闭cmd，再打开，输入vue，如果不报错表明安装成功 切换到要创建项目的目录，创建一个自己的vue项目 vue create vue-test vue-test是要创建的项目名称 然后选择vue的版本， 出现下面的提示，表明项目创建成功。 进入创建好...

vue-seamless-scroll

创建子组件： 注册子组件： 父组件使用子组件：子组件使用title接收父组件的值。