本文主要介绍关于//" // 开发的时候设计成多级的结构
开发的时候,是data里面的属性为了区分常常设计为多级结构属性
Vue中有2种数据绑定的方式:
见到了cookie就相当于见到了用户名和密码至关重要
解析标签等理解其实就是理解为操作dom元素
定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)。
// 第二步:注册组件(局部注册) // 再次创建一个vm备注:mapActions与mapMutations使用时,若需要传递参数需要:在模板中绑定事件时传递好参数,否则参数是事件对象。
!-- 模板里面可以看见vc身上的任何东西 -->组件中修改vuex中的数据,两种形式,
备注:若没有网络请求或其他业务逻辑,组件中也可以越过actions,即不写dispatch
,直接编写commit
多组件共享数据 要么自己完整的书写
要么使用mapState进行映射一下即可
模块化 + 命名空间 目的:让代码更好维护,让多种数据分类更加明确。(1. 将demo进行分类操作,不同的代码进行不同的操作,)修改store.js
开启命名空间后,组件中读取state数据
① 开启命名空间以后,组件中就可以读取state数据,② 直接读取的话,具体的路径名字要书写的清楚一点 ③ 借助mapState读取的话,前面写上创建的名字,表明自己想要在这里面进行读取,后面表示自己想要读取的内容,
④ 因为在state中,刚好有下面三种内容
开启命名空间后,组件中读取getters数据:
开启命名空间后,组件中调用dispatch
开启命名空间后,组件中调用commit
有的时候从外部服务器获取数据的时候,就不用传入value参数等,有的参数你需要就传入, 不需要就不传入
路由 理解: 一个路由(route)就是一组映射关系(key - value),多个路由需要路由器(router)进行管理。前端路由:key是路径,value是组件。
在书写项目的时候,一般组件书写在components文件夹中,路由组件书写在pages中
④ 实现切换(active-class可配置高亮样式)
⑤ 指定展示位置 - 指,有点类似于书写了一个填充位
对SPA应用的理解 单页 Web 应用(single page web application,SPA)。整个应用只有一个完整的页面。点击页面中的导航链接不会刷新页面,只会做页面的局部更新。数据需要通过 ajax 请求获取。 几个注意点 路由组件通常存放在pages
文件夹,一般组件通常存放在components
文件夹。 -
路由组件存放的位置一般不同通过切换,“隐藏”了的路由组件,默认是被销毁掉的,需要的时候再去挂载。每个组件都有自己的$route
属性,里面存储着自己的路由信息。整个应用只有一个router,可以通过组件的$router
属性获取到。 多级路由
① 配置路由规则,使用children配置项:
② 跳转(要写完整路径)
符号前面加上冒号,就是将冒号里面的所有内容就当做是js代码进行解析 路由的query参数
传递参数两种形式 ① to的字符串写法 ② to的对象写法
接收参数(使用query来进行接收)
命名路由 作用:可以简化路由的跳转如何使用
!--简化前,需要写完整的路径 -->
!--简化后,直接通过名字跳转(to前面需要冒号当做是 表达式解析) -->
路由的params参数 配置路由, 声明接收params参数
作用:让路由组件更方便的收到参数
谁接收东西就上谁那里书写相关配置去
作用:控制路由跳转时操作浏览器历史记录的模式浏览器的历史记录有两种写入方式:分别为push
和replace
,push
是追加历史记录,replace
是替换当前记录。路由跳转时候默认为push
如何开启replace
模式:News
编程式路由导航(不借助router-link的路由导航) 作用:不借助实现路由跳转,让路由跳转更加灵活具体编码
之前用router-link实现跳转不是挺好的吗?为什么现在不用了呢?
因为router-link对应的标签是a标签,如果不是a标签,就不能使用router-link了有的时候想要点了3s以后再进行页面跳转,这时候使用router-link没有办法实现 缓存路由组件 作用:让不展示的路由组件保持挂载,不被销毁。具体编码
缓存多个组件的时候,使用数组包裹起来即可
注意:include中包裹的是组件名,且是组件内部命名的组件名,非常关键,不是外部起名的
这两个新的生命周期钩子在路由组件内部进行书写
作用:路由组件所独有的两个钩子,用于捕获路由组件的激活状态。具体名字:
activated
路由组件被激活时触发。deactivated
路由组件失活时触发。
作用:对路由进行权限控制分类:全局守卫、独享守卫、组件内守卫全局守卫
一般用于一些简单的校验,比如说Local Storage中存储了school:atguigu在切换组件的时候,需要判断 school值是否为atguigu,如果是的话才会有后续的操作
独享守卫(使用独享守卫来操作) 可以搭配全局后置守卫使用
组件内守卫,想要写组件内部一些独有的逻辑可以使用
路由器的两种工作模式 对于一个url来说,什么是hash值?—— #及其后面的内容就是hash值。hash值不会包含在 HTTP 请求中,即:hash值不会带给服务器。hash模式:a:地址中永远带着#号,不美观 b:若以后将地址通过第三方手机app分享,若app校验严格,则地址会被标记为不合法。c:兼容性较好。history模式:a:地址干净,美观 。b:兼容性和hash模式相比略差。c:应用部署上线时需要后端人员支持,解决刷新页面服务端404的问题。
使用 npm run build 来将你书写的demo生成最纯粹的html、css、js文件 将代码打包成最纯粹的文件即可
最终生成一个dist文件夹, 生成出来的demo, 必须进行部署 生成一个简单的服务器 node.js
这种引入方式不太好,会将Element UI组件库全部引入, 造成项目文件过大!在开发中用的不多 Element UI 按需引入
在项目中用了什么组件就单单引入自己用过的组件即可
注册使用相应的组件即可(使用哪些组件需要进行相应的配置操作)
其中红框是需要进行手动配置的 -
参考B站狂神说教学视频
margin:0 0 0 0/分别表示上、右、下、左;从上开始顺时针/
border-radius有四个参数(顺时针),左上开始
块级元素:独占一行 h1~h6 、p、div、 列表…
注: 行内元素可以包含在块级元素中,反之则不可以。
这也是一种实现行内元素排列的方式,但是我们很多情况用float
right:右侧不允许有浮动元素
left:左侧不允许有浮动元素
both:两侧不允许有浮动元素
方案一:增加父级元素的高度;
方案二:增加一个空的div标签,清除浮动
方案三:在父级元素中增加一个overflow:hidden
方案四:父类添加一个伪类:after
相对于原来的位置,进行指定的偏移,相对定位的话,它仍然在标准文档流中,原来的位置会被保留
定位:基于xxx定位,上下左右~
1、没有父级元素定位的前提下,相对于浏览器定位
2、假设父级元素存在定位,我们通常会相对于父级元素进行偏移
3、在父级元素范围内移动
总结:相对一父级或浏览器的位置,进行指定的偏移,绝对定位的话,它不在标准文档流中,原来的位置不会被保留