视频地址:https://www.bilibili.com/video/BV15741177Eh
讲师:codewhy(B站搜索)
资料:https://pan.baidu.com/s/1yBhquzLNs91-8fWFpwe4Bg
提取码:em9k
Vue简介
Vue (读音 /vjuː/,类似于 view)
Vue是一个渐进式的框架
渐进式意味着你可以将Vue作为你应用的一部分嵌入其中,带来更丰富的交互体验。如果你希望将更多的业务逻辑使用Vue实现,那么Vue的核心库以及其生态系统,比如Core+Vue-router+Vuex,可以满足你各种各样的需求。
Vue有很多特点和Web开发中常见的高级功能
解耦视图和数据
可复用的组件
前端路由技术
状态管理
虚拟DOM
Vue的安装
CDN引入
CDN全称Content Delivery Network,即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。
开发环境版本,包含有帮助的命令行警告
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
生产环境版本,优化了尺寸和速度
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
下载引入
开发环境 https://vuejs.org/js/vue.js
生产环境 https://vuejs.org/js/vue.min.js
NPM安装
在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。
# 最新稳定版$ npm install vue
命令行工具 (CLI)
Vue 提供了一个官方的 CLI,为单页面应用 (SPA) 快速搭建繁杂的脚手架。
它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验,以及生产环境可用的构建版本。
更多详情可查阅 Vue CLI 的文档。
Vue初体验
我的第一个Vue实例
<script src="../JS/vue.js"></script>
<div id="app"> {{message}}<br/>
您的年龄是{{age}},<br/>
您的住址是{{adddress}}
</div>
<script>
// let变量,const 常量
const app = new Vue({
el:"#app", //挂载要管理的元素
data:{//定义数据
message:"你好,時光!!",
age:20,
adddress:"河南商丘"
}
})
</script>
执行结果
编程范式
编程范式(Programming paradigm)是指计算机中编程的典范模式或方法。
不同的编程语言也会提倡不同的“编程范型”。一些语言是专门为某个特定的范型设计的,如Smalltalk和Java支持面向对象编程。而Haskell和Scheme则支持函数式编程。现代编程语言的发展趋势是支持多种范型,如 C#、Java 8+、Kotlin、 Scala、ES6+ 等等。
主要的编程范式有三种:命令式编程,声明式编程和函数式编程。
命令式编程
命令式编程的主要思想是关注计算机执行的步骤,即一步一步告诉计算机先做什么再做什么。
声明式编程
声明式编程是以数据结构的形式来表达程序执行的逻辑。它的主要思想是告诉计算机应该做什么,但不指定具体要怎么做。SQL 语句就是最明显的一种声明式编程的例子。
函数式编程
函数式编程和声明式编程是有所关联的,因为他们思想是一致的:即只关注做什么而不是怎么做。但函数式编程不仅仅局限于声明式编程。
函数式编程最重要的特点是“函数第一位”,即函数可以出现在任何地方,比如可以把函数作为参数传递给另一个函数,不仅如此你还可以将函数作为返回值。
Vue 列表展示
<div id="app"> <ul>
<li v-for="item in movies">《{{item}}》</li>
</ul>
</div>
<script> const app = new Vue({
el:\'#app\',
data:{
message:\'Hello world\',
movies:[\'我和我的祖国\',\'流浪地球\',\'我不是药神\',\'一分钟\',\'送你一朵小红花\']
}
})
</script>
结果是响应式的
计数器案例
<div id="app"> <h2>当前计数:{{counter}}</h2>
<button v-on:click="counter++">+</button>
<button v-on:click="counter--">-</button>
</div>
<script src="../JS/vue.js"></script>
<script>
const app = new Vue({
el:\'#app\',
data:{
counter:10
}
})
</script>
绑定函数
methods
:用于在Vue中定义方法
@click
是v-on
的语法糖,相当于v-on:click的简写,用于监听某个元素的点击事件,使用时需要指定要执行的方法,通常是methods中定义的方法。
<div id="app"> <h2>当前计数:{{counter}}</h2>
<!-- <button v-on:click="add">+</button>-->
<!-- <button v-on:click="sub">-</button>-->
<button @click="add">+</button>
<button @click="sub">_</button>
</div>
<script src="../JS/vue.js"></script>
<script>
const app = new Vue({
el:\'#app\',
data:{
counter:10
},
methods:{
add:function(){
console.log("add方法被执行了!")
this.counter++
},
sub:function(){
console.log("sub方法被执行了!")
this.counter--
}
}
})
</script>
MVVM
MVVM是什么
Model-View-ViewModel
它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自动传递给 View,即所谓的数据双向绑定。
Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层。它的核心是 MVVM 中的 VM,也就是 ViewModel。 ViewModel负责连接 View 和 Model,保证视图和数据的一致性,这种轻量级的架构让前端开发更加高效、便捷。
View层
视图层
在我们前端开发中,通常就是DOM层。
主要的作用是给用户展示各种信息。
Model层
数据层
数据可能是我们固定的死数据,更多的是来自我们服务器,从网络上请求下来的数据。
在我们计数器的案例中,就是后面抽取出来的obj,当然,里面的数据可能没有这么简单。
ViewModel层
视图模型层
视图模型层是View和Model沟通的桥梁。
一方面它实现了Data Binding,也就是数据绑定,将Model的改变实时的反应到View中
另一方面它实现了DOM Listener,也就是DOM监听,当DOM发生一些事件(点击、滚动、touch等)时,可以监听到,并在需要的情况下改变对应的Data。
计时器案例中的MVVM
Vue的options
详细介绍:https://cn.vuejs.org/v2/api/
常用选项
el
类型:string | HTMLElement
作用:决定之后Vue实例会管理哪一个DOM。
data
类型:Object | Function (组件当中data必须是一个函数)
作用:Vue实例对应的数据对象。
methods
类型:{ [key: string]: Function }
作用:定义属于Vue的一些方法,可以在其他地方调用,也可以在指令中使用。
如何区分方法与函数
方法:method
,一般定义在外部
函数:function
,一般定义在类里
Vue生命周期
生命周期:事物从诞生到消亡的整个过程
hook
:钩子,生命周期函数又称为钩子函数
创建Vue的template
File => Settings => Editor =>live Templates
模板语法
插值操作
Mustache语法(也就是双大括号{{}})
mustache语法中,不仅可以直接写变量,也可以写简单的表达式
<div id="app"> <h2>{{message}}</h2>
<h2>你好鸭,{{firstName}}</h2>
<h2>{{firstName+\' \'+lastName}}</h2>
<h2>{{firstName}} {{lastName}}</h2>
<h2>{{counter*2}}</h2>
<h2></h2>
<h2></h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:\'#app\',
data:{
message:\'Hello World\',
firstName:\'Linus\',
lastName:\'Benedict Torvalds\',
counter:100
}
})
</script>
v-once
该指令后面不需要跟任何表达式
该指令表示元素和组件只渲染一次,不会随着数据的改变而改变。
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
0
v-html
该指令后面往往会跟上一个string类型
会将string的html解析出来并且进行渲染
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
1
v-text
v-text作用和Mustache比较相似:都是用于将数据显示在界面中
v-text通常情况下,接受一个string类型
v-text 会替换标签中的所有内容
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
2
v-pre
v-pre用于跳过这个元素和它子元素的编译过程,用于显示原本的Mustache语法。
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
3
v-cloak
作用:防止直接显示未编译的Mustache标签
Vue解析之前v-cloak属性存在
Vue解析之后v-cloak属性消失
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
4
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
5
若没有v-cloak属性,页面将显示未经熏染的数据,网页前三秒种显示的内容为{{message}}
用了v-cloak属性后css样式将页面未渲染时的数据隐藏。
绑定属性
v-bind
作用:动态绑定属性(比如动态绑定a元素的href属性,img元素的src属性)
缩写::
预期:any (with argument) | Object (without argument)
参数:attrOrProp (optional)
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
6
绑定方式:对象语法
对象语法的含义是:class后面跟的是一个对象
用法一:直接通过{}绑定一个类
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
7
用法二:通过判断,传入多个值
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
8
用法三:和普通的类同时存在,并不冲突
注:如果isActive和isLine都为true,那么会有title/active/line三个类
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
9
用法四:如果过于复杂,可以放在一个methods或者computed中
注:classes是一个计算属性
# 最新稳定版$ npm install vue
0
# 最新稳定版$ npm install vue
1
# 最新稳定版$ npm install vue
2
绑定语法:数组语法
# 最新稳定版$ npm install vue
3
v-bind绑定style
对象语法
在写CSS属性名的时候,可以使用驼峰式 (fontSize)
或者用短横线分隔 (font-size,记得用单引号括起来)
# 最新稳定版$ npm install vue
4
数组语法
# 最新稳定版$ npm install vue
5
style后面跟的是一个数组类型
多个值之间用逗号分割
# 最新稳定版$ npm install vue
6
计算属性
# 最新稳定版$ npm install vue
7
# 最新稳定版$ npm install vue
8
setter和getter
每个计算属性都包含一个getter和一个setter,在上面的例子中,我们只是使用getter来读取。在某些情况下,你也可以提供一个setter方法(不常用)。在需要写setter的时候,代码如下
# 最新稳定版$ npm install vue
9
计算属性的缓存
计算属性会进行缓存,如果多次使用时,计算属性只会调用一次
Es6补充
let/var
Es5中的var没有块级作用域,Es6中的let有块级作用域
JS中使用var来声明一个变量时, 变量的作用域主要是和函数的定义有关
针对于其他块定义来说是没有作用域的,比如if/for等,这在我们开发中往往会引起一些问题
<script src="../JS/vue.js"></script>
0
const的使用
在很多语言中已经存在, 比如C/C++中, 主要的作用是将某个变量修饰为常量
使用const修饰的标识符为常量, 不可以再次赋值
当我们修饰的标识符不会被再次赋值时, 就可以使用const来保证数据的安全性
注意:在ES6开发中,优先使用const, 只有需要改变某一个标识符的时候再使用let
注意点
const修饰的标识符被赋值后不能修改(当const修饰的是一个对象时,对象内部的属性可以修改)
<script src="../JS/vue.js"></script>
1
使用const定义标识符,必须进行赋值
<script src="../JS/vue.js"></script>
2
对象增强写法
属性初始化简写
ES6之后键和值一致时可以简写
<script src="../JS/vue.js"></script>
3
方法的简写
<script src="../JS/vue.js"></script>
4
事件监听
v-on介绍
作用:绑定事件监听器
缩写:@
预期:Function | Inline Statement | Object
参数:event
下面的代码中,我们使用了v-on:click="counter++”
另外,我们可以将事件指向一个在methods中定义的函数
v-on也有对应的语法糖:v-on:click可以写成@click
<script src="../JS/vue.js"></script>
5
当方法未调用参数时方法后的()可以省略,但方法本身是需要一个参数的,这时Vue会默认将浏览器生产的event事件对象作为参数传入到方法中
如果需要同时传入某个参数,同时需要event时,可以通过$event传入事件
v-on的修饰符
Vue提供了修饰符来帮助我们方便的处理一些事件
.stop - 调用 event.stopPropagation()
.prevent - 调用 event.preventDefault()
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调
.native - 监听组件根元素的原生事件
.once - 只触发一次回调
<script src="../JS/vue.js"></script>
6
条件判断
v-if、v-else-if、v-else
这三个指令与JavaScript的条件语句if、else、else if类似
Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件
v-if的原理
v-if后面的条件为false时,对应的元素以及其子元素不会渲染。
也就是根本没有不会有对应的标签出现在DOM中。
<script src="../JS/vue.js"></script>
7
小案例
<script src="../JS/vue.js"></script>
8
v-show
v-show的用法和v-if非常相似,也用于决定一个元素是否渲染
v-if和v-show对比
v-if当条件为false时,压根不会有对应的元素在DOM中。
v-show当条件为false时,仅仅是将元素的display属性设置为none而已
开发中如何选择
当需要在显示与隐藏之间切片很频繁时,使用v-show
当只有一次切换时,通过使用v-if
v-for数组遍历
<script src="../JS/vue.js"></script>
9
组件key的属性
官方推荐我们在使用v-for
时,给对应的元素或组件添加一个:key
属性。那么,为什么需要这个属性呢?
其实这和Vue的虚拟DOM的Diff算法有关系。这里借助React\'s diff algorithm 中的一张图简单说明。
当某一层有很多相同的节点时,也就是列表节点时,假设我们想要插入一个新的节点,我们希望可以在B和C之间插入一个F。
Diff算法默认执行如下图所示,即把C跟新成F,D更新成C,E更新成D,最后在插入E,这样效率非常低。
所以我们需要使用key为每个节点做一个唯一标识,这样,Diff算法就可以正确地识别每一个节点,找到正确的位置插入新节点。
所以key的作用主要是为了高效更新虚拟DOM。
检测数组更新
因为Vue是响应式的,所以当数据发生变化时,Vue会自动检测数据变化,视图会发生对应的更新。
Vue中包含了一组观察数组编译的方法,使用它们改变数组也会触发视图的更新。
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
注意:通过索引值修改数组中的元素不会实现响应式更新
<div id="app"> {{message}}<br/>
您的年龄是{{age}},<br/>
您的住址是{{adddress}}
</div>
<script>
// let变量,const 常量
const app = new Vue({
el:"#app", //挂载要管理的元素
data:{//定义数据
message:"你好,時光!!",
age:20,
adddress:"河南商丘"
}
})
</script>
0
小案例
任务要求:点击文字后改变当前文字颜色
<div id="app"> {{message}}<br/>
您的年龄是{{age}},<br/>
您的住址是{{adddress}}
</div>
<script>
// let变量,const 常量
const app = new Vue({
el:"#app", //挂载要管理的元素
data:{//定义数据
message:"你好,時光!!",
age:20,
adddress:"河南商丘"
}
})
</script>
1
<div id="app"> {{message}}<br/>
您的年龄是{{age}},<br/>
您的住址是{{adddress}}
</div>
<script>
// let变量,const 常量
const app = new Vue({
el:"#app", //挂载要管理的元素
data:{//定义数据
message:"你好,時光!!",
age:20,
adddress:"河南商丘"
}
})
</script>
2
综合案例
任务要求:可以进行购买,移除操作,所有内容移除后显示显示无书籍,可以对价格进行计算
<div id="app"> {{message}}<br/>
您的年龄是{{age}},<br/>
您的住址是{{adddress}}
</div>
<script>
// let变量,const 常量
const app = new Vue({
el:"#app", //挂载要管理的元素
data:{//定义数据
message:"你好,時光!!",
age:20,
adddress:"河南商丘"
}
})
</script>
3
<div id="app"> {{message}}<br/>
您的年龄是{{age}},<br/>
您的住址是{{adddress}}
</div>
<script>
// let变量,const 常量
const app = new Vue({
el:"#app", //挂载要管理的元素
data:{//定义数据
message:"你好,時光!!",
age:20,
adddress:"河南商丘"
}
})
</script>
4
<div id="app"> {{message}}<br/>
您的年龄是{{age}},<br/>
您的住址是{{adddress}}
</div>
<script>
// let变量,const 常量
const app = new Vue({
el:"#app", //挂载要管理的元素
data:{//定义数据
message:"你好,時光!!",
age:20,
adddress:"河南商丘"
}
})
</script>
5
JS中的三个高阶函数
filter过滤函数
<div id="app"> {{message}}<br/>
您的年龄是{{age}},<br/>
您的住址是{{adddress}}
</div>
<script>
// let变量,const 常量
const app = new Vue({
el:"#app", //挂载要管理的元素
data:{//定义数据
message:"你好,時光!!",
age:20,
adddress:"河南商丘"
}
})
</script>
6
filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意:filter()内部返回的是布尔类型,最终返回一个检索后的新数组。
注意: filter() 不会对空数组进行检测。
注意: filter() 不会改变原始数组。
map高阶函数
<div id="app"> {{message}}<br/>
您的年龄是{{age}},<br/>
您的住址是{{adddress}}
</div>
<script>
// let变量,const 常量
const app = new Vue({
el:"#app", //挂载要管理的元素
data:{//定义数据
message:"你好,時光!!",
age:20,
adddress:"河南商丘"
}
})
</script>
7
map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。
注意: map() 不会对空数组进行检测。
注意: map() 不会改变原始数组。
reduce高阶函数
<div id="app"> {{message}}<br/>
您的年龄是{{age}},<br/>
您的住址是{{adddress}}
</div>
<script>
// let变量,const 常量
const app = new Vue({
el:"#app", //挂载要管理的元素
data:{//定义数据
message:"你好,時光!!",
age:20,
adddress:"河南商丘"
}
})
</script>
8
reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
reduce() 可以作为一个高阶函数,用于函数的 compose。
注意: reduce() 对于空数组是不会执行回调函数的。
综合使用
<div id="app"> {{message}}<br/>
您的年龄是{{age}},<br/>
您的住址是{{adddress}}
</div>
<script>
// let变量,const 常量
const app = new Vue({
el:"#app", //挂载要管理的元素
data:{//定义数据
message:"你好,時光!!",
age:20,
adddress:"河南商丘"
}
})
</script>
9
v-model
v-model作用
表单控件在实际开发中是非常常见的,特别是对于用户信息的提交,需要大量的表单,Vue中使用v-model
指令来实现表单元素的双向绑定。
案例解析
<div id="app"> <ul>
<li v-for="item in movies">《{{item}}》</li>
</ul>
</div>
0
当我们在输入框输入内容时,因为input中的v-model绑定了message,所以会实时地将输入的内容传递给message,message发生改变。当message发生改变时,又因为使用了Mustache语法,将message的值插入到DOM中,DOM会发生响应式改变。所以,通过v-model实现了数据的双向的绑定。
当然,我们还可以将v-model
用于textarea
元素的数据绑定
<div id="app"> <ul>
<li v-for="item in movies">《{{item}}》</li>
</ul>
</div>
1
v-model原理
v-model
其实是一个语法糖,它实质上包含两个操作
v-bind
绑定一个value
属性
v-on
指令为当前的元素绑定input
事件
<div id="app"> <ul>
<li v-for="item in movies">《{{item}}》</li>
</ul>
</div>
2
<div id="app"> <ul>
<li v-for="item in movies">《{{item}}》</li>
</ul>
</div>
3
v-model绑定radio
<div id="app"> <ul>
<li v-for="item in movies">《{{item}}》</li>
</ul>
</div>
4
单选框在没有绑定v-model时需要有name属性两个单选框才会互斥(即只能选择其中一个)
绑定了v-model后没有name属性两个单选框依旧可以互斥
v-model绑定checkbox
复选框分为两种情况:单个勾选框和多个勾选框
单个勾选框
v-model为布尔值
此时input的value并不形象v-model的值
多个复选框
因为可以选中多个,所以对应的data中属性是一个数组
当选中某一个时,会将input的value添加到数组中。
<div id="app"> <ul>
<li v-for="item in movies">《{{item}}》</li>
</ul>
</div>
5
v-model绑定select
和checkbox一样,select也分为单选和多选两种情况。
单选
只能选中一个值,v-model绑定的是一个值。
当选中option中的一个时,会将它对应的value赋值到mySelect中。
多选
可以选中多个值,v-model绑定的是一个数组。
当选中多个值时,会将选中的option对应的value添加到数组mySelects中。
<div id="app"> <ul>
<li v-for="item in movies">《{{item}}》</li>
</ul>
</div>
6
值绑定
值绑定即动态地给value赋值
之前都是在定义input的时候直接给定的,但是真实开发中,这些input的值可能是从网络获取或定义在data中的
所以我们可以通过v-bind:value动态的给value绑定值
<div id="app"> <ul>
<li v-for="item in movies">《{{item}}》</li>
</ul>
</div>
7
修饰符
lazy修饰符
<div id="app"> <ul>
<li v-for="item in movies">《{{item}}》</li>
</ul>
</div>
8
默认情况下,v-model是在input事件中同步输入框中的数据的。也就是说,一旦有数据发生改变,对应的data中的数据就会自动发生改变。lazy修饰符可以让数据在失去焦点或者回车时才更新。
number修饰符
<div id="app"> <ul>
<li v-for="item in movies">《{{item}}》</li>
</ul>
</div>
9
默认情况下,在输入框中无论输入的时字母还是数字,都会被当作字符串类型进行处理,但是如果我们希望处理的是数字类型,那么最好直接将内容当作数字处理。number修饰符可以将在输入框中输入的内容自动转换成数字类型。
trim修饰符
<script> const app = new Vue({
el:\'#app\',
data:{
message:\'Hello world\',
movies:[\'我和我的祖国\',\'流浪地球\',\'我不是药神\',\'一分钟\',\'送你一朵小红花\']
}
})
</script>
0
如果输入的内容首尾有很多空格,通常我们希望将其去除,trim修饰符便可以过滤内容左右两边的空格。
组件化
什么是组件化
如果我们将一个页面中所有的处理逻辑全部放在一起,处理起来就会变得非常复杂,而且不利于后续的管理以及扩展。但是,如果我们将一个页面拆分成一个个小的功能块,每个功能块完成属于自己这部分独立的功能,那么之后整个页面的管理和维护就变得非常容易了。
我们将一个完整的页面分成很多个组件,每个组件都用于实现页面的一个功能块,而每一个组件又可以进行细分。
注册组件的基本步骤
调用Vue.extend()方法创建组件构造器。
调用Vue.component()方法注册组件。
在Vue实例的作用范围内使用组件。
<script> const app = new Vue({
el:\'#app\',
data:{
message:\'Hello world\',
movies:[\'我和我的祖国\',\'流浪地球\',\'我不是药神\',\'一分钟\',\'送你一朵小红花\']
}
})
</script>
1
注册组件步骤解析
Vue.extend()
调用Vue.extend()创建的是一个组件构造器。通常在创建组件构造器时,传入template代表自定义组件的模板,该模板就是在使用到组件的地方要显示的HTML代码。事实上,这种写法在Vue2.x的文档中几乎已经看不到了,它会直接语法糖。
Vue.component()
调用Vue.component()是将组件构造器注册为一个组件,并且给它起一个组件的标签名称。需要传递两个参数
1、注册组件的标签名 2、组件构造器
在实例范围内使用组件
最后一个组件没有被渲染出来,因为它没有在实例范围内。
全局组件与局部组件
通过调用Vue.component()注册组件时,组件的注册是全局的,这意味着该组件可以在任意Vue实例范围内使用。
如果我们注册的组件是挂载在某个实例中, 那么就是一个局部组件。
父组件和子组件
组件和组件之间存在层级关系,而其中一种非常重要的关系就是父子组件的关系。
<script> const app = new Vue({
el:\'#app\',
data:{
message:\'Hello world\',
movies:[\'我和我的祖国\',\'流浪地球\',\'我不是药神\',\'一分钟\',\'送你一朵小红花\']
}
})
</script>
2
父子组件错误用法:以子标签的形式在Vue实例中使用。
因为当子组件注册到父组件的components时,Vue会编译好父组件的模块,该模板的内容已经决定了父组件将要渲染的HTML(相当于父组件中已经有了子组件中的内容了)<child-cpn></child-cpn>
是只能在父组件中被识别类似这种用法,<child-cpn></child-cpn>
是会被浏览器忽略的。
注册组件语法糖
注册全局组件
<script> const app = new Vue({
el:\'#app\',
data:{
message:\'Hello world\',
movies:[\'我和我的祖国\',\'流浪地球\',\'我不是药神\',\'一分钟\',\'送你一朵小红花\']
}
})
</script>
3
注册局部组件
<script> const app = new Vue({
el:\'#app\',
data:{
message:\'Hello world\',
movies:[\'我和我的祖国\',\'流浪地球\',\'我不是药神\',\'一分钟\',\'送你一朵小红花\']
}
})
</script>
4
模板的分离写法
语法糖简化了Vue组件的注册过程,另外还有一个地方的写法比较麻烦,就是template模块写法。如果能将其中的HTML分离出来写,然后挂载到对应的组件上,必然结构会变得非常清晰。
Vue提供了两种方案来定义HTML模块内容:
使用<script>
标签
<script> const app = new Vue({
el:\'#app\',
data:{
message:\'Hello world\',
movies:[\'我和我的祖国\',\'流浪地球\',\'我不是药神\',\'一分钟\',\'送你一朵小红花\']
}
})
</script>
5
使用<template>
标签
<script> const app = new Vue({
el:\'#app\',
data:{
message:\'Hello world\',
movies:[\'我和我的祖国\',\'流浪地球\',\'我不是药神\',\'一分钟\',\'送你一朵小红花\']
}
})
</script>
6
组件数据存放
组件不能访问Vue实例中的数据
<script> const app = new Vue({
el:\'#app\',
data:{
message:\'Hello world\',
movies:[\'我和我的祖国\',\'流浪地球\',\'我不是药神\',\'一分钟\',\'送你一朵小红花\']
}
})
</script>
7
以上代码使用组件去访问定义在Vue实例中的message,结果并没有渲染出来任何数据。
组件是一个单独模块功能的封装,这个模块有属于自己的HTML模板,也应该有属于自己的data属性。
组件中的数据存放
组件对象也有一个data属性(也可以有methods等属性),只是这个data属性必须是一个函数,而且这个函数返回一个对象,对象内部保存着数据。
<script> const app = new Vue({
el:\'#app\',
data:{
message:\'Hello world\',
movies:[\'我和我的祖国\',\'流浪地球\',\'我不是药神\',\'一分钟\',\'送你一朵小红花\']
}
})
</script>
8
组件内的data是函数的原因
<script> const app = new Vue({
el:\'#app\',
data:{
message:\'Hello world\',
movies:[\'我和我的祖国\',\'流浪地球\',\'我不是药神\',\'一分钟\',\'送你一朵小红花\']
}
})
</script>
9
obj对象被单独抽离,意味着上面使用的都是同一个obj,那么,其中的一个组件修改了counter,其他组件的counter值也会发生改变。
Vue让每个组件对象都返回一个新的对象,因为如果是同一个对象的,组件在多次使用后会相互影响。
父子组件之间的通讯
我们知道子组件是不能引用父组件或者Vue实例中的数据的,但是在开发中往往有一些数据需要从上层传递到下层,比如在一个页面中,我们从服务器请求到了很多的数据。其中有一部分数据并非整个页面的父组件展示,而是需要下面的子组件进行展示。这个时候,并不会让子组件再次发送一个网络请求,而是直接让父组件将数据传递给子组件。那么,如何进行父子组件间的通信呢?Vue官方提供了通过props向子组件传递数据和通过事件向父组件发送消息的方式进行父子组件间的通信。在真实开发中,Vue实例与子组件的通信和父组件与子组件的通信过程是一样的。
父级向子级传递
在组件中,使用选项props来声明需要从父级接收到的数据。props的值有两种方式。
方式一:字符串数组,数组中的字符串就是传递时的名称。
<div id="app"> <h2>当前计数:{{counter}}</h2>
<button v-on:click="counter++">+</button>
<button v-on:click="counter--">-</button>
</div>
<script src="../JS/vue.js"></script>
<script>
const app = new Vue({
el:\'#app\',
data:{
counter:10
}
})
</script>
0
注意:组件内数据如果采用驼峰命名,{{}}内可以使用驼峰命名,但传递数据时需要用-拼接(不能使用大写)
如:数据totalNum 向父组件传递需要用:total-num
方式二:对象,对象可以设置传递时的类型,也可以设置默认值等。
<div id="app"> <h2>当前计数:{{counter}}</h2>
<button v-on:click="counter++">+</button>
<button v-on:click="counter--">-</button>
</div>
<script src="../JS/vue.js"></script>
<script>
const app = new Vue({
el:\'#app\',
data:{
counter:10
}
})
</script>
1
props数据验证
props除了数组之外,也可以使用对象,当需要对props进行类型等验证时就需要对象写法了。
验证支持以下数据类型
String
Number
Boolean
Array
Object
Date
Function
Symbol
<div id="app"> <h2>当前计数:{{counter}}</h2>
<button v-on:click="counter++">+</button>
<button v-on:click="counter--">-</button>
</div>
<script src="../JS/vue.js"></script>
<script>
const app = new Vue({
el:\'#app\',
data:{
counter:10
}
})
</script>
2
当我们有自定义构造函数时,验证也支持自定义的类型
<div id="app"> <h2>当前计数:{{counter}}</h2>
<button v-on:click="counter++">+</button>
<button v-on:click="counter--">-</button>
</div>
<script src="../JS/vue.js"></script>
<script>
const app = new Vue({
el:\'#app\',
data:{
counter:10
}
})
</script>
3
子级向父级传递
子组件传递数据或事件到父组件中需要使用自定义事件来完成,v-on不仅可以用于监听DOM事件,还可以用于组件间的自定义事件。
自定义事件的流程
在子组件中,通过$emit()触发事件。
在父组件中,通过v-on来监听子组件事件。
父子组件通讯之双向绑定
任务要求:实现组件间数据双向绑定,并且第一个输入框数值始终是第二个输入框数值的100倍
<div id="app"> <h2>当前计数:{{counter}}</h2>
<button v-on:click="counter++">+</button>
<button v-on:click="counter--">-</button>
</div>
<script src="../JS/vue.js"></script>
<script>
const app = new Vue({
el:\'#app\',
data:{
counter:10
}
})
</script>
4
watch实现
watch用于监听data中的数据
<div id="app"> <h2>当前计数:{{counter}}</h2>
<button v-on:click="counter++">+</button>
<button v-on:click="counter--">-</button>
</div>
<script src="../JS/vue.js"></script>
<script>
const app = new Vue({
el:\'#app\',
data:{
counter:10
}
})
</script>
5
父子组件的访问方式:$children
有时候我们需要父组件直接访问子组件,子组件直接访问父组件,或者是子组件访问根组件。
父组件访问子组件:使用$children
或$refs
子组件访问父组件:使用$parent
我们先来看下$children
的访问
this.$children
是一个数组类型,它包含所有子组件对象。
我们这里通过一个遍历,取出所有子组件的message状态。
还可以这么用
<div id="app"> <h2>当前计数:{{counter}}</h2>
<button v-on:click="counter++">+</button>
<button v-on:click="counter--">-</button>
</div>
<script src="../JS/vue.js"></script>
<script>
const app = new Vue({
el:\'#app\',
data:{
counter:10
}
})
</script>
6
父子组件的访问方式: $refs
$children的缺陷
通过$children
访问子组件时,是一个数组类型,访问其中的子组件必须通过索引值。但是当子组件过多又需要拿到其中一个时,往往不能确定它的索引值,甚至还可能会发生变化。有时候,我们想明确获取其中一个特定的组件,这个时候就可以使用$refs
$refs的使用
$refs
和ref
指令通常是一起使用的。
首先,我们通过ref给某一个子组件绑定一个特定的ID。
其次,通过this.$refs.ID就可以访问到该组件了。
<div id="app"> <h2>当前计数:{{counter}}</h2>
<button v-on:click="counter++">+</button>
<button v-on:click="counter--">-</button>
</div>
<script src="../JS/vue.js"></script>
<script>
const app = new Vue({
el:\'#app\',
data:{
counter:10
}
})
</script>
7
<div id="app"> <h2>当前计数:{{counter}}</h2>
<button v-on:click="counter++">+</button>
<button v-on:click="counter--">-</button>
</div>
<script src="../JS/vue.js"></script>
<script>
const app = new Vue({
el:\'#app\',
data:{
counter:10
}
})
</script>
8
插槽slot
插槽的目的是让我们原来的设备具备更多的扩展性。
封装:抽取共性,保留不同
基本使用
<div id="app"> <h2>当前计数:{{counter}}</h2>
<button v-on:click="counter++">+</button>
<button v-on:click="counter--">-</button>
</div>
<script src="../JS/vue.js"></script>
<script>
const app = new Vue({
el:\'#app\',
data:{
counter:10
}
})
</script>
9
使用方法:在组件内使用<slot></slot>
标签预留要插入的元素
可以为插槽添加默认值,如<slot><button>按钮</button></slot>
,若插槽处未添加元素则显示默认元素,若插入其他元素则显示插入的元素。
如果一个插槽内放入多个元素都将会显示。
具名插槽
当子组件的功能复杂时,子组件的插槽可能并非只有一个,比如我们封装一个导航栏的子组件,可能就需要三个插槽,分别代表左边、中间、右边。那么,外面在给插槽插入内容时,如何区分插入的是哪一个呢?这个时候,我们就需要给插槽起一个名字,也就是使用具名插槽。
如何使用具名插槽呢,非常简单,只要给slot元素一个name属性即可。
<slot name=\'myslot\'></slot>
我们来给出一个案例,这里我们先不对导航组件做非常复杂的封装,先了解具名插槽的用法。
注意:如果没有name属性作为标识,会将所有插槽进行替换
2.6.0版本后slot 用v-slot代替且需要被template
标签包裹
<div id="app"> <h2>当前计数:{{counter}}</h2>
<!-- <button v-on:click="add">+</button>-->
<!-- <button v-on:click="sub">-</button>-->
<button @click="add">+</button>
<button @click="sub">_</button>
</div>
<script src="../JS/vue.js"></script>
<script>
const app = new Vue({
el:\'#app\',
data:{
counter:10
},
methods:{
add:function(){
console.log("add方法被执行了!")
this.counter++
},
sub:function(){
console.log("sub方法被执行了!")
this.counter--
}
}
})
</script>
0
作用域插槽
编译作用域
在真正学习插槽之前,我们需要先理解一个概念:编译作用域。
官方对于编译的作用域解析比较简单,我们通过一个例子来理解这个概念
我们来考虑下面的代码是否最终是否可以渲染出来
<my-cpn v-show="isShow"></my-cpn>
中,我们使用了isShow属性。
isShow属性包含在组件中,也包含在Vue实例中。
答案:最终可以渲染出来,也就是使用的是Vue实例的属性。
官方给出了一条准则:父组件模板的所有东西都会在父级作用域内编译;子组件模板的所有东西都会在子级作用域内编译。
而我们在使用<my-cpn v-show="isShow"></my-cpn>
的时候,整个组件的使用过程是相当于在父组件中出现的,那么他的作用域就是父组件,使用的属性也是属于父组件的属性。因此,isShow使用的是Vue实例中的属性,而不是子组件的属性。组件属性作用域在实例内生效,组件模板作用域在组件内生效。
作用域插槽使用
<div id="app"> <h2>当前计数:{{counter}}</h2>
<!-- <button v-on:click="add">+</button>-->
<!-- <button v-on:click="sub">-</button>-->
<button @click="add">+</button>
<button @click="sub">_</button>
</div>
<script src="../JS/vue.js"></script>
<script>
const app = new Vue({
el:\'#app\',
data:{
counter:10
},
methods:{
add:function(){
console.log("add方法被执行了!")
this.counter++
},
sub:function(){
console.log("sub方法被执行了!")
this.counter--
}
}
})
</script>
1
最终显示结果为:Torvalds linus
注意:slot slot-scope 虽然语法依然支持,但在2.6.0版本后被弃用,推荐使用 v-slot
前端模块化
javaScript原始功能
在网页开发的早期,js制作作为一种脚本语言,做一些简单的表单验证或动画实现等,那个时候代码还是很少的。
那个时候直接将代码写在<script>
标签中即可,随着ajax异步请求的出现,慢慢形成了前后端的分离。客户端需要完成的事情越来越多,代码量也是与日俱增。为了应对代码量的剧增,通常会将代码组织在多个js文件中,进行维护。但是这种维护方式,依然不能避免一些灾难性的问题。比如全局变量同名问题。另外,这种代码的编写方式对js文件的依赖顺序几乎是强制性的。但是当js文件过多,比如有几十个的时候,弄清楚它们的顺序是一件比较困难的事情。而且即使你弄清楚顺序了,也不能避免下面出现的这种尴尬问题的发生。
小东在a.js文件中定义了一个变量flag=true,小红在b.js中也定义了一个变量flag,并且让flag=false,小东在main.js中通过flag进行一些判断,完成一些事件处理,但小东发现代码不能正常运行,反复检查自己定义的flag变量也没发现什么问题,殊不知是小红也定义了相同的flag变量影响了小东的代码。
匿名函数解决方法
我们可以使用匿名函数解决重名问题
<div id="app"> <h2>当前计数:{{counter}}</h2>
<!-- <button v-on:click="add">+</button>-->
<!-- <button v-on:click="sub">-</button>-->
<button @click="add">+</button>
<button @click="sub">_</button>
</div>
<script src="../JS/vue.js"></script>
<script>
const app = new Vue({
el:\'#app\',
data:{
counter:10
},
methods:{
add:function(){
console.log("add方法被执行了!")
this.counter++
},
sub:function(){
console.log("sub方法被执行了!")
this.counter--
}
}
})
</script>
2
使用模块作为出口
我们可以将需要暴露到外面的变量,使用一个模块作为出口,看下对应的代码:
<div id="app"> <h2>当前计数:{{counter}}</h2>
<!-- <button v-on:click="add">+</button>-->
<!-- <button v-on:click="sub">-</button>-->
<button @click="add">+</button>
<button @click="sub">_</button>
</div>
<script src="../JS/vue.js"></script>
<script>
const app = new Vue({
el:\'#app\',
data:{
counter:10
},
methods:{
add:function(){
console.log("add方法被执行了!")
this.counter++
},
sub:function(){
console.log("sub方法被执行了!")
this.counter--
}
}
})
</script>
3
我们在匿名函数内部,定义了一个对象。给对象添加各种需要暴露到外面的属性和方法(不需要暴露的直接定义即可)。最后将这个对象返回,并且在外面使用了一个MoudleA接受。接下来,我们在man.js中怎么使用呢?我们只需要使用属于自己模块的属性和方法即可。
<div id="app"> <h2>当前计数:{{counter}}</h2>
<!-- <button v-on:click="add">+</button>-->
<!-- <button v-on:click="sub">-</button>-->
<button @click="add">+</button>
<button @click="sub">_</button>
</div>
<script src="../JS/vue.js"></script>
<script>
const app = new Vue({
el:\'#app\',
data:{
counter:10
},
methods:{
add:function(){
console.log("add方法被执行了!")
this.counter++
},
sub:function(){
console.log("sub方法被执行了!")
this.counter--
}
}
})
</script>
4
这就是模块最基础的封装,事实上模块的封装还有很多高级的话题但是我们这里就是要认识一下为什么需要模块,以及模块的原始雏形。幸运的是,前端模块化开发已经有了很多既有的规范,以及对应的实现方案。
常见的模块化规范:
CommonJS、AMD、CMD,以及ES6的Modules
初识CommonJS
模块化有两个核心:导入和导出
CommonJS的导出
<div id="app"> <h2>当前计数:{{counter}}</h2>
<!-- <button v-on:click="add">+</button>-->
<!-- <button v-on:click="sub">-</button>-->
<button @click="add">+</button>
<button @click="sub">_</button>
</div>
<script src="../JS/vue.js"></script>
<script>
const app = new Vue({
el:\'#app\',
data:{
counter:10
},
methods:{
add:function(){
console.log("add方法被执行了!")
this.counter++
},
sub:function(){
console.log("sub方法被执行了!")
this.counter--
}
}
})
</script>
5
CommonJS的导入
<div id="app"> <h2>当前计数:{{counter}}</h2>
<!-- <button v-on:click="add">+</button>-->
<!-- <button v-on:click="sub">-</button>-->
<button @click="add">+</button>
<button @click="sub">_</button>
</div>
<script src="../JS/vue.js"></script>
<script>
const app = new Vue({
el:\'#app\',
data:{
counter:10
},
methods:{
add:function(){
console.log("add方法被执行了!")
this.counter++
},
sub:function(){
console.log("sub方法被执行了!")
this.counter--
}
}
})
</script>
6
Es6的导入和导出
导出(export)导入(import)
导出的基本使用
export指令用于导出变量
<div id="app"> <h2>当前计数:{{counter}}</h2>
<!-- <button v-on:click="add">+</button>-->
<!-- <button v-on:click="sub">-</button>-->
<button @click="add">+</button>
<button @click="sub">_</button>
</div>
<script src="../JS/vue.js"></script>
<script>
const app = new Vue({
el:\'#app\',
data:{
counter:10
},
methods:{
add:function(){
console.log("add方法被执行了!")
this.counter++
},
sub:function(){
console.log("sub方法被执行了!")
this.counter--
}
}
})
</script>
7
等同于
<div id="app"> <h2>当前计数:{{counter}}</h2>
<!-- <button v-on:click="add">+</button>-->
<!-- <button v-on:click="sub">-</button>-->
<button @click="add">+</button>
<button @click="sub">_</button>
</div>
<script src="../JS/vue.js"></script>
<script>
const app = new Vue({
el:\'#app\',
data:{
counter:10
},
methods:{
add:function(){
console.log("add方法被执行了!")
this.counter++
},
sub:function(){
console.log("sub方法被执行了!")
this.counter--
}
}
})
</script>
8
导出函数或类
上面我们主要变量,其实也可以输出函数或者类。
<div id="app"> <h2>当前计数:{{counter}}</h2>
<!-- <button v-on:click="add">+</button>-->
<!-- <button v-on:click="sub">-</button>-->
<button @click="add">+</button>
<button @click="sub">_</button>
</div>
<script src="../JS/vue.js"></script>
<script>
const app = new Vue({
el:\'#app\',
data:{
counter:10
},
methods:{
add:function(){
console.log("add方法被执行了!")
this.counter++
},
sub:function(){
console.log("sub方法被执行了!")
this.counter--
}
}
})
</script>
9
还可以这么写
<div id="app"> <h2>{{message}}</h2>
<h2>你好鸭,{{firstName}}</h2>
<h2>{{firstName+\' \'+lastName}}</h2>
<h2>{{firstName}} {{lastName}}</h2>
<h2>{{counter*2}}</h2>
<h2></h2>
<h2></h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:\'#app\',
data:{
message:\'Hello World\',
firstName:\'Linus\',
lastName:\'Benedict Torvalds\',
counter:100
}
})
</script>
0
export default
某些情况下,一个模块中包含某些功能,我们并不希望给这个功能命名,而且可以让导入者自己命名。这个时候可以使用export default
<div id="app"> <h2>{{message}}</h2>
<h2>你好鸭,{{firstName}}</h2>
<h2>{{firstName+\' \'+lastName}}</h2>
<h2>{{firstName}} {{lastName}}</h2>
<h2>{{counter*2}}</h2>
<h2></h2>
<h2></h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:\'#app\',
data:{
message:\'Hello World\',
firstName:\'Linus\',
lastName:\'Benedict Torvalds\',
counter:100
}
})
</script>
1
这样就可以b.js中使用了(myFunc是自定义命名,可以随便起)
<div id="app"> <h2>{{message}}</h2>
<h2>你好鸭,{{firstName}}</h2>
<h2>{{firstName+\' \'+lastName}}</h2>
<h2>{{firstName}} {{lastName}}</h2>
<h2>{{counter*2}}</h2>
<h2></h2>
<h2></h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:\'#app\',
data:{
message:\'Hello World\',
firstName:\'Linus\',
lastName:\'Benedict Torvalds\',
counter:100
}
})
</script>
2
注意:export default在同一个模块中不允许同时存在多个。
import的使用
我们使用export
指令导出模块对外提供的接口后,可以通过import
命令加载导出的模块。
首先,我们需要在HTML代码中引入两个js文件,并且类型需要设置为module。
<div id="app"> <h2>{{message}}</h2>
<h2>你好鸭,{{firstName}}</h2>
<h2>{{firstName+\' \'+lastName}}</h2>
<h2>{{firstName}} {{lastName}}</h2>
<h2>{{counter*2}}</h2>
<h2></h2>
<h2></h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:\'#app\',
data:{
message:\'Hello World\',
firstName:\'Linus\',
lastName:\'Benedict Torvalds\',
counter:100
}
})
</script>
3
import指令用于导入模块中的内容,比如a.js中的代码
<div id="app"> <h2>{{message}}</h2>
<h2>你好鸭,{{firstName}}</h2>
<h2>{{firstName+\' \'+lastName}}</h2>
<h2>{{firstName}} {{lastName}}</h2>
<h2>{{counter*2}}</h2>
<h2></h2>
<h2></h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:\'#app\',
data:{
message:\'Hello World\',
firstName:\'Linus\',
lastName:\'Benedict Torvalds\',
counter:100
}
})
</script>
4
如果我们希望一次性导入某个模块中所有的信息,可以使用*
导入模块中所有的export变量,而且通常情况下需要给*
起一个别名方便后续的使用。
<div id="app"> <h2>{{message}}</h2>
<h2>你好鸭,{{firstName}}</h2>
<h2>{{firstName+\' \'+lastName}}</h2>
<h2>{{firstName}} {{lastName}}</h2>
<h2>{{counter*2}}</h2>
<h2></h2>
<h2></h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:\'#app\',
data:{
message:\'Hello World\',
firstName:\'Linus\',
lastName:\'Benedict Torvalds\',
counter:100
}
})
</script>
5
webpack
什么是webpack
官方的解释: At its core, webpack is a static module bundler for modern JavaScript applications.
从本质上来讲,webpack是一个现代的JavaScript应用的静态模块打包工具。
我们可以从两个点来解释上面这句话:模块 和 打包
前端模块化
在ES6之前,我们要想进行模块化开发,就必须借助于其他的工具,让我们可以进行模块化开发。并且在通过模块化开发完成了项目后,还需要处理模块间的各种依赖,将其进行整合打包。而webpack其中一个核心就是可以让我们进行模块化开发,并且会帮助我们处理模块间的依赖关系。而且不仅仅是JavaScript文件,我们的CSS,图片、json文件等在webpack中都可以被当做模块来使用。这就是webpack中模块化的概念。
打包就是将webpack中的各种资源模块进行打包合并成一个或多个包(Bundle)。并且在打包的过程中,还可以对资源进行处理,比如压缩图片,将scss转成css,将ES6语法转成ES5语法,将TypeScript转成JavaScript等操作。打包的操作grunt/gulp也可以帮助我们完成。
webpack和grunt/gulp的对比
grunt/gulp的核心是Task,我们可以配置一系列的task,并且定义task要处理的事务(例如ES6、ts转化,图片压缩,scss转成css)然后让grunt/gulp来依次执行这些task,而且让整个流程自动化。所以grunt/gulp也被称为前端自动化任务管理工具。
下面的task就是将src下面的所有js文件转成ES5的语法。并且最终输出到dist文件夹中。
<div id="app"> <h2>{{message}}</h2>
<h2>你好鸭,{{firstName}}</h2>
<h2>{{firstName+\' \'+lastName}}</h2>
<h2>{{firstName}} {{lastName}}</h2>
<h2>{{counter*2}}</h2>
<h2></h2>
<h2></h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:\'#app\',
data:{
message:\'Hello World\',
firstName:\'Linus\',
lastName:\'Benedict Torvalds\',
counter:100
}
})
</script>
6
那么什么时候用grunt/gulp呢?如果你的工程模块依赖非常简单,甚至是没有用到模块化的概念。只需要进行简单的合并、压缩,使用grunt/gulp即可。但是如果整个项目使用了模块化管理,而且相互依赖非常强,我们就可以使用更加强大的webpack了。
grunt/gulp更加强调的是前端流程的自动化,模块化不是它的核心。
webpack更加强调模块化开发管理,而文件压缩合并、预处理等功能,是它附带的功能。
webpack的安装
安装webpack首先需要安装Node.js,Node.js自带了软件包管理工具npm。
查看node版本
<div id="app"> <h2>{{message}}</h2>
<h2>你好鸭,{{firstName}}</h2>
<h2>{{firstName+\' \'+lastName}}</h2>
<h2>{{firstName}} {{lastName}}</h2>
<h2>{{counter*2}}</h2>
<h2></h2>
<h2></h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:\'#app\',
data:{
message:\'Hello World\',
firstName:\'Linus\',
lastName:\'Benedict Torvalds\',
counter:100
}
})
</script>
7
全局安装webpack(以3.6.0版本为例,因为vue cli2依赖该版本)
<div id="app"> <h2>{{message}}</h2>
<h2>你好鸭,{{firstName}}</h2>
<h2>{{firstName+\' \'+lastName}}</h2>
<h2>{{firstName}} {{lastName}}</h2>
<h2>{{counter*2}}</h2>
<h2></h2>
<h2></h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:\'#app\',
data:{
message:\'Hello World\',
firstName:\'Linus\',
lastName:\'Benedict Torvalds\',
counter:100
}
})
</script>
8
局部安装webpack
<div id="app"> <h2>{{message}}</h2>
<h2>你好鸭,{{firstName}}</h2>
<h2>{{firstName+\' \'+lastName}}</h2>
<h2>{{firstName}} {{lastName}}</h2>
<h2>{{counter*2}}</h2>
<h2></h2>
<h2></h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:\'#app\',
data:{
message:\'Hello World\',
firstName:\'Linus\',
lastName:\'Benedict Torvalds\',
counter:100
}
})
</script>
9
说明:-g 代表全局安装,--save-dev 是开发是依赖,项目打包后不需要使用。
如果在终端直接执行webpack
命令,使用的是全局安装的webpack,当在package.json
中定义了scripts
时,其中包含了webpack命令,那么使用的便是是局部webpack。
webpack初体验
定义三个js文件,分别为aa.js,main.js,mathUtils.js并且main.js依赖aa.js和mathUtils.js
项目结构如下
aa.js
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
00
mathUtils.js
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
01
main.js
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
02
由于浏览器不支持CommonJs语法,所有使用webpack打包处理
使用命令 webpack ./src/main.js ./dist/bundle.js将src/main.js及其依赖文件打包到dist/bundle.js中
在index.html导入bundle.js即可使用
webpack配置
每次使用webpack的命令都需要写上入口和出口作为参数,非常麻烦
可以将这两个参数写到配置中,在运行时,直接读取
创建一个webpack.config.js文件
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
03
__dirname
(两个底线)代表当前文件夹,\'dist\'
是文件打包目录
使用npm init
生成npm包管理的文件package.json
使用npm install
安装依赖
在终端输入命令webpack
即可执行
package.json中定义启动
我们可以在package.json的scripts中定义自己的执行脚本
package.json中的scripts的脚本在执行时,会按照一定的顺序寻找命令对应的位置
首先,会寻找本地的node_modules/.bin路径中对应的命令
如果没有找到,会去全局的环境变量中寻找
执行命令:npm run build
局部安装webpack
一个项目往往依赖特定的webpack版本,全局的版本可能与这个项目的webpack版本不一致,导致打包,导包时出现问题。
通常一个项目,都有自己局部的webpack。
局部安装命令 npm install [email protected] --save-dev
使用:通过node_modules/.bin/webpack启动webpack打包
loader使用
什么是loader
loader是webpack中一个非常核心的概念。
在我们之前的实例中,主要是用webpack处理js代码,并且webpack会自动处理js之间相关的依赖。但是,在开发中我们不仅有基本的js代码,也需要加载css、图片,还包括一些高级的将ES6转成ES5代码,将TypeScript转成ES5代码,将scss、less转成css,将.jsx、.vue文件转成js文件等功能。对于webpack本身的能力来说,对于这些转化是不支持的。但给webpack扩展对应的loader就可以啦。
loader使用过程
步骤一:通过npm安装需要使用的loader
步骤二:在webpack.config.js
中的modules
关键字下进行配置。
css文件处理
项目开发过程中,我们必然需要添加很多的样式,而样式往往写到一个单独的文件中。在src目录中,创建一个css文件,其中创建一个normal.css文件。我们也可以重新组织文件的目录结构,将零散的js文件放在一个js文件夹中。
normal.css中的代码非常简单,就是将body设置为red。
但是,这个时候normal.css中的样式不会生效,因为我们没有引用它。webpack也不可能找到它,因为我们只有一个入口,webpack会从入口开始查找其他依赖的文件。
在入口文件中引用:
打包错误信息
重新打包,会出现如下错误
因为加载css文件需要有对应的loader。
安装并配置css-loader
官网地址:https://webpack.js.org/
按照官方说明配置webpack.config.js
文件
首先,你需要先安装 css-loader
:
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
04
然后把 loader 引用到你 webpack
的配置中。如下所示:
file.js
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
05
webpack.config.js
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
06
然后运行 webpack
。
但是,运行index.html,你会发现样式并没有生效。原因是css-loader只负责加载css文件,并不负责将css具体样式嵌入到文档中。我们还需要一个style-loader帮助我们处理。
安装并配置style-loader
安装 style-loader
:
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
07
配置webpack.config.js
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
08
注意:style-loader需要放在css-loader的前面。因为webpack在读取使用的loader的过程中,是按照从右向左的顺序读取的。
注意:一定要选择适当版本,版本不兼容会出现错误
webpack3.6.0版本 css-loader选择2.0.2,style-loader选择0.23.1
less文件处理
使用less文件
如果我们希望在项目中使用less、scss、stylus来写样式,webpack是否可以帮助我们处理呢?我们这里以less为例,其他也是一样的。我们还是先创建一个less文件,依然放在css文件夹中。
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
09
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
10
在main.js中使用document.writeln()
或document.write()
为页面添加内容
但是我使用这种方式失败了,所以我直接在html页面添加了文本内容:<h2>你好時光!!</h2>
重新编译报错了
因为我们需要安装less-loader
安装并配置less-loader
安装less-loader,还需要安装less,因为webpack会使用less对less文件进行编译
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
11
还需要修改对应的配置文件,添加一个rules选项,用于处理.less文件。
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
12
注意:webpack3.6.0 安装less-loader 版本为4.1.0
每次文件变更后重新编译一次,执行已配置的指令:npm run build
重新加载html页面样式加载成功。
图片文件处理
首先,在项目中加入两张图片,一张较小的图片01.jpg(小于8kb),一张较大的图片bg.jpg(大于8kb)。我们针对这两张图片进行不同的处理。
更改css中的样式
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
13
如果此时直接打包,会报错,因为缺少loader对图片进行处理。
安装并配置url-loader
我们使用url-loader对图片进行处理。
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
14
配置webpack.config.js
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
15
再次打包,背景图片就可以加载出来了,而且背景图是通过base64显示出来的。这也是limit属性的作用,当图片大小小于limit(即当前的8192)时对图片进行base64编码。
安装file-loader
我们将背景图片改成bg.jpg,重新编译运行或报错。
因为图片大小超过limit属性值时会通过file-loader进行处理。所以我们需要安装file-loader。
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
16
再次打包,就会发现dist文件夹下多了一个图片文件。
修改文件名称
我们发现webpack自动帮助我们生成一个非常长的名字,这是一个32位hash值,目的是防止名字重复。但是,真实开发中,我们可能对打包的图片名字有一定的要求,比如,将所有的图片放在一个文件夹中,跟上图片原来的名称,同时也要防止重复。所以,我们可以在options中添加上如下选项:
img:文件要打包到的文件夹。
name:获取图片原来的名字,放在该位置。
hash:8:为了防止图片名称冲突,依然使用hash,但是我们只保留8位。
ext:使用图片原来的扩展名。
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
17
但是,重新编译后图片并没有显示出来,这是因为图片使用的路径不正确。默认情况下,webpack会将生成的路径直接返回给使用者。但是,我们整个程序是打包在dist文件夹下的,所以这里我们需要在路径下再添加一个dist/
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
18
注意:并不需要配置file-loader
文件
babel的使用
ES6语法处理
如果你仔细阅读webpack打包的js文件,会发现写的ES6语法并没有转成ES5,那么就意味着可能一些对ES6还不支持的浏览器没有办法很好的运行我们的代码。如果希望将ES6的语法转成ES5,那么就需要使用babel。在webpack中,我们直接使用babel对应的loader就可以了。
安装babel-loader
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
19
配置webpack.config.js
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
20
重新打包,查看bundle.js发现其中的内容就变成了ES5的语法了。
webpack配置Vue
引入Vue.js
如果希望在项目中使用Vuejs,那么必然需要对其有依赖,所以需要先进行安装。
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
21
接下来就可以使用Vue了。
打包项目错误信息
修改完成后重新打包运行程序报错了。
这个错误说我们使用的时runtime-only版本的Vue,解决这个错误只需添加一个webpack的配置即可。
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
22
runtime-only
版本不支持含有template
的代码,包括最顶层的Vue实例模板。
el和template的区别
正常运行之后,我们来考虑另外一个问题:如果我们希望将data中的数据显示在界面中,就必须是修改index.html。如果我们后面自定义了组件,也必须修改index.html来使用组件。但是html模板在之后的开发中,我并不希望手动频繁修改,是否可以做到呢?
定义template属性:在前面的Vue实例中,我们定义了el属性,用于和index.html中的#app进行绑定,让Vue实例之后可以管理它其中的内容。这里,我们可以将div元素中的{{message}}内容删掉,只保留一个基本的id为div的元素。但是如果我依然希望在其中显示{{message}}的内容,应该怎么处理呢?
我们可以再定义一个template属性,代码如下:
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
23
重新打包,运行程序,显示一样的结果和HTML代码结构。那么,el和template模板的关系是什么呢?我们知道el用于指定Vue要管理的DOM,可以帮助解析其中的指令、事件监听等。而如果Vue实例中同时指定了template,那么template模板的内容会替换掉挂载的对应el的模板。这样做之后我们就不需要在以后的开发中再次操作index.html,只需要在template中写入对应的标签即可。
还可以将template模板中的内容进行抽离。分成三部分:template、script、style,结构就会变得非常清晰。
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
24
组件化开发引入
在外部新建一个app.js作为模板文件导出
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
25
在使用Vue实例的js文件中导入
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
26
模板内容抽离
新建一个App.vue的组件,将模板中的内容进行抽离
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
27
在使用Vue实例的js文件中导入
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
28
此时重新编译会报错,需要安装vue-loader
和vue-template-compiler
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
29
在webpack.config.js
中添加配置
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
30
安装并配置之后依然会报错,因为vue-loader
在15版本之后需要配合一个 webpack 插件才能正确使用。
有两种解决方案,可以降低vue-loader
的版本,或者安装webpack
插件
方法一:降低vue-loader版本
你可以手动更改package.json
中的vue-loadre
版本到v15以下,然后执行npm install
更新依赖
或者执行npm uninstall vue-loader
卸载原来版本,再安装一个v15以下版本的vue-loader
比如安装v14.0.0 : npm install --save-dev [email protected]
方法二:安装webpack
插件
Vue官网:https://cn.vuejs.org/
到Vue官网 => 生态系统 => 工具 => Vue Loader => 如何从v14迁移有详细的安装说明
需要在webpack.config.js
中添加如下代码
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
31
重新编译后就可以正常使用了
webpacke plugin
plugin是什么
plugin是插件的意思,通常是用于对某个现有的架构进行扩展。
webpack中的插件,就是对webpack现有功能的各种扩展,比如打包优化,文件压缩等等。
loader和plugin区别
loader主要用于转换某些类型的模块,它是一个转换器。
plugin是插件,它是对webpack本身的扩展,是一个扩展器。
plugin的使用过程
步骤一:通过npm安装需要使用的plugins(某些webpack已经内置的插件不需要安装)
步骤二:在webpack.config.js中的plugins中配置插件。
BannerPlugin
作用
为打包的文件添加版权声明。(属于webpack自带的插件)
使用方法
在webpack.config.js
中引入webpack
依赖并配置
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
32
HtmlWebpackPlugin
作用
自动生成一个index.html文件(可以指定模板来生成)
将打包的js文件,自动通过script
标签插入到body
中
安装
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
33
使用
在webpack.config.js
中引入依赖并配置plugins
内容
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
34
template
表示根据什么模板来生成html
页面。
template:\'index.html\'
表示自动在webpack.config.js
所在目录下寻找名为index.html
的页面作为模板。
注意:结合在output
中添加的publicPath
属性,否则插入的script
标签中的src
可能会有问题。
uglifyjs-webpack-plugin
作用
对打包的js文件进行压缩。
安装
此处使用1.1.1版本,和CLI2保持一致。
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
35
使用
在webpack.config.js
中引入依赖并配置plugins
内容
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
36
压缩之后的效果
此插件开发阶段不建议使用,压缩后的文件变量名会被替换为特殊字符,不利于调试。
搭建本地服务器
webpack提供了一个可选的本地开发服务器,这个本地服务器基于node.js
搭建,内部使用express
框架,
可以让浏览器自动刷新显示我们修改后的结果。
它是一个单独的模块,在webpack中使用之前需要先安装它。
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
37
devserver也是作为webpack中的一个选项,选项本身可以设置如下属性
contentBase:为哪一个文件夹提供本地服务,默认是根文件夹
port:端口号 默认为8080
inline:页面实时刷新
historyApiFallback:在SPA页面中,依赖HTML5的history模式
webpack.config.js
文件配置修改如下
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
38
因为服务并未安装到全局,所以可以找到指令所在目录运行
也可以将指令配置到package.json
中的scripts
里
还可以添加一些参数 --open会自动在浏览器打开,不添加--open参数会返回服务的地址
使用npm run dev
运行服务
终止命令:ctrl+c
此插件仅用于开发阶段,生产阶段并不需要
webpack配置分离
我们可以将webpack.config.js
中的配置分离出来,可分为三部分:开发阶段和生产阶段都要用到的基础配置(本例中为base.config.js),开发阶段用到的配置(本例中为dev.config.js)和生产阶段用到的配置(本例中为prod.config.js)
安装webpack-merge
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
39
使用时导入依赖
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
40
base.config.js
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
41
dev.config.js
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
42
prod.config.js
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
43
将配置文件分离后,删除原来的webpack.config.js
,运行之前配置好的指令会报错。
因为我们需要为package.json
中的指令指明分离出来的配置文件路径。
设置好路径之后指令就可以正常运行了
注意:原来的webpack.config.js
配置文件在根目录,编译时将文件打包到根目录的dist文件夹内
现将配置文件抽离到了根目录下的build文件夹内,所以需要重新修改编译时的打包路径
Vue CLI
如果你只是简单地写几个简单的demo程序,那么你不需要CLI
如果你要开发大型项目,那么你必须要使用Vue CLI
使用Vue.js开发大型应用时,我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。
如果每个项目都要手动完成这些工作,效率比较低效,所以通常我们会使用一些脚手架工具来帮助完成这些事情。
CLI是什么
CLI是Command-Line Interface, 翻译为命令行界面,俗称脚手架。
Vue CLI是一个官方发布 vue.js 项目脚手架。
使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置。
Vue CLI使用前提
前提一:NodeJs
安装NodeJS
网址: http://nodejs.cn/download/
检测安装的版本
默认情况下自动安装Node和NPM
Node环境要求8.9以上或者更高版本
使用命令node -v
查看当前Node版本
什么是NPM
NPM的全称是 Node Package Manager
是一个NodeJS包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准。
可以使用NPM安装一些开发过程中需要的依赖包.
cnpm
由于国内直接使用 npm 的官方镜像非常慢,推荐使用淘宝 NPM 镜像。
可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
44
这样就可以使用 cnpm 命令来安装模块了
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
45
前提二:webpack
Vue.js官方脚手架工具使用了webpack模板
对所有的资源进行压缩等优化操作
它在开发过程中提供了一套完整的功能,能够使开发过程变得高效。
Webpack的全局安装
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
46
Vue CLI的使用
安装Vue脚手架
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
47
查看当前版本: vue --version
拉取 2.x 模板 (旧版本)
Vue CLI >= 3 和旧版使用了相同的 vue
命令,所以 Vue CLI 2 (vue-cli
) 被覆盖了。如果你仍然需要使用旧版本的 vue init
功能,你可以全局安装一个桥接工具:
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
48
初始化项目
Vue CLI2
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
49
Vue CLI3及以上
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
50
Vue CLI2详解
初始化项目详解
初始化项目命令
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
51
初始化项目选项介绍
目录结构详解
关闭Eslint检查,将config/index.js 下的useEslint
改为false重新编译即可。
Runtime-Compiler和Runtime-only的区别
在本地初始化两个项目,一个采用runtime+compiler运行环境,一个采用runtime-only运行环境。
使用npm run dev
指令创建一个本地服务。
执行效果如下
选用两种不同的模式产生的main.js
对比
可以看出runtime-compiler模式里的Vue实例的模板和注册的组件,被一个render函数替换掉了,
这里就要说明一下template在vue内部是如何进行渲染的,下图是vue程序运行过程。
当我们把template
传给vue时,vue会将其保存至options
中,然后解析成ast(abstract syntax tree ,即抽象语法树),然后将ast编译为render函数,进而将其转为虚拟Dom树,最终渲染为真是Dom。
runtime-compiler模式下执行步骤:
template -> ast -> render -> virtual dom -> 真实Dom
runtime-only模式下执行步骤
render -> virtual dom -> 真实Dom
明显可以看出runtime-only模式执行步骤更少,执行效率更高,这也就意味着用于处理事务逻辑的代码量更少,使用runtime-only模式时,App.vue
中的template
最终会被vue-template-compiler
解析为render函数。在main.js
中使用import App from \'./App\'
引入的App并非template
而是其被解析后的render函数。
所以说,在开发中如果依然使用template,就需要选择Runtime-Compiler,如果使用.vue文件夹开发,可以选择Runtime-only
接下来简单了解一下render函数的使用。
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
52
具体可参考:https://blog.csdn.net/kkae8643150/article/details/52910389
npm run build
和 npm run dev
执行流程
npm run build
npm run dev
webpack.base.conf.js起别名
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
53
还没有评论,来说两句吧...