duzhe17629085113的博客

原创 day10 仓库

vue仓库Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。这个状态自管理应用包含以下几个部分：state，驱动应用的数据源； view，以声明方式将 state 映射到视图； actions，响应在 view 上的用户输入导致的状态变化。组件（模板）view 数据发生改变-----------actions(vue+vuex)--------state(vuex)----组件（模板）v

原创 day10 账户密码的输入限制 正则表达式

原创 day10 子路由嵌套

重点一 router-view 是匹配组件router-link 的路由 并且渲染在父组件重点二子路由嵌套模式

原创 day10 data 什么时候是函数 vm 是对象

7组件的data为什么是个函数然后返回对象,以前使用vm时都是个对象组件和挂载到界面的vm对象的区别,vm挂载到页面上时，触发了钩子函数的， data生成了，页面上使用的数据就是data容器中渲染上去的，而且页面只有一个vm对象，所以的vm生成完毕(mouted]时data必须存在组件足引入和注册以后不一定使用的，比k如for猎环O次就是组件对象生成了的，但足使用0次，所以组件对象并没有使用自己的data容器去渲染数据，造成资源浪费，解决方案就是懒加载:当使用data时去调用，才生成data对象组件的

原创 day9 路由守卫

全局前置钩子router.beforeEach(fn)，导航被触发----一般登录验证 全局解析钩子router.beforeResolve(fn)，组件初始化 全局后置钩子router.afterEach(fn)，没有next，导航被确认,一般路由跳转以后用window把窗口调上去//全局前置守卫router.beforeEach((to, from, next) => {//用户未登录只能访问首页、登录注册页面if (to.path == "/" || to.path == "/l

原创 day8 路由页面跳转与传参

this.$router是路由跳转this.$route是路由信息对象3种跳转页面方式http://ip:port/pathname?(传递数据)是？是查询字段第一种字节拼在标签中this.$router.push("/login") 跳转第二种 query 传参常用this.$router是路由跳转this.$route是路由信息对象第三种动态传参godetail注册路由 name为动态路由服务传递方式3中...

原创 day8 路由router-view和router-link

3.router-view和router-link 标签router-view:相当于 路由网址匹配到的组件 会渲染到当前组件的这个标签上(学不学的会路由 就看能不能理解这个)router-link:相当于a标签,给我们提供跳转到某个路由的功能,如果没有匹配到路由就会跳转失败:<router-link to="/xx"> xx<router-link > 编程式跳转: this.$router.push({path:"路由"})//为vue框架组件添加功能 .

原创 面试 hash&history

无论有没有templete 都会执行render函数vm.$nexttick 可以在 before mounted操作dom页面有el 为关联到跟节点上app没有模板第二种是把APP挂载上到模板是上有模板的话放替换模板APP上面的app, 没有模板自己就当做模板6.路由模式--hash&history(面试)hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用window.location.hash读取；根据h...

原创 vue7 回调函数与异步编程

动态组件componnet 标签动态组件 实现切换菜单当来回切换，没有v-model组件输入框就不内保留输入的内容 ，当运用动态组件的时候，切换后，缓存组件真实的节点书上面移除，但是虚拟的节点树上面还是存在，当切换回来的时候不要再从新用mount从新创建组件缓存组件 key-akive标注 有include=“” 则缓存当前的标签没有include=“” 则缓存全部缓存组件还会执行mouted 不会再执行 当被缓存时，被隐藏起来...

原创 vue7 宏任务与微任务事件循环

script里面的为宏任务 也为脚本同步任务时先后执行，异步任务是并行排队执行脚本是一个宏任务/同步任务计时器是一个异步任务：宏任务Promise函数是一个同步任务promise的then方法是一个异步任务宏1=>宏1内部的同步任务=>宏1内部的微任务=>宏2=>事件循环...

原创 Vue7 异步加载 懒加载

vue开发过程中，我们会做出特别多特别多的组件，包括login,header,footer,main等等。这样使整个网站看起来就十分的庞大，当我们在打开网页的时候，突然一下子把这些所有的组件加载上来，这么多的请求全部同时开始请求，势必会造成网页打开很慢，使客户得到的是非常差劲的体验。SPA: single page app在单页应用中，如果没有用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时

原创 vue6 中央事件总线

谁想传值先把事件绑定在$root.$emit谁想调用 放在$root上面 $中央事件总线bus(了解) event bus通过创建一个新的vm对象,专门统一注册事件,供所有组件共同操作,达到所有组件随意隔代传值的效果bus.js文件main绑定在vm上调用...

原创 vue6注入依赖 Provide（重点）

父组件向孙组件数据 可以采用props层层传递也可以使用bus和vuex直接交互 在vue2.2.0之后,vue还提供了provide/inject选项不建议使用该方法//爷爷<template> <div> <p>{{ title }}</p> <son></son> </div></template><script> import Son from "./...

原创 vue7动态组件&缓存组件

动态组件componnet 标签动态组件 实现切换菜单当来回切换，因为组件没有记忆功能，需用用mounted 重现加载数据，重新创建，造成加载的浪费缓存组件 key-akive标签注 有include=“” 则缓存当前的标签没有include=“” 则缓存全部缓存组件还会执行mouted 不会再执行 当被缓存时，被隐藏起来切换回来时会加载atcivated 必须是切换回来才能使用切换走的时候deactivated 被激...

原创 vue6 $ parent $root $children $refs(了解)

this 名字为vue componnet 组件继承了官方的一个类vue componnet 只的是new vue打印得出有这些打印出来两个子组件不建议使用 因为是高内聚 高耦合 每一个组件都可以修改父组件的东西$root: 访问根组件vm对象,所有的子组件都可以将这个实例作为一个全局 store 来访问或使用,现在有更好的技术vuex代替。$parent:访问父组件对象,直接操作父组件的data数据,不需要再使用属性传值,但是容易出现渲染混乱之后只渲染一...

原创 vue6 多层传值

在不用状态管理vuex的时候，如何让GrandFather与Son通信，我们可以用可以emit一层一层的传递:会显得冗余。 vue2.4之后，提出$attrs、$listeners ,可以实现跨级组件通信。 $listeners官网解说:事件传递 $attrs官网解说:属性传递在组件中绑定 可以把当前组件的自定义属性和方法传给子元素使用:属性传值APP=>ONE=>TWOAPP组件ONE组件$listenr 时间监听 $attr属性two组..

原创 vue6反向传值

this.$emit反向传值 原理主组件子组件、第一种自定义变量第二种反向传值 升级版：title.aysnc="msg“ 更新msg这个变量高级绑定 子组件触发父组件里面的函数box.vue第三种v-model 必会 input...

原创 vue6 基础面试题属性传值单向数据流

一第一种传值第二种单向数据传值l###单向数据流是什么意思数据的流向只能从父级组件传向子级组件,修改父级组件中的数据子级组件会刷新子级组件不能通过修改属性的方式去反向刷新传属性意思就是如果父组件传递向子组件传递的是一个对象可以修改data属性,因为那是引用数据，大家都指向那个空间所以都可以修改，父主键也可以修改如果父主键传递的是一个数据，子组件可以修改子组件页面可以刷新，但是父组件不能再次修改了，因为数据是单向留不能通过改变属性的方式取修改刷新传对..

原创 vue6插槽

属性插槽数据插槽slot 语法糖#s组件里面 <div class="box"> <slot name="s2"></slot> <div class="left"> <slot name="s1">默认数据 如果使用box组件不写插槽数据 我就是插槽的默认显示的模板</slot> </div> ...

原创 vue6 data源设置为函数

以前设置为data：{}对象现状因为复用 设置为函数，函数的好处是每一次调用函数都是独立生成一个内存空间，且复用不影响，所以采用data函数。###组件的data为什么是一个函数返回一个对象而不是直接是一个对象?因为组件被复用,每次调用data函数会重新生成一个新的数据源,让复用的组件的数据源独立互不影响.为什么最后引入的样式颜色会覆盖前面同类名对的颜色因为box2先引入通过js解析器解析为一个js文件，然后box引入通过js文件解析同一个js文件，...

原创 vue5 属性传值

属性传值有两种第一种用V-bind 绑定进行传值第二种为传值需要判断 传的值是否为Number 类型或者其他条件 第二种一般用的少第二种绑定的名字需要在vue组件中要用props 注册

原创 vue5 全局组件与局部组件

1.全局组件: 组件的属性不能用大写字母 组件的名字可以用驼峰命名法,但是使用的时候必须用连字符 全局注册的组件使用时不能使用单标签(不会报错,但是只能使用一次 多次使用只显示第一个)注册的组件不要跟系统标签同名2.局部组件: 一个vm实例可以有多个局部组件,但是只能供当前vm实例使用3.单文件组件:引入:@1官方脚手架 @2挂载vm对象 @3组件引入并渲染到vm中单文件组件也有全局组件和局部组件 只是把一个组件单独写在一个.vue文件中,供别的组件引入然后注册 引入文件时:一般

原创 vue5单组件

一个网页有多个组件组成一个网页中的每一部分都可以 写成一个组件每一个功能都有一个vue文件，最后引入到一个主文件中 形成一个页面

原创 vue5 自定义指令 局部与全局

自定义属性directives {}可以定义可以 标签样式 事件等自定义属性分为两种全局和局部1.局部定义directives { 里面写定义的指令}如 pink 聚焦focus等v-pink 只能在所属的自定义标签里面使用局部指令只能在局部里面使用 比如除了默认设置的核心指令( v-model 和 v-show 等)，Vue 也允许注册自定义指令。在Vue里，代码复用的主要形式和抽象是组件。然而，有的情况下，仍然需要对纯 DOM 元素进行底层操作，这时候就会用到自定义指

原创 vue4 生命周期函数

vue生命周期函数是实例从创建到销毁的过程，从开始创建实例，初始化数据，编译模板，挂在DOM-渲染，更新-渲染，销毁的过程，beforecreate（vm实例创建中）created（vm实例创建完毕）、beforeMount（挂在dom之前）、mounted（挂载到dom上）、beforeUpdata（更新数据之前）、updated（数据更新完毕）、beforeDestroy（销毁实例之前）、destroy（实例销毁）意义：生命周期有多个事件钩子，在让我们控制整个实例过程中更容易形成好的逻辑 ..

原创 vue4 侦听属性

watch:{x(){}}中的方法名必须跟要监听的data中的属性名一样,才代表监听指定属性当侦听器监听的属性发生变化时,就会调用watch中对应的方法侦听器属性，比计算属性计算效率消耗大监听可以监听data里面你的对象监听也会获得两个数第一个为改变后的，第二个为改变前的...

原创 VUE4 计算属性

计算属性把computed中的方法当做属性使用,会返回一个数据供使用:计算属性与过滤器计算属属性：只关系计算过的数据，当data传入的computed的值改变其才改变，值不计算属性不变计算属性会把使用到的data中的属性缓存起来，防止页面发生大量重复计算，过滤器：处理数据的，当修改msg后页面刷新，过滤器会重新取值，再次打印计算属性和方法的区别:(面试) 计算属性会把使用到的data中的属性缓存起来，防止页面发生大量重复计算， 提升js 运行效率,如果计算属性中使用到的data中

原创 VUE4 过滤器

filters过滤器是对方法里面的值进行筛选然后再添加到vm对象上进而操作页面filters里面函数名不许是data里面的函数名第一种 msg经过了两次数据处理<div id="app"> <div>{{msg|fixmsg|xiushi}}</div></div><script> new Vue({ el: "#app", data: { m...

原创 vue4 key 的意义

data中for循环的容器数据个数发生变化时,会跟for中的vm节点个数作比较 如果数据多了,会在vm节点后面增加对应数量的节点,并不会重新创建所有节点,然后vm去更新对应的DOM 然后就去刷新数据到界面: 按照for的数据容器中的数据顺序来渲染如果用户以前操作过旧节点,那么新数据顺序可能会出现跟旧节点顺序不匹配的效果(旧节点跟旧数据没有对应起来) 解决方案: for循环时把数据跟创建的节点利用给元素绑定唯一key值简答:因为vue在刷新页面组件时,会把旧节点跟新vm节点做比较,如果要增加节点...

原创 vue4 V -for与v-if条件渲染

v-for与v-if嵌套签中一起使用时for首先会先执行然后再执行v-if每循环一个都会生产一个节点，2.0 v-if和v-for如果出现在同一个元素上 v-for的优先级高 但是不建议这样写而是:template3.0 同元素出现会报错v-for与v-if放一行的话渲染过程为:对arr每一项先做map循环判断v-if给出的条件，再做一次for循环渲染这样引起的问题是，arr数组每新增一项，都会对arr每一项再次进行v-if循环、然后for循环注意点：避免v-for与v...

原创 vue3 for循环

v-for//v-for这个指令所在标签包含所有的后代元素,会被克隆数组个数这么多次index为下标双for循环v-for与v-if连用1.for和if放在了同一个标签中 没有先后顺序的要求,但是先执行for渲染过程为：对arr每一项先做map循环判断v-if给出的条件，再做一遍for 循环渲染这样引起的问题是：arr 数组新增一项数据时，会对每一项再做一遍v-if 循环，然后for 循环渲染...

原创 vue for循环

1.for和if放在了同一个标签中 没有先后顺序的要求,但是先执行for渲染过程为：对arr每一项先做map循环判断v-if给出的条件，再做一遍for 循环渲染这样引起的问题是：arr 数组新增一项数据时，会对每一项再做一遍v-if 循环，然后for 循环渲染...

原创 vue 条件渲染

用V-if 或者v-showv-if是把元素移除或者添加到文档树中，因此在做切换效果时候具有更高的切换消耗v-show是把元素在文档树中隐藏或者显示，因此在做切换效果时候具有更高的渲染消耗如果经常切换就用v-show不长切换就用v-if...

原创 vue mvc与mvvm

MVCV层页面显示层C层请求层M层服务器在实际应用开发场景中，开发者常用的一种设计模式是MVC（eg：node（后端）中的MVC设计模式）：M（Model）：数据模型层。是应用程序中用于处理应用程序数据逻辑的部分，模型对象负责在数据库中存取数据。 V（View）：视图层。是应用程序中处理数据显示的部分，视图是依据模型数据创建的。 C（Controller）：控制层。是应用程序中处理用户交互的部分，控制器接受用户的输入并调用模型和视图去完成用户的需求，控制器本身不输出任何东西和做任何处

原创 vue介绍

vue.js渐进式框架（分层式的实际模式）是什么意思？五层设计采用分层设计的方式各自每一块具有独立的功能五层具体指：核心技术库，组件系统，数据状态管理，路由管理，开发环境vue.js的核心是什么？数据驱动和组件化开发...

原创 vue3双向数据绑定

input中的value取的是vm.data中的tel然后在页面显示。打印也是变量中的tel原理:响应式数据，变量的值发生改变页面改变，这里页面的值改变，但是存储空间中的变量值没有变，value值发生改变 存储空间的值没有发生改变，所以需要双向数据改变双向数据改变：用户输入的值可以改变存储空间中的data属性，页面也可以发生改变双向绑定就需要获取用户输入的value值，赋给data源...

原创 VUE3响应式数据

内存中两块空间一个数mydata储存空间，另一个节点对象，在文档树中用于页面显示的，里面有一个innerHTML属性，这个属性决定页面显示效果前提设置了一个全局变量Let mydata={title:"我也是个数据容器"}当mydata存储空间修改后，但是innerHTML没有运行，导致页面的mydata没有运行，页面首次加载innerHTML赋值,然后去了变量存储空间中的字符串，显示出来，innerHTML不会再运行，变量存储空间中的数据发生修改，由于innerHTML没有运行所...

原创 vue3 样式绑定 style绑定

建议写法 对象直接量行内样式：直接操作样式 ,只想操作每一个样式比如改变某一个字体颜色大小，背景颜色等等样式表:是面对大型的页面进行设置

原创 vue3 样式绑定class绑定

class绑定1:class=sty为一个变量，当用''引起来时为一个字符串，sty其值为vm中data的box1取box1样式,触发点击事件后sty取值为sty2,取的sty2的样式。class2样式绑定二class 类名为多类名，类名为对象中的属性，属性名作为类名，属性值取的是vm里面的变量,取值为布尔值，当为ture的时候相应的类名样式通过点击事件进行渲染。class样式绑定3数组语法数组中可以输入对象，字符串，以及变量，当用单引号引起来的时候类名为字符串，不引起来...

原创 vue 事件改变this指向

.事件中的this与数据操作1. 方法中的this代表vm对象a.方法和ES5的函数中的this是vm对象b.ES6的箭头函数中的this就不是vm==>因此推荐事件的函数采用ES6的对象的方法写方法 这种写法2. 操作数据: this.xx="新值"//这里的修改会执行两步操作://a.修改内存data容器中的数据//b.刷新UI==>重新设置innerHTMLfn4中的this指的是vm也是new vue这个对象...