先聊一下前端开发模式的发展。
静态页面
最初的网页以HTML为主,是纯静态的网页。网页是只读的,信息流只能从服务端到客户端单向流通。开发人员也只关心页面的样式和内容即可。
异步刷新,操作DOM
1995年,网景工程师Brendan Eich 花了10天时间设计了JavaScript语言.
随着JavaScript的诞生,我们可以操作页面的DOM元素及样式,页面有了一些动态的效果,但是依然是以静态为主。
ajax盛行:
MVVM,关注模型和视图
2008年,google的Chrome发布,随后就以极快的速度占领市场,超过IE成为浏览器市场的主导者。
2009年,Ryan Dahl在谷歌的Chrome V8引擎基础上,打造了基于事件循环的异步IO框架:Node.js。
node.js的伟大之处不在于让JS迈向了后端开发,而是构建了一个庞大的生态系统。
2010年,NPM作为node.js的包管理系统首次发布,开发人员可以遵循Common.js规范来编写Node.js模块,然后发布到NPM上供其他开发人员使用。目前已经是世界最大的包模块管理系统。
随后,在node的基础上,涌现出了一大批的前端框架:
三种架构的介绍
MVVM模式
在MVVM之前,开发人员从后端获取需要的数据模型,然后要通过DOM操作Model渲染到View中。而后当用户操作视图,我们还需要通过DOM获取View中的数据,然后同步到Model中。
而MVVM中的VM要做的事情就是把DOM操作完全封装起来,开发人员不用再关心Model和View之间是如何互相影响的:
把开发人员从繁琐的DOM操作中解放出来,把关注点放在如何操作Model上。
而我们今天要学习的,就是一款MVVM模式的框架:Vue
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
前端框架三巨头:Vue.js、React.js、AngularJS,vue.js以其轻量易用著称,vue.js和React.js发展速度最快,AngularJS还是老大。C
官网:https://cn.vuejs.org/
参考:https://cn.vuejs.org/v2/guide/
Git地址:https://github.com/vuejs
尤雨溪,Vue.js 创作者,Vue Technology创始人,致力于Vue的研究开发。
NPM是Node提供的模块管理工具,可以非常方便的下载安装很多前端框架,包括Jquery、AngularJS、VueJs都有。为了后面学习方便,我们先安装node及NPM工具。
npm -init -y
进行初始化-y
是省的问一大堆的问题npm i 名称
安装 就会把所有的依赖文件拉下来 注意:是i
不是-i
npm i 名称@版本号
node_modules
下,并在package.json
文件中记录,如果不小心删除了node_modules
只需要执行npm i
命令就会根据package.json
中的记录把所有文件都拉下来卸载只需要执行npm uninstall 名称
就可以卸载,并且会把package.json
中的记录删除掉
更新只需要执行npm update名称
就可以更新,并且会把package.json
中的版本号更新
命令 | 作用 |
---|---|
npm -init -y | 初始化项目,-y可以省掉一些询问 |
npm install 名称 -g/–save | 下载依赖,-g是全局安装,–save是本地安装 |
npm uninstall 名称 | 卸载依赖,并且会把package.json 中的记录删除掉 |
npm undate 名称 | 更新依赖,并且会把package.json 中的版本号更新 |
npm默认的仓库地址是在国外网站,速度较慢,建议大家设置到淘宝镜像。但是切换镜像是比较麻烦的。推荐一款切换镜像的工具:nrm
我们首先安装nrm,这里-g
代表全局安装。可能需要一点儿时间
npm install nrm -g
安装成功后通过nrm ls
命令查看npm的仓库列表,带*
的就是当前选中的镜像仓库:
可以通过nrm test 名称
来测试镜像源的速度,直接nrm test
是测试所有的
通过nrm use 名称
来指定要使用的镜像源:
这里我们使用npm的方式
创建一个空文件夹vue-learning
,然后打开命令行进入该文件夹
使用 npm init -y
进行初始化
安装Vue,输入命令:npm install vue
注意,如果要安装的模块如果和当前文件夹名称一样会报错,比如vue-learning改名为vue,在执行npm install vue时就会报错
然后就会在hello-vue目录发现一个node_modules目录,并且在下面有一个vue目录。
node_modules是通过npm安装的所有模块的默认位置。
<body>
<!--vue对象的html模板-->
<div id="app">
<!--花括号,js表达式-->
<h1>大家好,我是{{name}}</h1>
<h1>你好{{1+1}}</h1>
</div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
//初始化一个vue实例
const app=new Vue({
el: "#app", //element的缩写,选择器
data: { //数据模型
name: "刘德华"
}
});
</script>
h2
元素中,我们通过{{name}}的方式,来渲染刚刚定义的name属性。打开页面查看效果:
我们对刚才的案例进行简单修改:
<body>
<!--vue对象的html模板-->
<div id="app">
<!--双向绑定,v-model:数据模型-->
<input type="text" v-model="num"/>
<!--花括号,js表达式-->
<h1>大家好,我是{{name}},有{{num}}为妹子迷恋我</h1>
<h1>你好{{1+1}}</h1>
</div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
//初始化一个vue实例
const app=new Vue({
el: "#app", //element的缩写,选择器
data: { //数据模型
name: "刘德华",
num: 100
}
});
</script>
num
input
元素,通过v-model
与num
进行绑定。{{num}}
在页面输出我们可以观察到,输入框的变化引起了data中的num的变化,同时页面输出也跟着变化。
{{num}}
与数据num绑定,因此num值变化,引起了页面效果变化。没有任何dom操作,这就是双向绑定的魅力。
注意,这个input要放在#app里面
我们在页面添加一个按钮,做到点击按钮时候让num自增1
<body>
<!--vue对象的html模板-->
<div id="app">
<!--双向绑定,v-model:数据模型-->
<input type="text" v-model="num"/>
<!--定义一个事件,v-on:事件名=js表达式-->
<input type="button" value="点我加妹子" v-on:click="incr" /> <!--v-on:click="num++"-->
<!--花括号,js表达式-->
<h1>大家好,我是{{name}},有{{num}}为妹子迷恋我</h1>
<h1>你好{{1+1}}</h1>
</div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
//初始化一个vue实例
const app=new Vue({
el: "#app", //element的缩写,选择器
data: { //数据模型
name: "刘德华",
num: 100
},
methods: {
incr(){
this.num++
}
}
});
</script>
创建Vue实例
每个 Vue 应用都是通过用 Vue
函数创建一个新的 Vue 实例开始的:
var vm = new Vue({
// 选项
})
在构造函数中传入一个对象,并且在对象中声明各种Vue需要的数据和方法,包括:
等等
接下来我们一 一介绍。
每个Vue实例都需要关联一段Html模板,Vue会基于此模板进行视图渲染。
我们可以通过el属性来指定。
例如一段html模板:
<div id="app">
div>
然后创建Vue实例,关联这个div
var vm = new Vue({
el:"#app"
})
这样,Vue就可以基于id为app
的div元素作为模板进行渲染了。在这个div范围以外的部分是无法使用vue特性的。
当Vue实例被创建时,它会尝试获取在data中定义的所有属性,用于视图的渲染,并且监视data中的属性变化,当data发生改变,所有相关的视图都将重新渲染,这就是“响应式“系统。
html:
<div id="app">
<input type="text" v-model="name"/>
div>
js:
var vm = new Vue({
el:"#app",
data:{
name:"刘德华"
}
})
input
的值Vue实例中除了可以定义data属性,也可以定义方法,并且在Vue实例的作用范围内使用。
html:
<div id="app">
<input type="text" v-model="num" />
<input type="button" value="点我加妹子" v-on:click="incr" />
<h1>大家好,我是{{name}},有{{num}}为妹子迷恋我h1>
<h1>你好{{1+1}}h1>
div>
js:
//初始化一个vue实例
const app=new Vue({
el: "#app", //element的缩写,选择器
data: { //数据模型
name: "刘德华",
num: 100
},
methods: {
incr(){
this.num++
}
}
});
this:
每个 Vue 实例在被创建时都要经过一系列的初始化过程 :创建实例,装载模板,渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数(监听函数)。每当Vue实例处于不同的生命周期时,对应的函数就会被触发调用。
生命周期:
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}}已被渲染成刘德华beforeUpdate
:组件更新之前。updated
:组件更新之后。beforeDestroy
:该函数将在销毁实例前进行调用 。destroyed
:改函数将在销毁实例时进行调用。例如:created代表在vue实例创建后;
我们可以在Vue中定义一个created函数,代表这个时期的钩子函数:
const app=new Vue({
el: "#app", //element的缩写,选择器
created() {
this.num=520
},
data: { //数据模型
name: "刘德华",
num: 100
},
methods: {
incr(){
console.log(this);
this.num++
}
}
});
刷新页面就是520,data中定义的1就会被覆盖
push(): 在末尾添加
pop():在末尾删除
shift(): 在开头删除
unshift():在开头添加
splice() :可用于删除,替换,新增
sort():排序
reverse():反转
如果在对象中没有定义并且初始化值的key普通操作是不能做到响应式的。
什么是指令?
指令 (Directives) 是带有 v-
前缀的特殊特性。指令特性的预期值是:单个 JavaScript 表达式。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。
例如我们在入门案例中的v-on,代表绑定事件。
{{表达式}}
说明:
{{var a = 1 + 1}}
;<body>
<!--vue对象的html模板-->
<div id="app">
<!--省略其他-->
<h1>有{{sum()}}个人</h1>
</div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
//初始化一个vue实例
const app=new Vue({
el: "#app", //element的缩写,选择器
created() {
this.num=520
},
data: { //数据模型
name: "刘德华",
num: 100
},
methods: {
incr(){
console.log(this);
this.num++
},
sum(){
return this.num+100;
}
}
});
</script>
使用{{}}方式在网速较慢时会出现问题。在数据未加载完成时,页面会显示出原始的{{}}
,加载完毕后才显示正确数据,我们称为插值闪烁。
我们将网速调慢一些,然后试试看刚才的案例:
使用v-text和v-html指令来替代{{}}
说明:
html:
<h1>插值表达式h1>
<ul>
<li v-text="name">张学友li>
<span v-text="num">人数span>
<li v-html="cname">学友哥li>
ul>
js:
data: { //数据模型
name: "刘德华",
num: 100,
cname: "华哥"
},
刷新页面,效果如下,并且不会出现插值闪烁,当没有数据时,会显示空白。
<div id="app">
<p>{{message}}p>
<p v-pre>{{message}}p>
div>
css:
html:
<p>{{message}}p>
<p v-cloak>{{message}}p>
<p v-text="message">信息p>
div>
js
setTimeout(()=>{
const app=new Vue({
el: "#app",
data: {
message: "你好呀"
}
})
},2000);
刚才的v-text和v-html可以看做是单向绑定,数据影响了视图渲染,但是反过来就不行。接下来学习的v-model是双向绑定,视图(View)和模型(Model)之间会互相影响。
既然是双向绑定,一定是在视图中可以修改数据,这样就限定了视图的元素类型。目前v-model的可使用元素有:
基本上除了最后一项,其它都是表单的输入项。
checkbox案例
html:
<h1>v-modelh1>
<input type="checkbox" value="ios" v-model="language"/>ios
<input type="checkbox" value="java" v-model="language"/>java
<input type="checkbox" value="php" v-model="language"/>php <br/>
您选择了:<span v-text="language">您配吗?span>
js:
data: { //数据模型
name: "刘德华",
num: 100,
cname: "华哥",
language: []
},
效果:
讲道理,这个括号看着是不是很不爽,稍微进行修改。{{这里面是可以写表达式的(v-text和v-html同理)}}
您选择了:<span v-text="language.join(',')">您配吗?span>
多选使用数组来存储,比如checkbox和select。单选比如radio使用字符串或数字来存储
html:
<input type="radio" value="男" v-model="sex"/>男
<input type="radio" value="女" v-model="sex"/>女<br/>
性别: {{sex}}
js:
data: { //数据模型
name: "刘德华",
num: 100,
cname: "华哥",
language: [],
sex: ""
},
v-on指令用于给页面元素绑定事件。
语法:
v-on:事件名="js片段或函数名"
前面我们已经写过了点击事件
html:
<input type="button" value="点我加妹子" v-on:click="incr" />
js:
methods: {
incr(){
console.log(this);
this.num++
},
sum(){
return this.num+100;
}
}
另外,事件绑定可以简写,例如v-on:click='add'
可以简写为@click='add'
在事件处理程序中调用 event.preventDefault()
或 event.stopPropagation()
是非常常见的需求。尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。
为了解决这个问题,Vue.js 为 v-on
提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。
.stop
:阻止事件冒泡到父元素.prevent
:阻止默认事件发生.capture
:使用事件捕获模式.self
:只有元素自身触发事件才执行。(冒泡或捕获的都不执行).once
:只执行一次阻止默认事件,例如阻止浏览器默认的右键显示菜单事件
html:
<input type="button" value="点我加妹子" v-on:click="incr" />
<input type="button" value="右击你懂得" @contextMenu="decr($event)"/>
js:
methods: {
incr(){
this.num++
},
decr(ev){
ev.preventDefault();
this.num--;
}
}
不用DOM操作
<input type="button" value="右击你懂得" @contextMenu.prevent="decr()"/>
在监听键盘事件时,我们经常需要检查常见的键值。Vue 允许为 v-on
在监听键盘事件时添加按键修饰符:
html:
<input text="text" v-model="num" @keyup.13="submit"/>
js:
submit(){
console.log("你已经提交了");
}
A是65
记住所有的 keyCode
比较困难,所以 Vue 为最常用的按键提供了别名:
.enter
.tab
.delete
(捕获“删除”和“退格”键).esc
.space
.up
.down
.left
.right
例如上面的事件调用还可以这样写
你还可以通过全局 config.keyCodes
对象自定义按键修饰符别名:
// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112
可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
.ctrl
.alt
.shift
.meta
注意:在 Mac 系统键盘上,meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上,meta 对应实心宝石键 (◆)。在其他特定键盘上,尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品,比如 Knight 键盘、space-cadet 键盘,meta 被标记为“META”。在 Symbolics 键盘上,meta 被标记为“META”或者“Meta”。
<input text="text" v-model="num" @keyup.ctrl.enter="submit"/>
遍历数据渲染页面是非常常用的需求,Vue中通过v-for指令来实现。
语法:
v-for="item in items"
案例
v-bin可以缩写为':'
html:
<div id="app">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
<div class="row">
<p
style="text-align: center;font-size:28px;color:#FFF;background: linear-gradient(#FF7F00, #FF82AB);">
<b>
<i>GODDESSi>
b>
p>
遍历
<div class="col-md-3" v-for="(user,index,key) in goddess" :key="index" style="text-align: center;">
<p>
<img v-bind:src="user.image" style="vertical-align:text-bottom;" height="200" />
p>
<p>
{{index+1}}
<p>
{{user.name}}
p>
<p>
{{user.gender}}
p>
<p>
{{user.age}}
p>
div>
div>
div>
<div id="app">
js
data: { //数据模型
name: "刘德华",
num: 100,
cname: "华哥",
language: [],
sex: "",
year: 2020,
goddess: [
{ image: 'https://ftp.bmp.ovh/imgs/2019/12/87863ad4c4d6e93a.jpg', name: '翁美玲', gender: '女', age: this.year - 1959 + 1 },
{ image: 'https://s2.ax1x.com/2019/12/01/QeetTe.jpg', name: '蓝洁瑛', gender: '女', age: this.year - 1963 + 1 },
{ image: 'https://ftp.bmp.ovh/imgs/2019/12/655f90ac240f8d26.jpg', name: '周慧敏', gender: '女', age: this.year - 1967 + 1 },
{ image: 'https://s2.ax1x.com/2019/12/01/QeeBlt.jpg', name: '关之琳', gender: '女', age: this.year - 1962 + 1 },
{ image: 'https://s2.ax1x.com/2019/12/01/QeeRYj.jpg', name: '邱淑贞', gender: '女', age: this.year - 1968 + 1 },
{ image: 'https://ftp.bmp.ovh/imgs/2019/12/c889f7b09a6478ed.jpeg', name: '林青霞', gender: '女', age: this.year - 1954 + 1 },
{ image: 'https://s2.ax1x.com/2019/12/01/QeeTmT.jpg', name: '李若彤', gender: '女', age: this.year - 1967 + 1 },
{ image: 'https://s2.ax1x.com/2019/12/01/QeerOf.jpg', name: '王祖贤', gender: '女', age: this.year - 1967 + 1 },
{ image: 'https://s2.ax1x.com/2019/12/01/QeeWfs.jpg', name: '张柏芝', gender: '女', age: this.year - 1980 + 1 },
{ image: 'https://s2.ax1x.com/2019/12/01/QeecTg.jpg', name: '张曼玉', gender: '女', age: this.year - 1964 + 1 },
{ image: 'https://ftp.bmp.ovh/imgs/2019/12/0821807f09267a9b.jpg', name: '蔡少芬', gender: '女', age: this.year - 1973 + 1 },
{ image: 'https://s2.ax1x.com/2019/12/01/Qee560.jpg', name: '温碧霞', gender: '女', age: this.year - 1966 + 1 },
{ image: 'https://s2.ax1x.com/2019/12/01/QeeUFH.jpg', name: '万绮雯', gender: '女', age: this.year - 1970 + 1 },
{ image: 'https://s2.ax1x.com/2019/12/01/QeeaYd.jpg', name: '钟欣潼', gender: '女', age: this.year - 1981 + 1 },
{ image: 'https://ftp.bmp.ovh/imgs/2019/12/32c501866339e345.png', name: '周秀娜', gender: '女', age: this.year - 1985 + 1 },
{ image: 'https://s2.ax1x.com/2019/12/01/Qee4lq.jpg', name: '杨紫', gender: '女', age: this.year - 1992 + 1 },
{ image: 'https://s2.ax1x.com/2019/12/01/Qee70U.png', name: '郑爽', gender: '女', age: this.year - 1991 + 1 },
{ image: 'https://s2.ax1x.com/2019/12/01/Qee2kQ.jpg', name: '唐嫣', gender: '女', age: this.year - 1983 + 1 },
{ image: 'https://s2.ax1x.com/2019/12/01/QeeH7F.jpg', name: '佟丽娅', gender: '女', age: this.year - 1983 + 1 },
{ image: 'https://s2.ax1x.com/2019/12/01/QeeIXV.jpg', name: '舒畅', gender: '女', age: this.year - 1987 + 1 },
{ image: 'https://ftp.bmp.ovh/imgs/2019/12/22c88e047a214210.jpg', name: '杨幂', gender: '女', age: this.year - 1986 + 1 },
{ image: 'https://s2.ax1x.com/2019/12/01/Qeehpn.jpg', name: '刘亦菲', gender: '女', age: this.year - 1987 + 1 },
{ image: 'https://s2.ax1x.com/2019/12/01/Qelv5T.jpg', name: '韩雪', gender: '女', age: this.year - 1983 + 1 },
{ image: 'https://s2.ax1x.com/2019/12/01/QeedfA.jpg', name: '宋祖儿', gender: '女', age: this.year - 1998 + 1 }
]
},
在遍历的过程中,如果我们需要知道数组角标,可以指定第二个参数:
语法
v-for="(item,index) in items"
<div class="col-md-3" v-for="(user,index,key) in goddess" :key="index" style="text-align: center;">
<p>
<img v-bind:src="user.image" style="vertical-align:text-bottom;" height="200" />
p>
<p>
{{index+1}}
<p>
v-for除了可以迭代数组,也可以迭代对象。语法基本类似
语法:
v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"
html:
<span v-for="(value,key,index) in date" :key="index">{{key+' '+value+' '}}span>
js:
date: {
Year: 2020,
month: 4,
day: 14
}
当 Vue.js 用 v-for
正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。
这个功能可以有效的提高渲染的效率。
但是要实现这个功能,你需要给Vue一些提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key
属性。理想的 key
值是每项都有的且唯一的 id。
示例:
<div class="col-md-3" v-for="(user,index) in goddess" :key=index style="text-align: center;" >
:key=""
我们后面会讲到,它可以让你读取vue中的属性,并赋值给key属性使用key和不使用key的对比
当某一层有很多相同的节点时,也就是列表节点时,我们希望插入一个新的节点
我们希望可以在B和C之间加一个F,Diff算法默认执行起来是这样的。
即把C更新成F,D更新成C,E更新成D,最后再插入E,是不是很没有效率?
所以我们需要使用key来给每个节点做一个唯一标识
Diff算法就可以正确的识别此节点
找到正确的位置区插入新的节点。
所以一句话,key的作用主要是为了高效的更新虚拟DOM。
注意:key不要使用index,因为绑定的inedx是会改变的,没什么用。
v-if,顾名思义,条件判断。当得到结果为true时,所在的元素才会被渲染。
语法:
v-if="布尔表达式"
,v-show="布尔表达式"
html:
<span v-if="show">你看我了,你是true,我是ifspan><br/>
<span v-show="show">你看到我了,你是true,我是showspan>
js:
data: {
show: true
}
show和if的区别: if当为false时,不会进行渲染。二show会进行渲染,仅仅是设置不显示罢了
你可以使用 v-else
指令来表示 v-if
的“else 块”:
<input type="button" value="点我生成随机数" @click="random=Math.random()*100" />{{random}}<br/>
<p v-if="random>60">大妈p>
<p v-else-if="random>30">阿姨p>
<p v-else-if="random>15">姐姐p>
<p v-else-if="random>0" style="font-size: 40px;color: red">我们来炼铜吧p>
<p v-else style="font-size: 20px;color: aqua">快快点击生成随机数吧!p>
v-else-if
必须紧跟在带v-if
或者v-else-if
的元素之后。
v-else
元素也必须紧跟在带v-if
或者v-else-if
的元素的后面,否则它将不会被识别。
错误演示
只会显示random>60时的“大妈”
<input type="button" value="点我生成随机数" @click="random=Math.random()*100" />{{random}}<br/>
<p v-if="random>60">大妈p><br/>
<p v-else-if="random>30">阿姨p><br/>
<p v-else-if="random>15">姐姐p><br/>
<p v-else-if="random>0" style="font-size: 40px;color: red">我们来炼铜吧p><br/>
<p v-else style="font-size: 20px;color: aqua">快快点击生成随机数吧!p>
html属性不能使用双大括号形式绑定,只能使用v-bind指令。
上面在遍历显示女神时,图片的src属性就用的是v-bind
<img v-bind:src="user.image" style="vertical-align:text-bottom;" height="200" />
<input type="button" v-bind:class="{active: store>0}" value="购买"/>
<input type="button" :class="store>0?'active':'noactive'" value="购买"/>
css:
.active{
font-size: 30px;
background-color: red;
}
.noactive{
background-color: gray;
}
在将 v-bind
用于 class
和 style
时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。
数组语法
我们可以借助于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>
渲染后的效果:
对象语法
我们可以传给 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 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', backgroundColor: 'red' }">div>
数据:
data: {
activeColor: 'red',
fontSize: 30
}
效果:
<div style="color: red; font-size: 30px;backgroundColor: red">div>
例
v-bind:属性名
可以简写为
:属性名
在插值表达式中使用js表达式是非常方便的,而且也经常被用到。
但是如果表达式的内容很长,就会显得不够优雅,而且后期维护起来也不方便,例如下面的场景,我们有一个日期的数据,但是是毫秒值:
data:{
birthday:88888888888 // 毫秒值
}
我们在页面渲染,希望得到yyyy-MM-dd的样式:
<h1>您的生日是:{{
new Date(birthday).getFullYear() + '-'+ new Date(birthday).getMonth()+ '-' + new Date(birthday).getDay()
}}
h1>
虽然能得到结果,但是非常麻烦。
Vue中提供了计算属性,来替代复杂的表达式:
data:{
birthday:88888888888 // 毫秒值
}
computed: {
birth(){
const date=new Date(this.birthday);
return date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDay()+"日";
}
}
<p>你的年龄:{{birth}}p>
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而,不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要
birthday
还没有发生改变,多次访问birthday
计算属性会立即返回之前的计算结果,而不必再次执行函数。computed里面定义的方法一定要有返回值
执行该方法后,会像v-model一样,生成一个属性 方法名:返回值。所以直接使用该属性就可以了,而不必调用方法
watch可以让我们监控一个值的变化。从而做出相应的反应。
示例:
html:
<input type="text" v-model="message"/>
js:
data: {
message: "",
},
watch: {
message(newval,oldval){
console.log(newval,oldval);
}
}
效果
在大型应用开发的时候,页面可以划分成很多部分。往往不同的页面,也会有相同的部分。例如可能会有相同的头部导航。
但是如果每个页面都独自开发,这无疑增加了我们开发的成本。所以我们会把页面的不同部分拆分成独立的组件,然后在不同页面就可以共享这些组件,避免重复开发。
在vue里,所有的vue实例都是组件
1.Vue.extend():
调用Vue.extend()创建的是一个组件构造器。
通常在创建组件构造器时,传入template代表我们自定义组件的模板。
该模板就是在使用到组件的地方,要显示的HTML代码。
事实上,这种写法在Vue2.x的文档中几乎已经看不到了,它会直接使用下面我们会讲到的语法糖,但是在很多资料还是会提到这种方式,而且这种方式是学习后面方式的基础。
2.Vue.component():
调用Vue.component()是将刚才的组件构造器注册为一个组件,并且给它起一个组件的标签名称。
所以需要传递两个参数:1、注册组件的标签名 2、组件构造器
3.组件必须挂载在某个Vue实例下,否则它不会生效。
全局注册,就意味着即便以后你不再使用这个组件,它依然会随着Vue的加载而加载。
我们通过Vue的component方法来定义一个全局组件。
<script src="node_modules/vue/dist/vue.js"></script>
<script>
Vue.component("counter",{
template: "",
data(){
return {
num: 0
}
},
methods: {
add(){
this.num++;
}
}
})
const app=new Vue({
el: "#app",
data: {
}
});
</script>
使用定义好的全局组件,标签名就是定义的组件名
<div id="app">
<counter>counter>
<counter>counter>
div>
组件其实也是一个Vue实例,因此它在定义时也会接收:data、methods、生命周期函数等
不同的是组件不会与页面的元素绑定,否则就无法复用了,因此没有el属性。
但是组件渲染需要html模板,所以增加了template属性,值就是HTML模板
全局组件定义完毕,任何vue实例都可以直接在HTML中通过组件名称来使用组件了。
data必须是一个函数,不再是一个对象,在该函数中返回数据对象。
组件和app是父子关系,组件标签的使用必须在app中
定义好的组件,可以任意复用多次:
<div id="app">
<counter>counter>
<counter>counter>
<counter>counter>
div>
你会发现每个组件互不干扰,都有自己的count值。怎么实现的?
组件的data属性必须是函数!
当我们定义组件时,它的data 并不是像之前直接提供一个对象:
data: {
count: 0
}
取而代之的是,一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝:
data: function () {
return {
count: 0
}
}
如果 Vue 没有这条规则,点击一个按钮就会影响到其它所有实例!
一旦全局注册,就意味着即便以后你不再使用这个组件,它依然会随着Vue的加载而加载。
因此,对于一些并不频繁使用的组件,我们会采用局部注册。
我们先在外部定义一个对象,结构与创建全局组件时传递的第二个参数一致
然后在Vue中使用它:
js:
const hello={
template: "hello,我是{{name}}",
data(){
return {
name: "张学友"
}
}
};
const app=new Vue({
el: "#app",
data: {
},
components: {
hello1: hello //hello1为到时候使用的标签名,hello是自己定义的组件
}
});
html:
<div id="app">
<hello1>hello1>
div>
组件的插槽:
组件的插槽也是为了让我们封装的组件更加具有扩展性。
让使用者可以决定组件内部的一些内容到底展示什么。
栗子:移动网站中的导航栏。
如何去封装这类的组件呢?
它们也很多区别,但是也有很多共性。
如果,我们每一个单独去封装一个组件,显然不合适:比如每个页面都返回,这部分内容我们就要重复去封装。
但是,如果我们封装成一个,好像也不合理:有些左侧是菜单,有些是返回,有些中间是搜索,有些是文字,等等。
如何封装合适呢?抽取共性,保留不同。
在子组件中,使用特殊的元素
,在slot中加个name属性就可以成为具名插槽
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<cpn><span slot="left">返回span>cpn>
<cpn><span slot="middle">标题span>cpn>
div>
body>
<template id="cpnC">
<div>
<slot name="left"><span>左边span>slot>
<slot name="middle"><span>中间span>slot>
<slot name="right"><span>右边span>slot>
div>
template>
<script src="../node_modules/vue/dist/vue.js">script>
<script>
const cpn={
template: "#cpnC"
}
const app=new Vue({
el:"#app",
components:{
cpn:cpn
}
})
script>
html>
数据在子组件中
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<cpn>cpn>
<cpn>
<template slot-scope="data">
<ul>
<li v-for="language in data" style="list-style: none">{{language.join(",")}} li>
ul>
template>
cpn>
div>
body>
<template id="cpnC">
<div>
<slot :data="Clanguage">
<ul>
<li v-for="language in Clanguage">{{language}}li>
ul>
slot>
div>
template>
<script src="../node_modules/vue/dist/vue.js">script>
<script>
const cpn={
template: '#cpnC',
data(){
return {
Clanguage: ['java','c#','python','php','c++','javascript']
}
}
}
const app=new Vue({
el: "#app",
components: {
cpn,
}
})
script>
html>
通常一个单页应用会以一棵嵌套的组件树的形式来组织:
各个组件之间以嵌套的关系组合在一起,那么这个时候不可避免的会有组件间通信的需求。
例,修改开始的全局组件
在使用组件的时候给组件传递num1参数
<div>
<counter :num1="num">counter>
div>
子组件中通过props来接收一个父组件传递的属性
Vue.component("counter",{
template: "",
props: ["num1","num2"],
data(){
return {
num: 0
}
},
methods: {
add(){
this.num++;
}
}
});
//父组件
const app=new Vue({
el: "#app",
data: {
num: 12
},
});
我们定义一个局部组件,并接收复杂数据:
//全局组件
Vue.component("counter",{
template: "",
//props: ["num1","num2"],
props: {
num1: {
type: Number,
default: 0,
required: false
},
title: {
type: Number,
}
},
data(){
return {
num: 0
}
},
methods: {
add(){
this.num++;
}
}
});
当 prop 验证失败的时候,(开发环境构建版本的) Vue 将会产生一个控制台的警告。
type
可以是下列原生构造函数中的一个:
String
Number
Boolean
Array
Object
Date
Function
Symbol
给 prop 传入一个静态的值:
<counter title="num">counter>
给 prop 传入一个动态的值: (通过v-bind从数据模型中,获取title的值)
<counter :title="num">counter>
静态传递时,我们传入的值都是字符串类型的,但实际上任何类型的值都可以传给一个 props。
<counter :num1="num" title="num">counter>
vue提供了一个内置的this.$emit()函数,用来调用父组件绑定的函数,可以传递参数
this.$emit(‘函数名’,参数…)
来看这样的一个案例:
我们可以通过v-on指令将父组件的函数绑定到子组件上:
html
<div>
<counter :num1="num" title="num" @incre="incr()">counter>
div>
js
//全局组件
Vue.component("counter",{
template: "",
//props: ["num1","num2"],
props: {
num1: {
type: Number,
default: 0,
required: false
},
title: {
type: Number,
}
},
data(){
return {
num: 0
}
},
methods: {
add(){
this.num++;
},
subIncr(){ //定义子组件方法
this.$emit("incre");
}
}
});
//父组件
const app=new Vue({
el: "#app",
data: {
num: 12
},
components: {
hello1: hello //hello1为到时候使用的标签名,hello是自己定义的组件
},
methods: {
incr(){ //定义父组件方法
this.num++;
}
}
});
At its core, webpack is a static module bundler for modern JavaScript applications.
从本质上来讲,webpack是一个现代的JavaScript应用的静态模块打包工具
。
但是它是什么呢?用概念解释概念,还是不清晰。
我们从两个点来解释上面这句话:模块
和 打包
目前使用前端模块化的一些方案:AMD、CMD、CommonJS、ES6。
在ES6之前,我们要想进行模块化开发,就必须借助于其他的工具,让我们可以进行模块化开发。
并且在通过模块化开发完成了项目后,还需要处理模块间的各种依赖,并且将其进行整合打包。
而webpack其中一个核心就是让我们可能进行模块化开发,并且会帮助我们处理模块间的依赖关系。
而且不仅仅是JavaScript文件,我们的CSS、图片、json文件等等在webpack中都可以被当做模块来使用(在后续我们会看到)。
理解了webpack可以帮助我们进行模块化,并且处理模块间的各种复杂关系后,打包的概念就非常好理解了。
就是将webpack中的各种资源模块进行打包合并成一个或多个包(Bundle)。
并且在打包的过程中,还可以对资源进行处理,比如压缩图片,将scss转成css,将ES6语法转成ES5语法,将TypeScript转成JavaScript等等操作。
但是打包的操作似乎grunt/gulp也可以帮助我们完成,它们有什么不同呢?
grunt/gulp的核心是Task
我们可以配置一系列的task,并且定义task要处理的事务(例如ES6、ts转化,图片压缩,scss转成css)
之后让grunt/gulp来依次执行这些task,而且让整个流程自动化。
所以grunt/gulp也被称为前端自动化任务管理工具。
我们来看一个gulp的task
下面的task就是将src下面的所有js文件转成ES5的语法。
并且最终输出到dist文件夹中。
什么时候用grunt/gulp呢?
如果你的工程模块依赖非常简单,甚至是没有用到模块化的概念。
只需要进行简单的合并、压缩,就使用grunt/gulp即可。
但是如果整个项目使用了模块化管理,而且相互依赖非常强,我们就可以使用更加强大的webpack了。
所以,grunt/gulp和webpack有什么不同呢?
安装webpack依赖(记得加上版本号)
npm install [email protected] -g #全局安装
npm install [email protected] --save-dev #本地安装
为什么全局安装后,还需要局部安装呢?
创建一个脚本
创建一个webpack.config.js
文件
const path=require('path')
module.exports={
entry: './src/main.js', //指定入口
output:{
path: path.resolve(__dirname,'dist'), //动态获取路径
filename: 'bundle.js' //打包的文件名
}
}
使用局部的webpack进行打包
npm run build #使用局部的webpack进行打包
使用步骤
步骤一:通过npm安装需要使用的loader
步骤二:在webpack.config.js中的modules关键字下进行配置
引入依赖
npm install style-loader --save-dev
npm install css-loader --save-dev
配置
module: {
rules: [
{
test: /\.css$/, //正则表达式进行匹配
//css-loacder只负责将css文件进行加载
//style-loader负责将样式添加到DOM中
//使用多个
use: [ 'style-loader','css-loader' ]
},
]
}
引入less打包依赖(记得加上版本号)
npm install [email protected] [email protected] --save-dev
配置
module: {
rules: [
{
test: /\.css$/,
//css-loacder只负责将css文件进行加载
//style-loader负责将样式添加到DOM中
//使用多个
use: [ 'style-loader','css-loader' ]
},
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
}
]
引入依赖
npm install --save-dev url-loader
进行配置
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
//当加载的图片,小于limit时,会将图片编译成base64字符串形式,不会形成一个新的文件
//当大于限制,要使用file-loader,会形成一个新文件
limit: 8192,
name: "img/[name].[hash:8].[ext]" //指定生成的文件夹和命名
}
}
]
}
字符串形式请求的url
当图片的大小大于限制的时候,就不是编译成Base64字符串的形式放到打包js文件中了,而是重新生成一个文件。此时要引入file-loader依赖
引入file-loader依赖
npm install --save-dev file-loader #引入file-loader依赖
图片形成一个文件后放到dist文件夹中,但是请求的路径不包含dist
解决:指定一个前缀
形成一个图片后,默认是放在dist文件夹下,而且是用32位的hash值进行存储的,太乱了
解决:指定命名规则
文件格式请求的url
引入依赖
npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
配置
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
}
在js中使用vue
//使用vue进行开发
import Vue from "vue"
const app=new Vue({
el: "#app",
data: {
message: "Hello world"
}
})
这个错误说的是我们使用的是runtime-only版本的Vue,什么意思呢?
这里我只说解决方案:Vue不同版本构建,后续我具体讲解runtime-only和runtime-compiler的区别。
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
如果在之后的开发中,你依然使用template,就需要选择Runtime-Compiler(左图)
如果你之后的开发中,使用的是.vue文件夹开发,那么可以选择Runtime-only(有右图)
我们需要先理解Vue应用程序是如何运行起来的。
Vue中的模板如何最终渲染成真实DOM。
我们来看下面的一幅图。
使用Runtime-only直接省掉了前两步,性能更高,代码更少
引入依赖
npm install vue-loader vue-template-compiler --save-dev
配置
一定要记得配置插件
const path=require('path');
const { VueLoaderPlugin } = require('vue-loader')
module.exports={
entry: './src/main.js',
output:{
path: path.resolve(__dirname,'dist'), //动态获取路径
filename: 'bundle.js',
publicPath: 'dist/'
},
plugins: [
// make sure to include the plugin for the magic
new VueLoaderPlugin(),
],
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
}
记得加上.vue后缀
loader主要用于转换某些类型的模块,它是一个转换器。
plugin是插件,它是对webpack本身的扩展,是一个扩展器。
效果
引入依赖
npm install html-webpack-plugin --save-dev
配置
此时可以将之前用于改正打包的图片文件的路径写的publicPath进行删除了,因为此刻html也已经打包了。
此时也不需要引入任何的script文件,因为打包后会自动引入
引入依赖
npm install [email protected] --save-dev
配置插件
效果
引入依赖
npm install --save-dev [email protected]
配置文件
devserver也是作为webpack中的一个选项,选项本身可以设置如下属性:
contentBase:为哪一个文件夹提供本地服务,默认是根文件夹,我们这里要填写./dist
port:端口号
inline:页面实时刷新
historyApiFallback:在SPA页面中,依赖HTML5的history模式
配置脚本
open:是指运行后立马打开网页
我们的devServer只在开发时使用,而在部署时不需要这个配置
而我们的js压缩只在项目部署时使用,而在开发时不需要使用
下载webpack的配置文件合并依赖
npm install webpack-merge
创建build文件夹,里面放三个配置文件
记得修改导出的文件名,不是dist,而是
../dist
const path=require('path'); //通过这个参数可以获取该项目的路径
const { VueLoaderPlugin } = require('vue-loader'); //可以使用VueLoaderPlugin
const webpack=require("webpack"); //可以使用版权插件
const HtmlWebpackPlugin=require("html-webpack-plugin"); //html打包插件
const UglifyjsWebpackPlugin=require("uglifyjs-webpack-plugin"); //压缩js的插件
module.exports={
entry: './src/main.js',
output:{
path: path.resolve(__dirname,'../dist'), //动态获取路径
filename: 'bundle.js',
// publicPath: 'dist/'
},
plugins: [
// make sure to include the plugin for the magic
new VueLoaderPlugin(), //vue-template-compiler的插件,必须要有
new webpack.BannerPlugin("该版权归codekiller所有"), //版权的插件
new HtmlWebpackPlugin({
template: 'index.html' //以index.html为模板进行打包
}), //html打包插件
// new UglifyjsWebpackPlugin() //压缩js的插件,开发阶段不要使用
],
module: {
rules: [
{
test: /\.css$/,
//css-loacder只负责将css文件进行加载
//style-loader负责将样式添加到DOM中
//使用多个
use: [ 'style-loader','css-loader' ]
},
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
//当加载的图片,小于limit时,会将图片编译成base64字符串形式,不会形成一个新的文件
//当大于限制,要使用file-loader,会形成一个新文件
limit: 8192,
name: "img/[name].[hash:8].[ext]"
}
}
]
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
},
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
//开发阶段使用,打包就不需要了
// devServer: {
// contentBase: "./dist", //内容的目录
// inline: true, //实时监听
// // port: 8080 //默认在8080端口
// // historyApiFallback: //在SPA页面中,依赖HTML5的history模式
// }
}
const webpackMerge=require("webpack-merge");
const baseConfig=require("./base,config");
//进行合并
module.exports=webpackMerge(baseConfig,{
//开发阶段使用,打包就不需要了
devServer: {
contentBase: "./dist", //内容的目录
inline: true, //实时监听
// port: 8080 //默认在8080端口
// historyApiFallback: //在SPA页面中,依赖HTML5的history模式
}
})
const UglifyjsWebpackPlugin=require("uglifyjs-webpack-plugin"); //压缩js的插件
const webpackMerge=require("webpack-merge");
const baseConfig=require("./base,config");
//进行合并
module.exports=webpackMerge(baseConfig,{
plugins: [
new UglifyjsWebpackPlugin() //压缩js的插件,开发阶段不要使用
]
})
使用前提:
npm install webpack -g
安装脚手架
npm install -g @vue/cli
初始化项目
vue init webpack my-project #vue cli2
vue create my-project #vue cli3/4
vue init webpack my-project #vue cli2
选择配置
目录结构
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NvCC00Im-1595218176399)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20200512162306269.png)]
vue create my-project #vue cli3/4
选择配置
删除预处理(preset)
删掉就可以了
别名问题
https://blog.csdn.net/qq_44766883/article/details/106108615
现在我们来实现这样一个功能:
一个页面,包含登录和注册,点击不同按钮,实现登录和注册页切换:
为了让接下来的功能比较清晰,我们先新建一个文件夹:src
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<span>登录span>
<span>注册span>
<hr/>
<login-frame>login-frame>
<register-frame>register-frame>
div>
body>
<script src="../node_modules/vue/dist/vue.js">script>
<script src="js/login.js">script>
<script src="js/register.js">script>
<script>
const app=new Vue({
el: "#app",
components: {
loginFrame, //如果组件名和标签名一样,那么可以省略
registerFrame
}
});
script>
html>
HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的命名需要使用其等价的 kebab-case (短横线分隔命名) 命名
即本例中的loginFrame: login-frame
接下来我们来实现登录组件,以前我们都是写在一个文件中,但是为了复用性,开发中都会把组件放入独立的JS文件中,我们在src下新建一个user目录以及在下面创建login.js及register.js:
编写组件,这里我们只写模板,不写功能。
login.js内容如下:
const loginFrame={ //组件template中只能有一个根标签
template:`
登录页
用户名:
密 码:
`,
}
register.js内容:
const registerFrame={
template:` //组件内只能有一个根标签
注册页
用 户 名:
密 码:
确认密码:
`,
}
它叫“半角空格”,全称是En Space,en是字体排印学的计量单位,为em宽度的一半。根据定义,它等同于字体度的一半(如16px字体中就是8px)。名义上是小写字母n的宽度。此空格传承空格家族一贯的特性:透明的,此空格有个相当稳健的特性,就是其占据的宽度正好是1/2个中文宽度,而且基本上不受字体影响。
它叫“全角空格”,全称是Em Space,em是字体排印学的计量单位,相当于当前指定的点数。例如,1 em在16px的字体中就是16px。此空格也传承空格家族一贯的特性:透明的,此空格也有个相当稳健的特性,就是其占据的宽度正好是1个中文宽度,而且基本上不受字体影响。
问题
我们期待的是,当点击登录或注册按钮,分别显示登录页或注册页,而不是一起显示。
但是,如何才能动态加载组件,实现组件切换呢?
虽然使用原生的Html5和JS也能实现,但是官方推荐我们使用vue-router模块。
使用vue-router和vue可以非常方便的实现 复杂单页应用的动态路由功能。
官网:https://router.vuejs.org/zh-cn/
使用npm安装:npm install vue-router
在index.html中引入依赖:
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="../node_modules/vue-router/dist/vue-router.js"></script>
新建vue-router对象,并且指定路由规则:
const router=new VueRouter({
routes: [
{
path: "/login", //路由路径,必须以/开头
component: loginFrame // 组件名称
},
{
path: "/register",
component: registerFrame
}
]
});
const app=new Vue({
el: "#app",
components: {
loginFrame, //如果组件名和标签名一样,那么可以省略一个
registerFrame
},
router //引入router
});
创建VueRouter对象,并指定路由参数
routes:路由规则的数组,可以指定多个对象,每个对象是一条路由规则,包含以下属性:
记得在父组件中引入router对象
<div id="app">
<span><router-link to="/login">登录router-link>span>
<span><router-link to="/register">注册router-link>span>
<hr/>
<router-view>router-view>
div>
来指定一个锚点,当路由的路径匹配时,vue-router会自动把对应组件放到锚点位置进行渲染
指定一个跳转链接,当点击时,会触发vue-router的路由功能,路径中的hash值会随之改变注意:
单页应用中,页面的切换并不是页面的跳转。仅仅是地址最后的hash值变化。
事实上,我们总共就一个HTML:index.html
讲道理,有了路由之后,其实父组件里面都
不需要引入组件
了,直接通过路由就可以了
随着Ajax的出现, 有了前后端分离的开发模式.
后端只提供API来返回数据, 前端通过Ajax获取数据, 并且可以通过JavaScript将数据渲染到页面中.
这样做最大的优点就是前后端责任的清晰, 后端专注于数据上, 前端专注于交互和可视化上.
并且当移动端(iOS/Android)出现后, 后端不需要进行任何处理, 依然使用之前的一套API即可.
目前很多的网站依然采用这种模式开发.
其实SPA最主要的特点就是在前后端分离的基础上加了一层前端路由.
也就是前端来维护一套路由规则.
URL的hash也就是锚点(#), 本质上是改变window.location的href属性.
我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新
history接口是HTML5新增的, 它有五种模式改变URL而不刷新页面.
history.pushState()
history.replaceState()
history.go()
因为 history.back() 等价于 history.go(-1)
history.forward() 则等价于 history.go(1)
这三个接口等同于浏览器界面的前进后退。
我们前面说过改变路径的方式有两种:
默认情况下, 路径的改变使用的URL的hash.
如果希望使用HTML5的history模式, 非常简单, 进行如下配置即可
在前面的
replace
: replace不会留下history记录, 所以指定replace的情况下, 后退键返回不能返回到上一个页面中
active-class
: 当
在进行高亮显示的导航菜单或者底部tabbar时, 会使用到该类.
但是通常不会修改类的属性, 会直接使用默认的router-link-active即可.
有时候, 页面的跳转可能需要执行对应的JavaScript代码, 这个时候, 就可以使用第二种跳转方式了
比如, 我们将代码修改如下:
在某些情况下,一个页面的path路径可能是不确定的,比如我们进入用户界面时,希望是如下的路径:
/user/aaaa或/user/bbbb
除了有前面的/user之外,后面还跟上了用户的ID
这种path和Component的匹配关系,我们称之为动态路由(也是路由传递数据的一种方式)。
跳转
编写路由
跳转所到界面。通过$route可以获取后面的参数值
效果
官方给出了解释:
当打包构建应用时,Javascript 包会变得非常大,影响页面加载。
如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了
官方在说什么呢?
首先, 我们知道路由中通常会定义很多不同的页面.
这个页面最后被打包在哪里呢? 一般情况下, 是放在一个js文件中.
但是, 页面这么多放在一个js文件中, 必然会造成这个页面非常的大.
如果我们一次性从服务器请求下来这个页面, 可能需要花费一定的时间, 甚至用户的电脑上还出现了短暂空白的情况.
如何避免这种情况呢? 使用路由懒加载就可以了.
路由懒加载做了什么?
路由懒加载的主要作用就是将路由对应的组件打包成一个个的js代码块.
只有在这个路由被访问到的时候, 才加载对应的组件
结合Vue的异步组件和Webpack的代码分析.
const Home = resolve => { require.ensure(['../components/Home.vue'], () => { resolve(require('../components/Home.vue')) })};
AMD写法
const About = resolve => require(['../components/About.vue'], resolve);
const Home = () => import('../components/Home.vue')
嵌套路由是一个很常见的功能
比如在home页面中, 我们希望通过/home/news和/home/message访问一些内容.
一个路径映射一个组件, 访问这两个路径也会分别渲染两个组件.
路径和组件的关系如下:
定义两个组件
编写路由
路有点击
效果
配置路由格式: /router/:id
传递的方式: 在path后面跟上对应的值
传递后形成的路径: /router/123, /router/abc
例子,跳转
配置路由格式: /router, 也就是普通配置
传递的方式: 对象中使用query的key作为传递方式
传递后形成的路径: /router?id=123, /router?id=abc
发送请求
路由
跳转的组件
效果
$route和$router是有区别的
$router为VueRouter实例,想要导航到不同URL,则使用$router.push方法
$route为当前router跳转对象里面可以获取name、path、query、params等
其中params为params类型的请求参数
query为query类型的请求参数
一切组件都继承自vue的原型
们来考虑一个需求: 在一个SPA应用中, 如何改变网页的标题呢?
网页标题是通过
但是我们可以通过JavaScript来修改
那么在Vue项目中, 在哪里修改? 什么时候修改比较合适呢?
普通的修改方式:
我们比较容易想到的修改标题的位置是每一个路由对应的组件.vue文件中.
通过mounted声明周期函数, 执行对应的代码进行修改即可.
但是当页面比较多时, 这种方式不容易维护(因为需要在多个页面执行类似的代码).
有没有更好的办法呢? 使用导航守卫即可.
什么是导航守卫?
vue-router提供的导航守卫主要用来监听监听路由的进入和离开的.
vue-router提供了beforeEach
和afterEach
的钩子函数, 它们会在路由即将改变前和改变后触发.
使用前置守卫给每个路由在跳转前加上title。
注意:因为有children,所以不要直接使用meta,而是使用matched[0].meta
你可以使用 router.beforeEach
注册一个全局前置守卫:
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于 等待中。
每个守卫方法接收三个参数:
to: Route
: 即将要进入的目标 路由对象from: Route
: 当前导航正要离开的路由next: Function
: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next
方法的调用参数。
next()
: 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。next(false)
: 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from
路由对应的地址。next('/')
或者 next({ path: '/' })
: 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。你可以向 next
传递任意位置对象,且允许设置诸如 replace: true
、name: 'home'
之类的选项以及任何用在 router-link
的 to
prop 或 router.push
中的选项。next(error)
: (2.4.0+) 如果传入 next
的参数是一个 Error
实例,则导航会被终止且该错误会被传递给 router.onError()
注册过的回调。确保要调用 next
方法,否则钩子就不会被 resolved。
你也可以注册全局后置钩子,然而和守卫不同的是,这些钩子不会接受 next
函数也不会改变导航本身:
//后置钩子(hook)
router.afterEach((to,from)=>{
console.log('-----')
})
在 2.5.0+ 你可以用 router.beforeResolve
注册一个全局守卫。这和 router.beforeEach
类似,区别是在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被调用。
{
path: '/about',
component: ()=>import("../views/About"),
meta: {
title: '关于'
},
beforeEnter: (to,from,next)=>{
console.log('beforeEnter')
next()
}
这些守卫与全局前置守卫的方法参数是一样的。
最后,你可以在路由组件内直接定义以下路由导航守卫:
beforeRouteEnter
beforeRouteUpdate
(2.2 新增)beforeRouteLeave
const Foo = {
template: `...`,
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不!能!获取组件实例 `this`
// 因为当守卫执行前,组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变,但是该组件被复用时调用
// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
}
beforeRouteEnter
守卫 不能 访问 this
,因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。
不过,你可以通过传一个回调给 next
来访问组件实例。在导航被确认的时候执行回调,并且把组件实例作为回调方法的参数。
beforeRouteEnter (to, from, next) {
next(vm => {
// 通过 `vm` 访问组件实例
})
}
注意 beforeRouteEnter
是支持给 next
传递回调的唯一守卫。对于 beforeRouteUpdate
和 beforeRouteLeave
来说,this
已经可用了,所以不支持传递回调,因为没有必要了。
beforeRouteUpdate (to, from, next) {
// just use `this`
this.name = to.params.name
next()
}
这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false)
来取消。
beforeRouteLeave (to, from, next) {
const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
if (answer) {
next()
} else {
next(false)
}
}
beforeEach
守卫。beforeRouteUpdate
守卫 (2.2+)。beforeEnter
。beforeRouteEnter
。beforeResolve
守卫 (2.5+)。afterEach
钩子。beforeRouteEnter
守卫中传给 next
的回调函数。keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。
它们有两个非常重要的属性:
include
- 字符串或正则表达,只有匹配的组件会被缓存
exclude
- 字符串或正则表达式,任何匹配的组件都不会被缓存
<keep-alive exclude="About,Home">
<router-view/>
</keep-alive>
router-view 也是一个组件,如果直接被包在 keep-alive 里面,所有路径匹配到的视图组件都会被缓存:
通过create声明周期函数来验证
不使用keep-alive,在两个组件中跳转,每次回到这个组件,就会重新创建一次,离开就销毁一次
使用keep-alive,只创建一次
我如果想重新回到该组件,还是原来的路径怎么办呢?因为我回到这个组件后,还是去到默认的组件
进行路径记录
path初始是默认路径,在进入的时候跳转到记录的path,在离开的时候记录当前的path
ps:钩子函数一定要选择正确
使用看上方
这两个函数只有使用了keep-alive才能使用
官方解释:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
它采用 集中式存储管理 应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
状态管理到底是什么?
状态管理模式、集中式存储管理这些名词听起来就非常高大上,让人捉摸不透。
其实,你可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面。
然后,将这个对象放在顶层的Vue实例中,让其他组件可以使用。
那么,多个组件是不是就可以共享这个对象中的所有变量属性了呢?
等等,如果是这样的话,为什么官方还要专门出一个插件Vuex呢?难道我们不能自己封装一个对象来管理吗?
当然可以,只是我们要先想想VueJS带给我们最大的便利是什么呢?没错,就是响应式。
如果你自己封装实现一个对象能不能保证它里面所有的属性做到响应式呢?当然也可以,只是自己封装可能稍微麻烦一些。
不用怀疑,Vuex就是为了提供这样一个在多个组件间共享状态的插件,用它就可以了。
但是,有什么状态时需要我们在多个组件间共享的呢?
如果你做过大型开放,你一定遇到过多个状态,在多个界面间的共享问题。
比如用户的登录状态、用户名称、头像、地理位置信息等等。
比如商品的收藏、购物车中的物品等等。
这些状态信息,我们都可以放在统一的地方,对它进行保存和管理,而且它们还是响应式的(待会儿我们就可以看到代码了,莫着急)。
OK,从理论上理解了状态管理之后,让我们从实际的代码再来看看状态管理。
我们先来看看但界面的状态管理吧.
我们知道,要在单个组件中进行状态管理是一件非常简单的事情
什么意思呢?我们来看下面的图片。
这图片中的三种东西,怎么理解呢?
State:不用多说,就是我们的状态。(你姑且可以当做就是data中的属性)
View:视图层,可以针对State的变化,显示不同的信息。(这个好理解吧?)
Actions:这里的Actions主要是用户的各种操作:点击、输入等等,会导致状态的改变。
写点代码,加深理解:
看下下方的代码效果, 肯定会实现吧?
在这个案例中,我们有木有状态需要管理呢?没错,就是个数counter。
counter需要某种方式被记录下来,也就是我们的State。
counter目前的值需要被显示在界面中,也就是我们的View部分。
界面发生某些操作时(我们这里是用户的点击,也可以是用户的input),需要去更新状态,也就是我们的Actions
这不就是上面的流程图了吗?
Vue已经帮我们做好了单个界面的状态管理,但是如果是多个界面呢?
多个试图都依赖同一个状态(一个状态改了,多个界面需要进行更新)
不同界面的Actions都想修改同一个状态(Home.vue需要修改,Profile.vue也需要修改这个状态)
也就是说对于某些状态(状态1/状态2/状态3)来说只属于我们某一个试图,但是也有一些状态(状态a/状态b/状态c)属于多个
试图共同想要维护的
状态1/状态2/状态3你放在自己的房间中,你自己管理自己用,没问题。
但是状态a/状态b/状态c我们希望交给一个大管家来统一帮助我们管理!!!
没错,Vuex就是为我们提供这个大管家的工具。
全局单例模式(大管家)
我们现在要做的就是将共享的状态抽取出来,交给我们的大管家,统一进行管理。
之后,你们每个试图,按照我规定好的规定,进行访问和修改等操作。
这就是Vuex背后的基本思想。
一起在来看一副官方给出的图片
当要修改state的状态时,不建议直接修改,应该经过Mutations进行修改
如果有异步请求,还要经过Actions
定义状态和方法
使用状态并进行修改
效果
有时候,我们需要从store中获取一些state变异后的状态,比如下面的Store中:
获取年龄大于22岁的
获取大于指定年龄的
定义状态和方法
使用状态并进行修改
效果
在通过mutation更新数据的时候, 有可能我们希望携带一些额外的参数
参数被称为是mutation的载荷(Payload)
Mutation中的代码:
但是如果参数不是一个呢?
比如我们有很多参数需要传递.
这个时候, 我们通常会以对象的形式传递, 也就是payload是一个对象.
这个时候可以再从对象中取出相关的信息.
如果在对象中没有定义并且初始化值的key普通操作是不能做到响应式的。
我们强调, 不要再Mutation中进行异步操作.
但是某些情况, 我们确实希望在Vuex中进行一些异步操作, 比如网络请求, 必然是异步的. 这个时候怎么处理呢?
Action类似于Mutation, 但是是用来代替Mutation进行异步操作的.
Action的基本使用代码如下:
context是什么?
context是和store对象具有相同方法和属性的对象.
也就是说, 我们可以通过context去进行commit相关的操作, 也可以获取context.state等.
但是注意, 这里它们并不是同一个对象, 为什么呢? 我们后面学习Modules的时候, 再具体说.
这样的代码是否多此一举呢?
我们定义了actions, 然后又在actions中去进行commit, 这不是脱裤放屁吗?
事实上并不是这样, 如果在Vuex中有异步操作, 那么我们就可以在actions中完成了.
使用promise
前面我们学习ES6语法的时候说过, Promise经常用于异步操作.
在Action中, 我们可以将异步操作放在一个Promise中, 并且在成功或者失败后, 调用对应的resolve或reject.
OK, 我们来看下面的代码:
Module是模块的意思, 为什么在Vuex中我们要使用模块呢?
Vue使用单一状态树,那么也意味着很多状态都会交给Vuex来管理.
当应用变得非常复杂时,store对象就有可能变得相当臃肿.
为了解决这个问题, Vuex允许我们将store分割成模块(Module), 而每个模块拥有自己的state、mutation、action、getters等
我们按照什么样的方式来组织模块呢?
案列:
注意:
在调用模块中的状态时,要加上模块的名称
$store.state.moduleA.name
在使用mutations,actions,getter时,可以直接调用,他默认是从根模块中寻找方法,找不到再到module中找
命名不要一样
- 看下代码中每一种方法的参数
为什么不用它呢?
非常好解释, 配置和调用方式等非常混乱.
编码起来看起来就非常蛋疼.
所以真实开发中很少直接使用, 而是使用jQuery-Aj
为什么不选择它呢?
为什么不选择它呢?
选择四: axios
在说明不再继续更新和维护vue-resource的同时, 作者还推荐了一个框架: axios为什么不用它呢?
功能特点:
在浏览器中发送 XMLHttpRequests 请求
在 node.js 中发送 http请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
等等
支持多种请求方式:
npm install axios --save
axios({
url: 'http://123.207.32.32:8000/home/data',
params: {
type: 'pop',
page: 1
}
}).then(res=>{
console.log(res);
})
有时候, 我们可能需求同时发送两个请求
使用axios.all, 可以放入多个请求的数组.
axios.all([]) 返回的结果是一个数组,使用 axios.spread 可将数组 [res1,res2] 展开为 res1, res2
axios.all([
axios({
url: 'http://123.207.32.32:8000/home/multidata'
}),
axios({
url: 'http://123.207.32.32:8000/home/data',
params: {
type: 'pop',
page: 1
}
})
]).then(result=>{
console.log(result[0]);
console.log(result[1]);
})
//使用axios.spread
]).then(axios.spread((res1,res2)=> {
console.log(res1);
console.log(res2);
}))
在上面的示例中, 我们的BaseURL是固定的
事实上, 在开发中可能很多参数都是固定的.
这个时候我们可以进行一些抽取, 也可以利用axiox的全局配置
axios.defaults.baseURL='http://123.207.32.32:8000'
axios.defaults.timeout=5000 //单位是毫秒
axios.defaults.withCredentials=true
为什么要创建axios的实例呢?
当我们从axios模块中导入对象时, 使用的实例是默认的实例.
当给该实例设置一些默认配置时, 这些配置就被固定下来了.
但是后续开发中, 某些配置可能会不太一样.
比如某些请求需要使用特定的baseURL或者timeout或者content-Type等.
这个时候, 我们就可以创建新的实例, 并且传入属于该实例的配置信息.
有瑕疵的封装
其实我们的instance本身就是一个Promise
export function http(config) {
const instance=axios.create({
baseUrl: 'http://123.207.32.32:8000',
timeout: 5000
})
return instance(config)
}
使用
axios提供了拦截器,用于我们在发送每次请求或者得到相应后,进行对应的处理。
如何使用拦截器呢?
请求拦截
config中一些信息不符合服务器的要求
开发一个loading组件,每次发送网络请求时,都希望在界面中显示一个请求的图标
某些网路请求(比如:登录(token),必须携带一些特殊的信息)
请求拦截中错误拦截较少,通常都是配置相关的拦截
可能的错误比如请求超时,可以将页面跳转到一个错误页面中。
响应拦截
响应的成功拦截中,主要是对数据进行过滤。
响应的失败拦截中,可以根据status判断报错的错误码,跳转到不同的错误提示页面。
官网