2020年10月_山竹回家了

原创 Element------validate表单验证代码示例与校验规则

校验规则参见: async-validator表单有一个validate(）发法，是一个异步验证器，可以进行用户数据的验证，所采用的规则就是rules规则。它有一个参数，是回调函数，当验证结束的时候，会调用这个回调函数并给函数传入一个验证结果，如果为True，说明验证通过，否则验证失败。一、代码示例.<template> <div class="index"> <!-- ：model：收集表单数据对象，里面的每一个表单分别绑定这个对象中的某个属性 --&.

2020-10-31 23:16:45 2589

原创 vue-----路由（router）的全局配置

vue中的路由一般是指页面跳转的路径，我们需要做的事，将组件（components)映射到路由（routes），然后告诉Vue Router在哪里渲染它们。VueRouter:构造函数，通过它实例化路由模块对象routes:添加路由配置1router:注入路由router-view:路由所映射组件的展示区域router-link:路由超链接$route:获取路由参数，它是一个对象$router：实现路由跳转，以代码的方式来实现一、安装NPM安装：npm install vue-r.

2020-10-31 18:00:01 3777

原创 Element框架从安装到使用

一、安装在所需的工作区调出cmd输入命令npm i element-ui -S二、按需引入安装：npm install babel-plugin-component -D将 .babelrc这个文件修改为：（或babel.config.js){ "presets": [["es2015", { "modules": false }]], "plugins": [ [ "component", { "libraryName": "el

2020-10-31 16:28:50 426

原创变相获取伪元素处理业务，实现伪元素的事件触发

需求：单击伪元素+号跳转页面伪元素顾名思义就是有元素的效果，但是页面中没有结构，不存在我们dom树中，所以无法获取，也就意味着不能进行dom操作。图例分析：图中大盒子是van-sticky

2020-10-30 22:41:21 287 2

原创通过url传参的方式实现页面回跳

实现步骤：1.在响应拦截器跳转时添加参数window.location.href = '#/login?returuurl=' + window.location.hash.substr(1)2.在登录成功时判断是否携带参数，是则返回传参页应用场景：用户浏览页面需要进行登录时，为避免找不回浏览记录，在登录后返回登录前浏览的页面。响应拦截器// 添加响应拦截器axios.interceptors.response.use(function (response) { // 对响应数据做.

2020-10-29 21:32:44 630

原创深度选择器的三种使用方式

在vue中,当< style>标签有scoped属性是,它的css制作用与当前组件的元素.也就是在我们日常开发中,父组件不能直接作用于子组件,这时候有两个方法:一是把scoped去掉,但是这样的话不仅是自己会影响别的元素,别的元素也会影响自身,所以这个方法一般不会使用.二是在样式前面添加/deep/或::v-deep,还有个>>>,箭头方法会有兼容问题,像Sass之类的预处理器无法正确解析...

2020-10-23 10:48:43 1006

原创 vue--------------slot插槽的使用

插槽slot就是在模板中将携带的内容填充进某个指定位置.带不带内容、带什么内容由父组件来控制，将内容放在哪则由子组件控制。匿名插槽：无论父组件加了什么全部往里填充，没有指定位置默认是匿名具名插槽：在插槽中添加name的方式指定位置匿名插槽父组件.<template> <div> <div>这里是父组件</div>  <my.

2020-10-22 18:05:58 206

原创导航守卫token与拦截器token的区别

为什么使用token？它是怎么生成的？一、导航守卫的作用作用是通过判断来决定当前的路由跳转能不能进行?这种守卫,只要进行路由的跳转就会自动的触发,不能人为调用处理业务时可以判断当前用户是否登录(token),如果登录了则可以跳转,否则重定向到登录页.二、拦截器的作用页面跳转后,不代表可以进行页面操作.好比淘宝没有登录也可以浏览首页信息,但要是点击商品详情等操作时会要求登录.这个就是拦截器,它主要用于拦截用户请求并作相应的处理,一般判断权限认证,有没有登录之类,认证通过后就可以发送请求了.

2020-10-21 17:28:17 750 1

原创为什么使用token？它是怎么生成的？

一、HTTP是无状态协议无状态的意思是,第一次发送请求登录成功后,第二次发送请求其他接口,服务端是不知道你已经登录成功,第二次请求和第一次请求是没有任何关联的.Http的这个特性就产生了一个问题,导致登录状态的丢失.于是在每次请求的时候都验证用户的账号密码,但是重复的验证操作,会导致计算机资源的消耗,用户的使用体验就会变差.你可以想象成去游乐园,进大门的时候需要验票,玩过山车需要验票,看大熊猫也需要验票,游乐场也发现每次验票体验太差,后来给游客们发放手环解决验证问题,同样,计算机也可以利用这一机制解

2020-10-21 15:29:07 342

原创 vue------按钮的封装-----动态添加文字、样式

实现原理是利用父子组件传值的方式实现.父组件:1.引入2.注册3.使用子组件:1.样式静态2.监听,动态设置父组件发送的文字与样式一、按钮实现并引入（动态设置文字）父组件代码.<template>  <mybutton text="登录" @click="login"></mybutton></template><script>//步骤一:引入子组件import mybutt.

2020-10-19 16:21:45 2179

原创 vue------引入全局重置样式

初始项目时会有默认间隙,包括一些便签也会有自带的间隙,为了不让默认的样式影响真正的实现效果,会在项目开启之际清除.实现步骤:1.准备一个重置样式文件2.在main.js或app文件引入,因为不是单个组件需要,所以直接在全局设定重置样式代码(less)html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, c.

2020-10-19 15:14:08 2057

原创 vue-------兄弟组件传值-----常见报错问题

1.父子组件有使用关系,兄弟组件没有,所以不能直接监听.2.发送数据的this只能供父子组件使用.3.在组件中this可以发出事件,是一个Vuecomponent组件示例,而组件是一个可复用的Vue实例.结论:Vue实例也能发出事件,this只能发给父组件,而Vue实例通用.在使用兄弟组件传值时通常会封装一个事件总线.一、重点实现步骤1.eventBus（事件总线）实例化Vue2.father（父组件）2.1引入子组件2.2注册2.3使用3.daughter(兄弟组件之一)3.1.

2020-10-18 23:22:44 1787 1

原创 vue--------子传父及常见问题-----处理原理

当子组件有数据需要传递给父组件时，就需要进行子传父一、使用步骤1.子组件点击事件2.子组件this.$emit发送父组件可以监听的数据3.父组件监听子组件事件,并调用4.处理数据父组件代码.<template> <div class="father"> <h1>我是父组件</h1>  <h2>客户的名字是{{ userinfo.name }},年龄{{ user.

2020-10-17 02:03:00 841

原创 vue--------父传子及常见问题------传递原理-----props配置

一、父传子父子关系更多是指使用关系因为在单文件组件中不能通过components来创建结构上的子组件意味着在项目中，所谓父组件和子组件都是单独的单文件组件，它们更多是的引入使用关系父传子就是将父组件中的数据传递给子组件二、四个步骤实现父传子数据传递步骤一:准备好父组件需要传递的数据步骤二:实现父传子:在父组件中使用子组件的位置,为子组件的props成员赋值步骤三:接收父组件传递过来的数据成员步骤四:渲染效果实际传递只需要2、3步骤父组件代码.<template>

2020-10-16 23:35:19 1044

原创 vue-------形成父子组件及常见问题

一、父子组件关系父子关系更多是指使用关系因为在单文件组件中不能通过components来创建结构上的子组件意味着在项目中，所谓父组件和子组件都是单独的单文件组件，它们更多是的引入使用关系二、形成父子组件三步骤1.在father组件中引入son组件2.注册son组件3.使用son组件父组件代码.<template> <div class="father"> <h1>我是父组件</h1> <!-- 3.使用 --

2020-10-16 22:50:03 489

原创 vue------------自定义样式实现过渡动画

文档中表明,添加过渡动画的前提有这几个1.为元素添加v-if或者v-show2.将元素包裹在transition标签中3.为transition标签设置name属性,这个name值就是后期样式的前缀4.为六个时机设置合理的样式,vue会在恰当的时机调用对应的样式(进入:v-enter ,v-enter-active, v-enter-to)(离开:v-leave, v-leave -active ,v-leave -to).<template> <div> .

2020-10-16 09:40:55 410

原创 vue------axios中的get请求

一、安装使用npm:$ npm install axios二、使用步骤:1.引入2.发送请求.<template> <div>  <button @click="getdata">get请求-无参数</button ><button @click="getDataByParams">get请求-有参数</button> </div>

2020-10-16 00:40:35 11209

原创 vue------promise的使用

promise是es6的一个语法规范,可以解决回调嵌套(地狱)的问题promise构造函数有一个参数,这个参数是一个函数这个函数也有两个参数,分别是执行成功后的回调函数和执行失败后的回调函数reslove:成功之后的回调函数reject:执行失败后的回调函数const fs = require('fs');let p1 = new Promise((reslove, reject) => { fs.readFile('./a.txt', 'utf-8', (err, da.

2020-10-15 23:26:56 124

原创 vue---------计算属性的局限性及解决方案------watch监听器

一、示例计算属性局限性计算属性有个缺点是异步中无法监听数据.<template> <div> <h2>计算属性在异步中无法监听,解决:watch监听器可以解决</h2>  <input type="number" v-model="num" />  <p>{{ getage }}</p&

2020-10-15 20:27:48 721

原创 vue---------computed计算属性和监听器---------------筛选数据示例

基本使用.<template> <div> <p>{{ msg }}</p>  <input type="text" v-model="msg" />  <p>{{ getmsg }}</p> <!-- 像属性一样使用,输出hello-

2020-10-15 17:57:07 364

原创 vue--------自定义属性的使用--------局部/全局封装

vue-----------ref和$refs的使用-----示例mounted钩子函数上面的代码有一个不足就是固定为某个元素添加效果,不方便后期需求的变化如果希望这些类似的功能时按需添加的,自定义指令就是用来完成这种场合的需求局部自定义指令(无参数)局部自定义指令,只有当前组件中使用,语法:directives:{指令名称:{配置及处理inserted(el,binding)}}.<template>

2020-10-15 01:25:00 434

原创 vue-----------ref和$refs的使用-----示例mounted钩子函数

ref相当于元素的标识,它是一个唯一值,类似id值$refs可以用来获取拥有ref设置的元素,它是一个对象示例需求:加载页面完成时自动获取表单光标生命周期的钩子函数:满足条件自动触发的函数mounted的钩子函数:当触发时,说明已经编译完毕,将要进行渲染.<template> <div>用户名:<input type="text" ref="myid" /></div></template><script>e.

2020-10-14 23:52:44 1006

原创 vue-----自定义过滤器------局部/组件外封装------时间示例(引入/注册/使用)

自定义过滤器可以多源数据进行处理,并返回处理好的数据结果过滤器的本质是一个函数,放在methods就是函数,放在filters就是过滤器.将函数写在filters结构中,与普通函数的区别1.过滤器有默认参数的传递2.过滤器的调用方式与普通函数不一样局部过滤器在组件内部创建的过滤器,语法:filters:{过滤器名称:function(源数据,[其他参数…]){业务处理return 结果}}<template> <div> <!--

2020-10-14 23:13:04 221

原创 vue中为什么方法要写在methods里面?

一、methods是什么？首先先来段代码,我们在template中设定一个按钮,在点击按钮的时候打印.<template> <div> <button @click="buttry">测试</button> </div></template><script>export default { methods: { buttry() { console.log(this);

2020-10-14 21:01:51 6823 2

原创 “...“展开运算符--------数组、对象示例(无需循环添加数据)

数组方式使用…展开运算符<script> // 1.展开数组,可以将数组成员一个个展开 let arr = [1, 2, 3, 4, 5] console.log(arr);//[1, 2, 3, 4, 5] console.log(...arr);//1 2 3 4 5 // 2.需求:将arr添加到temp let temp = ['a', 'b', 'c'] temp.p

2020-10-14 19:34:10 996

原创封装http接口地址-----灵活应付服务器变更(JQ版+原生版)

<font color=#999AAA >开发过程中有可能经历本地、测试、上线等情况，时常需要更换不同服务器的情况，如果ajax请求过多对后期维护是大工程。

2020-10-10 01:56:36 464

weixin_47886687的博客