vue核心

1.计算属性 computed

computed计算属性

Vue本身支持模板中使用复杂表达式表现业务数据,但是这会使得模板内容过于杂乱,如果确有需求,可以通过computed计算属性实现,该computed可以对其他data做复杂合成处理

语法

new Vue({computed:{// 属性名称:function(){}属性名称(){// 业务表达式实现,可以通过this操作data成员return  返回结果}}
})

计算属性(普通函数赋值)或(简易成员函数赋值) 都可以,不要使用箭头函数

使用

形式上,如何应用data成员,就如何应用计算属性,与使用data样子一致

{{ computed计算属性名称 }}       <!--模板中-->
this.computed计算属性名称	       <!-- Vue实例内部-->

应用场景

如果页面需要访问一个数据,这个数据比较复杂,是需要通过其他data数据经过复杂逻辑制作出来的,就可以使用“计算属性”

特点

  1. 计算属性关联的data如果发生变化,会重新编译执行,获得并使用对应新结果,即响应式(入口)
  2. 计算属性的返回信息有变化,使用的地方也会重新编译执行,存在出口响应式
  3. 计算属性内部可以使用this关键字,与Vue对象等效
  4. 每个计算属性都需要通过return关键字返回处理结果

computed计算属性与methods方法的区别

  1. computed计算属性本身有“缓存”,在关联的data没有变化的情况下,后续会使用缓存结果,节省资源

    methods方法没有缓存,每次访问方法体都需要重新加载执行,耗费资源

  2. methods应用逻辑较复杂,例如内部可以嵌入ajax,或互相调用,而computed比较纯粹,只是操作data的

在Vue实例内部创建计算属性与el、data、methods并列位置处

2.过滤器 filters

过滤器

在项目应用中,同样一份数据信息,表现形式却有千差万别,例如时间信息可以是对象、时间戳、格式化等,字符串可以是大写的、小写的、首字母大写的等等,如果提供方给我们提供的信息是其中一种形式,而我们需要的是另一种,在Vue中,可以通过 “过滤器” 转换处理。

过滤器是Vue中实现数据格式转换的一种机制。本质就是函数

如下时间信息通过 对象形式 或 时间戳方式显示都不合适,但是变为格式化时间就比较友好

Thu Mar 21 2019 17:48:17 GMT+0800     =>   2019-03-21 17:48:171553161717	     					  =>   2019-03-21 17:48:17

过滤器关键字:filterfilters

2.1私有过滤器

私有过滤器声明语法

Vue实例化过程中,与el、data平行的位置声明filters成员并在其中制作过滤器,这个过滤器只能被当前Vue实例使用,称为 “私有过滤器”

new Vue({filters:{// 如下方法格式是es6简易设置方式,完整写法: 过滤器名称:function(被处理数据){}过滤器名称(被处理的数据){// 对数据进行加工处理return 结果},}
})

使用

{{ 应用数据 | 过滤器名称 }}

过滤器被设置到应用数据的尾部,通过 “|竖线” 连接

注意

  1. 过滤器只可以用在两个地方: 插值表达式:冒号 属性绑定表达式
  1. 插值表达式: {{ 数据 | 过滤器 }}

  2. v-bind属性绑定中使用: <标签 :属性=“数据 | 过滤器">

  1. 过滤器不让使用this关键字,或者this关键字不是“Vue实例”
  2. 过滤器需要return返回数据处理后的结果

案例应用

给时间信息做格式化处理,利用过滤器实现对象时间转换为格式化时间

<td>{{ item.time | timeFMT }}</td>

过滤器:

// 注册过滤器【私有的】
filters:{// timeFMT:function(){}timeFMT(origin){var tm = new Date(origin)   // 根据origin重新实例化一个时间对象var yyyy = tm.getFullYear()var mm = (tm.getMonth()+1).toString().padStart(2,0)var dd = tm.getDate().toString().padStart(2,0)var hh = tm.getHours().toString().padStart(2,0)var ii = tm.getMinutes().toString().padStart(2,0)var ss = tm.getSeconds().toString().padStart(2,0)return `${yyyy}-${mm}-${dd} ${hh}:${ii}:${ss}`}
},

设置字符串以指定的位数输出,不够就在字符串前边补位

// 字符串.padStart(位数,补位信息)
'hello'.padStart(8,0)      // 000hello

2.2全局过滤器

全局过滤器

​ 在new Vue()前边,直接给Vue调用filter声明的过滤器称为“全局过滤器”

​ 全局的意思是过滤器可以供所有Vue实例使用

Vue.filter(名称, function(被处理的数据){return xx})
var vm = new Vue()
var vm2 = new Vue()

全局和私有取舍

理论上,多个Vue实例都需要使用的过滤器声明为全局的,只是当前Vue实例使用的过滤器声明为私有的

实际情况:私有的用的更多

注意

  1. 全局过滤器需要在new Vue()之前声明
  2. 多个过滤器可以被同时使用, {{ 信息 | 过滤器 | 过滤器 | 过滤器 … }},形成一个信息被多次处理效果

3.axios

axios是对ajax封装的一个产品,向服务器发送请求,获取数据

获取

访问npm官网:https://www.npmjs.com/ 搜索axios即可

axios获取3种方式:

  1. 直接下载源文件 (推荐)
  2. 通过script标签引入,需要上网环境
  3. npm install axios

使用

axios可以发送各种请求

axios.get('请求地址', {params:{name:value,name:value...}})axios.post('请求地址', {name:value,name:value...})axios({method:'get/post',url:请求地址,params:{},     // 传递get参数信息data:{}        // 传递post参数信息
})

注意

  1. get()方法如果传递参数需要额外设置params,post()方法则不用
  2. axios调用任何方法返回结果都是Promise对象

给axios配置公共根地址

给axios把各个请求都需要使用的相同的根地址做统一配置,使得相同代码只维护一份,提升开发速度

axios.defaults.baseURL = 公共根地址

把axios配置成为Vue成员

在Vue的大环境中不要直接使用axios,要把axios配置成为Vue的成员,通过Vue对象调用

把axios配置为 Vue构造器原型继承的成员,这样 vue实例对象就可以调用了

// 原型继承成员名称为 $http ,也可以配置为其他名称
Vue.prototype.$http = axios// vue实例中使用axios
this.$http({url:xx, method:xx})

Vue中所有的内容都通过自身调用,开发、维护比较方便

3.1拦截器-interceptors

拦截器

​ 拦截器是axios向服务器端发送请求响应回来所经历的两道关口

axios本身有两种拦截器:请求拦截、响应拦截

  • 请求拦截器:

    axios每次开始请求的时候先执行此处逻辑,在这个地方可以给axios做出发前的配置,也可以做出发前的检查工作,检查ok的情况下就开始向服务器端发请求

  • 响应拦截器:

    axios完成与服务器端交互回到客户端后就执行此处逻辑,在这个地方可以做一些后续收尾事宜,例如判断axios请求是否成功,或相关数据过滤操作

拦截器关键字:interceptors

请求拦截器

// 请求拦截器
axios.interceptors.request.use(function (config) {// 放置业务逻辑代码return config;
}, function (error) {// axios发生错误的处理return Promise.reject(error);
});

响应拦截器

// 响应拦截器
axios.interceptors.response.use(function (response) {// 放置业务逻辑代码// response是服务器端返回来的数据信息,与Promise获得数据一致return response;
}, function (error) {// axios请求服务器端发生错误的处理return Promise.reject(error);
});

把以上拦截器代码设置好,那么axios"所有"的请求就都会执行了

拦截器细节

​ 知道config参数 和 Promise.reject(error) 分别代表的意思

axios.interceptors.request.use(function (config) {return config;
}, function (error) {return Promise.reject(error);
});axios.interceptors.response.use(function (response) {return response;
}, function (error) {return Promise.reject(error);
});
  1. config参数

    config是一个对象 与 axios.defaults 相当(不等于)

    config可以给axios配置例如baseURL的信息的

  2. response参数

    服务器端给返回的具体数据信息,与业务axios接收的数据一致

  3. Promise.reject()

    Promise.reject(data) 是 语法糖的用法,本质与下述一致,即返回一个Promise对象

    Promise.reject(data)
    上下效果一致
    new Promise(function(resolve,reject){reject(data)
    })Promise.resolve(data)
    上下效果一致
    new Promise(function(resolve){resolve(data)
    })
    

4.组件component

组件

​ 组件是拥有一定功能许多html标签的集合体,是对html标签的封装

好处

模板中为了实现一个(例如)分页效果,需要绘制20个html标签,如果使用组件,就设置一个标签就可以了,明显提升开发效率

框架

Vue:电脑端、移动端

react:电脑端、移动端

angular:电脑端、移动端

组件库

组件库针对框架、平台都有针对开发

很有名的第3方组件库(饿了么element-ui):Vue电脑端组件库 https://element.eleme.cn/#/zh-CN>

组件关键字:components、component

4.1组件内部成员

可以认为组件是一个特殊的Vue实例,拥有着与Vue实例大致相同的成员

例如 datamethodsfiltersdirectives(自定义组件)、created等等成员在组件内部都可以设置

注意

​ 组件data成员 与 Vue实例的 不一样,需要通过 function/return 设置,具体要返回一个{}对象

data(){return { }
}

function声明data

组件中声明的data成员,值需要是一个function,内部通过return返回{}对象供使用,这个特性必须遵守

组件的data必须是一个function

组件根据业务需要,可以被使用多次,function会使得每次组件使用的时候都亲自执行并给当前应用分配一个独立的数据对象,这样多个组件的data数据是独立的,互相没有关联、牵扯,互相不会覆盖

​ 相反,如果直接通过{}对象 给data赋值,多次使用组件会造成大家的data都是共享的,就是一份数据,一个组件修改data后,其他组件都受到影响,这与业务逻辑是相违背的

组件与Vue实例异同

  1. 组件中的 data 必须是一个 function 并 return 一个 字面量对象
    (Vue 实例的 data 可以是 字面量对象,也可以是 function/return形式,前者推荐使用)
  2. 组件中直接通过 template 属性来指定组件的html结构
    Vue 实例中,一般通过 el 属性来指定渲染的容器,当然也可以使用template
  3. 组件和Vue实例拥有类似的成员,都有自己的生命周期函数,过滤器,methods、data等成员

4.2私有组件

声明私有组件语法

new Vue({components:{'组件的名称': { 配置对象成员 }, '组件的名称': { 配置对象成员 }...},
})

使用组件语法

<组件名称></组件名称>

组件形式上 就是html标签

案例应用

制作一个分页组件并使用

  <div id="app"><h2>组件应用</h2><!-- 组件的名字被当做html标签使用 --><com-page></com-page></div><script src="./vue.js"></script><script>var vm = new Vue({components:{'com-page':{// template: 设定当前组件拥有的html标签template:`<ul><li>1</li><li>2</li><li>3</li></ul>`}},el:'#app',});</script>

注意

  1. template设置的各个html标签需要有唯一的根元素节点,上例为ul
  2. 组件名称建议是 xx-yy 的格式
  3. template都必须有一个根元素节点

4.3全局组件

全局组件语法

Vue.component(名称,{配置对象成员})new Vue()

注意

​ 1. 全局组件需要在new Vue之前设置

5.组件传值

5.1父给子传值

父组件可以 引入、使用子组件,从业务上看,该父组件有可能对子组件有个性化需求,为了体现组件的灵活多变,可以通过传值实现

语法

父组件要在子组件标签上通过属性值方式传值

<子组件标签 xx=value yy=value zz=value></子组件标签>

子组件通过props接收属性值并应用值

<!--在模板中应用传递来的数据-->
<input :style="{color:xx}"><script>export default {// 通过props接收父传递过来的数据,注意各个名称需要使用单引号圈选// 具体有两种方式:props:['xx','yy','zz'],props:{xx:{type:类型限制default:默认值}}}
</script>

案例应用

​ 父组件多次使用按钮组件,每次要求按钮的文字显示不同颜色,就可以通过传值实现

父组件App.vue的代码:

<template><div id="app"><h2>App根基组件</h2><!-- 给子组件传值:通过“属性值”方式实现修饰子组件button按钮文字的颜色 --><!-- 属性值来源:直接声明、组件实例data成员 --><com-button yan="green"></com-button><com-button yan="orange"></com-button><com-button :yan="co"></com-button></div>
</template><script>
// 对ComButton子组件到导入、注册、使用
import ComButton from '@/components/ComButton.vue'
export default {name: 'App',components: {ComButton},data () {return {co: 'gray'}}
}
</script>

子组件 components/ComButton.vue代码:

<template><div id="btn"><button :style="{color:yan}">我是按钮</button></div>
</template><script>
export default {name: 'Button',// 对父组件传递过来的数据进行接收// 两种方式:简单的、复杂的props: ['yan']// props: {//   yan: {//     type: String, // Boolean  Number  Object  Array//     default: 'pink'//   }// }
}
</script>

5.1.1子组件修改父组件传递来的数据

sync 应用(扩展)

子组件修改父组件传递来的数据

方法1:

父组件:
<com-button :yan="co"></com-button>
子组件
<button @click="yan='yellow'">修改</button>  // 子组件接收的yan可以被修改,但是firebug报错,说明不推荐、不允许虽然子组件可以修改信息,但是不推荐理性分析是:父组件还可以修改两头都修改,没有秩序了

方法2:最传统的实现子组件修改父组件传递数据的

父组件:
// 箭头函数,data就一个参数[data是自定义的],()是否设置都可以,后边语句需要设置{}
<com-button :yan="co" @xiugai="data=>{co=data}"></com-button>
子组件:
<button @click="$emit('xiugai','purple')">修改</button>

父组件声明事件,子组件调用事件修改co

父组件通过事件实现co变化,yan就变化,子组件由于响应式,yan自然发生变化

方法3:通过update:xxx的方式给子组件声明事件

父组件:
// 事件名称为 update:xxx 的格式
// xxx 就是传递给子组件的数据的名称
<com-button :yan="co" @update:yan="data=>{co=data}"></com-button>
子组件:
<button @click="$emit('update:yan','green')">修改</button>

方法4:终极版,通过.sync优化父组件的相关操作

该方法实现 子组件修改父组件传递过来的数据,最终方法

父组件:
<!-- 通过 【:yan.sync="co"】 就是对 如下内容-->
<!-- 【:yan="co" @update:yan="data=>{co=data}"】-->
<!-- 的封装-->
<com-button :yan.sync="co"  :se.sync="abc"></com-button>
子组件:
<button @click="$emit('update:yan','blue')">修改</button>

以后我们可以通过.sync设置,子组件可以修改父组件传递过来的具体数据信息

update是固定标志

.sync官网详情: https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6

5.2子给父传值

子组件给父组件传递数据

语法

  1. 父组件向子组件通过**@符号定义一个事件**,在本身内部methods中声明事件方法
  2. 子组件使用this.$emit()调用父组件传递过来的事件,并传递相关的数据
  3. 父组件通过事件方法参数获得子组件传递过来的数据并使用

父组件操作

父组件通过**@符号**在子组件上定义一个事件,在父组件内部methods中声明事件方法

<子组件 @func1="show"></子组件>
...
methods:{show(arg1,arg2){xxxx}
}

​ func1为事件的名称,给子组件触发使用

​ show为该事件的执行函数,在父组件内部的methods中定义好

​ 在事件中可以通过形参(arg1、arg2)接收子组件传递过来的数据 并做进一步处理

子组件操作

子组件中,使用this.$emit()调用父组件中的事件方法

this.$emit('func1', 数据, 数据)// this.$emit(事件名称, 传递的数据,数据,数据……)
// 使用this.$emit调用父组件给声明的事件
// $emit可以使得组件实例“触发”本身的事件执行
// ($emit也可以触发鼠标或键盘事件执行)

第二个参数开始传递实参数据,其可以被父组件methods方法的形参所接受

$emit(名称,数据,数据……) 是组件调用自己方法的固定方式,第一个参数是被调用方法的名称,后续参数都是给方法传递的实参信息

案例应用

父组件(app.vue)代码:

<template><div id="app"><h2>我是父组件app----{{dt}}</h2><!-- 使用son子组件 --><!-- 通过@符号给子组件声明一个(自定义)事件,receive事件方法在methods中设置 --><com-son @jieshou="receive"></com-son></div>
</template><script>
// 导入、注册、使用子组件
import ComSon from './components/Son.vue'
export default {components: {'com-son': ComSon},data () {return {dt: ''}},methods: {// msg可以接收到当前事件传递过来的数据receive (msg) {this.dt = msg}}
}
</script>

子组件(components/son.vue)代码:

<template><div id="son">我是子组件son<button @click="huibao()">汇报学习情况</button></div>
</template><script>
export default {methods: {huibao () {this.$emit('jieshou', '我们学习vue很好')}}
}
</script>

5.3兄弟组件传值

兄弟组件之间彼此没有联系,它们需要通过中间件Vue实例对象bus(快递员)进行数据传递

给组件实例(或Vue实例) 声明事件有两种方式:

  1. 直接声明
  2. 通过$on实现

给组件实例声明事件:

<组件 @事件名称="事件驱动方法"></组件>

通过**$on**进行声明:

// 组件实例.$on(事件名称,事件驱动方法(形参,形参){})vm.$on('hello',function(traffic,city){console.log(`我坐着{$traffic}到达${city}城市`)})

注意:组件实例 和 vue实例都可以调用$on

实现步骤

  1. 定义模块src/bus.js,导入Vue模块并导出一个Vue实例对象

    import Vue from 'vue'
    export default new Vue() 
    
  2. 在各个兄弟组件中,导入 bus.js 模块

    import bus from '@/bus.js'
    

    虽然bus.js被各个组件都导入,但是系统中只有一个bus对象

  3. 接收数据的兄弟组件的 created 生命周期方法里(使得事件及时响应),

    使用 bus.$on(‘事件名称’, (接收的数据) => {}) 定义事件成员方法

    created(){// 定义事件,注意箭头函数应用bus.$on('xxx', data=>{console.log(data)})
    }
    

    xxx是事件方法的名称

    data是形参,待接收数据,并且可以定义多个

    注意:如果$on内部要使用this,通过"箭头函数"声明方法

  4. 发送数据的兄弟组件中,使用 bus.$emit(‘事件名称’, 要发送的数据) 向外发送数据

    <button @click="sendMsg">给兄弟说话</button>
    export default {methods: {sendMsg(){// 触发 绑定的 事件,并向外传递参数bus.$emit('xxx', '1000元保护费')}}
    }
    

    xxx 是接收数据组件给bus声明的方法

    第二个参数是传递的实参数据

说明

  1. Vue实例可以调用$on()方法进行事件方法创建

    实例.$on(名称,(形参,形参,形参……){})
    

    参数根据需要,可以是一个或多个

  2. Vue实例可以调用$emit()方法进行事件方法执行

    实例.$emit(名称,实参,实参,实参……)
    

    参数与$on的形参是一一对应的

注意

虽然各个兄弟组件针对bus.js都有做引入,系统在运行的时候只有一个bus对象,所以一个组件给bus绑定的事件方法,其他组件可以通过bus调用

案例应用

src/bus.js代码:

// 快递员(中间组件),负责兄弟组件之间传递数据
import Vue from 'vue'
// 导出一个Vue对象
// 注意:这是一个新的对象,与main.js里边的没有关系
export default new Vue()

First.vue代码:

<template><div id="first"><h3>我是大哥--{{msg}}</h3></div>
</template><script>
import bus from '@/bus.js'
export default {name: 'First',data () {return {msg: '' // 接收小弟传递过来的数据}},created () {bus.$on('receive', (data) => {console.log(data)this.msg = data})}
}
</script>

Second.vue代码:

<template><div id="second"><h3>我是小弟</h3><button @click="back()">给大哥回话</button></div>
</template><script>
import bus from '@/bus.js'
export default {name: 'Second',methods: {back () {bus.$emit('receive', '1000元保护费')}}
}
</script>

App.vue代码(引入、注册、使用各个兄弟组件):

<template><div id="app"><h2>App根基组件</h2><first></first><second></second></div>
</template><script>
// 对两个兄弟子组件 做 导入、注册、使用
import First from '@/components/First.vue'
import Second from '@/components/Second.vue'
export default {name: 'App',components: {First,Second}
}
</script>

6.路由router

路由

路由是一个js功能模块,用于解决SPA项目组件切换显示问题的,本身对组件切换的各个底层技术有做封装,是更成熟组件切换解决方案,使用起来更高级、方便。

路由是开发SPA项目必备技能之一

安装路由:

在项目中安装路由有两种方式(两种方式本质完全一样):

  1. vuecli(脚手架)创建项目的时候(勾选Router项目即可,这时会增加一个步骤,选择n即可)
  2. 单独安装:
npm i vue-router

注意:以上安装依赖包的指令需要在项目根目录执行

路由相关组件

  1. router-link 设置#锚点超链接按钮

  2. router-view 设置组件显示占位符

案例应用:

​ 应用 路由 升级SPA案例的组件切换效果

在src/main.js中给路由做如下配置:

  1. import引入 路由模块
  2. import引入 各个业务组件
  3. Vue.use(路由模块) 注册路由组件
  4. 创建路由对象,通过path、component设置#锚点 与 组件的联系
  5. 在Vue实例内部 挂载 router路由对象

具体代码:

import Vue from 'vue'
import App from './App.vue'// 1. 引入路由模块
import VueRouter from 'vue-router'// 2. 导入各个业务组件
import Home from './components/Home.vue'
import Movie from './components/Movie.vue'
import Music from './components/Music.vue'// 3. 注册路由中的相关组件
// 路由中有两个组件( <router-link>  <router-view> )被进场使用
// A. 单独注册
// Vue.component('router-link',XXX)
// Vue.component('router-view',XXX)
// B. 一并注册,一次性把所有的组件都注册好,更高效
Vue.use(VueRouter)    // 插件// 4. 创建一个路由对象
const router = new VueRouter({routes:[// path和component都是固定名称// {path:路由地址, component:被显示的组件模块}{path:'/home', component:Home},{path:'/movie', component:Movie},{path:'/music', component:Music},]
})Vue.config.productionTip = falsenew Vue({// 5. 挂载路由对象router, // 全写:router:router,简易成员赋值render: h => h(App)
}).$mount('#app')

设置切换按钮和占位符

​ 在App.vue中设置按钮 和 占位符

  1. 按钮: 通过router-link设置 按钮和#锚点信息
<router-link to="/home">首页</router-link>
<router-link to="/user">会员</router-link>
<router-link to="/movie">电影</router-link>
  1. 占位符:通过 router-view 设置组件显示占位符
<router-view></router-view>

App.vue具体代码:

<template><div><h2>App根组件-路由实现spa</h2><p><router-link to="/home">首页</router-link><router-link to="/movie">电影</router-link><router-link to="/music">音乐</router-link></p><p id="cont"><!-- 设置业务组件显示-路由组件实现代表占位符 --><router-view></router-view></p></div>
</template>

路由执行过程分析:

  1. 用户点击 页面的 路由链接router-link,点击的一瞬间,就会修改 浏览器 地址栏 中的 #号 锚点地址信息,

  2. #锚点变化了 会立即被 路由 监听到 (路由有封装window.onhashchange事件)

  3. 之后 路由 会获取变化后的#锚点信息 (路由有封装window.location.hash)

  4. 再之后 路由 根据#锚点信息找到对应 的组件 (在main.js中可知)

  5. 最后组件是通过路由占位符router-view显示的

6.1.重定向redirect

重定向

一个路由执行时可以跳转到另一个路由去执行,使得一个路由地址A与另一个路由地址B联系起来,执行A的时候会跳转执行B

关键字:redirect

语法

var router = new VueRouter({routes:[// {path:'/', redirect:'跳转到的路由地址'}{path:'/', redirect:'/home'},{path:'/home', component:Home},]
})

执行 /根目录路由地址 时,就跳转执行 /home路由地址 ,进而把对应的组件给显示出来了

注意

  1. 不仅 “/” 可以被重定向,其他普通路由地址互相也可以重定向
  2. 重定向会使得路由再次发生调用请求

案例应用

​ 在没有任何#锚点信息时,就显示首页组件效果

const router = new VueRouter({routes:[// {path:'路由地址A', redirect:'路由地址B'}      // A 重定向执行 B{path:'/', redirect:'/home'},{path:'/home', component:Home}]
})

6.2.子路由children

子路由

一般项目开发中,App.vue是根基组件(第1级),内部可以有具体业务组件Home.vue Movie.vue(第2级),根据业务需要,业务组件内部还要做内容分级显示(第3级)组件

第3级组件做应用的时候需要设置路由,并且与第2级组件路由有形成父子关系,故称为 子路由

通过children关键字路由设置子路由

案例应用

// 导入第三层级业务组件
import Hongkong from './components/yinyue/Hongkong.vue'// 3. 注册路由中的相关组件
Vue.use(VueRouter) // 插件// 4. 创建一个路由对象
const router = new VueRouter({routes:[{path:'/', redirect:'/home'},{// 给当前路由 配置子路由,关键字childrenpath:'/music', component:Music,children:[{path:'/music/hongkong',component:Hongkong},]},

注意

  1. 要通过 **children **关键字设置子路由
  2. 第三级组件对应的 切换按钮(router-link) 和 显示占位符(router-view) 需要在第二级组件中设置
  3. 第二级组件对应的 切换按钮(router-link) 和 显示占位符(router-view) 需要在App.vue组件中设置

给子路由设置重定向:

在main.js中给子路由配置重定向:

    {path:'/music', redirect:'/music/dalu',      // A. 子路由重定向配置  推荐component:Music,children:[// {path:'/music', redirect:'/music/dalu'}, // B.子路由重定向配置{path:'/music/hongkong',component:Hongkong},{path:'/music/taiwan',component:Taiwan},{path:'/music/dalu',component:Dalu}]},

注意

  1. 子路由设置重定向有两种方式:父路由中 或 子路由中
  2. 父级路由的component:Music 成员不能去除

6.3.路由传参

路由传参

项目中有应用场景是这样的:

商品列表页面中,每个商品项目都有 详情页面,为了知道哪个商品被展示查看,需要在路由地址中额外设置商品的数字id信息,以便据此查询商品,这个商品id就是“路由传参

声明路由参数

{ path: '/dt/:xx/:yy/:zz', component: Detail }

通过 :xx 的方式声明参数,一个或多个都可以,彼此通过 /斜杠 分隔

接收路由参数

<标签>{{$route.params.xx}}</标签><script>
new Vue({created(){this.$route.params.xx}
})
</script>

模板 和 Vue实例 内部都可以接收

案例应用:

​ 单击电影列表项目,进入详情页面,并对当前电影项目的id信息传递接收

  1. 创建业务组件 src/components/Movie.vue,展示电影列表

    <template><div><h3>电影列表展示</h3><ul><!-- 给router-link设置属性,使得生成其他标签(默认生成a标签) tag="标签名称" ,变为其他标签,不影响单击效果<li data-v-358f1330="" class=""> 第一滴血 </li>--><router-link  tag="li"   v-for="item in movieList"  :key="item.id":to=" '/detail/'+item.id  "   >{{item.name}}</router-link></ul></div>
    </template><script>
    export default {data(){return {movieList:[{id:101, name:'第一滴血'},{id:102, name:'我不是药神'},{id:103, name:'我不是码神'},]}}
    }
    </script>
    
  2. 创建业务组件 src/components/Detail.vue 展示电影详情,同时接收电影参数

    <template><div>电影详情展示-----{{$route.params.mid}}</div>
    </template><script>
    export default {// 组件实例内部获得"路由参数",进而可以通过axios获得指定信息的详情内容created(){console.log(this.$route.params.mid) // 获得名称为mid的路由参数}
    }
    </script>
    
  3. 在main.js中 给 Movie.vue 和 Detail.vue 两个组件创建路由,Detail的路由要设置参数

    // 2. 导入各个业务组件
    import Movie from './components/Movie.vue'
    import Detail from './components/Detail.vue'// 3. 注册路由中的相关组件
    Vue.use(VueRouter) // 插件// 4. 创建一个路由对象
    const router = new VueRouter({routes:[{path:'/', redirect:'/movie'},{path:'/movie', component:Movie}, // 电影列表路由// 给当前路由设置参数// 通过:冒号方式 表达有参数,a/b/c 是参数的名称,可以自定义为其他{path:'/detail/:mid', component:Detail}, // 电影详情路由]
    })
    

注意

  1. 路由有参数,那么应用中要传递该参数
  2. router-link标签默认被编译为超链接a标签,可以设置tag属性,使其变为其他标签

6.4.编程式导航

导航

​ 一个路由被执行一次,就是一次导航

导航种类

  1. 声明式导航:router-link可以编译生成超链接按钮,单击按钮就切换路由并显示对应的组件,这个过程称为“声明式导航(静态)”
  2. 编程式导航:有时由于业务需要,一个路由被切换执行并不方便通过声明式导航实现,相反是要通过程序代码的方式给实现出来,就是“编程式导航(动态)”

编程式导航的实现

路由对象.push(路由地址)    // 根据路由地址执行导航  最经常使用********
路由对象.back()  	      // 后退************
路由对象.forward()        // 前进
路由对象.go(数字整数)     // 根据“整型数字”参数做路由的 前进(大于0)、刷新(等于0)、后退(小于0) 操作

路由对象

  1. main.js中,就是router
  2. 在组件实例中 就是 this.$router

案例应用

​ 在电影详情页面通过“编程式导航”实现单击“返回”按钮回到列表页面效果

src/components/Detail.vue具体实现:

<template><div><p><button @click="$router.back()">返回back</button></p><p><button @click="$router.go(-1)">返回go</button></p><p><button @click="$router.push('/movie')">返回push</button></p><p>电影详情展示-----{{$route.params.mid}}</p></div>
</template>

6.5.路由守卫

守卫

​ 每个路由在执行的时候都会经历一些"关口",关口可以做决定是否 继续前进 或 执行其他路由 或 停止当前路由执行 ,关口就是守卫。

作用

​ 每个项目都要使用守卫,很多组件页面要求只有处于登录状态的用户才可以访问,判断是否登录就是通过守卫做的。

部署守卫语法

router.beforeEach((to, from, next) => { /* 导航守卫 处理逻辑 */ })

router是 new VueRouter() 得到的 路由对象

  1. to:是一个对象,保存着将要访问的路由相关参数,to.path:被访问的路由地址信息

  2. from:是一个对象,保存着离开的那个路由的相关参数,from.path: 从哪来的路由地址

  3. next:是一个回调函数,对后续的执行起着 拦截 或 放行 的作用

如果没有问题请一定执行next()方法,以进行后续操作,

next()方法使用示例:

​ next(’/login’) 执行其他路由,例如登录

​ next(false) 停止当前路由执行

​ next() 执行后续动作

注意

​ 守卫种类有很多,我们要学习使用的是 “全局前置守卫” ,特点是所有的路由在执行之前都会经过该守卫

案例应用:

实现非登录用户访问后台首页就 强制去登录的效果

// 路由守卫简单使用【全局前置守卫,所有路由都生效】
router.beforeEach(function(to,from,next){// "非登录"用户禁止访问后台页面,相反可以访问login登录页面let tk = window.sessionStorage.getItem('token')// "没有token" 并且 还要访问 "home页面[非login登录页面]" 就强制登录if(!tk && to.path!=='/login'){// return会停止后续代码执行return next('/login')}next() // 放行
})

7.监听器watch

watch监听器

监听器就是监测机制,可以监测vue中data数据的变化,并做相关处理

关键字:watch

语法

data(){return {name:'',user:{addr:'',}}  
},
watch:{// data成员名称:函数(新值,旧值){}name:function(newv,oldv){},'user.addr':function(newv,oldv){},  // 对象成员监听user: { // 深度监听,内部任意成员变化都会感知到handler: function (newv, oldv) { },deep: true},
}

注意

  1. 监听器既可以监听普通成员、也可以监听对象成员,还可以深度监听
  2. 一般this可以调用的成员属性都可以监听,例如computed计算属性,但是主要针对data做应用
  3. 深度监听,使用handler+deep关键字达成

8.脚手架VueCLI

VueCLI

脚手架,其可以把许多项目通用的依赖包(vue、webpack、路由、vuex、less编译器等等) 和 通用的配置都给做好安装好,使得开发者全部的注意力都集中在业务层面,明显提升开发效率的,真实项目都要使用脚手架开发。

依赖包:axios、vue等等都是依赖包,一个依赖包中有许多 模块

安装vuecli

npm i -g @vue/cli   // 使用全局方式安装

上述依赖包通过全局方式安装,完毕后在系统任何目录都会执行名称为"vue"的一个指令

依赖包安装完毕,会形成 在 C:\Users\ssh\AppData\Roaming\npm\node_modules@vue\cli 目录

vue --version 查看脚手架版本,现在默认是4.0.5版本(如果是2.9.6就是错误的,需要卸载重新安装)

npm un -g @vue/cli 卸载

vuecli创建项目

vue  create  项目名称(01-pro)

注意

  1. vuecli创建新项目时,项目名称必须是一个新目录,完毕后会自动生产之,并在其中生成项目需要的文件
  2. 项目上级各个目录名字最好为英文数字中横线 不要使用 中文的或其他特殊符号定义上级目录名字
查看全文
如若内容造成侵权/违法违规/事实不符,请联系编程学习网邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!

相关文章

  1. 怎样让双眼皮变得更深

    ...

    2024/3/16 1:47:10
  2. 高级前端面试总结

    金三银四魔都两年半前端面经 前言 先介绍下个人基本情况&#xff0c;16届本科非计算机相关专业&#xff0c;毕业转行前端&#xff0c;过年后裸辞休息了半个月&#xff0c;然后到三月份开始全力准备面试&#xff0c;主要是过去做过的项目总结&#xff0c;刷算法题&#xff0c;巩…...

    2024/3/16 1:47:09
  3. 上海做双眼皮有效艺星

    ...

    2024/3/16 1:47:09
  4. 德州哪里双眼皮做的好

    ...

    2024/3/19 20:24:12
  5. 杭州割双眼皮格莱美

    ...

    2024/3/27 6:49:52
  6. 溧阳割广州南方做双眼皮评价怎么样

    ...

    2024/3/19 19:58:20
  7. 做双眼皮最佳年龄

    ...

    2024/3/20 11:04:32
  8. 潍坊武汉双眼皮榜首艺星

    ...

    2024/3/16 1:47:04
  9. 割了双眼皮没告诉老公

    ...

    2024/3/20 20:45:36
  10. ng2 学习笔记(三)依赖注入与服务

    前两篇文章简单介绍了ng2的一些基础用法&#xff0c;基本和ng1的使用风格差不多&#xff0c;只是写法和开发方式变化比较大。 这一篇&#xff0c;来总结一下ng的依赖注入与服务。官方的教程上是把他分开来讲的&#xff0c;个人感觉放在一起比较容易理解。 同样&#xff0c;这篇…...

    2024/3/17 4:29:16
  11. 延吉哪个医院割上海双眼皮国际美莱

    ...

    2024/3/17 21:34:01
  12. 做双眼皮对比照片

    ...

    2024/3/20 1:53:14
  13. 德州双眼皮哪里好

    ...

    2024/3/13 14:53:04
  14. 埋线双眼皮还原

    ...

    2024/3/13 14:53:01
  15. 为什么做完双眼皮后会显老

    ...

    2024/3/16 1:47:00
  16. Angular使用jsencrypt进行RSA加密

    一、什么是RSA加密 RSA加密算法是一种非对称加密算法。 非对称加密算法需要两个密钥来进行加密和解密&#xff0c;这两个密钥是公开密钥和私有密钥。 非对称加密的模式规则是&#xff1a; 后端生成两把密钥&#xff08;公钥和私钥&#xff09;&#xff0c;公钥是公开的&…...

    2024/3/16 1:46:59
  17. 割完双眼皮结痂了怎么清理

    ...

    2024/3/16 1:46:58
  18. 都隔男孩割眼皮上褶子多能做双眼皮吗

    ...

    2024/3/16 1:46:57
  19. 2019最新《传智黑马39期WEB前端开发全套项目实战》

    目录 ├─01 HTML5.7z ├─02 CSS3.7z.001 ├─02 CSS3.7z.002 ├─02 CSS3.7z.003 ├─03-1 京东电商项目.7z ├─03-2 前端基本功.7z.001 ├─03-2 前端基本功.7z.002 ├─03-2 前端基本功.7z.003 ├─04 JavaScript基础语法.7z ├─05 WebAPI.7z.001 ├─05 WebAPI.7z.002 ├…...

    2024/3/20 21:33:05
  20. 最新北风网 web全栈视频教程

    1-2初级教程 入门必备 - PS技法与切片技术 1-3初级教程 入门必备 - JavaScript快速上手 2-1中级教程 无上心法-CSS高级及兼容Hack技术 2-2中级教程 前端利器 - 实战Jquery Ajax技术 2-3中级教程 进阶之篇 - JavaScriptJQuery系列全程应用 2-4中级教程 前端综合项目实战 3-1高级…...

    2024/3/16 1:46:55

最新文章

  1. Flink-CDC 无法增量抽取SQLServer数据

    1.问题 因部署在WindowsServer服务器SQLServer发生过期后重启&#xff0c;Flink-CDC同步进行作业重启&#xff0c;启动后无报错信息&#xff0c;数据正常抽取。但是观察几天后发现当天数据计算指标无法展示 2.定位 因为没用进行任何修改&#xff0c;故初步判断不是因Flink-C…...

    2024/3/29 13:21:30
  2. 梯度消失和梯度爆炸的一些处理方法

    在这里是记录一下梯度消失或梯度爆炸的一些处理技巧。全当学习总结了如有错误还请留言&#xff0c;在此感激不尽。 权重和梯度的更新公式如下&#xff1a; w w − η ⋅ ∇ w w w - \eta \cdot \nabla w ww−η⋅∇w 个人通俗的理解梯度消失就是网络模型在反向求导的时候出…...

    2024/3/20 10:50:27
  3. k8s1.28.8版本配置prometheus监控告警

    文章目录 官方架构图组件的具体介绍kube-prometheus包含的组件简介&#xff1a;文件存储路径&#xff1a; 结构分析官网自带的一些规则自己总结流程 1-创建规则磁盘使用率报警规则 详解上面rule流程Alertmanagerg查看 2-报警接收器2.1-邮件报警修改Alertmanager配置查看现有的s…...

    2024/3/29 9:16:45
  4. oracle 19c 打补丁教程

    感谢大家的关注&#xff0c;针对上篇文章分析的19c的补丁包部分这里分享一下之前记录的打补丁手册 希望对大家有帮助&#xff01; oracle patch 大全&#xff08;更新至2024-03&#xff09;-CSDN博客这里是补丁下载地址 oracle 19CRAC打补丁到19.20 本文是简洁版只有步骤和…...

    2024/3/28 20:59:59
  5. 力扣 字符串解码

    维护一个放数字的栈&#xff0c;一个放字母的栈 遇到[把数字和字母入栈&#xff0c;遇到]把当前字母循环加上数字栈头遍的字母栈头 class Solution { public:string decodeString(string s) {string ans"";stack<int>sz;stack<string>zm;里面是string …...

    2024/3/28 23:45:26
  6. 【外汇早评】美通胀数据走低,美元调整

    原标题:【外汇早评】美通胀数据走低,美元调整昨日美国方面公布了新一期的核心PCE物价指数数据,同比增长1.6%,低于前值和预期值的1.7%,距离美联储的通胀目标2%继续走低,通胀压力较低,且此前美国一季度GDP初值中的消费部分下滑明显,因此市场对美联储后续更可能降息的政策…...

    2024/3/27 10:21:24
  7. 【原油贵金属周评】原油多头拥挤,价格调整

    原标题:【原油贵金属周评】原油多头拥挤,价格调整本周国际劳动节,我们喜迎四天假期,但是整个金融市场确实流动性充沛,大事频发,各个商品波动剧烈。美国方面,在本周四凌晨公布5月份的利率决议和新闻发布会,维持联邦基金利率在2.25%-2.50%不变,符合市场预期。同时美联储…...

    2024/3/24 20:11:25
  8. 【外汇周评】靓丽非农不及疲软通胀影响

    原标题:【外汇周评】靓丽非农不及疲软通胀影响在刚结束的周五,美国方面公布了新一期的非农就业数据,大幅好于前值和预期,新增就业重新回到20万以上。具体数据: 美国4月非农就业人口变动 26.3万人,预期 19万人,前值 19.6万人。 美国4月失业率 3.6%,预期 3.8%,前值 3…...

    2024/3/29 2:45:46
  9. 【原油贵金属早评】库存继续增加,油价收跌

    原标题:【原油贵金属早评】库存继续增加,油价收跌周三清晨公布美国当周API原油库存数据,上周原油库存增加281万桶至4.692亿桶,增幅超过预期的74.4万桶。且有消息人士称,沙特阿美据悉将于6月向亚洲炼油厂额外出售更多原油,印度炼油商预计将每日获得至多20万桶的额外原油供…...

    2024/3/24 20:11:23
  10. 【外汇早评】日本央行会议纪要不改日元强势

    原标题:【外汇早评】日本央行会议纪要不改日元强势近两日日元大幅走强与近期市场风险情绪上升,避险资金回流日元有关,也与前一段时间的美日贸易谈判给日本缓冲期,日本方面对汇率问题也避免继续贬值有关。虽然今日早间日本央行公布的利率会议纪要仍然是支持宽松政策,但这符…...

    2024/3/29 5:19:52
  11. 【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响

    原标题:【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响近日伊朗局势升温,导致市场担忧影响原油供给,油价试图反弹。此时OPEC表态稳定市场。据消息人士透露,沙特6月石油出口料将低于700万桶/日,沙特已经收到石油消费国提出的6月份扩大出口的“适度要求”,沙特将满…...

    2024/3/28 17:01:12
  12. 【外汇早评】美欲与伊朗重谈协议

    原标题:【外汇早评】美欲与伊朗重谈协议美国对伊朗的制裁遭到伊朗的抗议,昨日伊朗方面提出将部分退出伊核协议。而此行为又遭到欧洲方面对伊朗的谴责和警告,伊朗外长昨日回应称,欧洲国家履行它们的义务,伊核协议就能保证存续。据传闻伊朗的导弹已经对准了以色列和美国的航…...

    2024/3/29 11:11:56
  13. 【原油贵金属早评】波动率飙升,市场情绪动荡

    原标题:【原油贵金属早评】波动率飙升,市场情绪动荡因中美贸易谈判不安情绪影响,金融市场各资产品种出现明显的波动。随着美国与中方开启第十一轮谈判之际,美国按照既定计划向中国2000亿商品征收25%的关税,市场情绪有所平复,已经开始接受这一事实。虽然波动率-恐慌指数VI…...

    2024/3/29 1:13:26
  14. 【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试

    原标题:【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试美国和伊朗的局势继续升温,市场风险情绪上升,避险黄金有向上突破阻力的迹象。原油方面稍显平稳,近期美国和OPEC加大供给及市场需求回落的影响,伊朗局势并未推升油价走强。近期中美贸易谈判摩擦再度升级,美国对中…...

    2024/3/29 8:28:16
  15. 【原油贵金属早评】市场情绪继续恶化,黄金上破

    原标题:【原油贵金属早评】市场情绪继续恶化,黄金上破周初中国针对于美国加征关税的进行的反制措施引发市场情绪的大幅波动,人民币汇率出现大幅的贬值动能,金融市场受到非常明显的冲击。尤其是波动率起来之后,对于股市的表现尤其不安。隔夜美国股市出现明显的下行走势,这…...

    2024/3/29 7:41:19
  16. 【外汇早评】美伊僵持,风险情绪继续升温

    原标题:【外汇早评】美伊僵持,风险情绪继续升温昨日沙特两艘油轮再次发生爆炸事件,导致波斯湾局势进一步恶化,市场担忧美伊可能会出现摩擦生火,避险品种获得支撑,黄金和日元大幅走强。美指受中美贸易问题影响而在低位震荡。继5月12日,四艘商船在阿联酋领海附近的阿曼湾、…...

    2024/3/24 20:11:18
  17. 【原油贵金属早评】贸易冲突导致需求低迷,油价弱势

    原标题:【原油贵金属早评】贸易冲突导致需求低迷,油价弱势近日虽然伊朗局势升温,中东地区几起油船被袭击事件影响,但油价并未走高,而是出于调整结构中。由于市场预期局势失控的可能性较低,而中美贸易问题导致的全球经济衰退风险更大,需求会持续低迷,因此油价调整压力较…...

    2024/3/29 9:57:23
  18. 氧生福地 玩美北湖(上)——为时光守候两千年

    原标题:氧生福地 玩美北湖(上)——为时光守候两千年一次说走就走的旅行,只有一张高铁票的距离~ 所以,湖南郴州,我来了~ 从广州南站出发,一个半小时就到达郴州西站了。在动车上,同时改票的南风兄和我居然被分到了一个车厢,所以一路非常愉快地聊了过来。 挺好,最起…...

    2024/3/29 0:49:46
  19. 氧生福地 玩美北湖(中)——永春梯田里的美与鲜

    原标题:氧生福地 玩美北湖(中)——永春梯田里的美与鲜一觉醒来,因为大家太爱“美”照,在柳毅山庄去寻找龙女而错过了早餐时间。近十点,向导坏坏还是带着饥肠辘辘的我们去吃郴州最富有盛名的“鱼头粉”。说这是“十二分推荐”,到郴州必吃的美食之一。 哇塞!那个味美香甜…...

    2024/3/24 20:11:15
  20. 氧生福地 玩美北湖(下)——奔跑吧骚年!

    原标题:氧生福地 玩美北湖(下)——奔跑吧骚年!让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 啊……啊……啊 两…...

    2024/3/27 7:12:50
  21. 扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!

    原标题:扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!扒开伪装医用面膜,翻六倍价格宰客!当行业里的某一品项火爆了,就会有很多商家蹭热度,装逼忽悠,最近火爆朋友圈的医用面膜,被沾上了污点,到底怎么回事呢? “比普通面膜安全、效果好!痘痘、痘印、敏感肌都能用…...

    2024/3/24 20:11:13
  22. 「发现」铁皮石斛仙草之神奇功效用于医用面膜

    原标题:「发现」铁皮石斛仙草之神奇功效用于医用面膜丽彦妆铁皮石斛医用面膜|石斛多糖无菌修护补水贴19大优势: 1、铁皮石斛:自唐宋以来,一直被列为皇室贡品,铁皮石斛生于海拔1600米的悬崖峭壁之上,繁殖力差,产量极低,所以古代仅供皇室、贵族享用 2、铁皮石斛自古民间…...

    2024/3/26 11:21:23
  23. 丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者

    原标题:丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者【公司简介】 广州华彬企业隶属香港华彬集团有限公司,专注美业21年,其旗下品牌: 「圣茵美」私密荷尔蒙抗衰,产后修复 「圣仪轩」私密荷尔蒙抗衰,产后修复 「花茵莳」私密荷尔蒙抗衰,产后修复 「丽彦妆」专注医学护…...

    2024/3/28 18:26:34
  24. 广州械字号面膜生产厂家OEM/ODM4项须知!

    原标题:广州械字号面膜生产厂家OEM/ODM4项须知!广州械字号面膜生产厂家OEM/ODM流程及注意事项解读: 械字号医用面膜,其实在我国并没有严格的定义,通常我们说的医美面膜指的应该是一种「医用敷料」,也就是说,医用面膜其实算作「医疗器械」的一种,又称「医用冷敷贴」。 …...

    2024/3/28 12:42:28
  25. 械字号医用眼膜缓解用眼过度到底有无作用?

    原标题:械字号医用眼膜缓解用眼过度到底有无作用?医用眼膜/械字号眼膜/医用冷敷眼贴 凝胶层为亲水高分子材料,含70%以上的水分。体表皮肤温度传导到本产品的凝胶层,热量被凝胶内水分子吸收,通过水分的蒸发带走大量的热量,可迅速地降低体表皮肤局部温度,减轻局部皮肤的灼…...

    2024/3/28 20:09:10
  26. 配置失败还原请勿关闭计算机,电脑开机屏幕上面显示,配置失败还原更改 请勿关闭计算机 开不了机 这个问题怎么办...

    解析如下&#xff1a;1、长按电脑电源键直至关机&#xff0c;然后再按一次电源健重启电脑&#xff0c;按F8健进入安全模式2、安全模式下进入Windows系统桌面后&#xff0c;按住“winR”打开运行窗口&#xff0c;输入“services.msc”打开服务设置3、在服务界面&#xff0c;选中…...

    2022/11/19 21:17:18
  27. 错误使用 reshape要执行 RESHAPE,请勿更改元素数目。

    %读入6幅图像&#xff08;每一幅图像的大小是564*564&#xff09; f1 imread(WashingtonDC_Band1_564.tif); subplot(3,2,1),imshow(f1); f2 imread(WashingtonDC_Band2_564.tif); subplot(3,2,2),imshow(f2); f3 imread(WashingtonDC_Band3_564.tif); subplot(3,2,3),imsho…...

    2022/11/19 21:17:16
  28. 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机...

    win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”问题的解决方法在win7系统关机时如果有升级系统的或者其他需要会直接进入一个 等待界面&#xff0c;在等待界面中我们需要等待操作结束才能关机&#xff0c;虽然这比较麻烦&#xff0c;但是对系统进行配置和升级…...

    2022/11/19 21:17:15
  29. 台式电脑显示配置100%请勿关闭计算机,“准备配置windows 请勿关闭计算机”的解决方法...

    有不少用户在重装Win7系统或更新系统后会遇到“准备配置windows&#xff0c;请勿关闭计算机”的提示&#xff0c;要过很久才能进入系统&#xff0c;有的用户甚至几个小时也无法进入&#xff0c;下面就教大家这个问题的解决方法。第一种方法&#xff1a;我们首先在左下角的“开始…...

    2022/11/19 21:17:14
  30. win7 正在配置 请勿关闭计算机,怎么办Win7开机显示正在配置Windows Update请勿关机...

    置信有很多用户都跟小编一样遇到过这样的问题&#xff0c;电脑时发现开机屏幕显现“正在配置Windows Update&#xff0c;请勿关机”(如下图所示)&#xff0c;而且还需求等大约5分钟才干进入系统。这是怎样回事呢&#xff1f;一切都是正常操作的&#xff0c;为什么开时机呈现“正…...

    2022/11/19 21:17:13
  31. 准备配置windows 请勿关闭计算机 蓝屏,Win7开机总是出现提示“配置Windows请勿关机”...

    Win7系统开机启动时总是出现“配置Windows请勿关机”的提示&#xff0c;没过几秒后电脑自动重启&#xff0c;每次开机都这样无法进入系统&#xff0c;此时碰到这种现象的用户就可以使用以下5种方法解决问题。方法一&#xff1a;开机按下F8&#xff0c;在出现的Windows高级启动选…...

    2022/11/19 21:17:12
  32. 准备windows请勿关闭计算机要多久,windows10系统提示正在准备windows请勿关闭计算机怎么办...

    有不少windows10系统用户反映说碰到这样一个情况&#xff0c;就是电脑提示正在准备windows请勿关闭计算机&#xff0c;碰到这样的问题该怎么解决呢&#xff0c;现在小编就给大家分享一下windows10系统提示正在准备windows请勿关闭计算机的具体第一种方法&#xff1a;1、2、依次…...

    2022/11/19 21:17:11
  33. 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”的解决方法...

    今天和大家分享一下win7系统重装了Win7旗舰版系统后&#xff0c;每次关机的时候桌面上都会显示一个“配置Windows Update的界面&#xff0c;提示请勿关闭计算机”&#xff0c;每次停留好几分钟才能正常关机&#xff0c;导致什么情况引起的呢&#xff1f;出现配置Windows Update…...

    2022/11/19 21:17:10
  34. 电脑桌面一直是清理请关闭计算机,windows7一直卡在清理 请勿关闭计算机-win7清理请勿关机,win7配置更新35%不动...

    只能是等着&#xff0c;别无他法。说是卡着如果你看硬盘灯应该在读写。如果从 Win 10 无法正常回滚&#xff0c;只能是考虑备份数据后重装系统了。解决来方案一&#xff1a;管理员运行cmd&#xff1a;net stop WuAuServcd %windir%ren SoftwareDistribution SDoldnet start WuA…...

    2022/11/19 21:17:09
  35. 计算机配置更新不起,电脑提示“配置Windows Update请勿关闭计算机”怎么办?

    原标题&#xff1a;电脑提示“配置Windows Update请勿关闭计算机”怎么办&#xff1f;win7系统中在开机与关闭的时候总是显示“配置windows update请勿关闭计算机”相信有不少朋友都曾遇到过一次两次还能忍但经常遇到就叫人感到心烦了遇到这种问题怎么办呢&#xff1f;一般的方…...

    2022/11/19 21:17:08
  36. 计算机正在配置无法关机,关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机...

    关机提示 windows7 正在配置windows 请勿关闭计算机 &#xff0c;然后等了一晚上也没有关掉。现在电脑无法正常关机以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容&#xff0c;让我们赶快一起来看一下吧&#xff01;关机提示 windows7 正在配…...

    2022/11/19 21:17:05
  37. 钉钉提示请勿通过开发者调试模式_钉钉请勿通过开发者调试模式是真的吗好不好用...

    钉钉请勿通过开发者调试模式是真的吗好不好用 更新时间:2020-04-20 22:24:19 浏览次数:729次 区域: 南阳 > 卧龙 列举网提醒您:为保障您的权益,请不要提前支付任何费用! 虚拟位置外设器!!轨迹模拟&虚拟位置外设神器 专业用于:钉钉,外勤365,红圈通,企业微信和…...

    2022/11/19 21:17:05
  38. 配置失败还原请勿关闭计算机怎么办,win7系统出现“配置windows update失败 还原更改 请勿关闭计算机”,长时间没反应,无法进入系统的解决方案...

    前几天班里有位学生电脑(windows 7系统)出问题了&#xff0c;具体表现是开机时一直停留在“配置windows update失败 还原更改 请勿关闭计算机”这个界面&#xff0c;长时间没反应&#xff0c;无法进入系统。这个问题原来帮其他同学也解决过&#xff0c;网上搜了不少资料&#x…...

    2022/11/19 21:17:04
  39. 一个电脑无法关闭计算机你应该怎么办,电脑显示“清理请勿关闭计算机”怎么办?...

    本文为你提供了3个有效解决电脑显示“清理请勿关闭计算机”问题的方法&#xff0c;并在最后教给你1种保护系统安全的好方法&#xff0c;一起来看看&#xff01;电脑出现“清理请勿关闭计算机”在Windows 7(SP1)和Windows Server 2008 R2 SP1中&#xff0c;添加了1个新功能在“磁…...

    2022/11/19 21:17:03
  40. 请勿关闭计算机还原更改要多久,电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机怎么办...

    许多用户在长期不使用电脑的时候&#xff0c;开启电脑发现电脑显示&#xff1a;配置windows更新失败&#xff0c;正在还原更改&#xff0c;请勿关闭计算机。。.这要怎么办呢&#xff1f;下面小编就带着大家一起看看吧&#xff01;如果能够正常进入系统&#xff0c;建议您暂时移…...

    2022/11/19 21:17:02
  41. 还原更改请勿关闭计算机 要多久,配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以...

    配置windows update失败 还原更改 请勿关闭计算机&#xff0c;电脑开机后一直显示以以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容&#xff0c;让我们赶快一起来看一下吧&#xff01;配置windows update失败 还原更改 请勿关闭计算机&#x…...

    2022/11/19 21:17:01
  42. 电脑配置中请勿关闭计算机怎么办,准备配置windows请勿关闭计算机一直显示怎么办【图解】...

    不知道大家有没有遇到过这样的一个问题&#xff0c;就是我们的win7系统在关机的时候&#xff0c;总是喜欢显示“准备配置windows&#xff0c;请勿关机”这样的一个页面&#xff0c;没有什么大碍&#xff0c;但是如果一直等着的话就要两个小时甚至更久都关不了机&#xff0c;非常…...

    2022/11/19 21:17:00
  43. 正在准备配置请勿关闭计算机,正在准备配置windows请勿关闭计算机时间长了解决教程...

    当电脑出现正在准备配置windows请勿关闭计算机时&#xff0c;一般是您正对windows进行升级&#xff0c;但是这个要是长时间没有反应&#xff0c;我们不能再傻等下去了。可能是电脑出了别的问题了&#xff0c;来看看教程的说法。正在准备配置windows请勿关闭计算机时间长了方法一…...

    2022/11/19 21:16:59
  44. 配置失败还原请勿关闭计算机,配置Windows Update失败,还原更改请勿关闭计算机...

    我们使用电脑的过程中有时会遇到这种情况&#xff0c;当我们打开电脑之后&#xff0c;发现一直停留在一个界面&#xff1a;“配置Windows Update失败&#xff0c;还原更改请勿关闭计算机”&#xff0c;等了许久还是无法进入系统。如果我们遇到此类问题应该如何解决呢&#xff0…...

    2022/11/19 21:16:58
  45. 如何在iPhone上关闭“请勿打扰”

    Apple’s “Do Not Disturb While Driving” is a potentially lifesaving iPhone feature, but it doesn’t always turn on automatically at the appropriate time. For example, you might be a passenger in a moving car, but your iPhone may think you’re the one dri…...

    2022/11/19 21:16:57