vue的面试题
问题一:构建的 vue-cli 工程都到了哪些技术,它们的作用分别是什么?
1、vue.js:vue-cli工程的核心,主要特点是 双向数据绑定 和 组件系统。
2、vue-router:vue官方推荐使用的路由框架。
3、vuex:专为 Vue.js 应用项目开发的状态管理器,主要用于维护vue组件间共用的一些 变量 和 方法。
4、axios( 或者 fetch 、ajax ):用于发起 GET 、或 POST 等 http请求,基于 Promise 设计。
5、vux等:一个专为vue设计的移动端UI组件库。
6、创建一个emit.js文件,用于vue事件机制的管理。
7、webpack:模块加载和vue-cli工程打包器。
Vue-cli 工程常用的 npm 命令有哪些?
下载 node_modules 资源包的命令:
npm install
启动 vue-cli 开发环境的 npm命令:
npm run dev
vue-cli 生成 生产环境部署资源 的 npm命令
npm run build
用于查看 vue-cli 生产环境部署资源文件大小的 npm命令:
npm run build --report
请说出vue-cli工程中每个文件夹和文件的用处
vue-cli目录解析:
1.build 文件夹:用于存放 webpack 相关配置和脚本。开发中仅 偶尔使用 到此文件夹下 webpack.base.conf.js
用于配置 less、sass等css预编译库,或者配置一下 UI 库。 config2.文件夹:主要存放配置文件,用于区分开发环境、线上环境的不同。 常用到此文件夹下 config.js 配置开发环境的3. 端口号、是否开启热加载 或者 设置生产环境的静态资源相对路径、是否开启gzip压缩、npm run build4.命令打包生成静态资源的名称和路径等。 dist 文件夹:默认 npm run build 命令打包生成的静态资源文件,用于生产部署。5.node_modules:存放npm命令下载的开发环境和生产环境的依赖包。 src: 存放项目源码及需要引用的资源文件。6. src下assets:存放项目中需要用到的资源文件,css、js、images等。7.src下componets:存放vue开发中一些公共组件:header.vue、footer.vue等。8.src下emit:自己配置的vue集中式事件管理机制。 src下router:vue-router vue路由的配置文件。9.src下service:自己配置的vue请求后台接口方法。 src下page:存在vue页面组件的文件夹。10. src下util:存放vue开发过程中一些公共的.js方法。 src下vuex:存放 vuex 为vue专门开发的状态管理器。11.src下app.vue:使用标签<route-view></router-view>渲染整个工程的.vue组件。12.src下main.js:vue-cli工程的入口文件。 index.html:设置项目的一些meta头信息和提供<div id="app"></div>用于挂载 vue 节点。 package.json:用于 node_modules资源部 和启动、打包项目的 npm 命令管理.
config文件夹 下 index.js 的对于工程 开发环境 和 生产环境 的配置
build 对象下 对于 生产环境 的配置:index:配置打包后入口.html文件的名称以及文件夹名称
assetsRoot:配置打包后生成的文件名称和路径
assetsPublicPath:配置 打包后 .html 引用静态资源的路径,一般要设置成 "./"
productionGzip:是否开发 gzip 压缩,以提升加载速度
dev 对象下 对于 开发环境 的配置:port:设置端口号
autoOpenBrowser:启动工程时,自动打开浏览器
proxyTable:vue设置的代理,用以解决 跨域 问题
`
请你详细介绍一些 package.json 里面的配置
常用对象解析:scripts:npm run xxx 命令调用node执行的 .js 文件
dependencies:生产环境依赖包的名称和版本号,即这些 依赖包 都会打包进 生产环境的JS文件里面
devDependencies:开发环境依赖包的名称和版本号,即这些 依赖包 只用于 代码开发 的时候,不会打包进 生产环境js文件 里面
对于Vue是一套渐进式框架的理解
vue.js的两个核心是什么?
1.数据驱动,也叫双向绑定vue的数据观测原理技术是实现上,利用的是ES5Object.defineProperty和存储器属性: getter和setter(IE9以上版本兼容),称为基于依赖收集的观测机制。核心是vm,保证数据和视图的一致性。2.组件系统vue组件的核心选项:1、模板(template):模板声明了数据和最终展现给用户的DOM之间的映射关系。2、初始数据(data):一个组件的初始数据状态。对于可复用的组件来说,这通常是私有的状态。3、接受的外部参数(props):组件之间通过参数来进行数据的传递和共享。4、方法(methods):对数据的改动操作一般都在组件的方法内进行。5、生命周期钩子函数(lifecycle hooks):一个组件会触发多个生命周期钩子函数,最新2.0版本对于生命周期函数名称改动很大。6、私有资源(assets):Vue.js当中将用户自定义的指令、过滤器、组件等统称为资源。一个组件可以声明自己的私有资源。私有资源只有该组件和它的子组件可以调用。
对于 Vue 是一套 构建用户界面 的 渐进式框架 的理解
渐进式代表的含义是:没有多做职责之外的事。
vue.js只提供了 vue-cli 生态中最核心的 组件系统 和 双向数据绑定。
像vuex、vue-router都属于围绕 vue.js开发的库。
比如说,你要使用Angular,必须接受以下东西:
必须使用它的模块机制
必须使用它的依赖注入-
必须使用它的特殊形式定义组件(这一点每个视图框架都有,难以避免)
所以Angular是带有比较强的排它性的,如果你的应用不是从头开始,而是要不断考虑是否跟其他东西集成,这些主张会带来一些困扰。
比如说,你要使用React,你必须理解:
函数式编程的理念,
需要知道什么是副作用,
什么是纯函数,
如何隔离副作用
它的侵入性看似没有Angular那么强,主要因为它是软性侵入。
Vue与React、Angular的不同是,但它是渐进的:
你可以在原有大系统的上面,把一两个组件改用它实现,当jQuery用;
也可以整个用它全家桶开发,当Angular用;
还可以用它的视图,搭配你自己设计的整个下层用。
你可以在底层数据逻辑的地方用OO和设计模式的那套理念,
也可以函数式,都可以,它只是个轻量视图而已,只做了最核心的东西。
请说出vue几种常用的指令
- v-if:根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定/组件被销毁并重建。
- v-show:根据表达式之真假值,切换元素的 display CSS 属性。
- v-for:循环指令,基于一个数组或者对象渲染一个列表,vue 2.0以上必须需配合 key值 使用。
- v-bind:动态地绑定一个或多个特性,或一个组件 prop 到表达式。
- v-on:用于监听指定元素的DOM事件
- v-model:用于实现表单输入和应用状态间的双向绑定
- v-pre:跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量的没有指令的节点加快编译
- v-once:只渲染元素和组件一次。随后重新渲染,元素组件及其所有的子节点将被视为静态的内容并跳过。可以用于性能的优化。
请问 v-if 和 v-show 有什么区别
共同点:
v-if 和 v-show 都是动态显示DOM元素。
区别:
1、编译过程: v-if 是 真正 的 条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性display。
2、编译条件: v-if 是惰性的:如果在初始渲染时条件为假,则什么也不做。直到条件第一次变为真时,才会开始渲染条件块。v-show不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。
3、性能消耗: v-if有更高的切换消耗。v-show有更高的初始渲染消耗。
4、应用场景: v-if适合运行时条件很少改变时使用。v-show适合频繁切换。
vue常用的修饰符
v-on 指令常用修饰符:
- .stop - 调用 event.stopPropagation(),禁止事件冒泡。
- .prevent -调用event.preventDefault(),阻止事件的默认行为
- .capture - 添加事件侦听器时使用capture模式
- .self -只当事件是从侦听器绑定的元素本身触发时才触发回调。
- .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
- .native - 监听组件根元素的原生事件。
- .once - 只触发一次回调。
- .left - (2.2.0) 只当点击鼠标左键时触发。
- .right - (2.2.0) 只当点击鼠标右键时触发。
- .middle - (2.2.0) 只当点击鼠标中键时触发。
- .passive - (2.3.0) 以 { passive: true } 模式添加侦听器
注意: 如果是在自己封装的组件或者是使用一些第三方的UI库时,会发现并不起效果,这时就需要用`·.native修饰符了,如:
//使用示例:
<el-inputv-model="inputName"placeholder="搜索你的文件"@keyup.enter.native="searchFile(params)">
</el-input>
v-on可以监听多个方法吗?
v-on可以监听多个方法,如:
<input type=“text” :value=“name” @input=“onInput” @focus=“onFocus” @blur=“onBlur” />
但是同一种事件类型的方法,vue-cli工程会报错
<a href=“javascript:;” @click=“methodsOne” @click=“methodsTwo”>
v-bind 指令常用修饰符:
- .prop - 被用于绑定 DOM 属性 (property)。(差别在哪里?)、
- .camel - (2.1.0+) 将 kebab-case 特性名转换为 camelCase. (从 2.1.0 开始支持)
- .sync (2.3.0+) 语法糖,会扩展成一个更新父组件绑定值的 v-on 侦听器。
v-model 指令常用修饰符:
- .lazy-取代input监听change事件
- .number-输入字符串转为数字
- .trim-输入收尾空格过滤
vue中 key 值的作用
key值:用于 管理可复用的元素。因为Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。这么做使 Vue 变得非常快,但是这样也不总是符合实际需求。
2.2.0+ 的版本里,当在组件中使用 v-for 时,key 现在是必须的
vue-cli如何进行工程升级?
前言:此命令谨慎使用,实际开发中如需升级建议直接使用 vue-cli 脚手架搭建,只需要了解即可!
推荐使用
升级插件
npm-check-updates
首先安装插件,建议使用npm源安装,测试cnpm安装下载成功
npm install npm-check-updates -g
然后在待升级工程的目录结构下,命令行输入:
ncu
执行效果
然后升级所有版本,命令行输入:
ncu -a
再输入
ncu install
vue事件中如何使用event对象?
注意在事件中要使用 $ 符号
//html部分
<a href="javascript:void(0);" data-id="12" @click="showEvent($event)">event</a>
//js部分
showEvent(event){//获取自定义data-idconsole.log(event.target.dataset.id)//阻止事件冒泡event.stopPropagation(); //阻止默认event.preventDefault()
}
```什么是$nextTick?````
简单回答
因为Vue的异步更新队列,$nextTick是用来知道什么时候DOM更新完成的。
详细解读:
我们先来看这样一个场景:有一个div,默认用 v-if 将它隐藏,点击一个按钮后,改变 v-if 的值,让它显示出来,同时拿到这个div的文本内容。如果v-if的值是 false,直接去获取div内容是获取不到的,因为此时div还没有被创建出来,那么应该在点击按钮后,改变v-if的值为 true,div才会被创建,此时再去获取,示例代码如下:
<div id="app"><div id="div" v-if="showDiv">这是一段文本</div><button @click="getText">获取div内容</button>
</div>
<script>
var app = new Vue({el : "#app",data:{showDiv : false},methods:{getText:function(){this.showDiv = true;var text = document.getElementById('div').innnerHTML;console.log(text);}}
})
</script>
这段代码并不难理解,但是运行后在控制台会抛出一个错误:Cannot read property 'innnerHTML of null,意思就是获取不到div元素。这里就涉及Vue一个重要的概念:异步更新队列。
异步更新队列
Vue在观察到数据变化时并不是直接更新DOM,而是开启一个队列,并缓冲在同一个事件循环中发生的所以数据改变。在缓冲时会去除重复数据,从而避免不必要的计算和DOM操作。然后,在下一个事件循环tick中,Vue刷新队列并执行实际(已去重的)工作。所以如果你用一个for循环来动态改变数据100次,其实它只会应用最后一次改变,如果没有这种机制,DOM就要重绘100次,这固然是一个很大的开销。
Vue会根据当前浏览器环境优先使用原生的Promise.then和MutationObserver,如果都不支持,就会采用setTimeout代替。
知道了Vue异步更新DOM的原理,上面示例的报错也就不难理解了。事实上,在执行this.showDiv = true时,div仍然还是没有被创建出来,直到下一个vue事件循环时,才开始创建。$nextTick就是用来知道什么时候DOM更新完成的,所以上面的示例代码需要修改为:
<div id="app"><div id="div" v-if="showDiv">这是一段文本</div><button @click="getText">获取div内容</button>
</div>
<script>
var app = new Vue({el : "#app",data:{showDiv : false},methods:{getText:function(){this.showDiv = true;this.$nextTick(function(){var text = document.getElementById('div').innnerHTML;console.log(text); });}}
})
</script>
这时再点击事件,控制台就打印出div的内容“这是一段文本“了。
理论上,我们应该不用去主动操作DOM,因为Vue的核心思想就是数据驱动DOM,但在很多业务里,我们避免不了会使用一些第三方库,比如 popper.js、swiper等,这些基于原生javascript的库都有创建和更新及销毁的完整生命周期,与Vue配合使用时,就要利用好$nextTick。
Vue 组件中 data 为什么必须是函数?
简单回答
//为什么data函数里面要return一个对象
<script>export default {data() {return { // 返回一个唯一的对象,不要和其他组件共用一个对象进行返回menu: MENU.data,poi: POILIST.data}}}
</script>
因为一个组件是可以共享的,但他们的data是私有的,所以每个组件都要return一个新的data对象,返回一个唯一的对象,不要和其他组件共用一个对象。
详细的解答
Vue.component('my-component', {template: '<div>OK</div>',data() {return {} // 返回一个唯一的对象,不要和其他组件共用一个对象进行返回},
})
这个操作是一个简易操作,实际上
- 首先需要创建一个组件构造器,
- 然后注册组件。
- 注册组件的本质其实就是建立一个组件构造器的引用。
- 使用组件才是真正创建一个组件实例。
- 所以,注册组件其实并不产生新的组件类,但会产生一个可以用来实例化的新方式。
理解这点之后,再理解js的原型链:
var MyComponent = function() {}
MyComponent.prototype.data = {a: 1,b: 2,
}
上面是一个虚拟的组件构造器,真实的组件构造器方法很多
var component1 = new MyComponent()
var component2 = new MyComponent()
上面实例化出来两个组件实例,也就是通过调用,创建的两个实例
component1.data.a === component2.data.a // true
component1.data.b = 5
component2.data.b // 5
可以看到上面代码中最后三句,这就比较坑爹了,如果两个实例同时引用一个对象,那么当你修改其中一个属性的时候,另外一个实例也会跟着改。这怎么可以,两个实例应该有自己各自的域才对。所以,需要通过下面方法来进行处理:
var MyComponent = function() {this.data = this.data()
}
MyComponent.prototype.data = function() {return {a: 1,b: 2,}
}
这样每一个实例的data属性都是独立的,不会相互影响了。所以,你现在知道为什么vue组件的data必须是函数了吧。这都是因为js本身的特性带来的,跟vue本身设计无关。
v-for 与 v-if 的优先级
当它们处于同一节点,v-for的优先级比v-if更高,这意味着 v-if将分别重复运行于每个 v-for循环中。当你想为仅有的一些项渲染节点时,这种优先级的机制会十分有用,如下:
<li v-for="todo in todos" v-if="!todo.isComplete">{{ todo }}
</li>
vue中子组件调用父组件的方法
通过v-on 监听 和$emit触发来实现:
- 在父组件中 通过v-on 监听 当前实例上的 自定义事件。
- 在子组件 中 通过’$emit’触发 当前实例上的 自定义事件。
示例:
父组件:
<template><div class="fatherPageWrap"><h1>这是父组件</h1><!-- 引入子组件,v-on监听自定义事件 --><emitChild v-on:emitMethods="fatherMethod"></emitChild></div>
</template>
<script type="text/javascript">import emitChild from '@/page/children/emitChild.vue';export default{data () {return {}},components : {emitChild},methods : {fatherMethod(params){alert(JSON.stringify(params));}}}
</script>
子组件:
<template><div class="childPageWrap"><h1>这是子组件</h1></div>
</template>
<script type="text/javascript">export default{data () {return {}},mounted () {//通过 emit 触发this.$emit('emitMethods',{"name" : 123});}}
</script>
结果:
子组件 会调用 父组件的fatherMethod
方法,该并且会alert
传递过去的参数:{"name":123}
vue中 keep-alive 组件的作用
keep-alive
:主要用于保留组件状态
或避免重新渲染
。
比如: 有一个列表页面
和一个详情页面
,那么用户就会经常执行打开详情=>返回列表=>打开详情
这样的话 列表 和 详情 都是一个频率很高
的页面,那么就可以对列表组件
使用<keep-alive></keep-alive>
进行缓存,这样用户每次返回列表
的时候,都能从缓存中快速渲染
,而不是重新渲染
。
1、属性:
include
:字符串或正则表达式。只有匹配的组件会被缓存
-exclude
:字符串或正则表达式。任何匹配的组件都不会被缓存。
2、用法:
包裹动态组件
时,会缓存
不活动的组件实例,而不是销毁
它们。和 <transition>
相似,<keep-alive>
是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。
当组件在 内被切换,在 2.2.0 及其更高版本中,activated 和 deactivated生命周期 将会在 树内的所有嵌套组件中触发。
<!-- 基本 -->
<keep-alive><component :is="view"></component>
</keep-alive><!-- 多个条件判断的子组件 -->
<keep-alive><comp-a v-if="a > 1"></comp-a><comp-b v-else></comp-b>
</keep-alive><!-- 和 `<transition>` 一起使用 -->
<transition><keep-alive><component :is="view"></component></keep-alive>
</transition>
注意:
<keep-alive>
是用在其一个直属的子组件被开关的情形。如果你在其中有 v-for 则不会工作。如果有上述的多个条件性的子元素,<keep-alive>
要求同时只有一个子元素被渲染。
3、include 和 exclude 属性的使用:
2.1.0 新增
include
和 exclude
属性允许组件有条件地缓存。二者都可以用逗号
分隔字符串、正则表达式
或一个数组
来表示:
<!-- 逗号分隔字符串 -->
<keep-alive include="a,b"><component :is="view"></component>
</keep-alive><!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/"><component :is="view"></component>
</keep-alive><!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']"><component :is="view"></component>
</keep-alive>
匹配首先检查组件自身的 name 选项
,如果 name 选项不可用,则匹配它的局部注册名称
(父组件 components 选项的键值)。匿名组件不能被匹配。
不会在函数式组件中正常工作,因为它们没有缓存实例。
vue中如何编写可复用的组件?
在编写组件的时候,时刻考虑组件是否可复用是有好处的。一次性组件跟其他组件紧密耦合没关系,但是可复用组件一定要定义一个清晰的公开接口。
Vue.js组件 API 来自 三部分:prop
、事件
、slot
:
- prop 允许外部环境传递数据给组件,在vue-cli工程中也可以使用vuex等传递数据。
- 事件允许组件触发外部环境的 action
- slot 允许外部环境将内容插入到组件的视图结构内。
代码示例:
<my-component:foo="bar":bar="qux"//子组件调用父组件方法@event-a="doThis"@event-b="doThat"><!-- content -->
<img slot="icon" src="..." />
<p slot="main-text">Hello!</p>
</my-component>
什么是vue生命周期和生命周期钩子函数?
1、vue生命周期和生命周期钩子函数:
vue的生命周期是
:vue实例从创建到销毁,也就是从开始创建、初始化数据、编译模板、挂载Dom->渲染、更新->渲染,卸载
等一系列程。
在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。
vue生命周期钩子函数有哪些?
beforeCreate
: 在实例初始化之后
,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
created
:在实例创建完成后
被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer), 属性和方法的运算,watch/event 事件回调
。然而,挂载阶段还没开始,$el 属性目前不可见。
beforeMount
:在挂载开始之前
被调用:相关的 render 函数首次被调用。
mounted
:el
被新创建的 vm.$el
替换,并挂载到实例上去之后
调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。
beforeUpdate
:数据更新时调用
,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。该钩子在服务器端渲染期间不被调用,因为只有初次渲染会在服务端进行。
updated
:由于数据更改导致的虚拟 DOM 重新渲染和打补丁
,在这之后
会调用
该钩子。
activated
:keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用
。
deactivated
:keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用。
beforeDestroy
:实例销毁之前调用。在这一步,实例仍然完全可用。该钩子在服务器端渲染期间不被调用。
destroyed
:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
errorCaptured(2.5.0+ 新增)
:当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
注意:
1、mounted、updated
不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以用vm.$nextTick
替换掉mounted、updated
:
updated: function () {this.$nextTick(function () {// Code that will run only after the// entire view has been re-rendered})
}
2、http请求建议在 created 生命周期内发出
vue生命周期图示:
vue如何监听键盘事件中的按键?
按键修饰符:
在监听键盘事件时,我们经常需要检查常见的键值。Vue允许为 v-on在监听键盘事件时添加按键修饰符:
<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
<input v-on:keyup.13="submit">
记住所有的 keyCode 比较困难,所以 Vue 为最常用的按键提供了别名:
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">
全部的按键别名:
- .enter
- .tab
- .delete (捕获“删除”和“退格”键)
- .esc
- .space
- .up
- .down
- .left
- .right
可以通过全局config.keyCodes
对象自定义按键修饰符别名
:
// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112
系统修饰键:
2.1.0 新增
可以用如下修饰符
来实现仅在按下相应按键时才触发鼠标
或键盘事件
的监听器。
- .ctrl
- .alt
- .shift
- .meta
注意:
在 Mac 系统键盘上,meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上,meta 对应实心宝石键 (◆)。在其他特定键盘上,尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品,比如 Knight 键盘、space-cadet 键盘,meta 被标记为“META”。在 Symbolics 键盘上,meta 被标记为“META”或者“Meta”。**
例如
<!-- Alt + C -->
<input @keyup.alt.67="clear"><!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>]
请注意修饰键与常规按键不同,在和 keyup 事件一起用时,事件触发时修饰键必须处于按下状态。换句话说,只有在按住 ctrl 的情况下释放其它按键,才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。如果你想要这样的行为,请为 ctrl 换用 keyCode:keyup.17。
- .exact 修饰符
2.5.0 新增
.exact修饰符允许你控制由精确的系统修饰符组合触发的事件。
<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button><!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button><!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>
鼠标按钮修饰符
2.2.0 新增
- .left
- .right
- .middle
这些修饰符会限制处理函数仅响应特定的鼠标按钮。
vue更新数组时触发视图更新的方法 ’
变异方法:
Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新。这些方法如下:
- push():可向数组的末尾添加一个或多个元素,并返回新的长度。
- pop():用于删除并返回数组的最后一个元素。
- shift():用于把数组的第一个元素从其中删除,并返回第一个元素的值。
- unshift():可向数组的开头添加一个或更多元素,并返回新的长度。
- splice():向/从数组中添加/删除项目,然后返回被删除的项目。
- sort():用于对数组的元素进行排序。
- reverse():用于颠倒数组中元素的顺序。
替换数组:
例如:filter(), concat()和 slice() 。这些不会改变原始数组,但总是返回一个新数组。当使用这些非变异方法时,可以用新数组替换旧数组:
example1.items = example1.items.filter(function (item) {
return item.message.match(/Foo/)
})
你可能认为这将导致 Vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是,事实并非如此。Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的、启发式的方法,所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。
注意事项:
由于 JavaScript 的限制,Vue 不能检测以下变动的数组:
1.当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue
2.当你修改数组的长度时,例如:vm.items.length = newLength
举个例子:
var vm = new Vue({
data: {
items: [‘a’, ‘b’, ‘c’]
}
})
vm.items[1] = ‘x’ // 不是响应性的
vm.items.length = 2 // 不是响应性的
为了解决第一类问题,以下两种方式都可以实现和vm.items[indexOfItem] = newValue 相同的效果,同时也将触发状态更新:
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)
你也可以使用vm.$set实例方法,该方法是全局方法 Vue.set 的一个别名:
vm.$set(vm.items, indexOfItem, newValue)
为了解决第二类问题,你可以使用 splice:
vm.items.splice(newLength)
vue中对象更改检测的注意事项
由于 JavaScript 的限制,Vue 不能检测对象属性的添加或删除:
var vm = new Vue({
data: {
a: 1
}
})
//vm.a
现在是响应式的
vm.b = 2
//vm.b
不是响应式的
对于已经创建的实例,Vue 不能动态添加根级别的响应式属性。但是,可以使用 Vue.set(object, key, value)方法向嵌套对象添加响应式属性。例如,对于:
var vm = new Vue({
data: {
userProfile: {
name: ‘Anika’
}
}
})
你可以添加一个新的 age 属性到嵌套的 userProfile对象:
Vue.set(vm.userProfile, ‘age’, 27)
你还可以使用 vm.$set实例方法,它只是全局Vue.set 的别名:
vm.$set(vm.userProfile, ‘age’, 27)
有时你可能需要为已有对象赋予多个新属性,比如使用 Object.assign()或 _.extend()。在这种情况下,你应该用两个对象的属性创建一个新的对象。所以,如果你想添加新的响应式属性,像这样:
vm.userProfile = Object.assign({}, vm.userProfile, {
age: 27,
favoriteColor: ‘Vue Green’
})
如何解决非工程化项目,网速慢时初始化页面闪动问题?
使用v-cloak
指令,v-cloak
不需要表达式,它会在Vue
实例结束编译时从绑定的HTML元素上移除,经常和CSS的display:none
配合使用。
<div id="app" v-cloak>
{{message}}
</div>
<script>
var app = new Vue({el:"#app",data:{message:"这是一段文本"}
})
</script>
这时虽然已经加了指令v-cloak
,但其实并没有起到任何作用,当网速较慢、Vue.js 文件还没加载完时,在页面上会显示{{message}}
的字样,直到Vue
创建实例、编译模版时,DOM才会被替换,所以这个过程屏幕是有闪动的。只要加一句CSS
就可以解决这个问题了:
[v-cloak]{
display:none;
}
在一般情况下,v-cloak
是一个解决初始化慢导致页面闪动的最佳实践,对于简单的项目很实用
v-for产生的列表,如何实现active样式的切换?
通过设置当前 currentIndex 实现:
<template><div class="toggleClassWrap"><ul><li @click="currentIndex = index" v-bind:class="{clicked: index === currentIndex}" v-for="(item, index) in desc" :key="index"><a href="javascript:;">{{item.ctrlValue}}</a></li></ul></div>
</template>
<script type="text/javascript">export default{data () {return {desc:[{ctrlValue:"test1"},{ctrlValue:"test2"},{ctrlValue:"test3"},{ctrlValue:"test4"}],currentIndex:0}}}
</script>
<style type="text/css" lang="less">
.toggleClassWrap{.clicked{color:red;}
}
</style>
v-model语法糖在组件上的使用
需要实现效果:如果在一个页面中我们需要引入一个弹窗组件,点击按钮 a
显示弹窗,然后点击弹窗的关闭按钮,关闭弹窗,用v-model
实现。
使用v-model
来进行双向数据绑定的时:
<input v-model="something">
仅仅是一个语法糖:
<input v-bind:value="something" v-on:input="something = $event.target.value">
所以在组件中使用的时候,相当于下面的简写:
<custom v-bind:value="something" v-on:input="something = $event.target.value"></custom>
所以要组件的v-model
生效,它必须:
- 接受一个
value
属性 - 在有新的
value
时触发input
事件
使用示例:
<template><div class="toggleClassWrap"><modelVue v-if="ifShow" v-model="ifShow"></modelVue></div>
</template>
<script type="text/javascript">import modelVue from '../../components/model.vue'export default{data () {return {ifShow:true,}},components : {modelVue}}
</script>
model.vue组件
<template><div id="showAlert"><div>showAlert 内容</div><button class="close" @click="close">关闭</button></div>
</template><script>export default{props:{value:{type:Boolean,default:false,}},data(){return{}},mounted(){},methods:{close(){this.$emit('input',false);//传值给父组件, 让父组件监听到这个变化}},}
</script><style scoped>.close{background:red;color:white;}
</style>
vue-cli工作中如何自定义一个过滤器?
文件结构
.
├── src
│ ├── filter
│ │ ├── filter.js
│ │
│ └── main.js
└── …
过滤器们放在filter文件夹下
filter/filter.js:
这个文件主要是写了过滤器实现的方法,然后export进行导出。
function filterOne(n){
return n + 10;
}
function filterTwo(n){
return n + 5;
}
export{
filterOne,
filterTwo
}
main.js:
// 找 filter/filter.js
import * as filters from ‘./filter/filter.js’
//遍历所有导出的过滤器并添加到全局过滤器
Object.keys(filters).forEach((key) => {
Vue.filter(key, filters[key]);
})
在 .vue 组件下使用
{{test | filterOne}}
vue-cli工作中常用的过滤器
在 .vue 组件中的使用示例:
{{ string | trim(1) }} //去除所有空格,过滤器第一个参数为value
常用的过滤器,filter/filter.js
//去除空格 type 1-所有空格 2-前后空格 3-前空格 4-后空格
function trim(value, trim) {switch (trim) {case 1:return value.replace(/\s+/g, "");case 2:return value.replace(/(^\s*)|(\s*$)/g, "");case 3:return value.replace(/(^\s*)/g, "");case 4:return value.replace(/(\s*$)/g, "");default:return value;}
}
//任意格式日期处理
//使用格式:
// {{ '2018-09-14 01:05' | formaDate(yyyy-MM-dd hh:mm:ss) }}
// {{ '2018-09-14 01:05' | formaDate(yyyy-MM-dd) }}
// {{ '2018-09-14 01:05' | formaDate(MM/dd) }} 等
function formaDate(value, fmt) {var date = new Date(value);var o = {"M+": date.getMonth() + 1, //月份"d+": date.getDate(), //日"h+": date.getHours(), //小时"m+": date.getMinutes(), //分"s+": date.getSeconds(), //秒"w+": date.getDay(), //星期"q+": Math.floor((date.getMonth() + 3) / 3), //季度"S": date.getMilliseconds() //毫秒};if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));for (var k in o) {if(k === 'w+') {if(o[k] === 0) {fmt = fmt.replace('w', '周日');}else if(o[k] === 1) {fmt = fmt.replace('w', '周一');}else if(o[k] === 2) {fmt = fmt.replace('w', '周二');}else if(o[k] === 3) {fmt = fmt.replace('w', '周三');}else if(o[k] === 4) {fmt = fmt.replace('w', '周四');}else if(o[k] === 5) {fmt = fmt.replace('w', '周五');}else if(o[k] === 6) {fmt = fmt.replace('w', '周六');}}else if (new RegExp("(" + k + ")").test(fmt)) {fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));}}return fmt;}
//字母大小写切换
/*type1:首字母大写2:首页母小写3:大小写转换4:全部大写5:全部小写* */
function changeCase(str, type) {function ToggleCase(str) {var itemText = ""str.split("").forEach(function (item) {if (/^([a-z]+)/.test(item)) {itemText += item.toUpperCase();} else if (/^([A-Z]+)/.test(item)) {itemText += item.toLowerCase();} else {itemText += item;}});return itemText;}switch (type) {case 1:return str.replace(/\b\w+\b/g, function (word) {return word.substring(0, 1).toUpperCase() + word.substring(1).toLowerCase();});case 2:return str.replace(/\b\w+\b/g, function (word) {return word.substring(0, 1).toLowerCase() + word.substring(1).toUpperCase();});case 3:return ToggleCase(str);case 4:return str.toUpperCase();case 5:return str.toLowerCase();default:return str;}
}//字符串循环复制,count->次数
function repeatStr(str, count) {var text = '';for (var i = 0; i < count; i++) {text += str;}return text;
}//字符串替换
function replaceAll(str, AFindText, ARepText) {raRegExp = new RegExp(AFindText, "g");return str.replace(raRegExp, ARepText);
}//字符替换*,隐藏手机号或者身份证号等
//replaceStr(字符串,字符格式, 替换方式,替换的字符(默认*))
//ecDo.replaceStr('18819322663',[3,5,3],0)
//result:188*****663
//ecDo.replaceStr('asdasdasdaa',[3,5,3],1)
//result:***asdas***
//ecDo.replaceStr('1asd88465asdwqe3',[5],0)
//result:*****8465asdwqe3
//ecDo.replaceStr('1asd88465asdwqe3',[5],1,'+')
//result:"1asd88465as+++++"function replaceStr(str, regArr, type, ARepText) {var regtext = '',Reg = null,replaceText = ARepText || '*';//repeatStr是在上面定义过的(字符串循环复制),大家注意哦if (regArr.length === 3 && type === 0) {regtext = '(\\w{' + regArr[0] + '})\\w{' + regArr[1] + '}(\\w{' + regArr[2] + '})'Reg = new RegExp(regtext);var replaceCount = this.repeatStr(replaceText, regArr[1]);return str.replace(Reg, '$1' + replaceCount + '$2')}else if (regArr.length === 3 && type === 1) {regtext = '\\w{' + regArr[0] + '}(\\w{' + regArr[1] + '})\\w{' + regArr[2] + '}'Reg = new RegExp(regtext);var replaceCount1 = this.repeatStr(replaceText, regArr[0]);var replaceCount2 = this.repeatStr(replaceText, regArr[2]);return str.replace(Reg, replaceCount1 + '$1' + replaceCount2)}else if (regArr.length === 1 && type === 0) {regtext = '(^\\w{' + regArr[0] + '})'Reg = new RegExp(regtext);var replaceCount = this.repeatStr(replaceText, regArr[0]);return str.replace(Reg, replaceCount)}else if (regArr.length === 1 && type === 1) {regtext = '(\\w{' + regArr[0] + '}$)'Reg = new RegExp(regtext);var replaceCount = this.repeatStr(replaceText, regArr[0]);return str.replace(Reg, replaceCount)}
}//格式化处理字符串
//ecDo.formatText('1234asda567asd890')
//result:"12,34a,sda,567,asd,890"
//ecDo.formatText('1234asda567asd890',4,' ')
//result:"1 234a sda5 67as d890"
//ecDo.formatText('1234asda567asd890',4,'-')
//result:"1-234a-sda5-67as-d890"
function formatText(str, size, delimiter) {var _size = size || 3, _delimiter = delimiter || ',';var regText = '\\B(?=(\\w{' + _size + '})+(?!\\w))';var reg = new RegExp(regText, 'g');return str.replace(reg, _delimiter);
}//现金额大写转换函数
//ecDo.upDigit(168752632)
//result:"人民币壹亿陆仟捌佰柒拾伍万贰仟陆佰叁拾贰元整"
//ecDo.upDigit(1682)
//result:"人民币壹仟陆佰捌拾贰元整"
//ecDo.upDigit(-1693)
//result:"欠人民币壹仟陆佰玖拾叁元整"
function upDigit(n) {var fraction = ['角', '分', '厘'];var digit = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];var unit = [['元', '万', '亿'],['', '拾', '佰', '仟']];var head = n < 0 ? '欠人民币' : '人民币';n = Math.abs(n);var s = '';for (var i = 0; i < fraction.length; i++) {s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, '');}s = s || '整';n = Math.floor(n);for (var i = 0; i < unit[0].length && n > 0; i++) {var p = '';for (var j = 0; j < unit[1].length && n > 0; j++) {p = digit[n % 10] + unit[1][j] + p;n = Math.floor(n / 10);}s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s;//s = p + unit[0][i] + s;}return head + s.replace(/(零.)*零元/, '元').replace(/(零.)+/g, '零').replace(/^整$/, '零元整');
} //保留2位小数
function toDecimal2(x){var f = parseFloat(x);if (isNaN(f)) {return false;}var f = Math.round(x * 100) / 100;var s = f.toString();var rs = s.indexOf('.');if (rs < 0) {rs = s.length;s += '.';}while (s.length <= rs + 2) {s += '0';}return s;
}export{trim,changeCase,repeatStr,replaceAll,replaceStr,checkPwd,formatText,upDigit,toDecimal2,formaDate
}
vue等单页面应用及其优缺点
单页Web应用(single page web application,SPA):
就是只有一张Web页面的应用。单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。浏览器一开始会加载必需的HTML、CSS和JavaScript,所有的操作都在这张页面上完成,都由JavaScript来控制。因此,对单页应用来说模块化的开发和设计显得相当重要。
单页Web应用的优点:
1、提供了更加吸引人的用户体验:具有桌面应用的即时性、网站的可移植性和可访问性。
2、单页应用的内容的改变不需要重新加载整个页面,web应用更具响应性和更令人着迷。
3、单页应用没有页面之间的切换,就不会出现“白屏现象”,也不会出现假死并有“闪烁”现象
4、单页应用相对服务器压力小,服务器只用出数据就可以,不用管展示逻辑和页面合成,吞吐能力会提高几倍。
5、良好的前后端分离。后端不再负责模板渲染、输出页面工作,后端API通用化,即同一套后端程序代码,不用修改就可以用于Web界面、手机、平板等多种客户端。
单页Web应用的缺点:
1、首次加载耗时比较多。
2、SEO问题,不利于百度,360等搜索引擎收录。
3、容易造成Css命名冲突。
4、前进、后退、地址栏、书签等,都需要程序进行管理,页面的复杂度很高,需要一定的技能水平和开发成本高。
什么是vue的计算属性?
计算属性:
模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:
<div id="example">{{ message.split('').reverse().join('') }}
</div>
在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时,就会更加难以处理。
所以,对于任何复杂逻辑,都应当使用计算属性。
例子:
<div id="example"><p>Original message: "{{ message }}"</p><p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
<script>
var vm = new Vue({el: '#example',data: {message: 'Hello'},computed: {// 计算属性的 getterreversedMessage: function () {// `this` 指向 vm 实例return this.message.split('').reverse().join('')}}
})</script>
结果:
Original message: "Hello"
Computed reversed message: "olleH"
vue-cli提供的几种脚手架模板
在使用之前,可以先用 vue-list命令查询可用的模板。
详解:
vue-cli提供了的常用的脚手架模板:
webpack
:基于 webpack 和 vue-loader 的目录结构,而且支持热部署、代码检查、测试及 css 抽取。
webpack-simple
:基于 webpack 和 vue-loader 的目录结构。
browerify
:基于 Browerfiy 和 vueify(作用于 vue-loader 类似)的结构,支持热部署、代码检查及单元测试。
browerify-simple
:基于 Browerfiy 和 vueify 的结构。
simple
:单个引入 Vue.js 的 index.html 页面。
这里我们主要会使用 webpack 作为常用脚手架,可以运行vue init webpack my-project
来生成项目。
vue父组件如何向子组件中传递数据?
可以分为 静态传递 或者 使用 v-bind动态传递:
例如:
给 prop 传入一个静态的值:
<blog-post title="My journey with Vue"></blog-post>
也知道 prop 可以通过 v-bind 动态赋值,例如:
<!-- 动态赋予一个变量的值 -->
<blog-post v-bind:title="post.title"></blog-post><!-- 动态赋予一个复杂表达式的值 -->
<blog-post v-bind:title="post.title + ' by ' + post.author.name"></blog-post>
也知道 prop 可以通过 v-bind 动态赋值,例如
<!-- 动态赋予一个变量的值 -->
<blog-post v-bind:title="post.title"></blog-post><!-- 动态赋予一个复杂表达式的值 -->
<blog-post v-bind:title="post.title + ' by ' + post.author.name"></blog-post>
在上述两个示例中,我们传入的值都是字符串类型的,但实际上任何类型的值都可以传给一个 prop。子组件接受:
export default {props : ["title"]}//或者export default {props : {title:{type:string,default:""}}}
详解:
传入一个数字:
<!-- 即便 `42` 是静态的,我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:likes="42"></blog-post><!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:likes="post.likes"></blog-post>
传入一个布尔值:
<!-- 包含该 prop 没有值的情况在内,都意味着 `true`。-->
<blog-post is-published></blog-post><!-- 即便 `false` 是静态的,我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:is-published="false"></blog-post><!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:is-published="post.isPublished"></blog-post>
传入一个数组:
<!-- 即便数组是静态的,我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post><!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:comment-ids="post.commentIds"></blog-post>
传入一个对象:
<!-- 即便对象是静态的,我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:author="{ name: 'Veronica', company: 'Veridian Dynamics' }"></blog-post><!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:author="post.author"></blog-post>
传入一个对象的所有属性:
如果你想要将一个对象的所有属性都作为 prop 传入,你可以使用不带参数的 v-bind (取代 v-bind:prop-name)。
例如,对于一个给定的对象 post:
post: {id: 1,title: 'My Journey with Vue'
}
下面的模板:
<blog-post v-bind="post"></blog-post>
等价于:
<blog-postv-bind:id="post.id"v-bind:title="post.title"
></blog-post>
如何在组件中使用全局常量
第一步,在 src 下新建 const 文件夹下 新建 const.js
.
├── src
│ ├── const
│ │ ├── const.js
│ │
│ └── main.js
└── …
第二步,如何在 const.js 文件下,设置常量
export default {install(Vue,options){Vue.prototype.global = {title:'全局',isBack: true,isAdd: false,};}}
第三步,在 main.js 下全局引入:
//引入全局常量
import constant from './const/const.js'
Vue.use(constant);
第四步,即可在 .vue 组件中使用:
//通过js方式使用:
this.global.title
//或在 html 结构中使用
{{global.title}}
在 JS 中使用全局常量
第一步,在 src 下新建 const 文件夹下 新建 type.js
.
├── src
│ ├── const
│ │ ├── type.js
│ │
│ └── main.js
└── …
第二步,在 type.js 文件下,设置常量
export const TEST_INCREMENT=‘TEST_INCREMENT’
export const TEST_DEREMENT=‘TEST_DEREMENT’
第三步,在其他 .js 文件下引入并使用:
//以对象的形式引入:
import * as types from '../types'
//使用:
types.TEST_INCREMENT
如何定义一个常量,允许项目打包后,修改 [hash].js 里面的值?
第一步,在 static 下新建 config.js:
.
├── 项目路径
│ ├── static
│ │___├── config.js
第二步,在 config.js 里面设置全局变量:
window.g = {PUBLIC_IP : "http://10.10.10.10:8080"
}
第三步,在 index.html 里面引入:
<script type="text/javascript" src="./static/config.js"></script>
第四步,在其他 .js 文件中即可使用
window.g.PUBLIC_IP
第五步,打包后修改:
通过 npm run build
命令打包后,此 config.js 文件会被打包到 dist/static文件夹下,
此时如果需要修改 PUBLIC_IP,打开config.js即可修改,无需重新打包!
vue如何禁止弹窗后面的滚动条滚动?
methods : {//禁止滚动stop(){var mo=function(e){e.preventDefault();};document.body.style.overflow='hidden';document.addEventListener("touchmove",mo,false);//禁止页面滑动},/***取消滑动限制***/move(){var mo=function(e){e.preventDefault();};document.body.style.overflow='';//出现滚动条document.removeEventListener("touchmove",mo,false);}
}
请说出计算属性的缓存和方法调用的有什么区别?
- 计算属性必须返回结果
- 计算属性是基于它的依赖缓存的。一个计算属性所依赖的数据发生变化时,它才会重新取值。
- 使用计算属性还是
methods
取决于是否需要缓存,当遍历大数组和做大量计算时,应当使用计算属性,除非你不希望得到缓存。 - 计算属性是根据依赖自动执行的,methods需要事件调用。
什么是vue.js中的自定义指令?
自定义一些指令对底层DOM进行操作
Vue里面有许多内置的指令,比如v-if和v-show,这些丰富的指令能满足我们的绝大部分业务需求,不过在需要一些特殊功能时,我们仍然希望对DOM进行底层的操作,这时就要用到自定义指令。
自定义指令的几个钩子函数
- bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
- inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
- update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 。
- componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
- unbind:只调用一次,指令与元素解绑时调用。
钩子函数参数
除了 el 之外,其它参数都应该是只读的,切勿进行修改。如果需要在钩子之间共享数据,建议通过元素的 dataset 来进行
指令钩子函数会被传入以下参数:
el:指令所绑定的元素,可以用来直接操作 DOM 。
-
binding:一个对象,包含以下属性:
name:指令名,不包括 v- 前缀。value:指令的绑定值,例如:v-my-directive="1 + 1" 中,绑定值为2。oldValue:指令绑定的前一个值,仅在update和 componentUpdated钩子中可用。无论值是否改变都可用。expression:字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中,表达式为 "1 + 1"。arg:传给指令的参数,可选。例如 v-my-directive:foo中,参数为 "foo"。modifiers:一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为{ foo: true, bar: true }。
-
vnode:Vue 编译生成的虚拟节点。
-
oldVnode:上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。
如何在vue-cli中使用自定义指令?
文件结构:
.
├── src
│ ├── directives
│ │ ├── index.js
│ │ ├── modules
│ └── main.js
└── …
在modules下新建foucs.js下
// 聚焦指令
export default {bind (el, binding, vnode) {},inserted (el, binding, vnode) {el.focus()},update (el, binding, vnode) {},componentUpdated (el, binding, vnode) {},unbind (el, binding, vnode) {}
}
在src/directives/index.js
下
import focus from './modules/focus'
export {focus}
在src/main.js下,使用directives自定义指令
//引入自定义指令
import * as directives from './directives'
//注册指令
Object.keys(directives).forEach(k => Vue.directive(k, directives[k]));
在.vue组件中使用
<input v-focus type="text" />
父组件异步获取动态数据传递给子组件
例如,在一个index.vue
组件里面有一个content.vue
子组件,需要在http
请求数据返回后,将list
数据传递给content.vue
子组件。
利用v-if
可在http请求返回后
再显示。这样子组件可以返回的http
请求数据。
<template><div class="indexWrap"><content :list="list" v-if="isBack"></content></div>
</template>
<script type="text/javascript">import content from '../components/content.vue'export default{data () {return {index:0,list:"",isBack:false}},components : {content},}
</script>
如若内容造成侵权/违法违规/事实不符,请联系编程学习网邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
相关文章
- vue经典面试题
Vue面试中,经常会被问到的面试题/Vue知识点整理 726 看看面试题,只是为了查漏补缺,看看自己那些方面还不懂。切记不要以为背了面试题,就万事大吉了,最好是理解背后的原理,这样面试的时候才能侃侃而谈。不…...
2024/4/28 21:06:52 - angular框架的面试题集锦
1、angular内置过滤器一共有几种,分别是那些? date:日期格式化 currency:货币 uppercase:大写 lowercase:小写 limitTo(限制数组或字符串长度) orderBy(排序࿰…...
2024/4/28 6:31:49 - 【17】进大厂必须掌握的面试题-50个Angular面试
我们整理了一份主要的Angular面试问题清单,分为三部分: 角度面试问题–初学者水平角度面试问题–中级角度面试问题–高级 初学者水平–面试问题 1.区分Angular和AngularJS。 特征AngularJSAngular建筑支持MVC设计模型使用组件和指令语言推荐语言&…...
2024/4/28 20:29:57 - vue常见面试题
1.vue优点? 答:轻量级框架:只关注视图层,是一个构建数据的视图集合,大小只有几十kb; 简单易学:国人开发,中文文档,不存在语言障碍 ,易于理解和学习࿱…...
2024/4/28 12:55:41 - 2018面试
angularjs面试问题 factory、service、provide之间工作原理数据双向绑定的原理 vue面试题 数据双向绑定的原理vuex设计的初衷。解决的什么问题 就算是算法题 判断是否是回文字符串get_elment_english > getElmentEnglish数组去重 http和https...
2024/4/28 20:41:53 - AngularJS常见面试题
本文引自:https://segmentfault.com/a/1190000005836443 问题来源:如何衡量一个人的 AngularJS 水平? ng-if 跟 ng-show/hide 的区别有哪些? 第一点区别是,ng-if 在后面表达式为 true 的时候才创建这个 dom 节点&#…...
2024/4/28 4:57:29 - 2021前端面试题
HTML 浏览器页面有哪三层构成,分别是什么,作用是什么? 参考文档:https://blog.csdn.net/weixin_41950078/article/details/84276664 HTML5的优点与缺点?Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?HTM…...
2024/4/28 14:27:08 - vue面试题总汇
vue面试题总汇 vue的底层原理? vue组件之间的通信? JS中判断数据类型的方法有几种? 最常见的判断方法:typeof 判断已知对象类型的方法: instanceof 根据对象的constructor判断: constructor 无敌万能的方法:j…...
2024/4/28 12:24:28 - angular.js指令集实现模态框拖动效果
define([application-configuration], function (app) { "use strict"; app.directive(draggable, [$document, function($document) {//模态框拖动指令 return function(scope, element, attr) {var startX 0, startY 0, x 0, y 0;element…...
2024/4/28 21:52:49 - angular封装slider滑动条组件(支持小数)
文章目录1.先展示滑动条效果2.使用angular命令快速创建组件3.代码4.在项目中引用创建的组件1.先展示滑动条效果 2.使用angular命令快速创建组件 ng g c component/slider打开slider.component.ts文件,可以看到selector的值是app-steps import { Component, OnInit…...
2024/4/28 16:17:19 - angular 精通
笔记来源于慕课网 https://coding.imooc.com/class/evaluation/123.html#Anchor Angular 打造企业级协作平台 讲师:接灰的电子产品 ,负责前端技术,是个十足的技术咖,还出过《Angular从零到一》一书,是个博学多…...
2024/4/28 15:24:33 - angular.js模态框拖动(2)
//修改了一下,解决了之前的一些bug,还有一个最为重要的bug有待解决,先记录下来,后期再完善,仅供参考。 .directive(draggable, [$document, function($document) { //模态框拖动指令 return function…...
2024/4/27 22:29:44 - Angular属性型指令
注:代码已上传到github,仅作为demo进行演示并学习,没有进行进一步开发,如有问题请随时联系我 github demo地址:https://github.com/Mr-WangZhe/DirectiveDemo 一.指令 1.什么是指令 组件是一种自带模板的指令结构型(Structural)指令和属性型…...
2024/4/28 4:05:09 - Angular 学习笔记——拖拽
<!DOCTYPE HTML> <html ng-app"myApp"> <head> <meta http-equiv"Content-Type" content"text/html; charsetutf-8"> <title>无标题文档</title> <style> #div1{width: 100px;height: 100px;backgrou…...
2024/4/28 8:15:26 - Angular 4 : 封装拖动指令(模态框拖动)
一. HTML和 CSS html结构大概如下: <div class"background"><div appDrag class"modal"> // 在模态框所在的 div 添加属性 [appDrag]<div class"header drag-title"><div class"icon-close"…...
2024/4/28 14:13:22 - angular-drag - 基于Angularjs的拖拽指令
原文地址:http://www.open-open.com/lib/view/open1452255462401.html angular-drag 基于 AngularJS 的拖拽指令 支持 GPU 加速支持边界限制支持设置拖拽把柄移动端与 PC 端通用 使用 支持使用 script 标签或者 webpack、requirejs、seajs 调用: script…...
2024/4/22 3:48:33 - Angular基础学习笔记
Angular基础学习笔记 一、Angular介绍 https://angular.cn/docs Angular是谷歌开发的一款开源的 web 前端框架,诞生于2009年,由 Misko Hevery等 人创建,后为 Google 所收购。是一款优秀的前端JS框架。 Angular 基于 TypeScript 和 react、vue相比,Angular 更适合中大型企业级项…...
2024/4/28 2:34:05 - angular2,4拖拽排序插件ng2-dragula
1、安装 npm install ng2-dragula --save 2、配置 // 拖拽 import {DragulaModule} from "ng2-dragula";NgModule({declarations: [AppComponent],imports: [DragulaModule,...],providers: [],bootstrap: [AppComponent] })export class AppModule { }angular-cli.j…...
2024/4/21 2:20:29 - Angular4_点击tr选中行
Angular4_点击tr选中行,并得到点击行的数量 <tr (click)"onselectedRows(hu,od)"><td style"background-color: white" (click)"expandOrder($event,od,hu.palletId)"><i [ngClass]"{fa: true, fa-caret-right: …...
2024/4/21 2:20:28 - angular-ui-tree中禁止拖拽和下拉按钮浮动的问题
在网上找了各种博客地址,怎么使用angular-ui-tree构建一颗树,网上关于这个博客很多,基本上可以满足要求,但是在使用的过程中,还是遇到了一些问题,参考了其他博客的内容之后,完美解决,…...
2024/4/21 2:20:29
最新文章
- Linux——(关于权限常见的3个问题)
文章目录 1.修改文件或者目录的拥有者和所属组1.1chown指令1.2chgrp指令 2.常见的权限三个问题2.1对应一个目录,如果要进入,需要什么权限?2.2为什么我们创建的文件默认权限不是7772.2.1关于Linux下的权限掩码 2.3文件能否被删除取决于什么2.3…...
2024/4/29 2:45:39 - 梯度消失和梯度爆炸的一些处理方法
在这里是记录一下梯度消失或梯度爆炸的一些处理技巧。全当学习总结了如有错误还请留言,在此感激不尽。 权重和梯度的更新公式如下: w w − η ⋅ ∇ w w w - \eta \cdot \nabla w ww−η⋅∇w 个人通俗的理解梯度消失就是网络模型在反向求导的时候出…...
2024/3/20 10:50:27 - 蓝桥杯第十五届抱佛脚(十)贪心算法
蓝桥杯第十五届抱佛脚(十)贪心算法 贪心算法基本概念 贪心算法是一种在算法设计中常用的方法,它在每一步选择中都采取在当前状态下最好或最优(即最有利)的选择,从而希望导致结果是最好或最优的算法。 贪…...
2024/4/19 0:49:59 - FreeRTOS学习 -- 再识
工作中一直使用FreeRTOS进行着开发,但是没有进行过系统的总结过。现在将快速使用几天时间将FreeRTOS相关知识点加以总结。 官网: https://www.freertos.org/zh-cn-cmn-s/ 参看资料: 正点原子 STM32F1 FreeRTOS开发手册_V1.2.pdf The FreeRTOS…...
2024/4/23 6:24:52 - 【外汇早评】美通胀数据走低,美元调整
原标题:【外汇早评】美通胀数据走低,美元调整昨日美国方面公布了新一期的核心PCE物价指数数据,同比增长1.6%,低于前值和预期值的1.7%,距离美联储的通胀目标2%继续走低,通胀压力较低,且此前美国一季度GDP初值中的消费部分下滑明显,因此市场对美联储后续更可能降息的政策…...
2024/4/28 13:52:11 - 【原油贵金属周评】原油多头拥挤,价格调整
原标题:【原油贵金属周评】原油多头拥挤,价格调整本周国际劳动节,我们喜迎四天假期,但是整个金融市场确实流动性充沛,大事频发,各个商品波动剧烈。美国方面,在本周四凌晨公布5月份的利率决议和新闻发布会,维持联邦基金利率在2.25%-2.50%不变,符合市场预期。同时美联储…...
2024/4/28 3:28:32 - 【外汇周评】靓丽非农不及疲软通胀影响
原标题:【外汇周评】靓丽非农不及疲软通胀影响在刚结束的周五,美国方面公布了新一期的非农就业数据,大幅好于前值和预期,新增就业重新回到20万以上。具体数据: 美国4月非农就业人口变动 26.3万人,预期 19万人,前值 19.6万人。 美国4月失业率 3.6%,预期 3.8%,前值 3…...
2024/4/29 2:29:43 - 【原油贵金属早评】库存继续增加,油价收跌
原标题:【原油贵金属早评】库存继续增加,油价收跌周三清晨公布美国当周API原油库存数据,上周原油库存增加281万桶至4.692亿桶,增幅超过预期的74.4万桶。且有消息人士称,沙特阿美据悉将于6月向亚洲炼油厂额外出售更多原油,印度炼油商预计将每日获得至多20万桶的额外原油供…...
2024/4/28 13:51:37 - 【外汇早评】日本央行会议纪要不改日元强势
原标题:【外汇早评】日本央行会议纪要不改日元强势近两日日元大幅走强与近期市场风险情绪上升,避险资金回流日元有关,也与前一段时间的美日贸易谈判给日本缓冲期,日本方面对汇率问题也避免继续贬值有关。虽然今日早间日本央行公布的利率会议纪要仍然是支持宽松政策,但这符…...
2024/4/27 17:58:04 - 【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响
原标题:【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响近日伊朗局势升温,导致市场担忧影响原油供给,油价试图反弹。此时OPEC表态稳定市场。据消息人士透露,沙特6月石油出口料将低于700万桶/日,沙特已经收到石油消费国提出的6月份扩大出口的“适度要求”,沙特将满…...
2024/4/27 14:22:49 - 【外汇早评】美欲与伊朗重谈协议
原标题:【外汇早评】美欲与伊朗重谈协议美国对伊朗的制裁遭到伊朗的抗议,昨日伊朗方面提出将部分退出伊核协议。而此行为又遭到欧洲方面对伊朗的谴责和警告,伊朗外长昨日回应称,欧洲国家履行它们的义务,伊核协议就能保证存续。据传闻伊朗的导弹已经对准了以色列和美国的航…...
2024/4/28 1:28:33 - 【原油贵金属早评】波动率飙升,市场情绪动荡
原标题:【原油贵金属早评】波动率飙升,市场情绪动荡因中美贸易谈判不安情绪影响,金融市场各资产品种出现明显的波动。随着美国与中方开启第十一轮谈判之际,美国按照既定计划向中国2000亿商品征收25%的关税,市场情绪有所平复,已经开始接受这一事实。虽然波动率-恐慌指数VI…...
2024/4/28 15:57:13 - 【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试
原标题:【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试美国和伊朗的局势继续升温,市场风险情绪上升,避险黄金有向上突破阻力的迹象。原油方面稍显平稳,近期美国和OPEC加大供给及市场需求回落的影响,伊朗局势并未推升油价走强。近期中美贸易谈判摩擦再度升级,美国对中…...
2024/4/27 17:59:30 - 【原油贵金属早评】市场情绪继续恶化,黄金上破
原标题:【原油贵金属早评】市场情绪继续恶化,黄金上破周初中国针对于美国加征关税的进行的反制措施引发市场情绪的大幅波动,人民币汇率出现大幅的贬值动能,金融市场受到非常明显的冲击。尤其是波动率起来之后,对于股市的表现尤其不安。隔夜美国股市出现明显的下行走势,这…...
2024/4/25 18:39:16 - 【外汇早评】美伊僵持,风险情绪继续升温
原标题:【外汇早评】美伊僵持,风险情绪继续升温昨日沙特两艘油轮再次发生爆炸事件,导致波斯湾局势进一步恶化,市场担忧美伊可能会出现摩擦生火,避险品种获得支撑,黄金和日元大幅走强。美指受中美贸易问题影响而在低位震荡。继5月12日,四艘商船在阿联酋领海附近的阿曼湾、…...
2024/4/28 1:34:08 - 【原油贵金属早评】贸易冲突导致需求低迷,油价弱势
原标题:【原油贵金属早评】贸易冲突导致需求低迷,油价弱势近日虽然伊朗局势升温,中东地区几起油船被袭击事件影响,但油价并未走高,而是出于调整结构中。由于市场预期局势失控的可能性较低,而中美贸易问题导致的全球经济衰退风险更大,需求会持续低迷,因此油价调整压力较…...
2024/4/26 19:03:37 - 氧生福地 玩美北湖(上)——为时光守候两千年
原标题:氧生福地 玩美北湖(上)——为时光守候两千年一次说走就走的旅行,只有一张高铁票的距离~ 所以,湖南郴州,我来了~ 从广州南站出发,一个半小时就到达郴州西站了。在动车上,同时改票的南风兄和我居然被分到了一个车厢,所以一路非常愉快地聊了过来。 挺好,最起…...
2024/4/28 1:22:35 - 氧生福地 玩美北湖(中)——永春梯田里的美与鲜
原标题:氧生福地 玩美北湖(中)——永春梯田里的美与鲜一觉醒来,因为大家太爱“美”照,在柳毅山庄去寻找龙女而错过了早餐时间。近十点,向导坏坏还是带着饥肠辘辘的我们去吃郴州最富有盛名的“鱼头粉”。说这是“十二分推荐”,到郴州必吃的美食之一。 哇塞!那个味美香甜…...
2024/4/25 18:39:14 - 氧生福地 玩美北湖(下)——奔跑吧骚年!
原标题:氧生福地 玩美北湖(下)——奔跑吧骚年!让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 啊……啊……啊 两…...
2024/4/26 23:04:58 - 扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!
原标题:扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!扒开伪装医用面膜,翻六倍价格宰客!当行业里的某一品项火爆了,就会有很多商家蹭热度,装逼忽悠,最近火爆朋友圈的医用面膜,被沾上了污点,到底怎么回事呢? “比普通面膜安全、效果好!痘痘、痘印、敏感肌都能用…...
2024/4/27 23:24:42 - 「发现」铁皮石斛仙草之神奇功效用于医用面膜
原标题:「发现」铁皮石斛仙草之神奇功效用于医用面膜丽彦妆铁皮石斛医用面膜|石斛多糖无菌修护补水贴19大优势: 1、铁皮石斛:自唐宋以来,一直被列为皇室贡品,铁皮石斛生于海拔1600米的悬崖峭壁之上,繁殖力差,产量极低,所以古代仅供皇室、贵族享用 2、铁皮石斛自古民间…...
2024/4/28 5:48:52 - 丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者
原标题:丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者【公司简介】 广州华彬企业隶属香港华彬集团有限公司,专注美业21年,其旗下品牌: 「圣茵美」私密荷尔蒙抗衰,产后修复 「圣仪轩」私密荷尔蒙抗衰,产后修复 「花茵莳」私密荷尔蒙抗衰,产后修复 「丽彦妆」专注医学护…...
2024/4/26 19:46:12 - 广州械字号面膜生产厂家OEM/ODM4项须知!
原标题:广州械字号面膜生产厂家OEM/ODM4项须知!广州械字号面膜生产厂家OEM/ODM流程及注意事项解读: 械字号医用面膜,其实在我国并没有严格的定义,通常我们说的医美面膜指的应该是一种「医用敷料」,也就是说,医用面膜其实算作「医疗器械」的一种,又称「医用冷敷贴」。 …...
2024/4/27 11:43:08 - 械字号医用眼膜缓解用眼过度到底有无作用?
原标题:械字号医用眼膜缓解用眼过度到底有无作用?医用眼膜/械字号眼膜/医用冷敷眼贴 凝胶层为亲水高分子材料,含70%以上的水分。体表皮肤温度传导到本产品的凝胶层,热量被凝胶内水分子吸收,通过水分的蒸发带走大量的热量,可迅速地降低体表皮肤局部温度,减轻局部皮肤的灼…...
2024/4/27 8:32:30 - 配置失败还原请勿关闭计算机,电脑开机屏幕上面显示,配置失败还原更改 请勿关闭计算机 开不了机 这个问题怎么办...
解析如下:1、长按电脑电源键直至关机,然后再按一次电源健重启电脑,按F8健进入安全模式2、安全模式下进入Windows系统桌面后,按住“winR”打开运行窗口,输入“services.msc”打开服务设置3、在服务界面,选中…...
2022/11/19 21:17:18 - 错误使用 reshape要执行 RESHAPE,请勿更改元素数目。
%读入6幅图像(每一幅图像的大小是564*564) 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 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机...
win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”问题的解决方法在win7系统关机时如果有升级系统的或者其他需要会直接进入一个 等待界面,在等待界面中我们需要等待操作结束才能关机,虽然这比较麻烦,但是对系统进行配置和升级…...
2022/11/19 21:17:15 - 台式电脑显示配置100%请勿关闭计算机,“准备配置windows 请勿关闭计算机”的解决方法...
有不少用户在重装Win7系统或更新系统后会遇到“准备配置windows,请勿关闭计算机”的提示,要过很久才能进入系统,有的用户甚至几个小时也无法进入,下面就教大家这个问题的解决方法。第一种方法:我们首先在左下角的“开始…...
2022/11/19 21:17:14 - win7 正在配置 请勿关闭计算机,怎么办Win7开机显示正在配置Windows Update请勿关机...
置信有很多用户都跟小编一样遇到过这样的问题,电脑时发现开机屏幕显现“正在配置Windows Update,请勿关机”(如下图所示),而且还需求等大约5分钟才干进入系统。这是怎样回事呢?一切都是正常操作的,为什么开时机呈现“正…...
2022/11/19 21:17:13 - 准备配置windows 请勿关闭计算机 蓝屏,Win7开机总是出现提示“配置Windows请勿关机”...
Win7系统开机启动时总是出现“配置Windows请勿关机”的提示,没过几秒后电脑自动重启,每次开机都这样无法进入系统,此时碰到这种现象的用户就可以使用以下5种方法解决问题。方法一:开机按下F8,在出现的Windows高级启动选…...
2022/11/19 21:17:12 - 准备windows请勿关闭计算机要多久,windows10系统提示正在准备windows请勿关闭计算机怎么办...
有不少windows10系统用户反映说碰到这样一个情况,就是电脑提示正在准备windows请勿关闭计算机,碰到这样的问题该怎么解决呢,现在小编就给大家分享一下windows10系统提示正在准备windows请勿关闭计算机的具体第一种方法:1、2、依次…...
2022/11/19 21:17:11 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”的解决方法...
今天和大家分享一下win7系统重装了Win7旗舰版系统后,每次关机的时候桌面上都会显示一个“配置Windows Update的界面,提示请勿关闭计算机”,每次停留好几分钟才能正常关机,导致什么情况引起的呢?出现配置Windows Update…...
2022/11/19 21:17:10 - 电脑桌面一直是清理请关闭计算机,windows7一直卡在清理 请勿关闭计算机-win7清理请勿关机,win7配置更新35%不动...
只能是等着,别无他法。说是卡着如果你看硬盘灯应该在读写。如果从 Win 10 无法正常回滚,只能是考虑备份数据后重装系统了。解决来方案一:管理员运行cmd:net stop WuAuServcd %windir%ren SoftwareDistribution SDoldnet start WuA…...
2022/11/19 21:17:09 - 计算机配置更新不起,电脑提示“配置Windows Update请勿关闭计算机”怎么办?
原标题:电脑提示“配置Windows Update请勿关闭计算机”怎么办?win7系统中在开机与关闭的时候总是显示“配置windows update请勿关闭计算机”相信有不少朋友都曾遇到过一次两次还能忍但经常遇到就叫人感到心烦了遇到这种问题怎么办呢?一般的方…...
2022/11/19 21:17:08 - 计算机正在配置无法关机,关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机...
关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!关机提示 windows7 正在配…...
2022/11/19 21:17:05 - 钉钉提示请勿通过开发者调试模式_钉钉请勿通过开发者调试模式是真的吗好不好用...
钉钉请勿通过开发者调试模式是真的吗好不好用 更新时间:2020-04-20 22:24:19 浏览次数:729次 区域: 南阳 > 卧龙 列举网提醒您:为保障您的权益,请不要提前支付任何费用! 虚拟位置外设器!!轨迹模拟&虚拟位置外设神器 专业用于:钉钉,外勤365,红圈通,企业微信和…...
2022/11/19 21:17:05 - 配置失败还原请勿关闭计算机怎么办,win7系统出现“配置windows update失败 还原更改 请勿关闭计算机”,长时间没反应,无法进入系统的解决方案...
前几天班里有位学生电脑(windows 7系统)出问题了,具体表现是开机时一直停留在“配置windows update失败 还原更改 请勿关闭计算机”这个界面,长时间没反应,无法进入系统。这个问题原来帮其他同学也解决过,网上搜了不少资料&#x…...
2022/11/19 21:17:04 - 一个电脑无法关闭计算机你应该怎么办,电脑显示“清理请勿关闭计算机”怎么办?...
本文为你提供了3个有效解决电脑显示“清理请勿关闭计算机”问题的方法,并在最后教给你1种保护系统安全的好方法,一起来看看!电脑出现“清理请勿关闭计算机”在Windows 7(SP1)和Windows Server 2008 R2 SP1中,添加了1个新功能在“磁…...
2022/11/19 21:17:03 - 请勿关闭计算机还原更改要多久,电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机怎么办...
许多用户在长期不使用电脑的时候,开启电脑发现电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机。。.这要怎么办呢?下面小编就带着大家一起看看吧!如果能够正常进入系统,建议您暂时移…...
2022/11/19 21:17:02 - 还原更改请勿关闭计算机 要多久,配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以...
配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!配置windows update失败 还原更改 请勿关闭计算机&#x…...
2022/11/19 21:17:01 - 电脑配置中请勿关闭计算机怎么办,准备配置windows请勿关闭计算机一直显示怎么办【图解】...
不知道大家有没有遇到过这样的一个问题,就是我们的win7系统在关机的时候,总是喜欢显示“准备配置windows,请勿关机”这样的一个页面,没有什么大碍,但是如果一直等着的话就要两个小时甚至更久都关不了机,非常…...
2022/11/19 21:17:00 - 正在准备配置请勿关闭计算机,正在准备配置windows请勿关闭计算机时间长了解决教程...
当电脑出现正在准备配置windows请勿关闭计算机时,一般是您正对windows进行升级,但是这个要是长时间没有反应,我们不能再傻等下去了。可能是电脑出了别的问题了,来看看教程的说法。正在准备配置windows请勿关闭计算机时间长了方法一…...
2022/11/19 21:16:59 - 配置失败还原请勿关闭计算机,配置Windows Update失败,还原更改请勿关闭计算机...
我们使用电脑的过程中有时会遇到这种情况,当我们打开电脑之后,发现一直停留在一个界面:“配置Windows Update失败,还原更改请勿关闭计算机”,等了许久还是无法进入系统。如果我们遇到此类问题应该如何解决呢࿰…...
2022/11/19 21:16:58 - 如何在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