day5_vue.js
乐优商城项目笔记
学习目标
- 会创建Vue实例,知道Vue的常见属性
- 会使用Vue的生命周期的钩子函数
- 会使用vue常见指令
- 会使用vue计算属性和watch监控
- 会编写Vue组件
- 掌握组件间通信
- 了解vue-router使用
- 了解webpack使用
- 会使用vue-cli搭建项目
0.前言
先聊一下前端开发模式的发展。
静态页面
最初的网页以HTML为主,是纯静态的网页。网页是只读的,信息流只能从服务端到客户端单向流通。开发人员也只关心页面的样式和内容即可。
异步刷新,操作DOM
1995年,网景工程师Brendan Eich 花了10天时间设计了JavaScript语言.
随着JavaScript的诞生,我们可以操作页面的DOM元素及样式,页面有了一些动态的效果,但是依然是以静态为主。
ajax盛行:
- 2005年开始,ajax逐渐被前端开发人员所重视,因为不用刷新页面就可以更新页面的数据和渲染效果。
- 此时的开发人员不仅仅要编写HTML样式,还要懂ajax与后端交互,然后通过JS操作Dom元素来实现页面动态效果。比较流行的框架如Jquery就是典型代表。
MVVM,关注模型和视图
2008年,google的Chrome发布,随后就以极快的速度占领市场,超过IE成为浏览器市场的主导者。
2009年,Ryan Dahl在谷歌的Chrome V8引擎基础上,打造了基于事件循环的异步IO框架:Node.js。
- 基于事件循环的异步IO
- 单线程运行,避免多线程的变量同步问题
- JS可以编写后台代码,前后台统一编程语言
node.js的伟大之处不在于让JS迈向了后端开发,而是构建了一个庞大的生态系统。
2010年,NPM作为node.js的包管理系统首次发布,开发人员可以遵循Common.js规范来编写Node.js模块,然后发布到NPM上供其他开发人员使用。目前已经是世界最大的包模块管理系统。
随后,在node的基础上,涌现出了一大批的前端框架:
MVVM模式
- M:即Model,模型,包括数据和一些基本操作
- V:即View,视图,页面渲染结果
- VM:即View-Model,模型与视图间的双向操作(无需开发人员干涉)
在MVVM之前,开发人员从后端获取需要的数据模型,然后要通过DOM操作Model渲染到View中。而后当用户操作视图,我们还需要通过DOM获取View中的数据,然后同步到Model中。
而MVVM中的VM要做的事情就是把DOM操作完全封装起来,开发人员不用再关心Model和View之间是如何互相影响的:
- 只要我们Model发生了改变,View上自然就会表现出来。
- 当用户修改了View,Model中的数据也会跟着改变。
把开发人员从繁琐的DOM操作中解放出来,把关注点放在如何操作Model上。
而我们今天要学习的,就是一款MVVM模式的框架:Vue
1.认识Vue
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
前端框架三巨头:Vue.js、React.js、AngularJS,vue.js以其轻量易用著称,vue.js和React.js发展速度最快,AngularJS还是老大。
官网:https://cn.vuejs.org/
参考:https://cn.vuejs.org/v2/guide/
Git地址:https://github.com/vuejs
2.Node和NPM
前面说过,NPM是Node提供的模块管理工具,可以非常方便的下载安装很多前端框架,包括Jquery、AngularJS、VueJs都有。为了后面学习方便,我们先安装node及NPM工具。
2.1.下载Node.js
下载地址:https://nodejs.org/en/
推荐下载LTS版本。
课程中采用的是8.11.3版本。也是目前最新的。大家自行下载或者使用课前资料中提供的安装包。然后下一步安装即可。
完成以后,在控制台输入:
node -v
看到版本信息:
2.2.NPM
Node自带了NPM了,在控制台输入npm -v
查看:
npm默认的仓库地址是在国外网站,速度较慢,建议大家设置到淘宝镜像。但是切换镜像是比较麻烦的。推荐一款切换镜像的工具:nrm
我们首先安装nrm,这里-g
代表全局安装。可能需要一点儿时间
npm install nrm -g
然后通过nrm ls
命令查看npm的仓库列表,带*的就是当前选中的镜像仓库:
通过nrm use taobao
来指定要使用的镜像源:
然后通过nrm test npm
来测试速度:
注意:
- 有教程推荐大家使用cnpm命令,但是使用发现cnpm有时会有bug,不推荐。
- 安装完成请一定要重启下电脑!!!
- 安装完成请一定要重启下电脑!!!
- 安装完成请一定要重启下电脑!!!
3.快速入门
接下来,我们快速领略下vue的魅力
3.1.创建工程
创建一个新的空工程:
然后新建一个module:
选中static web,静态web项目:
位置信息:
3.2.安装vue
3.2.1.下载安装
下载地址:https://github.com/vuejs/vue
可以下载2.5.16版本https://github.com/vuejs/vue/archive/v2.5.16.zip
下载解压,得到vue.js文件。
3.2.2.使用CDN
或者也可以直接使用公共的CDN服务:
<!-- 开发环境版本,包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者:
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
3.2.3.推荐npm安装
在idea的左下角,有个Terminal按钮,点击打开控制台:
进入hello-vue目录,
先输入:npm init -y
进行初始化
安装Vue,输入命令:npm install vue --save
然后就会在hello-vue目录发现一个node_modules目录,并且在下面有一个vue目录。
node_modules是通过npm安装的所有模块的默认位置。
3.3.vue入门案例
3.3.1.HTML模板
在hello-vue目录新建一个HTML
在hello.html中,我们编写一段简单的代码:
h2中要输出一句话:xx 非常帅。前面的xx是要渲染的数据。
3.3.2.vue声明式渲染
然后我们通过Vue进行渲染:
<body><div id="app"><h2>{{name}},非常帅!!!</h2></div>
</body>
<script src="node_modules/vue/dist/vue.js" ></script>
<script>// 创建vue实例var app = new Vue({el:"#app", // el即element,该vue实例要渲染的页面元素data:{ // 渲染页面需要的数据name: "峰哥"}});</script>
- 首先通过 new Vue()来创建Vue实例
- 然后构造函数接收一个对象,对象中有一些属性:
- el:是element的缩写,通过id选中要渲染的页面元素,本例中是一个div
- data:数据,数据是一个对象,里面有很多属性,都可以渲染到视图中
- name:这里我们指定了一个name属性
- 页面中的
h2
元素中,我们通过{{name}}的方式,来渲染刚刚定义的name属性。
打开页面查看效果:
更神奇的在于,当你修改name属性时,页面会跟着变化:
3.3.3.双向绑定
我们对刚才的案例进行简单修改:
<body><div id="app"><input type="text" v-model="num"><h2>{{name}},非常帅!!!有{{num}}位女神为他着迷。</h2></div>
</body>
<script src="node_modules/vue/dist/vue.js" ></script>
<script>// 创建vue实例var app = new Vue({el: "#app", // el即element,该vue实例要渲染的页面元素data: { // 渲染页面需要的数据name: "峰哥",num: 5}});</script>
- 我们在data添加了新的属性:
num
- 在页面中有一个
input
元素,通过v-model
与num
进行绑定。 - 同时通过
{{num}}
在页面输出
效果:
我们可以观察到,输入框的变化引起了data中的num的变化,同时页面输出也跟着变化。
- input与num绑定,input的value值变化,影响到了data中的num值
- 页面
{{num}}
与数据num绑定,因此num值变化,引起了页面效果变化。
没有任何dom操作,这就是双向绑定的魅力。
3.3.4.事件处理
我们在页面添加一个按钮:
<button v-on:click="num++">点我</button>
- 这里用
v-on
指令绑定点击事件,而不是普通的onclick
,然后直接操作num - 普通click是无法直接操作num的。
效果:
4.Vue实例
4.1.创建Vue实例
每个 Vue 应用都是通过用 Vue
函数创建一个新的 Vue 实例开始的:
var vm = new Vue({// 选项
})
在构造函数中传入一个对象,并且在对象中声明各种Vue需要的数据和方法,包括:
- el
- data
- methods
等等
接下来我们一 一介绍。
4.2.模板或元素
每个Vue实例都需要关联一段Html模板,Vue会基于此模板进行视图渲染。
我们可以通过el属性来指定。
例如一段html模板:
<div id="app"></div>
然后创建Vue实例,关联这个div
var vm = new Vue({el:"#app"
})
这样,Vue就可以基于id为app
的div元素作为模板进行渲染了。在这个div范围以外的部分是无法使用vue特性的。
4.3.数据
当Vue实例被创建时,它会尝试获取在data中定义的所有属性,用于视图的渲染,并且监视data中的属性变化,当data发生改变,所有相关的视图都将重新渲染,这就是“响应式“系统。
html:
<div id="app"><input type="text" v-model="name"/>
</div>
js:
var vm = new Vue({el:"#app",data:{name:"刘德华"}
})
- name的变化会影响到
input
的值 - input中输入的值,也会导致vm中的name发生改变
4.4.方法
Vue实例中除了可以定义data属性,也可以定义方法,并且在Vue实例的作用范围内使用。
html:
<div id="app">{{num}}<button v-on:click="add">加</button>
</div>
js:
var vm = new Vue({el:"#app",data:{num: 0},methods:{add:function(){// this代表的当前vue实例this.num++;}}
})
4.5.生命周期钩子
4.5.1.生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程 :创建实例,装载模板,渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数(监听函数)。每当Vue实例处于不同的生命周期时,对应的函数就会被触发调用。
生命周期:
4.5.2.钩子函数
beforeCreated:我们在用Vue时都要进行实例化,因此,该函数就是在Vue实例化是调用,也可以将他理解为初始化函数比较方便一点,在Vue1.0时,这个函数的名字就是init。
created:在创建实例之后进行调用。
beforeMount:页面加载完成,没有渲染。如:此时页面还是{{name}}
mounted:我们可以将他理解为原生js中的window.οnlοad=function({.,.}),或许大家也在用jquery,所以也可以理解为jquery中的$(document).ready(function(){….}),他的功能就是:在dom文档渲染完毕之后将要执行的函数,该函数在Vue1.0版本中名字为compiled。 此时页面中的{{name}}已被渲染成峰哥
beforeDestroy:该函数将在销毁实例前进行调用 。
destroyed:改函数将在销毁实例时进行调用。
beforeUpdate:组件更新之前。
updated:组件更新之后。
例如:created代表在vue实例创建后;
我们可以在Vue中定义一个created函数,代表这个时期的钩子函数:
// 创建vue实例var app = new Vue({el: "#app", // el即element,该vue实例要渲染的页面元素data: { // 渲染页面需要的数据name: "峰哥",num: 5},methods: {add: function(){this.num--;}},created: function () {this.num = 100;}});
结果:
4.5.3.this
我们可以看下在vue内部的this变量是谁,我们在created的时候,打印this
methods: {add: function(){this.num--;console.log(this);}},
控制台的输出:
5.指令
什么是指令?
指令 (Directives) 是带有 v-
前缀的特殊特性。指令特性的预期值是:单个 JavaScript 表达式。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。
例如我们在入门案例中的v-on,代表绑定事件。
5.1.插值表达式
5.1.1.花括号
格式:
{{表达式}}
说明:
- 该表达式支持JS语法,可以调用js内置函数(必须有返回值)
- 表达式必须有返回结果。例如 1 + 1,没有结果的表达式不允许使用,如:var a = 1 + 1;
- 可以直接获取Vue实例中定义的数据或函数
示例:
HTML:
<div id="app">{{name}}</div>
JS:
var app = new Vue({el:"#app",data:{name:"Jack"}
})
5.1.2.插值闪烁
使用{{}}方式在网速较慢时会出现问题。在数据未加载完成时,页面会显示出原始的{{}}
,加载完毕后才显示正确数据,我们称为插值闪烁。
我们将网速调慢一些,然后试试看刚才的案例:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KCVozBhE-1592814167881)(assets/1529836021593.png)]
刷新页面:
5.1.3.v-text和v-html
使用v-text和v-html指令来替代{{}}
说明:
- v-text:将数据输出到元素内部,如果输出的数据有HTML代码,会作为普通文本输出
- v-html:将数据输出到元素内部,如果输出的数据有HTML代码,会被渲染
示例:
HTML:
<div id="app">v-text:<span v-text="hello"></span> <br/>v-html:<span v-html="hello"></span>
</div>
JS:
var vm = new Vue({el:"#app",data:{hello: "<h1>大家好,我是峰哥</h1>"}
})
效果:
并且不会出现插值闪烁,当没有数据时,会显示空白。
5.2.v-model
刚才的v-text和v-html可以看做是单向绑定,数据影响了视图渲染,但是反过来就不行。接下来学习的v-model是双向绑定,视图(View)和模型(Model)之间会互相影响。
既然是双向绑定,一定是在视图中可以修改数据,这样就限定了视图的元素类型。目前v-model的可使用元素有:
- input
- select
- textarea
- checkbox
- radio
- components(Vue中的自定义组件)
基本上除了最后一项,其它都是表单的输入项。
举例:
html:
<div id="app"><input type="checkbox" v-model="language" value="Java" />Java<br/><input type="checkbox" v-model="language" value="PHP" />PHP<br/><input type="checkbox" v-model="language" value="Swift" />Swift<br/><h1>你选择了:{{language.join(',')}}</h1>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">var vm = new Vue({el:"#app",data:{language: []}})
</script>
- 多个
CheckBox
对应一个model时,model的类型是一个数组,单个checkbox值默认是boolean类型 - radio对应的值是input的value值
input
和textarea
默认对应的model是字符串select
单选对应字符串,多选对应也是数组
效果:
5.3.v-on
5.3.1.基本用法
v-on指令用于给页面元素绑定事件。
语法:
v-on:事件名="js片段或函数名"
示例:
<div id="app"><!--事件中直接写js片段--><button v-on:click="num++">增加一个</button><br/><!--事件指定一个回调函数,必须是Vue实例中定义的函数--><button v-on:click="decrement">减少一个</button><br/><h1>有{{num}}个女神迷恋峰哥</h1>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">var app = new Vue({el:"#app",data:{num:100},methods:{decrement(){this.num--;}}})
</script>
效果:
另外,事件绑定可以简写,例如v-on:click='add'
可以简写为@click='add'
5.3.2.事件修饰符
在事件处理程序中调用 event.preventDefault()
或 event.stopPropagation()
是非常常见的需求。尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。
为了解决这个问题,Vue.js 为 v-on
提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。
.stop
:阻止事件冒泡到父元素.prevent
:阻止默认事件发生.capture
:使用事件捕获模式.self
:只有元素自身触发事件才执行。(冒泡或捕获的都不执行).once
:只执行一次
阻止默认事件
<div id="app"><!--右击事件,并阻止默认事件发生--><button v-on:contextmenu.prevent="num++">增加一个</button><br/><!--右击事件,不阻止默认事件发生--><button v-on:contextmenu="decrement($event)">减少一个</button><br/><h1>有{{num}}个女神迷恋峰哥</h1>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">var app = new Vue({el: "#app",data: {num: 100},methods: {decrement(ev) {// ev.preventDefault();this.num--;}}})
</script>
效果:(右键“增加一个”,不会触发默认的浏览器右击事件;右键“减少一个”,会触发默认的浏览器右击事件)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-emEycPHx-1592814167889)(assets/56.gif)]
5.3.3.按键修饰符
在监听键盘事件时,我们经常需要检查常见的键值。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
5.3.4.组合按钮
可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
.ctrl
.alt
.shift
例如:
<!-- Alt + C -->
<input @keyup.alt.67="clear"><!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
5.4.v-for
遍历数据渲染页面是非常常用的需求,Vue中通过v-for指令来实现。
5.4.1.遍历数组
语法:
v-for="item in items"
- items:要遍历的数组,需要在vue的data中定义好。
- item:迭代得到的数组元素的别名
示例
<div id="app"><ul><li v-for="user in users">{{user.name}} - {{user.gender}} - {{user.age}}</li></ul>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">var app = new Vue({el: "#app",data: {users:[{name:'柳岩', gender:'女', age: 21},{name:'峰哥', gender:'男', age: 18},{name:'范冰冰', gender:'女', age: 24},{name:'刘亦菲', gender:'女', age: 18},{name:'古力娜扎', gender:'女', age: 25}]},})
</script>
效果:
5.4.2.数组角标
在遍历的过程中,如果我们需要知道数组角标,可以指定第二个参数:
语法
v-for="(item,index) in items"
- items:要迭代的数组
- item:迭代得到的数组元素别名
- index:迭代到的当前元素索引,从0开始。
示例
<ul><li v-for="(user, index) in users">{{index + 1}}. {{user.name}} - {{user.gender}} - {{user.age}}</li></ul>
效果:
5.4.3.遍历对象
v-for除了可以迭代数组,也可以迭代对象。语法基本类似
语法:
v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"
- 1个参数时,得到的是对象的属性
- 2个参数时,第一个是属性,第二个是键
- 3个参数时,第三个是索引,从0开始
示例:
<div id="app"><ul><li v-for="(value, key, index) in user">{{index + 1}}. {{key}} - {{value}}</li></ul>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">var vm = new Vue({el:"#app",data:{user:{name:'峰哥', gender:'男', age: 18}}})
</script>
效果:
5.4.4.key
当 Vue.js 用 v-for
正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。
这个功能可以有效的提高渲染的效率。
但是要实现这个功能,你需要给Vue一些提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key
属性。理想的 key
值是每项都有的且唯一的 id。
示例:
<ul><li v-for="(item,index) in items" :key=index></li>
</ul>
- 这里使用了一个特殊语法:
:key=""
我们后面会讲到,它可以让你读取vue中的属性,并赋值给key属性 - 这里我们绑定的key是数组的索引,应该是唯一的
5.5.v-if和v-show
5.5.1.基本使用
v-if,顾名思义,条件判断。当得到结果为true时,所在的元素才会被渲染。
语法:
v-if="布尔表达式"
示例:
<div id="app"><button v-on:click="show = !show">点我呀</button><br><h1 v-if="show">看到我啦?!</h1><h1 v-show="show">看到我啦?!show</h1>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">var app = new Vue({el: "#app",data: {show: true}})
</script>
效果:
5.5.2.与v-for结合
当v-if和v-for出现在一起时,v-for优先级更高。也就是说,会先遍历,再判断条件。
修改v-for中的案例,添加v-if:
<ul><li v-for="(user, index) in users" v-if="user.gender == '女'">{{index + 1}}. {{user.name}} - {{user.gender}} - {{user.age}}</li></ul>
效果:
只显示女性用户信息
5.5.3.v-else
你可以使用 v-else
指令来表示 v-if
的“else 块”:
<div id="app"><h1 v-if="Math.random() > 0.5">看到我啦?!if</h1><h1 v-else>看到我啦?!else</h1>
</div>
v-else
元素必须紧跟在带 v-if
或者 v-else-if
的元素的后面,否则它将不会被识别。
v-else-if
,顾名思义,充当 v-if
的“else-if 块”,可以连续使用:
<div id="app"><button v-on:click="random=Math.random()">点我呀</button><span>{{random}}</span><h1 v-if="random >= 0.75">看到我啦?!if</h1><h1 v-else-if="random > 0.5">看到我啦?!if 0.5</h1><h1 v-else-if="random > 0.25">看到我啦?!if 0.25</h1><h1 v-else>看到我啦?!else</h1>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">var app = new Vue({el: "#app",data: {random: 1}})
</script>
类似于 v-else
,v-else-if
也必须紧跟在带 v-if
或者 v-else-if
的元素之后。
演示:
5.5.4.v-show
另一个用于根据条件展示元素的选项是 v-show
指令。用法大致一样:
<h1 v-show="ok">Hello!</h1>
不同的是带有 v-show
的元素始终会被渲染并保留在 DOM 中。v-show
只是简单地切换元素的 CSS 属性 display
。
示例:
<div id="app"><!--事件中直接写js片段--><button v-on:click="show = !show">点击切换</button><br/><h1 v-if="show">你好</h1></div><script src="./node_modules/vue/dist/vue.js"></script><script type="text/javascript">var app = new Vue({el:"#app",data:{show:true}})</script>
代码:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X89IijDc-1592814167898)(assets/59.gif)]
5.6.v-bind
html属性不能使用双大括号形式绑定,只能使用v-bind指令。
在将 v-bind
用于 class
和 style
时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。
<div id="app"><!--可以是数据模型,可以是具有返回值的js代码块或者函数--><div v-bind:title="title" style="border: 1px solid red; width: 50px; height: 50px;"></div>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">var app = new Vue({el: "#app",data: {title: "title",}})
</script>
效果:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YYK8K8eq-1592814167900)(assets/1530025378843.png)]
在将 v-bind
用于 class
和 style
时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。
5.6.1.绑定class样式
数组语法
我们可以借助于v-bind
指令来实现:
HTML:
<div id="app"><div v-bind:class="activeClass"></div><div v-bind:class="errorClass"></div><div v-bind:class="[activeClass, errorClass]"></div>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">var app = new Vue({el: "#app",data: {activeClass: 'active',errorClass: ['text-danger', 'text-error']}})
</script>
渲染后的效果:(具有active和hasError的样式)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EXLOtmkA-1592814167901)(assets/1530026818515.png)]
对象语法
我们可以传给 v-bind:class
一个对象,以动态地切换 class:
<div v-bind:class="{ active: isActive }"></div>
上面的语法表示 active
这个 class 存在与否将取决于数据属性 isActive
的 truthiness(所有的值都是真实的,除了false,0,“”,null,undefined和NaN)。
你可以在对象中传入更多属性来动态切换多个 class。此外,v-bind:class
指令也可以与普通的 class 属性共存。如下模板:
<div class="static"v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
和如下 data:
data: {isActive: true,hasError: false
}
结果渲染为:
<div class="static active"></div>
active样式和text-danger样式的存在与否,取决于isActive和hasError的值。本例中isActive为true,hasError为false,所以active样式存在,text-danger不存在。
通常情况下,绑定的数据对象不必内联定义在模板里:
<div class="static" v-bind:class="classObject"></div>
数据:
data: {classObject: {active: true,'text-danger': false}
}
效果和之前一样:
<div class="static active"></div>
5.6.2.绑定style样式
数组语法
数组语法可以将多个样式对象应用到同一个元素上:
<div v-bind:style="[baseStyles, overridingStyles]"></div>
数据:
data: {baseStyles: {'background-color': 'red'},overridingStyles: {border: '1px solid black'}
}
渲染后的结果:
<div style="background-color: red; border: 1px solid black;"></div>
对象语法
v-bind:style
的对象语法十分直观——看着非常像 CSS,但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用单引号括起来) 来命名:
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
数据:
data: {activeColor: 'red',fontSize: 30
}
效果:
<div style="color: red; font-size: 30px;"></div>
直接绑定到一个样式对象通常更好,这会让模板更清晰:
<div v-bind:style="styleObject"></div>
data: {styleObject: {color: 'red',fontSize: '13px'}
}
效果同上。
5.6.3.简写
v-bind:class
可以简写为:class
5.7.计算属性
在插值表达式中使用js表达式是非常方便的,而且也经常被用到。
但是如果表达式的内容很长,就会显得不够优雅,而且后期维护起来也不方便,例如下面的场景,我们有一个日期的数据,但是是毫秒值:
data:{birthday:1529032123201 // 毫秒值
}
我们在页面渲染,希望得到yyyy-MM-dd的样式:
<h1>您的生日是:{{new Date(birthday).getFullYear() + '-'+ new Date(birthday).getMonth()+ '-' + new Date(birthday).getDay()}}
</h1>
虽然能得到结果,但是非常麻烦。
Vue中提供了计算属性,来替代复杂的表达式:
var vm = new Vue({el:"#app",data:{birthday:1429032123201 // 毫秒值},computed:{birth(){// 计算属性本质是一个方法,但是必须返回结果const d = new Date(this.birthday);return d.getFullYear() + "-" + d.getMonth() + "-" + d.getDay();}}
})
- 计算属性本质就是方法,但是一定要返回数据。然后页面渲染时,可以把这个方法当成一个变量来使用。
页面使用:
<div id="app"><h1>您的生日是:{{birth}} </h1></div>
效果:
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而,不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要birthday
还没有发生改变,多次访问 birthday
计算属性会立即返回之前的计算结果,而不必再次执行函数。
5.8.watch
watch可以让我们监控一个值的变化。从而做出相应的反应。
示例:
<div id="app"><input type="text" v-model="message">
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">var vm = new Vue({el:"#app",data:{message:""},watch:{message(newVal, oldVal){console.log(newVal, oldVal);}}})
</script>
效果:
6.组件化
在大型应用开发的时候,页面可以划分成很多部分。往往不同的页面,也会有相同的部分。例如可能会有相同的头部导航。
但是如果每个页面都独自开发,这无疑增加了我们开发的成本。所以我们会把页面的不同部分拆分成独立的组件,然后在不同页面就可以共享这些组件,避免重复开发。
6.1.全局组件
我们通过Vue的component方法来定义一个全局组件。
<div id="app"><!--使用定义好的全局组件--><counter></counter>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">// 定义全局组件,两个参数:1,组件名称。2,组件参数Vue.component("counter",{template:'<button v-on:click="count++">你点了我 {{ count }} 次,我记住了.</button>',data(){return {count:0}}})var app = new Vue({el:"#app"})
</script>
- 组件其实也是一个Vue实例,因此它在定义时也会接收:data、methods、生命周期函数等
- 不同的是组件不会与页面的元素绑定,否则就无法复用了,因此没有el属性。
- 但是组件渲染需要html模板,所以增加了template属性,值就是HTML模板
- 全局组件定义完毕,任何vue实例都可以直接在HTML中通过组件名称来使用组件了。
- data必须是一个函数,不再是一个对象。
效果:
6.2.组件的复用
定义好的组件,可以任意复用多次:
<div id="app"><!--使用定义好的全局组件--><counter></counter><counter></counter><counter></counter>
</div>
效果:
你会发现每个组件互不干扰,都有自己的count值。怎么实现的?
组件的data属性必须是函数!
当我们定义这个 <counter>
组件时,它的data 并不是像这样直接提供一个对象:
data: {count: 0
}
取而代之的是,一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝:
data: function () {return {count: 0}
}
如果 Vue 没有这条规则,点击一个按钮就会影响到其它所有实例!
6.3.局部注册
一旦全局注册,就意味着即便以后你不再使用这个组件,它依然会随着Vue的加载而加载。
因此,对于一些并不频繁使用的组件,我们会采用局部注册。
我们先在外部定义一个对象,结构与创建组件时传递的第二个参数一致:
const counter = {template:'<button v-on:click="count++">你点了我 {{ count }} 次,我记住了.</button>',data(){return {count:0}}
};
然后在Vue中使用它:
var app = new Vue({el:"#app",components:{counter:counter // 将定义的对象注册为组件}
})
- components就是当前vue对象子组件集合。
- 其key就是子组件名称
- 其值就是组件对象的属性
- 效果与刚才的全局注册是类似的,不同的是,这个counter组件只能在当前的Vue实例中使用
6.4.组件通信
通常一个单页应用会以一棵嵌套的组件树的形式来组织:
- 页面首先分成了顶部导航、左侧内容区、右侧边栏三部分
- 左侧内容区又分为上下两个组件
- 右侧边栏中又包含了3个子组件
各个组件之间以嵌套的关系组合在一起,那么这个时候不可避免的会有组件间通信的需求。
6.4.1.props(父向子传递)
- 父组件使用子组件时,自定义属性(属性名任意,属性值为要传递的数据)
- 子组件通过props接收父组件属性
父组件使用子组件,并自定义了title属性:
<div id="app"><h1>打个招呼:</h1><!--使用子组件,同时传递title属性--><introduce title="大家好,我是锋哥"/>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">Vue.component("introduce",{// 直接使用props接收到的属性来渲染页面template:'<h1>{{title}}</h1>',props:['title'] // 通过props来接收一个父组件传递的属性})var app = new Vue({el:"#app"})
</script>
效果:
6.4.2.props验证
我们定义一个子组件,并接受复杂数据:
const myList = {template: '\<ul>\<li v-for="item in items" :key="item.id">{{item.id}} : {{item.name}}</li>\</ul>\',props: {items: {type: Array,default: [],required: true}}};
- 这个子组件可以对 items 进行迭代,并输出到页面。
- props:定义需要从父组件中接收的属性
- items:是要接收的属性名称
- type:限定父组件传递来的必须是数组
- default:默认值
- required:是否必须
- items:是要接收的属性名称
当 prop 验证失败的时候,(开发环境构建版本的) Vue 将会产生一个控制台的警告。
我们在父组件中使用它:
<div id="app"><h2>传智播客已开设如下课程:</h2><!-- 使用子组件的同时,传递属性,这里使用了v-bind,指向了父组件自己的属性lessons --><my-list :items="lessons"/>
</div>
var app = new Vue({el:"#app",components:{myList // 当key和value一样时,可以只写一个},data:{lessons:[{id:1, name: 'java'},{id:2, name: 'php'},{id:3, name: 'ios'},]}
})
效果:
type类型,可以有:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oaV3ylmR-1592814167911)(assets/1530108427358.png)]
6.4.3.动态静态传递
给 prop 传入一个静态的值:
<introduce title="大家好,我是锋哥"/>
给 prop 传入一个动态的值: (通过v-bind从数据模型中,获取title的值)
<introduce :title="title"/>
静态传递时,我们传入的值都是字符串类型的,但实际上任何类型的值都可以传给一个 props。
<!-- 即便 `42` 是静态的,我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个JavaScript表达式而不是一个字符串。-->
<blog-post v-bind:likes="42"></blog-post><!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:likes="post.likes"></blog-post>
6.4.4.子向父的通信
来看这样的一个案例:
<div id="app"><h2>num: {{num}}</h2><!--使用子组件的时候,传递num到子组件中--><counter :num="num"></counter>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">Vue.component("counter", {// 子组件,定义了两个按钮,点击数字num会加或减template:'\<div>\<button @click="num++">加</button> \<button @click="num--">减</button> \</div>',props:['num']// count是从父组件获取的。})var app = new Vue({el:"#app",data:{num:0}})
</script>
- 子组件接收父组件的num属性
- 子组件定义点击按钮,点击后对num进行加或减操作
我们尝试运行,好像没问题,点击按钮试试:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l12qgh0N-1592814167912)(assets/1530115066496.png)]
子组件接收到父组件属性后,默认是不允许修改的。怎么办?
既然只有父组件能修改,那么加和减的操作一定是放在父组件:
var app = new Vue({el:"#app",data:{num:0},methods:{ // 父组件中定义操作num的方法increment(){this.num++;},decrement(){this.num--;}}
})
但是,点击按钮是在子组件中,那就是说需要子组件来调用父组件的函数,怎么做?
我们可以通过v-on指令将父组件的函数绑定到子组件上:
<div id="app"><h2>num: {{num}}</h2><counter :count="num" @inc="increment" @dec="decrement"></counter>
</div>
在子组件中定义函数,函数的具体实现调用父组件的实现,并在子组件中调用这些函数。当子组件中按钮被点击时,调用绑定的函数:
Vue.component("counter", {template:'\<div>\<button @click="plus">加</button> \<button @click="reduce">减</button> \</div>',props:['count'],methods:{plus(){this.$emit("inc");},reduce(){this.$emit("dec");}}})
- vue提供了一个内置的this.$emit()函数,用来调用父组件绑定的函数
效果:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Bo4imx7Y-1592814167913)(assets/61.gif)]
7.路由vue-router
7.1.场景模拟
现在我们来实现这样一个功能:
一个页面,包含登录和注册,点击不同按钮,实现登录和注册页切换:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KEPPUsZ5-1592814167916)(H:/%E4%B9%90%E4%BC%98/day05-Vue/assets/8.gif)]
7.1.1.编写父组件
为了让接下来的功能比较清晰,我们先新建一个文件夹:src
然后新建一个HTML文件,作为入口:index.html
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GhByH2rY-1592814167917)(assets/1530148321175.png)]
然后编写页面的基本结构:
<div id="app"><span>登录</span><span>注册</span><hr/><div>登录页/注册页</div>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">var vm = new Vue({el:"#app"})
</script>
样式:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tqiADLwF-1592814167918)(assets/1530149363817.png)]
7.1.2.编写登录及注册组件
接下来我们来实现登录组件,以前我们都是写在一个文件中,但是为了复用性,开发中都会把组件放入独立的JS文件中,我们新建一个user目录以及login.js及register.js:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CaZsLgkm-1592814167919)(assets/1530156389366.png)]
编写组件,这里我们只写模板,不写功能。
login.js内容如下:
const loginForm = {template:'\<div>\<h2>登录页</h2> \用户名:<input type="text"><br/>\密码:<input type="password"><br/>\</div>\'
}
register.js内容:
const registerForm = {template:'\<div>\<h2>注册页</h2> \用 户 名:<input type="text"><br/>\密  码:<input type="password"><br/>\确认密码:<input type="password"><br/>\</div>\'
}
7.1.3.在父组件中引用
<div id="app"><span>登录</span><span>注册</span><hr/><div><!--<loginForm></loginForm>--><!--疑问:为什么不采用上面的写法?由于html是大小写不敏感的,如果采用上面的写法,则被认为是<loginform></loginform>所以,如果是驼峰形式的组件,需要把驼峰转化为“-”的形式--><login-form></login-form><register-form></register-form></div>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="user/login.js"></script>
<script src="user/register.js"></script>
<script type="text/javascript">var vm = new Vue({el: "#app",components: {loginForm,registerForm}})
</script>
效果:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Jucp0j8q-1592814167920)(assets/1530157389501.png)]
7.1.5.问题
我们期待的是,当点击登录或注册按钮,分别显示登录页或注册页,而不是一起显示。
但是,如何才能动态加载组件,实现组件切换呢?
虽然使用原生的Html5和JS也能实现,但是官方推荐我们使用vue-router模块。
7.2.vue-router简介和安装
使用vue-router和vue可以非常方便的实现 复杂单页应用的动态路由功能。
官网:https://router.vuejs.org/zh-cn/
使用npm安装:npm install vue-router --save
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZXMIYYRn-1592814167922)(assets/1530161293338.png)]
在index.html中引入依赖:
<script src="../node_modules/vue-router/dist/vue-router.js"></script>
7.3.快速入门
新建vue-router对象,并且指定路由规则:
// 创建VueRouter对象
const router = new VueRouter({routes:[ // 编写路由规则{path:"/login", // 请求路径component:loginForm // 组件名称},{path:"/register",component:registerForm},]
})
- 创建VueRouter对象,并指定路由参数
- routes:路由规则的数组,可以指定多个对象,每个对象是一条路由规则,包含以下属性:
- path:路由的路径
- component:组件名称
在父组件中引入router对象:
var vm = new Vue({el:"#app",components:{// 引用登录和注册组件loginForm,registerForm},router // 引用上面定义的router对象
})
页面跳转控制:
<div id="app"><!--router-link来指定跳转的路径--><span><router-link to="/login">登录</router-link></span><span><router-link to="/register">注册</router-link></span><hr/><div><!--vue-router的锚点--><router-view></router-view></div>
</div>
- 通过
<router-view>
来指定一个锚点,当路由的路径匹配时,vue-router会自动把对应组件放到锚点位置进行渲染 - 通过
<router-link>
指定一个跳转链接,当点击时,会触发vue-router的路由功能,路径中的hash值会随之改变
效果:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fJp5le4k-1592814167923)(assets/62.gif)]
注意:单页应用中,页面的切换并不是页面的跳转。仅仅是地址最后的hash值变化。
事实上,我们总共就一个HTML:index.html
8.webpack
Webpack 是一个前端资源的打包工具,它可以将js、image、css等资源当成一个模块进行打包。
中文官方网站:https://www.webpackjs.com/
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KgG3iMdc-1592814167924)(assets/1530168661348.png)]
官网给出的解释:
本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。
为什么需要打包?
- 将许多碎小文件打包成一个整体,减少单页面内的衍生请求次数,提高网站效率。
- 将ES6的高级语法进行转换编译,以兼容老版本的浏览器。
- 将代码打包的同时进行混淆,提高代码的安全性。
8.1.安装
webpack支持全局安装和本地安装,官方推荐是本地安装,我们按照官方的来。
安装最新版本webpack,输入命令:npm install --save-dev webpack
webpack 4+ 版本,你还需要安装 CLI ,输入命令:npm install webpack webpack-cli --save-dev
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-94UnvZXJ-1592814167925)(assets/1530187524815.png)]
此时,我们注意下项目中文件夹下,会有一个package.json文件。(其实早就有了)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xKVK8m9t-1592814167926)(assets/1530187744149.png)]
打开文件,可以看到我们之前用npm安装过的文件都会出现在这里:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O1dkbF1X-1592814167927)(assets/1525873343908.png)]
8.2.核心概念
学习Webpack,你需要先理解四个核心概念:
-
入口(entry)
webpack打包的起点,可以有一个或多个,一般是js文件。webpack会从启点文件开始,寻找启点直接或间接依赖的其它所有的依赖,包括JS、CSS、图片资源等,作为将来打包的原始数据
-
输出(output)
出口一般包含两个属性:path和filename。用来告诉webpack打包的目标文件夹,以及文件的名称。目的地也可以有多个。
-
加载器(loader)
webpack本身只识别Js文件,如果要加载非JS文件,必须指定一些额外的加载器(loader),例如css-loader。然后将这些文件转为webpack能处理的有效模块,最后利用webpack的打包能力去处理。
-
插件(plugins)
插件可以扩展webpack的功能,让webpack不仅仅是完成打包,甚至各种更复杂的功能,或者是对打包功能进行优化、压缩,提高效率。
8.3.编写webpack配置
接下来,我们编写一个webpack的配置,来指定一些打包的配置项。配置文件的名称,默认就是webpack.config.js,我们放到hello-vue的根目录:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ql8xNTt5-1592814167928)(assets/1530199761226.png)]
配置文件中就是要指定上面说的四个核心概念,入口、出口、加载器、插件。
不过,加载器和插件是可选的。我们先编写入口和出口
8.3.1.入口entry
webpack打包的启点,可以有一个或多个,一般是js文件。现在思考一下我们有没有一个入口?貌似没有,我们所有的东西都集中在index.html,不是一个js,那怎么办?
我们新建一个js,把index.html中的部分内容进行集中,然后在index.html中引用这个js不就OK了!
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DN67LaCB-1592814167929)(assets/1530200787599.png)]
然后把原来index.html中的js代码全部移动到index.js中
// 使用es6的语法导入js模块
import Vue from '../node_modules/vue/dist/vue';
import VueRouter from '../node_modules/vue-router/dist/vue-router';
import loginForm from './user/login';
import registerForm from './user/register';Vue.use(VueRouter);// 创建vue对象
const router = new VueRouter({routes: [ // 编写路由规则// path: 路由请求路径;component:组件名称{path: "/login", component: loginForm},{path: "/register", component: registerForm}]
});
var vm = new Vue({el: "#app",components: {loginForm,registerForm},router
});
-
原来的index.html中引入了很多其它js,在这里我们使用es6的import语法进行导入。
注意,要使用import,就需要在login.js和register.js中添加export导出语句:
const loginForm={template: '\<div>\<h2>登陆页</h2>\用户名:<input type="text"><br>\密 码:<input type="password">\</div>',
}
export default loginForm;
register.js:
const registerForm = {template:'\<div>\<h2>注册页</h2> \用 户 名:<input type="text"><br/>\密  码:<input type="password"><br/>\确认密码:<input type="password"><br/>\</div>\'
}
export default registerForm;
- vue-router使用模块化加载后,必须增加一句:Vue.use(VueRouter)
这样,index.js就成了我们整个配置的入口了。
我们在webpack.config.js中添加以下内容:
module.exports={entry:'./src/index.js', //指定打包的入口文件
}
8.3.2.出口output
出口,就是输出的目的地。一般我们会用一个dist目录,作为打包输出的文件夹:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P6Ya3gvH-1592814167930)(assets/1530201612391.png)]
然后,编写webpack.config.js,添加出口配置:
module.exports={entry:'./src/main.js', //指定打包的入口文件output:{// path: 输出的目录,__dirname是相对于webpack.config.js配置文件的绝对路径path : __dirname+'/dist', filename:'build.js' //输出的js文件名}
}
8.4.执行打包
在控制台输入以下命令:
npx webpack --config webpack.config.js
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qQ3d65eG-1592814167931)(assets/1530203361613.png)]
随后,查看dist目录:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TE3VVNuk-1592814167932)(assets/1530203406462.png)]
尝试打开build.js,你根本看不懂:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-a9aPpjBE-1592814167933)(assets/1530203465737.png)]
所有的js合并为1个,并且对变量名进行了随机打乱,这样就起到了 压缩、混淆的作用。
8.5.测试运行
在index.html中引入刚刚生成的build.js文件,
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="app"><!--router-link来指定跳转的路径--><span><router-link to="/login">登录</router-link></span><span><router-link to="/register">注册</router-link></span><hr/><div><!--vue-router的锚点--><router-view></router-view></div></div><script src="../dist/build.js"></script>
</body>
</html>
然后运行:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Jdfn0MH4-1592814167934)(assets/1530203553915.png)]
8.6.打包CSS
我们来编写一段CSS代码,对index的样式做一些美化:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3QjLWxfz-1592814167935)(assets/1530203880056.png)]
内容:
#app a{display: inline-block;width: 150px;line-height: 30px;background-color: dodgerblue;color: white;font-size: 16px;text-decoration: none;
}
#app a:hover{background-color: whitesmoke;color: dodgerblue;
}
#app div{width: 300px;height: 150px;
}
#app{width: 305px;border: 1px solid dodgerblue;
}
8.6.1.安装加载器
前面说过,webpack默认只支持js加载。要加载CSS文件,必须安装加载器:
命令:npm install style-loader css-loader --save-dev
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H59IcuvU-1592814167936)(assets/1530204068192.png)]
此时,在package.json中能看到新安装的:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rTzx4bG1-1592814167937)(assets/1530204160848.png)]
8.6.3.index.js引入css文件
因为入口在index.js,因此css文件也要在这里引入。依然使用ES6 的模块语法:
import './css/main.css'
8.6.4.配置加载器
在webpack.config.js配置文件中配置css的加载器
module.exports = {entry: './src/main.js', //指定打包的入口文件output: {path: __dirname + '/dist', // 注意:__dirname表示webpack.config.js所在目录的绝对路径filename: 'build.js' //输出文件},module: {rules: [{test: /\.css$/, // 通过正则表达式匹配所有以.css后缀的文件use: [ // 要使用的加载器,这两个顺序一定不要乱'style-loader','css-loader']}]}
}
8.6.5.重新打包
再次输入打包指令:npx webpack --config webpack.config.js
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fxvV6n7z-1592814167938)(assets/1530204780240.png)]
效果:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-htheqYUM-1592814167939)(assets/1530204813013.png)]
8.7.script脚本
我们每次使用npm安装,都会在package.json中留下痕迹,事实上,package.json中不仅可以记录安装的内容,还可编写脚本,让我们运行命令更加快捷。
我们可以把webpack的命令编入其中:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZZzpBMOe-1592814167941)(assets/1530205423730.png)]
以后,如果要打包,就可以直接输入:npm run build
即可。
npm run
:执行npm脚本,后面跟的是配置脚本的名称build
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZsuSuPmJ-1592814167942)(assets/1530205504104.png)]
8.8.打包HTML
之前的打包过程中,除了HTML文件外的其它文件都被打包了,当在线上部署时,我们还得自己复制HTML到dist,然后手动添加生成的js到HTML中,这非常不友好。
webpack中的一个插件:html-webpack-plugin,可以解决这个问题。
1)安装插件:npm install --save-dev html-webpack-plugin
需要在webpack.config.js中添加插件:
const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {entry: './src/main.js', //指定打包的入口文件output: {path: __dirname + '/dist', // 注意:__dirname表示webpack.config.js所在目录的绝对路径filename: 'build.js' //输出文件},module: {rules: [{test: /\.css$/, // 通过正则表达式匹配所有以.css后缀的文件use: [ // 要使用的加载器,这两个顺序一定不要乱'style-loader','css-loader']}]},plugins:[new HtmlWebpackPlugin({title: '首页', //生成的页面标题<head><title>首页</title></head>filename: 'index.html', // dist目录下生成的文件名template: './src/index.html' // 我们原来的index.html,作为模板})]
}
2)将原来HTML中的引入js代码删除:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I9SnwAY6-1592814167943)(assets/1530207035782.png)]
3)再次打包:npm run build
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-430k8Dvm-1592814167944)(assets/1530206990349.png)]
4)查看dist目录:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7ewrf2Fj-1592814167946)(assets/1530207132261.png)]
打开index.html,发现已经自动添加了当前目录下的build.js
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="app"><!--router-link来指定跳转的路径--><span><router-link to="/login">登录</router-link></span><span><router-link to="/register">注册</router-link></span><div><!--vue-router的锚点--><router-view></router-view></div></div>
<script type="text/javascript" src="build.js"></script></body>
</html>
8.9.热更新的web服务
刚才的案例中,每次修改任何js或css内容,都必须重新打包,非常麻烦。
webpack给我们提供了一个插件,可以帮我们运行一个web服务,加载页面内容,并且修改js后不需要重新加载就能看到最新结果:
1)安装插件:npm install webpack-dev-server --save-dev
2)添加启动脚本
在package.json中配置script
"scripts": {"dev": "webpack-dev-server --inline --hot --open --port 8080 --host 127.0.0.1"},
–inline:自动刷新
–hot:热加载
–port:指定端口
–open:自动在默认浏览器打开
–host:可以指定服务器的 ip,不指定则为127.0.0.1
3)运行脚本:npm run dev
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ND2h2QNK-1592814167947)(assets/1530207667660.png)]
4)效果:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nsgkPTOf-1592814167949)(assets/1530207505226.png)]
9.vue-cli
9.1.介绍和安装
在开发中,需要打包的东西不止是js、css、html。还有更多的东西要处理,这些插件和加载器如果我们一一去添加就会比较麻烦。
幸好,vue官方提供了一个快速搭建vue项目的脚手架:vue-cli
使用它能快速的构建一个web工程模板。
官网:https://github.com/vuejs/vue-cli
安装命令:npm install -g vue-cli
9.2.快速上手
我们新建一个module:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gTd9vcR5-1592814167950)(assets/1530208068828.png)]
切换到该目录:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c0i4hZ5g-1592814167951)(assets/1530208139922.png)]
用vue-cli命令,快速搭建一个webpack的项目:vue init webpack
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XjQZG8yA-1592814167952)(assets/1530208650256.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rOTy47kk-1592814167953)(assets/1530208708000.png)]
前面几项都走默认或yes
下面这些我们选no
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6Tk9ONgn-1592814167954)(assets/1530208850418.png)]
最后,再选yes,使用 npm安装
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XDVNfd3B-1592814167956)(assets/1530208897063.png)]
开始初始化项目,并安装依赖,可能需要
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CttkDByP-1592814167957)(assets/1530208932814.png)]
安装成功!
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oHxdjnVL-1592814167958)(assets/1530209062090.png)]
可以使用npm run dev
命令启动。
9.3.项目结构
安装好的项目结构:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BuuEUM0P-1592814167958)(assets/1530209146349.png)]
入口文件:main.js
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IeVA7cau-1592814167959)(assets/1530209503007.png)]
9.4.单文件组件
需要注意的是,我们看到有一类后缀名为.vue的文件,我们称为单文件组件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tLDqmkis-1592814167960)(assets/1530209769323.png)]
每一个.vue文件,就是一个独立的vue组件。类似于我们刚才写的login.js和register.js
只不过,我们在js中编写 html模板和样式非常的不友好,而且没有语法提示和高亮。
而单文件组件中包含三部分内容:
- template:模板,支持html语法高亮和提示
- script:js脚本,这里编写的就是vue的组件对象,还可以有data(){}等
- style:样式,支持CSS语法高亮和提示
每个组件都有自己独立的html、JS、CSS,互不干扰,真正做到可独立复用。
9.5.运行
看看生成的package.json:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7vLZV9XI-1592814167961)(assets/1530210016103.png)]
- 可以看到这引入了非常多的依赖,绝大多数都是开发期依赖,比如大量的加载器。
- 运行时依赖只有vue和vue-router
- 脚本有三个:
- dev:使用了webpack-dev-server命令,开发时热部署使用
- start:使用了npm run dev命令,与上面的dev效果完全一样,当脚本名为“start”时,可以省略“run”。
- build:等同于webpack的打包功能,会打包到dist目录下。
我们执行npm run dev
或者 npm start
都可以启动项目:
页面:
总结
项目结构:
如若内容造成侵权/违法违规/事实不符,请联系编程学习网邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
相关文章
- Ubuntu grub2 引导修复 与 硬盘引导进入 UbuntuLiveCD
Ubuntu grub2 引导修复 与 硬盘引导进入 UbuntuLiveCDUbuntu在进入10后,抛弃了grub,进入了grub2的时代, 因此,从前的修复方法也就失效了 Grub2时代的修复方法 进入UbuntuLiveCD。按ctrl+alt+t,打开terminal,在终端中输入 $sudo -i #fdisk -l (小写字母L) 找到id号为…...
2024/4/18 11:10:37 - TFS2010-团队项目--(TF250044,TF218027) 权限不足问题解决方案
详细解决步骤参照:http://www.cnblogs.com/zjoch/p/3549172.html错误如下:1、TFS 配置从VS2010团队管理其中,右键选择项目集合,在弹出菜单中选“团队项目集合设置”“成员资格”,双击 “Project Collection Administrators“,在弹出窗口中添加用户 。2、Share Pornt 配置…...
2024/4/14 21:34:02 - BDB(C) Getting Started - Introduction to Berkeley DB
参考:<installdir>/docs/gsg/C/index.html 或对应的PDF文档1. BDB中的概念 说明:BDB是value/key数据库,并不是关系数据库。 下面是BDB中的几个重要概念: records: 逻辑上,每一个记录表示了数据库的一个入口。每一个record包含了两个信息:key和data。 access method…...
2024/4/18 6:15:43 - 熊猫烧香变种病毒分析
熊猫烧香变种病毒分析分析报告样本名 2_dump_SCY.exe(熊猫烧香)作者 yusakul时间 2018-07-13平台 Win7-321.样本概况 1.1 样本信息病毒名称 2_dump_SCY.exe所属家族 熊猫烧香样本名称 0c15096fb3bc30800f7af002c25953162b799391300a62b8507fe8e4f6532768样本类型 PE样本大小…...
2024/4/16 12:32:43 - TFS2010(Team Foundation Server)配置总结
1、安装时未配置报表服务器,安装完成后点击TFS管理控制台的“报告”>>“编辑”。按照TFS的管理手册配置即可,“仓库”和“Analysis Services 数据库”都可以填SQL Server 2008里面没有的数据库(自动新建),报表服务器使用的 Web 服务的 URL 和报表管理器的 URL都可以自…...
2024/4/18 21:57:02 - XP win7双系统安装及激活
国庆假玩了一下XP与win7双系统安装,现分享一下经验: 1,先装XP-SP3, 同时硬盘分区为C/D/E/F/G/H,xp安装到了C盘 2,安装windows7,我用的ghost版本(DEEPIN_ghost_win7_Ultimate_x86_2010.iso)安装到最后的H盘,安装到最后的分区有个好处 3,把win7 ghost到H盘后,发现启动…...
2024/4/14 21:34:00 - 基于PaddleHub开发一款学生口罩佩戴情况检测登记系统
PaddleHub介绍 PaddleHub是由百度推出的国产深度学习框架——“飞桨” 预训练模型管理和迁移学习工具,通过PaddleHub开发者可以使用高质量的预训练模型结合Fine-tune API快速完成迁移学习到应用部署的全流程工作。其提供了飞桨生态下的高质量预训练模型,涵盖了图像分类、目标…...
2024/4/22 2:36:37 - Mac下PHP7.3安装Swoole4.4扩展教程
Mac系统下 PHP7安装Swoole扩展 教程今天我用的PHP版本是:PHP7.3.5Swoole下载地址:http://pecl.php.net/package/swoole下载后,tar -xzf swoole-4.4.0.tgzcd swoole-4.4.0phpize./configuremakemake testmake install 解释:phpize是用来扩展php扩展模块的通过phpize可以建立…...
2024/4/14 21:33:56 - 嵌入式开源软件的十大弊端
俗话说得好,“得来全不费功夫”,免费当然是个好事情了。既然是免费的, 开源的实时操作系统(RTOS)看起来是个不错的选择。 但是对于嵌入式设备和物联网设备的开发者来说, 有时并不愿轻易涉足, 比如家居自动化和可穿戴设备, 医疗仪器和工业控制系统。 在决定之前, 需要了解使用…...
2024/4/14 21:33:58 - “熊猫烧香”病毒简介及特征
“熊猫烧香”病毒简介及特征“武汉男生”,俗称“熊猫烧香”,这是一个感染型的蠕虫病毒,它能感染系统中exe,com,pif,src,html,asp等文件,它还能中止大量的反病毒软件进程并且会删除扩展名为gho的文件,该文件是一系统备份工具GHOST的备份文件,使用户的系统备份文件丢失…...
2024/4/14 21:33:54 - PPM install failed:BDB::SQLite::db selectrow_arrry failed: database disk image is malformed解决方法
PPM install failed:BDB::SQLite::db selectrow_arrry failed: database disk image is malformed或者ActivePerl自带的PPM打不开(无响应)解决办法 文章地址:https://blog.csdn.net/weixin_44943157/article/details/105970387 最近我在cmd命令行里面安装App-cpanmunis时,通…...
2024/4/24 22:45:06 - 手握美团offer,结果背调红灯,哭了,网友:别小瞧背调公司
相信很多人都会包装简历,尤其是工作经历,不过也有人会填一下虚假的背景信息,比如公司leader或HR,小公司没有实力过多进行背调,但是大企业就不同了,他们有方法了解到实际的情况。背调包括候选人以往的经历(包括工作时间、岗位名称、工作职责、教育经历、薪资水平)、他人的…...
2024/4/24 22:45:09 - 熊猫烧香完整的病毒源代码
program Japussy;usesWindows, SysUtils, Classes, Graphics, ShellAPI{, Registry};constHeaderSize = 82432; //病毒体的大小IconOffset = $12EB8; //PE文件主图标的偏移量//在我的Delphi5 SP1上面编译得到的大小,其它版本的Delphi可能不同//查找2800000020的十六进制字符串…...
2024/4/24 22:45:04 - swoole入门教程05-Swoole的自定义协议功能的使用
环境说明: 系统:Ubuntu14.04 (安装教程包括CentOS6.5) PHP版本:PHP-5.5.10 swoole版本:1.7.8-alpha1.为什么要提供自定义协议熟悉TCP通信的朋友都会知道,TCP是一个流式协议。客户端向服务器发送的一段数据,可能并不会被服务器一次就完整的收到;客户端向服务器发送的多段…...
2024/4/24 22:45:10 - BDB 入门篇 第3章 DPL First Steps 直接持久层第一步
第3章 Direct Persistence Layer First StepsDPL 是Direct Persistence Layer 的缩写,意思是:直接持久层,即:直接将对象持久化到数据库中内容目录Entity Stores (存储实体对象) Opening and Closing Environments and Stores (打开和关闭环境和存储对象) Persistent Ob…...
2024/4/24 22:45:02 - Win7 Win2003 双系统重装2003以后修复Windows 7 系统启动项
Win7 发布后,为了体验一下MS的新产品,特意在本本上装了双系统,之后突然发现Win2003 用得一点都不爽,仔细看才发现,原来所安装的Win2003是标准版。不得已,所以重装Win2003,但是考虑重装之后,Win7将无法启动,Google之后,终于在某个角落里找到了一个叫bcdautofix 强大程序…...
2024/4/24 22:45:02 - Ubuntu与开源软件
8月25日,在《开源中国 开源世界》高峰论坛上,宫敏博士指出:“自由软件与开源软件是同样一种东西”;同时,他指出:“如果开源软件这个术语不是指的这种含义,那么,就应该使用别的术语”。当即,在会议上就有人大胆附议。2005年2月,“开源软件”这个术语的创始人Bruce Per…...
2024/4/24 22:45:03 - UnityStandardAsset工程、源码分析_2_赛车游戏[玩家控制]_车辆核心控制
上一章地址:UnityStandardAsset工程、源码分析_1_赛车游戏[玩家控制]_输入系统 在上一章里,我们了解了整个车辆控制的大体流程,并且分析了一下输入系统,也就是从玩家的手柄\手机倾斜输入作用到车辆核心控制逻辑的过程中,调用了那些类,这些类又是怎样协同工作的。那么这章…...
2024/4/24 22:44:59 - 开源软件的盈利模式
开源软件在发展历程中,已经不仅仅是开放源代码的免费软件。开源软件与商业并不冲突,它是一种新兴的商业模式。与传统的商业软件相比,开源软件采用了开放源代码、免费分发等形式,减少了营销与销售成本,更易于广泛传播。在开源软件领域中,常见的盈利模式一共有7种。下面让我…...
2024/4/24 22:45:01 - TFS2010安装教程
下载地址:http://www.microsoft.com/zh-cn/download/details.aspx?id=20506安装教程:http://blog.sina.com.cn/s/blog_5972d8560100qjbn.html 使用教程:http://www.cnblogs.com/ewyb/archive/2010/09/27/1836458.htmlhttp://blog.163.com/gavin_it/blog/static/17681609920…...
2024/4/24 22:45:04
最新文章
- 拦截器实现记录接口耗时
拦截器记录接口耗时 1、定义一个拦截器,实现拦截器接口 package org.example.interceptor;import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.web.servlet.HandlerInterceptor; import org.springframework.web.servlet.Mode…...
2024/4/30 16:30:00 - 梯度消失和梯度爆炸的一些处理方法
在这里是记录一下梯度消失或梯度爆炸的一些处理技巧。全当学习总结了如有错误还请留言,在此感激不尽。 权重和梯度的更新公式如下: w w − η ⋅ ∇ w w w - \eta \cdot \nabla w ww−η⋅∇w 个人通俗的理解梯度消失就是网络模型在反向求导的时候出…...
2024/3/20 10:50:27 - 汽车统一诊断服务UDS协议参考文章和视频
UDS基础知识介绍-电子发烧友网 【图解UDS】UDS汽车诊断标准协议(ISO14229)带你入门到精通-有驾 车载测试之UDS诊断协议9:0x27服务:解锁ECU_哔哩哔哩_bilibili UDS诊断的22服务(DID读取数据)和2E服务&…...
2024/4/29 23:11:44 - K8S容器空间不足问题分析和解决
如上图,今天测试环境的K8S平台出现了一个问题,其中的一个容器报错:Free disk space below threshold. Available: 3223552 bytes (threshold: 10485760B),意思服务器硬盘空间不够了。这个问题怎么产生的,又怎么解决的呢…...
2024/4/29 9:05:31 - 【外汇早评】美通胀数据走低,美元调整
原标题:【外汇早评】美通胀数据走低,美元调整昨日美国方面公布了新一期的核心PCE物价指数数据,同比增长1.6%,低于前值和预期值的1.7%,距离美联储的通胀目标2%继续走低,通胀压力较低,且此前美国一季度GDP初值中的消费部分下滑明显,因此市场对美联储后续更可能降息的政策…...
2024/4/29 23:16:47 - 【原油贵金属周评】原油多头拥挤,价格调整
原标题:【原油贵金属周评】原油多头拥挤,价格调整本周国际劳动节,我们喜迎四天假期,但是整个金融市场确实流动性充沛,大事频发,各个商品波动剧烈。美国方面,在本周四凌晨公布5月份的利率决议和新闻发布会,维持联邦基金利率在2.25%-2.50%不变,符合市场预期。同时美联储…...
2024/4/29 6:03:24 - 【外汇周评】靓丽非农不及疲软通胀影响
原标题:【外汇周评】靓丽非农不及疲软通胀影响在刚结束的周五,美国方面公布了新一期的非农就业数据,大幅好于前值和预期,新增就业重新回到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/29 14:21:50 - 【外汇早评】日本央行会议纪要不改日元强势
原标题:【外汇早评】日本央行会议纪要不改日元强势近两日日元大幅走强与近期市场风险情绪上升,避险资金回流日元有关,也与前一段时间的美日贸易谈判给日本缓冲期,日本方面对汇率问题也避免继续贬值有关。虽然今日早间日本央行公布的利率会议纪要仍然是支持宽松政策,但这符…...
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/30 9:43:09 - 【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试
原标题:【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试美国和伊朗的局势继续升温,市场风险情绪上升,避险黄金有向上突破阻力的迹象。原油方面稍显平稳,近期美国和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/29 20:46:55 - 氧生福地 玩美北湖(中)——永春梯田里的美与鲜
原标题:氧生福地 玩美北湖(中)——永春梯田里的美与鲜一觉醒来,因为大家太爱“美”照,在柳毅山庄去寻找龙女而错过了早餐时间。近十点,向导坏坏还是带着饥肠辘辘的我们去吃郴州最富有盛名的“鱼头粉”。说这是“十二分推荐”,到郴州必吃的美食之一。 哇塞!那个味美香甜…...
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/30 9:42:22 - 广州械字号面膜生产厂家OEM/ODM4项须知!
原标题:广州械字号面膜生产厂家OEM/ODM4项须知!广州械字号面膜生产厂家OEM/ODM流程及注意事项解读: 械字号医用面膜,其实在我国并没有严格的定义,通常我们说的医美面膜指的应该是一种「医用敷料」,也就是说,医用面膜其实算作「医疗器械」的一种,又称「医用冷敷贴」。 …...
2024/4/30 9:43:22 - 械字号医用眼膜缓解用眼过度到底有无作用?
原标题:械字号医用眼膜缓解用眼过度到底有无作用?医用眼膜/械字号眼膜/医用冷敷眼贴 凝胶层为亲水高分子材料,含70%以上的水分。体表皮肤温度传导到本产品的凝胶层,热量被凝胶内水分子吸收,通过水分的蒸发带走大量的热量,可迅速地降低体表皮肤局部温度,减轻局部皮肤的灼…...
2024/4/30 9:42:49 - 配置失败还原请勿关闭计算机,电脑开机屏幕上面显示,配置失败还原更改 请勿关闭计算机 开不了机 这个问题怎么办...
解析如下: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