文章目录
watch 侦听器
1. 什么是 watch 侦听器
watch 侦听器
允许开发者监视数据的变化,从而针对数据的变化做特定的操作
。
语法格式如下:
const vm = new Vue({
el: "#app",
data: {
username: ''
},
// 所有侦听器,都应该被定义到watch节点下
watch:{
// 侦听器本质上是一个函数,要监视哪个数据的变化,就把数据名作为方法名即可
// 新值在前,旧值在后
// newVal 是变化后的值,oldVal 是变化之前的值
username(newVal, oldVal){
console.log('监听了', newVal, oldVal)
}
}
})
2. 使用 watch 检测用户名是否可用
监听 username 值的变化,并使用 axios 发起 Ajax 请求,检测当前输入的用户名是否可用:
watch:{
// 监听 username 值的变化
async username(newVal){
if(newVal === '') return
// 使用axios发起请求,判断用户名是否可用
const{data:res} = await.axios.get('https://www.escook.cn/api/finduser/' + newVal)
console.log(res)
}
}
3. immediate 选项
默认情况下,组件在初次加载完毕后不会调用 watch 侦听器。如果想让 watch 侦听器立即被调用,则需要使
用 immediate 选项。示例代码如下:
watch:{
username: {
handler: async username(newVal){
if(newVal === '') return
// handler 是固定写法,表示当 username 的值变化时,自动调用handler处理函数
const{data:res} = await.axios.get('https://www.escook.cn/api/finduser/' + newVal)
console.log(res)
},
//表示页面初次渲染好之后,就立即触发当前的侦听器
immediate: true
}
}
4. deep 选项
如果 watch 侦听的是一个对象,如果对象中的属性值发生了变化,则无法被监听到。此时需要使用 deep 选 项,代码示例如下:
const vm = new Vue({
el: "#app",
data: {
info:{ username: 'admin'}
},
watch:{
info:{
handler(newVal) {
consol.log(newVal.username)
},
deep: true
}
}
})
5. 监听对象单个属性的变化
如果只想监听对象中单个属性的变化
,则可以按照如下的方式定义 watch 侦听器:
const vm = new Vue({
el: "#app",
data: {
info:{ username: 'admin'}
},
watch:{
'info.username':{
handler(newVal) {
consol.log(newVal.username)
}
}
}
})
6. 总结
- 方法格式的监听器
- 缺点1: 无法在刚进入页面的时候,自动触发
- 对象格式的监听器
- 缺点2:如果侦听的是 一个对象,如果对象中的属性发送了变化,不会触发侦听器!
- 好处1:可用通过immediate选项,让侦听器自动触发 !
- 好处2:可用通过deep选型,让侦听器深度侦听属性的变化!
计算机属性
1. 什么是计算属性
计算属性指的是通过一系列运算
之后,最终得到一个属性值
。
这个动态计算出来的属性值
可以被模板结构或 methods 方法使用。示例代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.6.12.js"></script>
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="app">
<div>
<span>R:</span>
<input type="text" v-model.number="r">
</div>
<div>
<span>G:</span>
<input type="text" v-model.number="g">
</div>
<div>
<span>B:</span>
<input type="text" v-model.number="b">
</div>
<hr>
<!-- :style 代表的动态绑定一个样式对象,它的值是一个{} 样式对象 -->
<!-- 当前的样式对象中,只包含backgroundColor -->
<!-- 专门用户呈现颜色的 div 盒子 -->
<div class="box" :style="{ backgroundColor: rgb }">
{{ `rgb` }}
</div>
<button @click="show">按钮</button>
</div>
<script>
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
// 红色
r: 0,
// 绿色
g: 0,
// 蓝色
b: 0
},
// 所有的计算属性,都要定义在computed节点下
computed: {
// rgb 作为一个计算属性,被定义成了方法格式
// 最终,在这个方法中,要返回一个生成好的rgb(x,x,x)的字符串
rgb() {
return `rgb(${this.r},${this.g},${this.b})`
}
},
methods: {
// 点击按钮,在终端显示最新的颜色
show() {
console.log(`rgb(${this.r}, ${this.g}, ${this.b})`)
}
},
});
console.log(vm)
</script>
</body>
2. 计算属性的特点
① 虽然计算属性在声明的时候被定义为方法,但是计算属性的本质是一个属性
② 计算属性会缓存计算的结果,只有计算属性依赖的数据变化时,才会重新进行运算
vue-cli
1. 什么是单页面应用程序
单页面应用程序
(英文名:Single Page Application)简称 SPA,顾名
思义,指的是一个 Web 网站中只有唯一的一个 HTML 页面
,所有的功能
与交互都在这唯一的一个页面内完成。
2. 什么是 vue-cli
vue-cli 是 Vue.js 开发的标准工具
。它简化了程序员基于 webpack 创建工程化的 Vue 项目的过程。
引用自 vue-cli 官网上的一句话:
程序员可以专注在撰写应用上,而不必花好几天去纠结 webpack 配置的问题。
中文官网:https://cli.vuejs.org/zh/
3. 安装和使用
vue-cli 是 npm 上的一个全局包,使用 npm install 命令,即可方便的把它安装到自己的电脑上:
npm install -g @vue/cli
基于 vue-cli 快速生成工程化的 Vue 项目:
vue create 项目的名称
空格选中你要的组件
下载完成
访问localhost:8080端口
注意: 窗口在加载过程中,鼠标不要去点击,否则会暂停下载,使用ctrl+c
解决
vue项目中src目录的构成:
assets 文件夹:存放项目中用到的的静态资源 例如:css 样式表、图片资源
component 文件夹:程序员封装的、可复用的组件
main.js: 项目运行的入口,项目运行,先执行main.js
App.vue: 项目的根组件
4. vue 项目的运行流程
在工程化的项目中,vue 要做的事情很单纯:通过 main.js
把 App.vue
渲染到 index.html
的指定区域中。
其中:
① App.vue
用来编写待渲染的模板结构
② index.html
中需要预留一个 el 区域
③ main.js
把 App.vue 渲染到了 index.html 所预留的区域中
注意:$mount(‘#app’) 等同于 el: ‘#app’
vue组件
1. 什么是组件化开发
组件化开发指的是:根据封装的思想,把页面上可重用的 UI 结构封装为组件,从而方便项目的开发和维护。
2. vue 中的组件化开发
vue 是一个支持组件化开发的前端框架。
vue 中规定:组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。
3. vue 组件的三个组成部分
每个 .vue 组件都由 3 部分构成,分别是:
template
-> 组件的模板结构
script
-> 组件的JavaScript 行为
style
-> 组件的样式
其中,每个组件中必须包含 template 模板结构
,而 script 行为
和 style 样式
是可选的
组成部分。
3.1 template
vue 规定:每个组件对应的模板结构,需要定义到 节点中。
<template>
<div class="test-box">
<h3>这是自定义的vue ---- {{ username }}</h3>
<button @click="changeName">修改用户名</button>
</div>
</template>
注意:
template
是 vue 提供的容器标签
,只起到包裹性质的作用
,它不会被渲染为真正的 DOM 元素- template 中只能包含唯一的根节点
3.2 script
vue 规定:开发者可以在 script
节点中封装组件的 JavaScript 业务逻辑
。
script 节点的基本结构如下:
export default {
// .vue 组件中的data 不能像之前一样,不能指向对象;必须是一个函数。
data() {
//
return {
username: 'admin'
}
},
}
.vue 组件中的 data 必须是函数
vue 规定:.vue 组件中的 data 必须是一个函数,不能直接指向一个数据对象。
因此在组件中定义 data 数据节点时,下面的方式是错误的:
data: {
username:'xxx'
}
会导致多个组件实例共用同一份数据的问题,请参考官方给出的示例:
https://cn.vuejs.org/v2/guide/components.html#data-必须是一个函数
3.3 style
vue 规定:组件内的 style节点是可选的,开发者可以在 style 节点中编写样式美化当前组件的 UI 结构。
script 节点的基本结构如下:
4. 组件之间的父子关系
4.1 使用组件的三个步骤
4.2 通过 components 注册的是私有子组件
例如:
在组件 A
的 components 节点下,注册了组件 F
。
则组件 F 只能用在组件 A 中;不能被用在组件 C
中。
4.3 注册全局组件
在 vue 项目的 main.js
入口文件中,通过 Vue.component()
方法,可以注册全局组件。示例代码如下:
// 导入需要全局注册的组件
import Count from '@/components/Count.vue'
// 参数1:字符串格式,表示组件的 注册名称
// 参数2:需要被全局注册的那个组件
Vue.component('MyCount', Count)
5. 组件的 props
props 是组件的自定义属性
,在封装通用组件
的时候,合理地使用 props 可以极大的提高组件的复用性
!
它的语法格式如下:
export default {
// props 是自定义属性,允许使用者通过自定义属性,为当前组件指定初始值
// 自定义属性的名字,是封装者自定义的
props: ['init','aaa','bbb'],
data() {
return { }
}
}
5.1 props 是只读的
vue 规定:组件中封装的自定义属性是只读的
,程序员不能直接修改 props 的值
。否则会直接报错:
要想修改 props 的值,可以把 props 的值转存到 data 中,因为 data 中的数据都是可读可写的!
export default {
props: ['init'],
data() {
return {
count: this.init
}
}
}
5.2 props 的 default
默认值
在声明自定义属性时,可以通过 default 来定义属性的默认值。示例代码如下:
export default {
props: {
// 自定义属性 init
init: {
default: 0
}
},
}
5.3 props 的 type 值类型
在声明自定义属性时,可以通过 type 来定义属性的值类型。示例代码如下:
export default {
props: {
// 自定义属性 init
init: {
default: 0,
type: Number
}
},
}
5.4 props 的 required 必填项
在声明自定义属性时,可以通过 required 选项,将属性设置为必填项,强制用户必须传递属性的值。示例代
码如下:
export default {
props: {
// 自定义属性 init
init: {
default: 0,
type: Number,
// 必填
required: true
}
},
}
6. 组件之间的样式冲突问题
默认情况下,写在 .vue 组件中的样式会全局生效
,因此很容易造成多个组件之间的样式冲突问题
。
导致组件之间样式冲突的根本原因是:
① 单页面应用程序中,所有组件的 DOM 结构,都是基于唯一的 index.html 页面
进行呈现的
② 每个组件中的样式,都会影响整个 index.html
页面中的 DOM 元素
6.1 思考:如何解决组件样式冲突的问题
为每个组件分配唯一的自定义属性
,在编写组件样式时,通过属性选择器
来控制样式的作用域
,示例代码如下:
<template>
<div class="left-container">
<h3 data-v-001>Left 组件</h3>
</div>
</template>
<style lang="less">
/* 通过中括号 属性选择器, 来防止组件之间的 样式冲突问题,
因为每个组件分配的自定义属性是 唯一的 */
.left-container {
border:1px solid red;
}
</style>
6.2 style 节点的 scoped 属性
为了提高开发效率和开发体验,vue 为 style 节点提供了 scoped 属性,从而防止组件之间的样式冲突问题:
<template>
<div class="left-container">
<h3>Left 组件</h3>
</div>
</template>
<style scoped>
/* 通过中括号 属性选择器, 来防止组件之间的 样式冲突问题,
因为每个组件分配的自定义属性是 唯一的 */
.left-container {
border:1px solid red;
}
</style>
6.3 /deep/ 样式穿透
如果给当前组件的 style 节点添加了 scoped 属性
,则当前组件的样式对其子组件是不生效的
。如果想让某些样式对子组件生效,可以使用 /deep/ 深度选择器
。
// 不加/deep/ h5 [data-v-3c83f0b7]
// 加/deep/ [data-v-3c83f0b7] h5
// 当使用第三方组件库的时候,如果有修改第三方组件默认样式的需求,需要用到 /deep/
/deep/ h5 {
color: pink;
}
axios的基础语法
官方文档: http://www.axios-js.com/
<script src="./lib/axios.js"></script>
<script>
const result = axios({
method: 'GET',
url: ''
})
result.then(function(books){
console.log(books)
})
</script>
使用解构赋值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btnPost">发送post请求</button>
<button id="btnGet">发送get请求</button>
<script src="./lib/axios.js"></script>
<script>
document.querySelector('#btnPost').addEventListener('click', async function(){
// 如果调用某个方法的返回值是promise实例,则前面可用添加await
// await 只能用在被 async 修饰的方法中
const result = await axios({
method: 'POST',
url: '',
data:{
name:'zs',
age: 20
}
})
console.log(result)
})
document.querySelector('#btnGet').addEventListener('click', async function(){
// 解构赋值的时候,使用 :进行重命名
// 1. 调用axios之后,使用async/await 进行简化
// 2. 使用解构赋值,从axios 封装的大对象中,把data属性解构出来
// 3. 把解构出来的data属性,使用冒号进行重命名,一般都重命名为 {data:res}
const {data: res} = await axios({
method: 'GET',
url: ''
})
console.log(res.data)
})
</script>
</body>
</html>
发送get请求和post请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btnGET">GET</button>
<button id="btnPOST">POST</button>
<script src="./lib/axios.js"></script>
<script>
document.querySelector('#btnGET').addEventListener('click', async function(){
const {data:res} = await axios.get('',{
params: {id:1}
})
console.log(res.data)
})
document.querySelector('#btnPOST').addEventListener('click', async function(){
const {data:res} = await axios.post('', {
name:'zs',gender:'女'
})
console.log(res)
})
</script>
</body>
</html>