小楼一夜听春雨，深巷明朝卖杏花

整体布局写完了，那么就可以写main这部分的局部布局了，一般在做后台系统的时候，大部分时候，在做一些数据展示的时候基本上都会使用table的方式去做应该数据的展示，以及各种操作。按钮也可以放在table里面去，头部会给一些搜索的逻辑，基于什么样的条件去做一个搜索。在开发之前，先开发header，最后开发table。（也就是main里面的header）搜索之后数据就会慢慢展示出来了，然后对每条数据进行什么样的操作。

这种一项一项手写面包屑的方法带来了很多重复性工作，比如每个页面中都需要写一遍“首页”的面包屑，所有“活动管理”下的所有页面，也都需要写一遍“活动管理”。这时如果路由需要调整，那么所有页面的面包屑都要进行修改，非常繁琐。因此如果可以自动生成面包屑，就能够减轻很多重复性工作，也方便代码维护。

之前的布局容器是一个整体的框架，layout里面的布局其实就是el-row和el-col的组合。

每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker。由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据，组件升级采用了 flex 布局，以替代旧版本的 float 布局。包括各种表单项，比如输入框、选择器、开关、单选框、多选框等。属性传入约定的验证规则，并将 Form-Item 的。Form 组件提供了表单验证的功能，只需要通过。

通常情况下，应当处理 input 事件，并更新组件的绑定值（或使用v-model）。否则，输入框内显示的值将不会改变。不支持 v-model 修饰符。可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。使用show-password属性即可得到一个可切换显示隐藏的密码框。使用clearable属性即可得到一个可清空的输入框。input 为受控组件，它总会显示 Vue 绑定值。带有图标标记输入类型。

el-menu有很多属性和子标签，为网站提供导航功能的菜单。常用标签：它里面有两个子标签。el-menu-item，它其实就是el-menu每一个里面的item，item就是真实匹配到路由的每个栏目，不带有伸缩功能，具备真正内容的。没有内容的是带有伸缩功能的，是一个功能模块的合并，也就是一个集合的展示，它没有本身的一个页面，真正的页面展示是在每一个item里面。应该menu里面，除了item之外还有sub item，sub item里面还有item。

要开发新页面第一步要先去定义路由，定义好路由之后创建好对应的视图文件，然后就可以基于这个pass去访问这个页面了，拿到这个文件的效果了。然后就可以在这个文件里面边开发边去看效果去调试。先去注册路由，注册好路由之后去找到对应的xx.vue，再去vue文件里面写css和js。一个页面进来，是先到index.html。然后再到App.vue，App.vue里面有路由占位符，会将pass下面对应的视图文件加载进来到route-view的位置。卡片包含标题，内容及操作区域。卡片组件由header和。

（第二个container里面header main footer里面是垂直排列的，这些在container里面垂直排列，但是aside和这些又是水平排列）唯一不同的就是main里面的内容是不同的，边框架子都是相同的。其实框架是不怎么变化的，变化的是main里面。如果将平台名设置为固钉，它会盖在侧边栏上面，往上滚动的时候会一直存在。其实和el-form类似，一个组件其实是由很多的标签组成的。element-plus已经帮我们提供了整体布局的架子，后面只需要在main里面改东西就行了。

总结 在父亲元素属性比较多，开启弹性盒子模型通过display：flex属性来开启，子盒子方向可以通过flex-direction进行调整，之后就是子盒子上下左右位置，最后就是子盒子在父盒子当中的平均分配。现在可以为盒子的布局设置一个弹性盒子模型，给外层容器的div加上弹性盒子设置，那么就可以管理里面三个盒子。一个大的盒子里面里面的子元素如何摆放由我们的弹性盒子说的算。之前的盒子模型是一个元素，内边距外边距，边框来调整在页面所显示的位置。弹性盒子，在大容器里面，里面有很多的小盒子，这些小盒子是如何摆放的。

El-Card是Element Plus组件库中的一个组件，用于展示卡片式的内容。它提供了丰富的配置选项，可以根据需求自定义卡片的样式和内容。可以通过CDN引入，也可以通过下载并引入本地文件的方式。4.在``标签内部，可以添加任意内容来展示在卡片中，可以是文本、图像、按钮或其他HTML元素。（3）可以为`标签添加多个属性，来配置卡片的样式和行为。（2）在需要使用El-Card的地方，使用`标签包裹卡片内容。

正常情况下打开浏览器前端页面向后端发起请求使用的是axios，无论是原生的axios还是自己封装的axios都看成是axios。这些都是优先于你的axios.get()/post()去执行的，不管是在get/post发起请求之前还是获得响应之后，你得先经过拦截器！主要去处理响应是否成功，拿到返回业务状态码的逻辑，这个时候其实是自定义的响应，到底业务有没有成功，这决定了你的前端展示。请求拦截器就是你在发起请求的时候应该做什么事情，响应拦截器就是你在接收到这个请求之后应该去干什么。做一些自定义的响应配置。

这个方法在object身上，名字叫做defineProperty，这个方法可不要小瞧，vue底层很多地方都使用到了。这里传入三个参数，第一个是给哪个对象添加属性，第二个添加的属性叫做什么名字，最后就是一个特别重要的参数叫做配置项，配置项里面可以写很多的配置。上面方法和四个配置项看起来复杂，但是可以对追加的配置项的属性进行很多高级的限制。比如vue里面使用的数据劫持就使用到了这个方法，数据代理用到了这个方法，后面计算属性也使用到了这个方法。上面都是基本的配置项，其实还可以传高级的配置项。

学习了组件用法，就像一种嵌套引用关系，在这个关系中，经常会涉及相互传数据的需求，即父组件传子组件，子组件传父组件。父、子组件的关系可以总结为向下传递，事件向上传递。如下图所示：所有的组件组成了完整的页面，但是组件里里面的数据与组件之间的数据是相互进行数据传递的。（组件之间存在着相互引用，这就存在了父子关系）有时候子组件页面的展示，展示什么样的内容是由父组件决定的，这时候父组件给子组件传参的时候就需要通过参数告诉子组件需要展示什么样的内容。

vue作者在最初设计vue的时候参考了mvvm这个模型。没有完全遵循mvvm，是在一定程度上遵循了这个模型。根据这个模型设计了vue里面的模型。

不能够输入就是没有value值，没有value值就证明不能捕获用户的输入，连输入的值都不能捕获那怎么可能影响数据的变化呢？v-bind最大特点就是单向数据绑定，修改了data里面的值容器里面的值也会跟着改变，但是修改容器里面的值data里面的值是不会发生变化的。还有另外一个指令可以完成双向的绑定。之前通过v-bind来完成的数据绑定，属性值和表达式进行绑定，表达式的值发生变化了属性值也跟着发生变化。2.v-model:value可以简写为v-model，因为v-mode1默认收集的就是value值。

红色框里面的都是vue的模板。上面只是简单的双括号加上表达式，这种叫做插值语法，除了这种语法还有其他语法吗？bind可以给标签里面任何一个标签属性动态的绑定值。通过上面可以看到插值语法往往用于指定标签体内容，也即是html元素中间部分。插值语法实现的功能很单一，就是将指定的值放到指定的位置。在data当中，不仅仅可以是基本的数据类型，还可以是对象。所以data里面的数据可以是多级的结构。vue里面的指令很多，都是以v-开头。v-bind不管理标签里面的内容，它是用于管理标签的属性。

初识Vue:1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象2.root 容器里的代码依然符合htm规范，只不过混入了一些特殊的Vue语法3.root 容器里的代码被称为【Vue模板】先准备好容器，然后有的vue实例，当vue实例开始工作的时候，拿到绑定的容器，之后去扫描看是否有特殊的语法。模板其实就是htlm里面混着很多的写法，这个就是vue的模板，经过解析就变成了正常的html片段，包含了你需要的数据。

vue官网网址：https://cn.vuejs.org/文档网址：https://cli.vuejs.org/zh/vue团队为了使得vue更加好的使用，维护了一些文档。API是vue的字典，在编写vue的时候，遇到了一些不会的方法那么就去找API，好像上面都在告诉你有哪些有用的属性和方法。API是在编码的时候遇到了不会的东西在这里面查阅一下。之前在学习的时候肯定要在html页面当中引入vue.js，然后去编写vue相关的代码。那么以后在公司就需要使用脚手架。

获取用户输入的内容使用绑定v-model，双向数据绑定（可以将表单的内容和data当中的数据关联起来，可以非常方便的设置和取值）。这个指令的使用需要在data当中定义绑定的数据，接着将这个指令设置给相应的表单元素就可以了。使用的指令是v-for，同时要有一个可以生成列表的数据，常用的是数组。记事本里面的内容并不复杂，所以这里使用字符串数组就行了。根据数组生成列表的结构，获取用户输入的内容（其实就是使用v-model进行双向数据绑定）。回车的时候新增数据，事件绑定v-on，使用回车键那么就是enter。

to是指从哪个页面来，from代表从根目录来。to：从哪来 from：到哪去。时候的一些钩子，当从一个页面跳转到另一个页面时，可以在跳转前、中、后做一些事情。提供的导航守卫主要用来通过跳转或取消的方式守卫导航。简单来说，就是在路由跳转。注册一个全局前置守卫，当一个导航触发时，就会异步执行这个回调函数。：当前导航正要离开的路由，也是一个路由对象。：可选，是一个方法，直接进入下一个路由。：函数，决定是否展示你要看到的路由页面。当你打开一个页面的前后需要去干什么。：即将要进入的目标，是一个路由对象。

网络应用的核心就是data中的数据一部分是通过网络获取到的。所以在方法当中发起网络请求，在响应回来之后将服务器返回的数据设置给data当中对应的值就行了！相对于原生的阿贾克斯，axios提供的方法使用起来会更加的简便，之前网络数据获取到了，如何和vue一起使用呢？返回的对象是response，里面有很多的属性，我们需要拿到的是data的属性。在axios外面和里面，this会发生变化，很简单，那么就将this存储起来。

当你进入到某个路径的时候，这个路径会有一个对应的页面，它会将页面文件渲染到路由占位符当中，其实也就是将整个页面渲染到路由占位符当中。这就是前面说的将子组件渲染到App.vue的另外一种方式，用路由的方式。route-view一定会出现在App.vue里面，它其实是路由占位符，页面的入口是App.vue，它的入口一定是主视图。主页面是空白的，因为是没有定义这个路由，其次app.vue里面没有任何东西了。先去定义好路由，定义好路由然后在APP.vue里面添加路由占位符。模块化的、基于组件的路由配置。

这个就想要axios，内部是阿贾克斯，封装之后使用起来更加便捷，并且功能单一就是发送请求，所以容量很小，并且可以和其他框架或者库结合起来，比如说vue，所以后面就是如何用axios+vue结合起来使用。在response对象里面，data就是我们需要数据，像config和request，这些都是请求的信息，大部分时候都用不上它。有些时候data值是返回字符串，有些时候是返回对象，不同的接口返回的数据格式是不一样的。它们的形参是可以用来获取信息，一个是服务器响应的内容，一个是服务器错误的信息。

登录页背景、卡片、输入框、按钮整体布局布局容器、固钉、导航栏、下拉选择框局部布局表格、表单、按钮、卡片、单选框、对话框、弹出框，这些和原生的HTML提供给我们的功能差不多，它只是帮你包装了一层。它帮你包装了动作和前端的美化工作。开发路线登录页 ->整体布局->局部布局介绍介绍官网Element-UI是基于vue实现的一套不依赖业务的UI组件库，提供了丰富的PC端组件，减少用户对常用组件的封装，降低了开发的难易程度。Element-UI:基于。

之前的指令，无论使用哪一种，都是在代码当中定义的内容。在web开发当中经常要去获取用户的输入，v-model可以十分方便的将表单的值和实例当中的数据关联起来。这样就可以十分便捷的获取和设置表单元素的值了。（注意是表单元素）

之前跳过js jquery需要通过事件参数来判定触发的按钮是什么才可以限制触发的时机，但是在vue里面直接使用事件修饰符就行了。语法是点，后面跟上修饰符.enter就代表只要在回车键的时候才会触发这个逻辑。文本框，绑定了一个按钮事件，对应的逻辑是sayhi，现在无论按下什么按钮都会触发这个sayhi。但是实际上不是所有的按钮都会触发，只会限定某一些按钮，最常见的按钮就是回车键。限制触发的按键是回车键，使用事件修饰符，相对于之前需要结合事件参数来判断按下的按键，现在一个点就搞定了，这样更加灵活方便。

如果数组的每一项不是数字，而是对象或者其他复杂的类型，那么item代表这个对象，要获取内部的值要结合.语法。v-for还有个特点，比如数组的长度发生变化了，比如添加了或者删除了，那么生成的列表也会发生改变。item的值是可以使用的，item的值可以结合其他指令，比如使用v-bind和v-on指令。v-for指令的作用是将作为模板的那个标签，还有内部的内容，根据循环的次数拷贝若干份。至于是什么样的列表，就看你指令使用的位置了，列表的生成依赖于数据，所以先去定义数据。item和index都是可以修改其名称的。

a标签在点击的时候要执行逻辑，那么事件绑定是v-on，在第一张和最后一张图片隐藏某个a标签，因为切换的比较频繁，考虑到性能问题使用v-show指令。如果不为最后一张，只需要判断所应的长度比数组小，指令使用v-show。图片的地址有很多个，在js当中通过数组来保存多个数据，数组的取值结合索引，根据索引可以来判断是否是第一张还是最后一张。然后使用v-bind指令，将地址和img的src属性绑定，获取的方式其实就是数组+索引。点击上一张和下一张图片，本质是修改了索引的值，这部分的逻辑写在methods中，

【代码】Vue 本地应用-计数器。

如果元素的显示条件更加复杂，那么还支持一些表达式，比如有age属性，图片需要age满足某些属性才可以显示，比如大于18岁，那么只需要写上大于等于18就行了，最终都会=解析为布尔值。v-show后面的值一般是定义在vue实例当中的数据，这样就不是写死固定了。v-show指令的作用是根据后面表达式的真假，让元素显示或者隐藏。有哪些情况需要切换元素的显示？比如广告，或者遮罩层。如果false那么图片就不会显示。

（前端调后端，后端是有鉴权逻辑的，前端要加一个token，前端在登入的时候就获取到这个token了，每次发起请求的时候这个token加入到url参数内）发起数据请求(每个页面的数据都是活的，不可能数据发生变化的时候都去更新代码)，如果每次都填写完整的请求路径，不利于后期维护。正常情况下打开一个浏览器，前端页面向后端页面发起请求，使用的是aixos发起请求，无论是原装的还是封装的axios，后端去数据库中拿数据返回给前端。发起请求的地方是axios，你那个自己封装axios，那么你就可以添加拦截器。

一段独立的，能代表页面某一个部分的代码片段，拥有自己独立的数据、JavaScript脚本、 以及CSS样式。一个组件就是一个vue的文件。

基本使用（去创建vue实例，创建之后再去挂载，挂载之后就去使用各种功能，挂载之后就可以使用其各种功能，data methods compute 以及各个生命周期，常用的属性以及数据的双向绑定），但这种在。构建，并带有合理的默认配置（是管理包的工具，项目里面有package.json，里面都是依赖包，有点像go里面的gomod，）进行快速开发的完整系统（其实就是将整条链路打通了的，整个框架就在那，你只需要去填入代码就行了），提供。的方式，简单的页面还是没问题 的，如果用Vue开发整个前端项目，组建。

用于动态绑定一个或多个属性值，或者向另一个组件传递props值(这个后面再介绍)，应用场景:图片地址src、超链接href、动态绑定一些类、样式等等。使用v-bind是因为html标签里面有很多的属性值不是写死的，它也是一个动态的值，是一个变量。data里面定义的属性可以在整个view实例里面去使用，这个是要用this的。v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。使用了v-bind之后，引号里面的就不再是字符串了，而是引用的变量了。使用v-bind就可以在属性里面传递变量了，

其实就是输入框里面的值发生了变化给到了msg。是数据驱动的，数据驱动有一个精髓之处是数据双向绑定， 即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。首先使用v-bind绑定一个value，v-bind是用来绑定变量的，因为value是其固定属性，value后面是变量的名称，input的值其实就是sth变量的值。input输入框，绑定了message的值，input是事件的监听，然后调用input的方法，这个方法里面传event，这个就是将event给到message。

vue是如何知道要去操作那个元素的呢？el:"#app"这里有el的属性，在css当中#是id选择器。这样就可以让vue去管理id为app的元素。第一步导入vue，第二步在html里面写一点东西，第三步在js里面写一点东西。{{message}} 是模板的语法，作用是使用数据和页面结构关联起来。data是vue实例当中的使用到的数据，你需要使用什么就写什么。

计算属性一般就是用来通过其他的数据算出一个新数据，而且它有一个好处就是， 它把新的数据缓存下来了，当其他的依赖数据没有发生改变，它调用的是缓存的数据，这就极大的提高了我 们程序的性能。会在创建新组件实例的过程中调用此函数（将里面定义的变量都放到实例里面去，你就可以使用this点出来，包括HTML里面就能够使用这些变量的）。选项中的数据一样，可以在组件的模板中使用（挂载到html中某个dom上面）。你要的数据名不需要在data里面去定义，但是数据还是需要的，你的数据都是从data里面拿到的。

（高度封装框架的特点是不需要关心dom操作，js jQuery很多都是对dom的一个操作，使用这个框架之后就不需要对dom操作了，视图的框架需要我们去写，数据也需要我们去维护）ViewModel 它其实是控制器，是做数据和视图之间的一个桥梁，数据更新和数据的交换，数据层和视图层之间的一个桥梁。它在js定义的时候有一个setup，但是几个功能定义是大差不差的，比如watch，变量的定义，方法的定义。整个html页面就是一个dom树，每个标签相对的元素都是它的每一个节点。（很强大的组件功能，一个一个组件嵌套）

但是使用v-html的时候那么html的各种属性都能够渲染出来。最终将v-text渲染为一个html的文本。在开发过程当中使用vue的语法，但是在实际最终会将vue的语法转化渲染为html页面。可以看到做文本的时候可以使用v-text，同时也可以看到在vue框架里面可以在HTML标签当中使用vue属性。在前端开发中，我们经常监听用户发生的事件，例如点击、拖拽、键盘事件等。在整个vue的编写过程当中，只要带v-的，那么都是常用的vue的指令。显示HTML文本的，某些情况下，从服务端请求的数据本身就是一个。