Day01
一、为什么要学习Vue
1.前端必备技能
2.岗位多,绝大互联网公司都在使用Vue
3.提高开发效率
4.高薪必备技能(Vue2+Vue3)
二、什么是Vue
概念:Vue (读音 /vjuː/,类似于 view) 是一套 **构建用户界面 ** 的 渐进式 框架
Vue2官网:https://v2.cn.vuejs.org/
操作数据的框架,并且有:
Vue核心包开发(局部开发)
Vue核心包&Vue插件&工程化(全站开发)
三、创建Vue实例
核心步骤(4步):
- 准备容器
- 引包(官网) — 开发版本/生产版本
- 创建Vue实例 new Vue()
- 指定配置项,渲染数据
- el:指定挂载点
- data提供数据
<div id="app">
<p>{{msg}}</p>
<p>{{ age>=18 ? '成年' : '未成年' }}</p>
</div>
<script src="/lib/vue.js"></script>
<script>
const app = new Vue({
el:'#app', //选择器,管理的盒子
data:{ //渲染数据
msg: '哈哈哈哈',
age:1
}
})
</script>
四、插值表达式 {{}}
插值表达式是一种Vue的模板语法
我们可以用插值表达式渲染出Vue提供的数据
1、语法:{{ 表达式 }}
五、响应式特性
响应式: 简单理解就是数据变,视图对应变。
修改: ① 访问数据: “实例.属性名” ② 修改数据: “实例.属性名”= “值”
底层:
六、Vue开发者工具安装
通过谷歌应用商店安装(国外网站)
安装之后可以F12后看到多一个Vue的调试面板
七、Vue中的常用指令
vue 中的指令按照不同的用途可以分为如下 6 大类:
-
内容渲染指令(v-html、v-text)
1、v-text(类似innerText) 使用语法:`<p v-text="uname">hello</p>`,意思是将 uame 值渲染到 p 标签中 类似 innerText,使用该语法,会覆盖 p 标签原有内容 2、v-html(类似 innerHTML) 使用语法:`<p v-html="intro">hello</p>`,意思是将 intro 值渲染到 p 标签中 类似 innerHTML,使用该语法,会覆盖 p 标签原有内容 类似 innerHTML,使用该语法,能够将HTML标签的样式呈现出来。
示例代码:
<div id="app1">
<p v-text=msg>hello</p>
<p v-html=msg1>hello</p>
</div>
<script>
const app1 = new Vue({
el:'#app1',
data: {
msg:'意思是将 msg 值渲染到 p 标签中',
msg1:'<span>意思是将 msg1 值渲染到 p 标签中(包括标签)</span>'
},
methods: {
}
})
</script>
-
条件渲染指令(v-show、v-if、v-else、v-else-if)
1、v-show :控制元素显示隐藏 语法:v-show = "表达式" 表达式值为 true 显示, false 隐藏 原理: 切换 display:none 控制显示隐藏 场景:频繁切换显示隐藏的场景 2、v-if:控制元素显示隐藏(条件渲染) 语法: v-if= "表达式" 表达式值 true显示, false 隐藏 原理: 基于条件判断,是否创建 或 移除元素节点 场景: 要么显示,要么隐藏,不频繁切换的场景 3、v-else 和 v-else-if:辅助v-if进行判断渲染 语法:v-else v-else-if="表达式"
示例代码:
<div id="app">
<div v-show='true'>v-show:表达式值为 true 显示, false 隐藏</div>
<div v-if='false'>v-if:表达式值为 true 显示, false 隐藏</div>
<div v-else-if="false">v-else-if:辅助</div>
<div v-else>v-else:辅助(前面根据v-if v-else-if 按顺序只要前面的为true了,后面的不需要看)</div>
</div>
<script>
const app = new Vue({
el:'#app', //迭代器
data:{ //数据
},
methods:{ //方法
}
})
</script>
-
事件绑定指令(v-on)
使用Vue时,如需为DOM注册事件,及其的简单,语法如下: <button v-on:事件名="内联语句">按钮</button> <button v-on:事件名="处理函数">按钮</button> <button v-on:事件名="处理函数(实参)">按钮</button> v-on:` 简写为 **@**
示例代码:
<div id="app3">
<p>{{msg}}</p>
<button v-on:click="msg++">按我+</button>
<button v-on:click="fs(5)">按我+5</button>
<button @click="msg--">按我-</button>
<script>
const app3 = new Vue({
el:'#app3' ,
data: {
msg: 15
},
methods:{
fs(index){
app3.msg+=index
}
}
})
</script>
</div>
-
属性绑定指令 (v-bind)
v-bind:动态设置html的标签属性 比如:src、url、title 语法:v-bind:属性名=“表达式”
示例代码:
<div id="app4">
<img v-bind:src="msg">
<script>
const app4 = new Vue({
el:'#app4',
data:{
msg:'./imgs/10-02.png'
},
methods:{
}
})
</script>
</div>
-
双向绑定指令(v-model)
所谓双向绑定就是: 1. 数据改变后,呈现的页面结果会更新 2. 页面结果更新后,数据也会随之而变 作用:给表单元素(input、radio、select)使用,双向绑定数据,可以快速 获取*或 设置 表单元素内容 语法:v-model="变量"
示例代码:
<div id="app5">
用户:<input type="text" v-model="user"><br>
密码:<input type="password" v-model="password">
<script>
const app5 = new Vue({
el:'#app5',
data:{
user:'',
password:''
},
methods:{
}
})
</script>
</div>
-
列表渲染指令(v-for)
v-for:用来辅助开发者基于一个数组来循环渲染一个列表结构。 语法:v-for="(value, key, index) in arr :key="item.id"" - item 是数组中的每一项 - index 是每一项的索引,不需要可以省略 - arr 是被遍历的数组 - key给列表项添加的唯一标识
<div id="app6">
<ul>
<li v-for="(item,index) in meg" :key="item.id">
<span>{{item.name}}</span>
<span>{{item.author}}</span>
<span>{{item.cont}}</span>
</li>
</ul>
</div>
<script>
const app6= new Vue({
el:'#app6',
data:{
meg:[
{id:1,name: '《红楼梦》', author: '曹雪芹',cont:130},
{id:2,name: '《西游记》', author: '吴承恩',cont:120},
{id:3,name: '《水浒传》', author: '施耐庵',cont:150}
]
},
methods:{
}
})
</script>
指令是 vue 开发中最基础、最常用、最简单的知识点。
Day02
一、今日学习目标
1.指令补充
- 指令修饰符
- v-bind对样式增强的操作
- v-model应用于其他表单元素
2.computed计算属性
- 基础语法
- 计算属性vs方法
- 计算属性的完整写法
- 成绩案例
3.watch侦听器
- 基础写法
- 完整写法
二、指令修饰符
1.什么是指令修饰符?
所谓指令修饰符就是通过“.”指明一些指令后缀 不同的后缀封装了不同的处理操作 —> 简化代码
2.按键修饰符
- @keyup.enter —>当点击enter键的时候才触发
代码演示:
<input type="text" @keyup.enter="fu()" v-model="username"> <!--按回车键会执行fu()方法-->
3.v-model修饰符
- v-model.trim —>去除首位空格
- v-model.number —>转数字
4.事件修饰符
- @事件名.stop —> 阻止冒泡
- @事件名.prevent —>阻止默认行为
- @事件名.stop.prevent —>可以连用 即阻止事件冒泡也阻止默认行为
三、v-bind对样式控制的增强-操作class
为了方便开发者进行样式控制, Vue 扩展了 v-bind 的语法,可以针对 class 类名 和 style 行内样式 进行控制 。
1.语法:
<div :class = "对象/数组">这是一个div</div>
2.对象语法
当class动态绑定的是对象时,键就是类名,值就是布尔值,如果值是true,就有这个类,否则没有这个类
<div class="box" :class="{ 类名1: 布尔值, 类名2: 布尔值 }"></div>
适用场景:一个类名,来回切换
3.数组语法
当class动态绑定的是数组时 → 数组中所有的类,都会添加到盒子上,本质就是一个 class 列表
<div class="box" :class="[ 类名1, 类名2, 类名3 ]"></div>
使用场景:批量添加或删除类
四、v-bind对有样式控制的增强-操作style
1.语法
<div class="box" :style="{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }"></div>
五、v-model在其他表单元素的使用
1.讲解内容:
常见的表单元素都可以用 v-model 绑定关联 → 快速 获取 或 设置 表单元素的值
它会根据 控件类型 自动选取 正确的方法 来更新元素
2.案例
<!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>
<style>
textarea {
display: block;
width: 240px;
height: 100px;
margin: 10px 0;
}
</style>
</head>
<body>
<div id="app">
<h3>小黑学习网</h3>
姓名:
<input type="text" v-model="username">
<br><br>
是否单身:
<input type="checkbox" v-model="isDanshen">
<br><br>
<!--
前置理解:
1. name: 给单选框加上 name 属性 可以分组 → 同一组互相会互斥
2. value: 给单选框加上 value 属性,用于提交给后台的数据
结合 Vue 使用 → v-model
-->
性别:
<input type="radio" value="1" name="gender" v-model="gender">男
<input type="radio" value="0" name="gender" v-model="gender">女
<br><br>
<!--
前置理解:
1. option 需要设置 value 值,提交给后台
2. select 的 value 值,关联了选中的 option 的 value 值
结合 Vue 使用 → v-model
-->
所在城市:
<select v-model="city">
<option value="111">北京</option>
<option value="222">上海</option>
<option value="333">成都</option>
<option value="444">南京</option>
</select>
<br><br>
自我描述:
<textarea v-model="txts"></textarea>
<button>立即注册</button>
</div>
<script src="/lib/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
username:'蔡航',
isDanshen:'',
gender:1,
city:444,
txts:'aa'
},
watch:{
username(newVlue){
console.log("变化了:"+newVlue)
}
}
})
</script>
</body>
</html>
六、computed计算属性
1.概念
基于现有的数据,计算出来的新属性。 依赖的数据变化,自动重新计算。
2.语法
- 声明在 computed 配置项中,一个计算属性对应一个函数
- 使用起来和普通属性一样使用 {{ 计算属性名}}
3.注意
- computed配置项和data配置项是同级的
- computed中的计算属性虽然是函数的写法,但他依然是个属性
- computed中的计算属性不能和data中的属性同名
- 使用computed中的计算属性和使用data中的属性是一样的用法
- computed中计算属性内部的this依然指向的是Vue实例
七、computed计算属性 VS methods方法
1.computed计算属性
作用:封装了一段对于数据的处理,求得一个结果
语法:
- 写在computed配置项中
- 作为属性,直接使用
- js中使用计算属性: this.计算属性
- 模板中使用计算属性:{{计算属性}}
2.methods计算属性
作用:给Vue实例提供一个方法,调用以处理业务逻辑。
语法:
- 写在methods配置项中
- 作为方法调用
- js中调用:this.方法名()
- 模板中调用 {{方法名()}} 或者 @事件名=“方法名”
3.计算属性的优势
-
缓存特性(提升性能)
计算属性会对计算出来的结果缓存,再次使用直接读取缓存,
依赖项变化了,会自动重新计算 → 并再次缓存
-
methods没有缓存特性
4.总结
1.computed有缓存特性,methods没有缓存
2.当一个结果依赖其他多个值时,推荐使用计算属性
3.当处理业务逻辑时,推荐使用methods方法,比如事件的处理函数
八、计算属性的完整写法
既然计算属性也是属性,能访问,应该也能修改了?
- 计算属性默认的简写,只能读取访问,不能 “修改”
- 如果要 “修改” → 需要写计算属性的完整写法
computed:{
isAll:{
get(){
return this.fruitList.every(item => item.isChecked === true)
},
set(value){
this.fruitList.forEach(item => item.isChecked = value)
}
}
}
九、watch侦听器(监视器)
1.作用:
监视数据变化,执行一些业务逻辑或异步操作
2.语法:
-
watch同样声明在跟data同级的配置项中
-
简单写法: 简单类型数据直接监视
-
完整写法:添加额外配置项
data: {
words: '苹果',
obj: {
words: '苹果'
}
},
watch: {
// 该方法会在数据变化时,触发执行
数据属性名 (newValue, oldValue) {
一些业务逻辑 或 异步操作。
},
'对象.属性名' (newValue, oldValue) {
一些业务逻辑 或 异步操作。
}
}
3、完整写法
完整写法 —>添加额外的配置项
- deep:true 对复杂类型进行深度监听
- immdiate:true 初始化 立刻执行一次
data: {
obj: {
words: '苹果',
lang: 'italy'
},
},
watch: {// watch 完整写法
对象: {
deep: true, // 深度监视
immdiate:true,//立即执行handler函数
handler (newValue) {
console.log(newValue)
}
}
}
十、综合案例
需求说明:
- 渲染功能
- 删除功能
- 修改个数
- 全选反选
- 统计 选中的 总价 和 总数量
- 持久化到本地
实现思路:
1.基本渲染: v-for遍历、:class动态绑定样式
2.删除功能 : v-on 绑定事件,获取当前行的id
3.修改个数 : v-on绑定事件,获取当前行的id,进行筛选出对应的项然后增加或减少
4.全选反选
- 必须所有的小选框都选中,全选按钮才选中 → every
- 如果全选按钮选中,则所有小选框都选中
- 如果全选取消,则所有小选框都取消选中
声明计算属性,判断数组中的每一个checked属性的值,看是否需要全部选
5.统计 选中的 总价 和 总数量 :通过计算属性来计算选中的总价和总数量
6.持久化到本地: 在数据变化时都要更新下本地存储 watch
<!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" />
<link rel="stylesheet" href="./css/inputnumber.css" />
<link rel="stylesheet" href="./css/index.css" />
<title>购物车</title>
</head>
<body>
<div class="app-container" id="app">
<!-- 顶部banner -->
<div class="banner-box"><img src="http://autumnfish.cn/static/fruit.jpg" alt="" /></div>
<!-- 面包屑 -->
<div class="breadcrumb">
<span>🏠</span>
/
<span>购物车</span>
</div>
<!-- 购物车主体 -->
<div class="main" v-if="fruitList.length>0" >
<div class="table">
<!-- 头部 -->
<div class="thead">
<div class="tr">
<div class="th">选中</div>
<div class="th th-pic">图片</div>
<div class="th">单价</div>
<div class="th num-th">个数</div>
<div class="th">小计</div>
<div class="th">操作</div>
</div>
</div>
<!-- 身体 -->
<div class="tbody">
<div class="tr" v-for="(item,index) in fruitList" :key="item.id" :class="{active:item.isChecked}">
<div class="td"><input type="checkbox" checked v-model="item.isChecked"/></div>
<div class="td"><img v-bind:src="item.icon" alt=""/></div>
<div class="td">{{item.price}}</div>
<div class="td">
<div class="my-input-number">
<button class="decrease" @click="add(item.id)" :disabled="item.num<=1"> - </button>
<span class="my-input__inner">{{item.num}}</span>
<button class="increase" @click="sub(item.id)"> + </button>
</div>
</div>
<div class="td">{{item.num * item.price}}</div>
<div class="td"><button @click="del(item.id)">删除</button></div>
</div>
</div>
</div>
<!-- 底部 -->
<div class="bottom">
<!-- 全选 -->
<label class="check-all">
<input type="checkbox" v-model="isAll"/>
全选
</label>
<div class="right-box">
<!-- 所有商品总价 -->
<span class="price-box">总价 : ¥ <span class="price">{{totalPrice}}</span></span>
<!-- 结算按钮 -->
<button class="pay">结算( {{totalCount}} )</button>
</div>
</div>
</div>
<!-- 空车 -->
<div class="empty" v-else>🛒空空如也</div>
</div>
<script src="/lib/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
// 水果列表
fruitList: JSON.parse(localStorage.getItem('list'))||[],
},
computed:{
isAll:{
get(){
return this.fruitList.every(item => item.isChecked === true)
},
set(value){
this.fruitList.forEach(item => item.isChecked = value)
}
},
// 统计选中的总数
totalCount(){
return this.fruitList.reduce((sum,item) => {
if(item.isChecked){
return sum+item.num
}else {
return sum
}
},0)
},
totalPrice(){
return this.fruitList.reduce((sum,item) => {
if(item.isChecked){
return sum+item.num*item.price
}else {
return sum
}
},0)
}
},
methods:{
del(id){
this.fruitList=this.fruitList.filter(item => item.id != id)
},
sub(id){
//根据id找到数组中的对应项
const fruit= this.fruitList.find(item => item.id === id)
fruit.num++
},
add(id){
const fruit= this.fruitList.find(item => item.id === id)
fruit.num--
}
},
watch:{
fruitList:{
deep:true,
handler(newValue) {
//需要将变化后的newValue存入本地
localStorage.setItem('list',JSON.stringify(newValue))
}
}
}
})
</script>
</body>
</html>
Day03
二、Vue生命周期
Vue生命周期:就是一个Vue实例从创建 到 销毁 的整个过程。
生命周期四个阶段:① 创建 ② 挂载 ③ 更新 ④ 销毁
1.创建阶段:创建响应式数据
2.挂载阶段:渲染模板
3.更新阶段:修改数据,更新视图
4.销毁阶段:销毁Vue实例
三、Vue生命周期钩子
Vue生命周期过程中,会自动运行一些函数,被称为【生命周期钩子】→ 让开发者可以在【特定阶段】运行自己的代码
const app = new Vue({
el: '#app',
data: {
count: 100,
title: '计数器'
},
// 1. 创建阶段(准备数据)
beforeCreate () {
console.log('beforeCreate 响应式数据准备好之前', this.count)
},
created () {
console.log('created 响应式数据准备好之后', this.count)
// this.数据名 = 请求回来的数据
// 可以开始发送初始化渲染的请求了
},
// 2. 挂载阶段(渲染模板)
beforeMount () {
console.log('beforeMount 模板渲染之前', document.querySelector('h3').innerHTML)
},
mounted () {
console.log('mounted 模板渲染之后', document.querySelector('h3').innerHTML)
// 可以开始操作dom了
},
// 3. 更新阶段(修改数据 → 更新视图)
beforeUpdate () {
console.log('beforeUpdate 数据修改了,视图还没更新', document.querySelector('span').innerHTML)
},
updated () {
console.log('updated 数据修改了,视图已经更新', document.querySelector('span').innerHTML)
},
// 4. 卸载阶段
beforeDestroy () {
console.log('beforeDestroy, 卸载前')
console.log('清除掉一些Vue以外的资源占用,定时器,延时器...')
},
destroyed () {
console.log('destroyed,卸载后')
}
})
用到的地方:
created : 可以发送请求拿取数据库数据,方便首页的渲染
mounted : 操作dom,进入网页搜索框获取焦点 document.querySelector(‘#id’).focus()
五、案例-小黑记账清单
1.需求图示:
2.需求分析
1.基本渲染
2.添加功能
3.删除功能
4.饼图渲染
3.思路分析
1.基本渲染
- 立刻发送请求获取数据 created
- 拿到数据,存到data的响应式数据中
- 结合数据,进行渲染 v-for
- 消费统计 —> 计算属性
2.添加功能
- 收集表单数据 v-model,使用指令修饰符处理数据
- 给添加按钮注册点击事件,对输入的内容做非空判断,发送请求
- 请求成功后,对文本框内容进行清空
- 重新渲染列表
3.删除功能
- 注册点击事件,获取当前行的id
- 根据id发送删除请求
- 需要重新渲染
4.饼图渲染
- 初始化一个饼图 echarts.init(dom) mounted钩子中渲染
- 根据数据试试更新饼图 echarts.setOptions({…})
4.实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- CSS only -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
/>
<style>
.red {
color: red!important;
}
.search {
width: 300px;
margin: 20px 0;
}
.my-form {
display: flex;
margin: 20px 0;
}
.my-form input {
flex: 1;
margin-right: 20px;
}
.table > :not(:first-child) {
border-top: none;
}
.contain {
display: flex;
padding: 10px;
}
.list-box {
flex: 1;
padding: 0 30px;
}
.list-box a {
text-decoration: none;
}
.echarts-box {
width: 600px;
height: 400px;
padding: 30px;
margin: 0 auto;
border: 1px solid #ccc;
}
tfoot {
font-weight: bold;
}
@media screen and (max-width: 1000px) {
.contain {
flex-wrap: wrap;
}
.list-box {
width: 100%;
}
.echarts-box {
margin-top: 30px;
}
}
</style>
</head>
<body>
<div id="app">
<div class="contain">
<!-- 左侧列表 -->
<div class="list-box">
<!-- 添加资产 -->
<form class="my-form">
<input v-model.trim="name" type="text" class="form-control" placeholder="消费名称" />
<input v-model.number="price" type="text" class="form-control" placeholder="消费价格" />
<button @click="add" type="button" class="btn btn-primary">添加账单</button>
</form>
<table class="table table-hover">
<thead>
<tr>
<th>编号</th>
<th>消费名称</th>
<th>消费价格</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in list" :key="item.id">
<td>{{ index + 1 }}</td>
<td>{{ item.name }}</td>
<td :class="{ red: item.price > 500 }">{{ item.price.toFixed(2) }}</td>
<td><a @click="del(item.id)" href="javascript:;">删除</a></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">消费总计: {{ totalPrice.toFixed(2) }}</td>
</tr>
</tfoot>
</table>
</div>
<!-- 右侧图表 -->
<div class="echarts-box" id="main"></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
/**
* 接口文档地址:
* https://www.apifox.cn/apidoc/shared-24459455-ebb1-4fdc-8df8-0aff8dc317a8/api-53371058
*
* 功能需求:
* 1. 基本渲染
* (1) 立刻发送请求获取数据 created
* (2) 拿到数据,存到data的响应式数据中
* (3) 结合数据,进行渲染 v-for
* (4) 消费统计 => 计算属性
* 2. 添加功能
* (1) 收集表单数据 v-model
* (2) 给添加按钮注册点击事件,发送添加请求
* (3) 需要重新渲染
* 3. 删除功能
* (1) 注册点击事件,传参传 id
* (2) 根据 id 发送删除请求
* (3) 需要重新渲染
* 4. 饼图渲染
* (1) 初始化一个饼图 echarts.init(dom) mounted钩子实现
* (2) 根据数据实时更新饼图 echarts.setOption({ ... })
*/
const app = new Vue({
el: '#app',
data: {
list: [],
name: '',
price: ''
},
computed: {
totalPrice () {
return this.list.reduce((sum, item) => sum + item.price, 0)
}
},
created () {
// const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {
// params: {
// creator: '小黑'
// }
// })
// this.list = res.data.data
this.getList()
},
mounted () {
this.myChart = echarts.init(document.querySelector('#main'))
this.myChart.setOption({
// 大标题
title: {
text: '消费账单列表',
left: 'center'
},
// 提示框
tooltip: {
trigger: 'item'
},
// 图例
legend: {
orient: 'vertical',
left: 'left'
},
// 数据项
series: [
{
name: '消费账单',
type: 'pie',
radius: '50%', // 半径
data: [
// { value: 1048, name: '球鞋' },
// { value: 735, name: '防晒霜' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
})
},
methods: {
async getList () {
const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {
params: {
creator: '小黑'
}
})
this.list = res.data.data
// 更新图表
this.myChart.setOption({
// 数据项
series: [
{
// data: [
// { value: 1048, name: '球鞋' },
// { value: 735, name: '防晒霜' }
// ]
data: this.list.map(item => ({ value: item.price, name: item.name}))
}
]
})
},
async add () {
if (!this.name) {
alert('请输入消费名称')
return
}
if (typeof this.price !== 'number') {
alert('请输入正确的消费价格')
return
}
// 发送添加请求
const res = await axios.post('https://applet-base-api-t.itheima.net/bill', {
creator: '小黑',
name: this.name,
price: this.price
})
// 重新渲染一次
this.getList()
this.name = ''
this.price = ''
},
async del (id) {
// 根据 id 发送删除请求
const res = await axios.delete(`https://applet-base-api-t.itheima.net/bill/${id}`)
// 重新渲染
this.getList()
}
}
})
</script>
</body>
</html>
六、工程化开发和脚手架
1.开发Vue的两种方式
-
核心包传统开发模式:基于html / css / js 文件,直接引入核心包,开发 Vue。
-
工程化开发模式:基于构建工具(例如:webpack)的环境中开发Vue。
工程化开发模式优点:提高编码效率,比如使用JS新语法、Less/Sass、Typescript等通过webpack都可以编译成浏览器识别的ES3/ES5/CSS等
工程化开发模式问题:
- webpack配置不简单
- 雷同的基础配置
- 缺乏统一的标准
为了解决以上问题,所以我们需要一个工具,生成标准化的配置
2.脚手架Vue CLI
基本介绍:
Vue CLI 是Vue官方提供的一个全局命令工具
可以帮助我们快速创建一个开发Vue项目的标准化基础架子。【集成了webpack配置】
好处:
- 开箱即用,零配置
- 内置babel等工具
- 标准化的webpack配置
使用步骤:
- 全局安装(只需安装一次即可) yarn global add @vue/cli 或者 npm i @vue/cli -g
- 查看vue/cli版本: vue --version
- 创建项目架子:vue create project-name(项目名不能使用中文)
- 启动项目:yarn serve 或者 npm run serve(命令不固定,找package.json)
七、项目目录介绍和运行流程
1.项目目录介绍
虽然脚手架中的文件有很多,目前咱们只需人事三个文件即可
- main.js 入口文件
- App.vue App根组件
- index.html 模板文件
2.运行流程
八、组件化开发
组件化:一个页面可以拆分成一个个组件,每个组件有着自己独立的结构、样式、行为。
好处:便于维护,利于复用 → 提升开发效率。
组件分类:普通组件、根组件。
比如:下面这个页面,可以把所有的代码都写在一个页面中,但是这样显得代码比较混乱,难易维护。咱们可以按模块进行组件划分
九、根组件 App.vue
1.根组件介绍
整个应用最上层的组件,包裹所有普通小组件
2.组件是由三部分构成
-
三部分构成
- template:结构 (有且只能一个根元素)
- script: js逻辑
- style: 样式 (可支持less,需要装包)
-
让组件支持less
(1) style标签,lang=“less” 开启less功能
(2) 装包: yarn add less less-loader -D 或者npm i less less-loader -D
十、普通组件的注册使用-局部注册
1.特点:
只能在注册的组件内使用
2.步骤:
- 创建.vue文件(三个组成部分)
- 在使用的组件内先导入再注册,最后使用
3.使用方式:
当成html标签使用即可 <组件名></组件名>
4.注意:
组件名规范 —> 大驼峰命名法, 如 HmHeader
5.语法:
// 导入需要注册的组件
import 组件对象 from '.vue文件路径'
import HmHeader from './components/HmHeader'
export default { // 局部注册
components: {
'组件名': 组件对象,
HmHeader:HmHeaer,
HmHeader
}
}
十一、普通组件的注册使用-全局注册
1.特点:
全局注册的组件,在项目的任何组件中都能使用
2.步骤
- 创建.vue组件(三个组成部分)
- main.js中进行全局注册
3.使用方式
当成HTML标签直接使用
<组件名></组件名>
4.注意
组件名规范 —> 大驼峰命名法, 如 HmHeader
5.语法
Vue.component(‘组件名’, 组件对象)
例:
// 导入需要全局注册的组件
import HmButton from './components/HmButton'
Vue.component('HmButton', HmButton)
Day04
一、scoped解决样式冲突
1.默认情况:
写在组件中的样式会 全局生效 → 因此很容易造成多个组件之间的样式冲突问题。
- 全局样式: 默认组件中的样式会作用到全局,任何一个组件中都会受到此样式的影响
- 局部样式: 可以给组件加上scoped 属性,可以让样式只作用于当前组件
2.代码演示
<style scoped>
.topic {
padding-top: 60px;
margin-bottom: 40px;
}
</style>`
二、data必须是一个函数
1、data为什么要写成函数
一个组件的 data 选项必须是一个函数。目的是为了:保证每个组件实例,维护独立的一份数据对象。
每次创建新的组件实例,都会新执行一次data 函数,得到一个新对象。
三、组件通信
1.什么是组件通信?
组件通信,就是指组件与组件之间的数据传递
- 组件的数据是独立的,无法直接访问其他组件的数据。
- 想使用其他组件的数据,就需要组件通信
2.组件关系分类
- 父子关系
- 非父子关系
3.父向子通信
1、在父中,先在子组件标签上,以添加属性的方式传值
< Son :title=“myTitle”>< Son>
2、在子中,使用props来接受数据
props:[‘title’]
4.子向父通信
1、在子中,使用$emit触发事件,给父组件发送消息通知
this.$emit('changeTitle,‘传智教育’)
2、在父中,监听 $emit触发的事件,并供处理函数
< Son :title=“msg” @changeTitle=“handlechange”>< /Son>
handlechange (title) {this.msg = title}
四、props校验
1.语法
props: {
校验的属性名: {
type: 类型, // Number String Boolean ...
required: true, // 是否必填
default: 默认值, // 默认值
validator (value) {
// 自定义校验逻辑
return 是否通过校验
}
}
},
2.代码实例
<script>
export default {
// 完整写法(类型、默认值、非空、自定义校验)
props: {
w: {
type: Number,
//required: true,
default: 0,
validator(val) {
// console.log(val)
if (val >= 100 || val <= 0) {
console.error('传入的范围必须是0-100之间')
return false
} else {
return true
}
},
},
},
}
</script>
3.注意
1.default和required一般不同时写(因为当时必填项时,肯定是有值的)
2.default后面如果是简单类型的值,可以直接写默认。如果是复杂类型的值,则需要以函数的形式return一个默认值
五、props&data、单向数据流
1.共同点
都可以给组件提供数据
2.区别
- data 的数据是自己的 → 随便改
- prop 的数据是外部的 → 不能直接改,要遵循 单向数据流
3.单向数据流:
父级props 的数据更新,会向下流动,影响子组件。这个数据流动是单向的(谁的数据谁负责)
六、非父子通信-event bus 事件总线
1.作用
非父子组件之间,进行简易消息传递。(复杂场景→ Vuex)
2.步骤
-
创建一个都能访问的事件总线 (空Vue实例)
import Vue from 'vue' const Bus = new Vue() export default Bus
-
A组件(接受方),监听Bus的 $on事件
created () { Bus.$on('sendMsg', (msg) => { this.msg = msg }) }
-
B组件(发送方),触发Bus的$emit事件
Bus.$emit('sendMsg', '这是一个消息')
七、非父子通信-provide&inject
1.作用
跨层级共享数据
2.场景
3.语法
- 父组件 provide提供数据
export default {
provide () {
return {
// 普通类型【非响应式,父修改数据后,子孙无法修改】
color: this.color,
// 复杂类型【响应式,父修改数据后,子孙也修改】
userInfo: this.userInfo,
}
}
}
2.子/孙组件 inject获取数据
export default {
inject: ['color','userInfo'],
created () {
console.log(this.color, this.userInfo)
}
}
4.注意
- provide提供的简单类型的数据不是响应式的,复杂类型数据是响应式。(推荐提供复杂类型数据)
- 子/孙组件通过inject获取的数据,不能在自身组件内修改
八、表单类组件封装
实现子组件和父组件数据的双向绑定 (实现App.vue中的selectId和子组件选中的数据进行双向绑定)
v-model是一个语法糖,其本质是( :value + @input)
其子组件中,必须使用value接收数据,input触发事件。(这是使用的父的第一句话,简化开发)
九、.sync修饰符
1.作用
可以实现 子组件 与 父组件数据 的 双向绑定,简化代码
简单理解:子组件可以修改父组件传过来的props值
2.场景
封装弹框类的基础组件, visible属性 true显示 false隐藏
3.本质
.sync修饰符 就是 :属性名 和 @update:属性名 合写
十、ref和$refs
1.作用
利用ref 和 $refs 可以用于 获取 dom 元素 或 组件实例
2.特点:
查找范围 → 当前组件内(更精确稳定)
3.语法
1.给要获取的盒子添加ref属性
<div ref="chartRef">我是渲染图表的容器</div>
2.获取时通过 $refs获取 this.$refs.chartRef 获取
mounted () {
console.log(this.$refs.chartRef)
}
4.注意
之前只用document.querySelect(‘.box’) 获取的是整个页面中的盒子,可能有同名的,导致不是该组件的这个
十一、异步更新 & $nextTick
1.需求
编辑标题, 编辑框自动聚焦
- 点击编辑,显示编辑框
- 让编辑框,立刻获取焦点
// 显示输入框
this.isShowEdit = true
// 获取焦点
this.$refs.inp.focus()
直接这样使用会报错,Vue 是异步更新DOM,即先处理所有的js然后再处理,这时会发现,框框出来了但是获取焦点时找不到。
2.解决方案
$nextTick:等 DOM更新后,才会触发执行此方法里的函数体
语法: this.$nextTick(函数体)
this.$nextTick(() => {
this.$refs.inp.focus()
})
注意:$nextTick 内的函数体 一定是箭头函数,这样才能让函数内部的this指向Vue实例
day05
一、自定义指令
1.指令与自定义指令
-
内置指令:v-html、v-if、v-bind、v-on… 这都是Vue给咱们内置的一些指令,可以直接使用
-
自定义指令:同时Vue也支持让开发者,自己注册一些指令。这些指令被称为自定义指令
每个指令都有自己各自独立的功能
自定义指令:自己定义的指令,可以封装一些DOM操作,扩展额外的功能
-
全局注册
//在main.js中 Vue.directive('指令名', { // inserted:指定元素,被插入到页面中时触发 "inserted" (el) { // 可以对 el 标签,扩展额外功能 el.focus() } })
-
局部注册
//在Vue组件的配置项中 directives: { "指令名": { inserted () { // 可以对 el 标签,扩展额外功能 el.focus() } } }
-
使用指令
注意:在使用指令的时候,一定要先注册,再使用,否则会报错
使用指令语法: v-指令名。如:注册指令时不用加v-前缀,但使用时一定要加v-前缀
2.指令中的配置项
inserted:被绑定元素插入父节点时调用的钩子函数
el:使用指令的那个DOM元素
3.自定义指令-指令的值
实现一个 color 指令 - 传入不同的颜色, 给标签设置文字颜色
语法:
- 1.在绑定指令时,可以通过“等号”的形式为指令 绑定 具体的参数值
<div v-color="color">我是内容</div>
- 2.通过 binding.value 可以拿到指令值,指令值修改会 触发 update 函数
directives: {
color: {
inserted (el, binding) {
el.style.color = binding.value
},
update (el, binding) {
el.style.color = binding.value
}
}
}
3.代码示例
4.自定义指令-v-loading指令的封装(完成加载显示案例)
实际开发过程中,发送请求需要时间,在请求的数据未回来时,页面会处于空白状态 => 用户体验不好
封装一个 v-loading 指令,实现加载中的效果
-
1.分析
1.本质 loading效果就是一个蒙层,盖在了盒子上 2.数据请求中,开启loading状态,添加蒙层 3.数据请求完毕,关闭loading状态,移除蒙层
-
2.实现
1.准备一个 loading类,通过伪元素定位,设置宽高,实现蒙层 2.开启关闭 loading状态(添加移除蒙层),本质只需要添加移除类即可 3.结合自定义指令的语法进行封装复用
.loading:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #fff url("./loading.gif") no-repeat center;
}
- 3.代码实现
<template>
<div class="main">
<div class="box">
<ul>
<li v-for="item in list" :key="item.id" class="news">
<div class="left">
<div class="title">{{ item.title }}</div>
<div class="info">
<span>{{ item.source }}</span>
<span>{{ item.time }}</span>
</div>
</div>
<div class="right">
<img :src="item.img" alt="">
</div>
</li>
</ul>
</div>
</div>
</template>
<script>
// 安装axios => yarn add axios || npm i axios
import axios from 'axios'
// 接口地址:http://hmajax.itheima.net/api/news
// 请求方式:get
export default {
data () {
return {
list: [],
isLoading: false,
isLoading2: false
}
},
async created () {
// 1. 发送请求获取数据
const res = await axios.get('http://hmajax.itheima.net/api/news')
setTimeout(() => {
// 2. 更新到 list 中,用于页面渲染 v-for
this.list = res.data.data
}, 2000)
}
}
</script>
<style>
.loading:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #fff url('./loading.gif') no-repeat center;
}
.box2 {
width: 400px;
height: 400px;
border: 2px solid #000;
position: relative;
}
.box {
width: 800px;
min-height: 500px;
border: 3px solid orange;
border-radius: 5px;
position: relative;
}
.news {
display: flex;
height: 120px;
width: 600px;
margin: 0 auto;
padding: 20px 0;
cursor: pointer;
}
.news .left {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-right: 10px;
}
.news .left .title {
font-size: 20px;
}
.news .left .info {
color: #999999;
}
.news .left .info span {
margin-right: 20px;
}
.news .right {
width: 160px;
height: 120px;
}
.news .right img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
二、插槽
1.作用
让组件内部的一些 结构 支持 自定义(修改指定的位置,而不改变整体架构)
将需要多次显示的对话框,封装成一个组件
2.插槽的基本语法
- 组件内需要定制的结构部分,改用****占位
- 使用组件时, < MyDialog>< /MyDialog>标签内部, 传入结构替换slot
- 给插槽传入内容时,可以传入纯文本、html标签、组件
3.设置默认值
语法: 在< slot>标签内,放置内容,作为默认显示内容
4.设置多个slot (具名插槽)
语法:
-
多个slot使用 name 属性区分名字
-
template配合 v-slot:名字 来分发对应标签
注意: -
v-slot:名字 可以简写为: #名字
-
必须要用< template>包裹起来才能识别。
5.作用域插槽
定义slot 插槽的同时, 是可以传值的。给 插槽 上可以 绑定数据,将来 使用组件时可以用
- 使用步骤
-
给 slot 标签, 以 添加属性的方式传值
<slot :id="item.id" msg="测试文本"></slot>
-
所有添加的属性, 都会被收集到一个对象中
{ id: 3, msg: '测试文本' }
-
在template中, 通过
#插槽名= "obj"
接收,默认插槽名为 default<MyTable :list="list"> <template #default="obj"> <button @click="del(obj.id)">删除</button> </template> </MyTable>
三、单页应用程序与多页面程
1.概念
单页应用程序:SPA【Single Page Application】是指所有的功能都在一个html页面上实现
单页应用网站: 网易云音乐 https://music.163.com/
多页应用网站:京东 https://jd.com/
2.单页应用 VS 多页面应用
单页应用类网站:系统类网站 / 内部网站 / 文档类网站 / 移动端站点
多页应用类网站:公司官网 / 电商类网站
四、路由
1.概念
路径和组件的映射关系
单页面应用程序,之所以开发效率高,性能好,用户体验好
最大的原因就是:页面按需更新
2. VueRouter的基本使用
概念:Vue 官方的一个路由插件,是一个第三方包(修改地址栏路径时,切换显示匹配的组件)
官网:https://v3.router.vuejs.org/zh/
使用:(5+2):
- 5个基本配置
-
下载 VueRouter 模块到当前工程,版本3.6.5
yarn add vue-router@3.6.5
-
main.js中引入VueRouter
import VueRouter from 'vue-router'
-
安装注册
Vue.use(VueRouter)
-
创建路由对象
const router = new VueRouter()
-
注入,将路由对象注入到new Vue实例中,建立关联
new Vue({ render: h => h(App), router:router }).$mount('#app')
当我们配置完以上5步之后 就可以看到浏览器地址栏中的路由 变成了 /#/的形式。表示项目的路由已经被Vue-Router管理了
- 2个核心步骤
1.创建需要的组件 (views目录),配置路由规则
main.js
import Find from "@/views/Find";
import Friend from "@/views/friend";
import My from "@/views/My";
Vue.use(VueRouter)
const router = new VueRouter({
routes:[
{path:'/find',component:Find},
{path:'/my',component:My}, //path:地址栏路径
{path:'/friend',component:Friend}, //component:组件文件
]
})
new Vue({
render: h => h(App),
router:router
}).$mount('#app')
2.配置导航,配置路由出口(路径匹配的组件显示的位置)
App.vue
<div class="footer_wrap">
<a href="#/find">发现音乐</a>
<a href="#/my">我的音乐</a>
<a href="#/friend">朋友</a>
</div>
<div class="top">
<router-view></router-view>
</div>
3.组件的存放目录问题
分类:
.vue文件分为2类,都是 .vue文件(本质无区别)
- 页面组件 (配置路由规则时使用的组件)
- 复用组件(多个组件中都使用到的组件)
目录:
分类开来的目的就是为了 更易维护
-
src/views文件夹
页面组件 - 页面展示 - 配合路由用
-
src/components文件夹
复用组件 - 展示数据 - 常用于复用
4.mian.js的分离
-
创建一个需要分离的.js (index.js)
-
将其引入到mian.js中 (main.js)
day06
一、声明式导航
1.导航高亮处理
vue-router 提供了一个全局组件 router-link (取代 a 标签)
- 能跳转,配置 to 属性指定路径(必须) 。本质还是 a 标签 ,to 无需 #
- 能高亮,默认就会提供高亮类名,可以直接设置高亮样式
语法: < router-link to=“path的值”>发现音乐< /router-link>
<div>
<div class="footer_wrap">
<router-link to="/find">发现音乐</router-link>
<router-link to="/my">我的音乐</router-link>
<router-link to="/friend">朋友</router-link>
</div>
<div class="top">
<!-- 路由出口 → 匹配的组件所展示的位置 -->
<router-view></router-view>
</div>
</div>
.footer_wrap a.router-link-active{
background-color: darkkhaki;
}
2.两个属性
其中他会给高亮标签给两个class属性:
- router-link-exact-active :精准的路由地址(例如:/find/one) 他可以匹配/find/one
- router-link-active :模糊的路由地址(例如:/find) 他可以匹配/find/a /find/b …,所以可以用于多级路由
3.自定义类名(了解即可)
我们可以在创建路由对象时,额外配置两个配置项即可。 linkActiveClass
和linkExactActiveClass
const router = new VueRouter({
routes: [...],
linkActiveClass: "类名1",
linkExactActiveClass: "类名2"
})
4.参数传递
我们可以通过两种方式,在跳转的时候把所需要的参数传到其他页面中
- 查询参数传参
- 动态路由传参
查询参数传参:
- 传参语法: < router-link to=“/path?参数名=值”>< /router-link>
- 接受参数: $router.query.参数名
动态路由传参(必须要传递参数):
想要其不传参也能访问,在冒号参数后面添加‘?’ 例如: /:help?
- 传参语法:
1、配置动态路由
const router = new VueRouter({
routes: [
...,
{
path: '/search/:words',
component: Search
}
]
})
2、配置导航链接:to=“/path/参数值”
- 接受参数:$route.params.参数名 (params后面的参数名要和动态路由配置的参数保持一致)
查询参数传参 VS 动态路由传参
-
查询参数传参 (比较适合传多个参数)
- 跳转:to=“/path?参数名=值&参数名2=值”
- 获取:$route.query.参数名
-
动态路由传参 (优雅简洁,传单个参数比较方便)
- 配置动态路由:path: “/path/:参数名”
- 跳转:to=“/path/参数值”
- 获取:$route.params.参数名
注意:动态路由也可以传多个参数,但一般只传一个
5.重定向
语法:
{ path: 匹配路径, redirect: 重定向到的路径 },
比如:
{ path:'/' ,redirect:'/home' }
解决的问题:
网页打开时, url 默认是 / 路径,未匹配到组件时,会出现空白,我们需要通过重定向,让其强制跳转 /home 路径
6.设置404
语法:
import NotFind from '@/views/NotFind'
const router = new VueRouter({
routes: [
...
{ path: '*', component: NotFind } //最后一个
]
})
注意: 配置在其他路由规则的最后面
7.路由模式设置
路由的路径看起来不自然, 有#,能否切成真正路径形式?
- hash路由(默认) 例如: http://localhost:8080/#/home
- history路由(常用) 例如: http://localhost:8080/home (以后上线需要服务器端支持,开发环境webpack给规避掉了history模式的问题)
语法:
const router = new VueRouter({
mode:'histroy', //默认是hash
routes:[]
})
8.编程式导航-两种路由跳转方式
path 路径跳转传参(query传参)
//简单写法
this.$router.push('/路径?参数名1=参数值1&参数2=参数值2')
//完整写法
this.$router.push({
path: '/路由路径',
query:{
参数名1:'参数值1',
参数名2:'参数值2'
}
})
接收参数:
$router.query.参数名
path路径跳转传参(动态路由传参)
//简单写法
this.$router.push('/路径/参数值')
//完整写法
this.$router.push({
path: '/路径/参数值'
})
接收参数:
$route.params.参数名
name 命名路由跳转传参 (query传参)
1、路由规则,必须配置name配置项
{ name: '路由名', path: '/path/xxx', component: XXX },
2、通过name来进行跳转
this.$router.push({
name: '路由名',
query: {
参数名1: '参数值1',
参数名2: '参数值2'
}
})
接收参数:
$route.query.参数名
name 命名路由跳转传参 (动态路由传参)
this.$router.push({
name: '路由名字',
params: {
参数名: '参数值',
}
})
接收参数:
$route.params.参数名
总结:
path和name的选择: 路径少选path,路径多选name
query和动态路由: 参数多选query,一个参数选择动态路由
9.两级路由配置
routes: [
{
path: '/',
component: Layout,
children: [ {
path: '/article',
component: Article
}]
},
{
path: '/detail',
component: ArticleDetail
}
]
两级路由在一级路由下,添加children属性,然后配置其路由
二、组件缓存
1、问题
从面经列表 点到 详情页,又点返回,数据重新加载了 → 希望回到原来的位置
2、原因
当路由被跳转后,原来所看到的组件就被销毁了(会执行组件内的beforeDestroy和destroyed生命周期钩子),
重新返回后组件又被重新创建了(会执行组件内的beforeCreate,created,beforeMount,Mounted生命周期钩子),所以数据被加载了
3、解决方案
利用keep-alive把原来的组件给缓存下来
keep-alive
keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。
keep-alive 是一个抽象组件:它自身不会渲染成一个 DOM 元素,也不会出现在父组件中。
优点:
在组件切换过程中把切换出去的组件保留在内存中,防止重复渲染DOM,
减少加载时间及性能消耗,提高用户体验性。
使用:
App.vue
<template>
<div class="h5-wrapper">
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
</template>
问题:
缓存了所有被切换的组件
解决问题:
keep-alive的三个属性:
① include : 组件名数组,只有匹配的组件会被缓存
② exclude : 组件名数组,任何匹配的组件都不会被缓存
③ max : 最多可以缓存多少组件实例
App.vue
<template>
<div class="h5-wrapper">
<keep-alive :include="['LayoutPage']">
<router-view></router-view>
</keep-alive>
</div>
</template>
额外的两个生命周期钩子
keep-alive的使用会触发两个生命周期函数
-
activated 当组件被激活(使用)的时候触发 → 进入这个页面的时候触发
-
deactivated 当组件不被使用的时候触发 → 离开这个页面的时候触发
组件缓存后就不会执行组件的created, mounted, destroyed 等钩子了
所以其提供了actived 和deactived钩子,帮我们实现业务需求。
三、VueCli 自定义创建项目
- 安装脚手架 (已安装)
npm i @vue/cli -g
- 创建项目
vue create hm-exp-mobile
- 所有选项如下:
1、选择自定义创建
2、自定义组件如下
3、选择vue2
4、使用hash模式
5、使用less
6、使用标准规范
7、保存重启项目
8、分配单独的文件夹
9、不保存此次预览
四、ESlint代码规范
ESLint:是一个代码检查工具,用来检查你的代码是否符合指定的规则(你和你的团队可以自行约定一套规则)。在创建项目时,我们使用的是 JavaScript Standard Style 代码风格的规则。
规范说明:
- 字符串使用单引号 – 需要转义的地方除外
- 无分号
- 函数名后加空格
function name (arg) { ... }
- …
手动修复
打开 ESLint 规则表,使用页面搜索(Ctrl + F)这个代码,查找对该规则的一个释义。
eslint插件来实现自动修正
在WS或其他编译软件中下载即可
WS如下:
VS如下:
settings.json 参考
{
"window.zoomLevel": 2,
"workbench.iconTheme": "vscode-icons",
"editor.tabSize": 2,
"emmet.triggerExpansionOnTab": true,
// 当保存的时候,eslint自动帮我们修复错误
"editor.codeActionsOnSave": {
"source.fixAll": true
},
// 保存代码,不自动格式化
"editor.formatOnSave": false
}
day07
一、Vuex
1.概述
Vuex 是一个 Vue 的 状态管理工具,状态就是数据。
大白话:Vuex 是一个插件,可以帮我们管理 Vue 通用的数据 (多组件共享的数据)。例如:购物车数据 个人信息数
2.创建
- 安装 vuex
yarn add vuex@3 或者 npm i vuex@3
- 新建 store/index.js专门存放 vuex
- 创建仓库 store/index.js
// 导入 vue
import Vue from 'vue'
// 导入 vuex
import Vuex from 'vuex'
// vuex也是vue的插件, 需要use一下, 进行插件的安装初始化
Vue.use(Vuex)
// 创建仓库 store
const store = new Vuex.Store()
// 导出仓库
export default store
- 在 main.js 中导入挂载到 Vue 实例上
import Vue from 'vue'
import App from './App.vue'
import store from './store'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
store
}).$mount('#app')
3.基本使用【核心概念 - state】
提供数据
State提供唯一的公共数据源,所有共享的数据都要统一放到Store中的State中存储。
打开项目中的store.js文件,在state对象中可以添加我们要共享的数据。
// 创建仓库 store
const store = new Vuex.Store({
// state 状态, 即数据, 类似于vue组件中的data,
// 区别:
// 1.data 是组件自己的数据,
// 2.state 中的数据整个vue项目的组件都能访问到
state: {
count: 101
}
})
访问Vuex中的数据(三种)
- 模板中使用
组件中可以使用 $store 获取到vuex中的store对象实例,可通过state属性属性获取count, 如下
<h1>state的数据 - {{ $store.state.count }}</h1>
- 组件逻辑中使用
将state属性定义在计算属性中 https://vuex.vuejs.org/zh/guide/state.html
<h1>state的数据 - {{ count }}</h1>
// 把state中数据,定义在组件内的计算属性中
computed: {
count () {
return this.$store.state.count
}
}
- js文件中使用
//main.js
import store from "@/store"
console.log(store.state.count)
(*)辅助函数-mapState
1.第一步:导入mapState (mapState是vuex中的一个函数)
import { mapState } from 'vuex'
2.第二步:利用展开运算符将导出的状态映射给计算属性
computed: {
...mapState(['count'])
}
<div> state的数据:{{ count }}</div>
4.Vuex数据修改 【核心概念 - mutations】
Vuex的单项数据流
明确 vuex 同样遵循单向数据流,组件中不能直接修改仓库的数据,但可能代码不报错,
所以需要开启严格模式(注意:严格模式是消耗内存的,上线时需要关闭)
mutations的使用(修改数据)
可以传参或不传。传参只能有一个,所以可以传集合,对象,数组啥的
- 1.定义mutations
const store = new Vuex.Store({
state: {
count: 0
},
// 定义mutations(用于修改数据)
mutations: {
}
})
- 2.格式说明
mutations是一个对象,对象中存放修改state的方法
mutations: {
// 方法里参数 第一个参数是当前store的state属性
// payload 载荷 运输参数 调用mutaiions的时候 可以传递参数 传递载荷
addCount (state,n) {
state.count += n
}
},
- 3.组件中提交 mutations
this.$store.commit('addCount',参数)
() 练习-Vuex中的值和组件中的input双向绑定
代码实现:
App.vue
<input :value="count" @input="handleInput" type="text">
export default {
methods: {
handleInput (e) {
// 1. 实时获取输入框的值
const num = +e.target.value
// 2. 提交mutation,调用mutation函数
this.$store.commit('changeCount', num)
}
}
}
store/index.js
mutations: {
changeCount (state, newCount) {
state.count = newCount
}
},
(*)辅助函数- mapMutations
mapMutations和mapState很像,它把位于mutations中的方法提取了出来,我们可以将它导入
import { mapMutations } from 'vuex'
methods: {
...mapMutations(['addCount'])
}
上面代码的含义是将mutations的方法导入了methods中,等价于
methods: {
// commit(方法名, 载荷参数)
addCount () {
this.$store.commit('addCount')
}
}
此时,就可以直接通过this.addCount调用了
<button @click="addCount">值+1</button>
但是请注意: Vuex中mutations中要求不能写异步代码,如果有异步的ajax请求,应该放置在actions中
5.异步修改Vuex的数据 【核心概念 - actions】
1.actions
- 1.定义actions
mutations: {
changeCount (state, newCount) {
state.count = newCount
}
},
actions: {
setAsyncCount (context, num) {
// 一秒后, 给一个数, 去修改 num
setTimeout(() => {
context.commit('changeCount', num)
}, 1000)
}
},
- 2.组件中通过dispatch调用
setAsyncCount () {
this.$store.dispatch('setAsyncCount', 666)
}
(*)辅助函数 -mapActions
Son2.vue
import { mapActions } from 'vuex'
methods: {
...mapActions(['changeCountAction'])
}
//mapActions映射的代码 本质上是以下代码的写法
//methods: {
// changeCountAction (n) {
// this.$store.dispatch('changeCountAction', n)
// },
//}
直接通过 this.方法 就可以调用
<button @click="changeCountAction(200)">+异步</button>
6.筛选vuex数据【核心概念 - getters】
除了state之外,有时我们还需要从state中筛选出符合条件的一些数据,这些数据是依赖state的,此时会用到getters
1.getters
- 定义getters
getters: {
// getters函数的第一个参数是 state
// 必须要有返回值
filterList: state => state.list.filter(item => item > 5)
}
- 使用getters
<div>{{ $store.getters.filterList }}</div>
(*)辅助函数 - mapGetters
computed: {
...mapGetters(['filterList'])
}
<div>{{ filterList }}</div>
7.总结
二、module【核心概念】
1.创建
- 创建模块js
const state = {
userInfo: {
name: 'zs',
age: 18
}
}
const mutations = {}
const actions = {}
const getters = {}
export default {
state,
mutations,
actions,
getters
}
- 在主js(index.js)中配置注册
import user from './modules/user'
import setting from './modules/setting'
const store = new Vuex.Store({
modules:{
user
}
})
2.获取
在模块的js代码如下:
const state = {
userInfo: {
name: 'zs',
age: 18
},
myMsg: '我的数据'
}
const mutations = {}
const actions = {}
const getters = {}
export default {
namespaced: true, # 开启命名空间
state,
mutations,
actions,
getters
}
获取模块内的state数据
- 1、直接通过模块名访问 $store.state.模块名.xxx
$store.state.user.userInfo.name
- 2、通过 mapState 映射:
...mapState('user', ['userInfo']),
...mapState('setting', ['theme', 'desc']),
获取模块内的getters数据
- 1、直接通过模块名访问
$store.getters['模块名/xxx ']
<div>{{ $store.getters['user/UpperCaseName'] }}</div>
- 2、通过 mapGetters 映射
computed:{
...mapGetters('user', ['UpperCaseName'])
}
获取模块内的mutations方法
js
const mutations = {
setUser (state, newUserInfo) {
state.userInfo = newUserInfo
}
}
- 1、直接通过 store 调用 $store.commit('模块名/xxx ', 额外参数)
<button @click="updateUser">更新个人信息</button>
<button @click="updateTheme">更新主题色</button>
export default {
methods: {
updateUser () {
// $store.commit('模块名/mutation名', 额外传参)
this.$store.commit('user/setUser', {
name: 'xiaowang',
age: 25
})
},
updateTheme () {
this.$store.commit('setting/setTheme', 'pink')
}
}
}
- 2、通过 mapMutations 映射
<button @click="setUser({ name: 'xiaoli', age: 80 })">更新个人信息</button>
<button @click="setTheme('skyblue')">更新主题</button>
methods:{
// 分模块的映射
...mapMutations('setting', ['setTheme']),
...mapMutations('user', ['setUser']),
}
获取模块内的actions方法
js:
const actions = {
setUserSecond (context, newUserInfo) {
// 将异步在action中进行封装
setTimeout(() => {
// 调用mutation context上下文,默认提交的就是自己模块的action和mutation
context.commit('setUser', newUserInfo)
}, 1000)
}
}
- 1、直接通过 store 调用 $store.dispatch('模块名/xxx ', 额外参数)
<button @click="updateUser2">一秒后更新信息</button>
methods:{
updateUser2 () {
// 调用action dispatch
this.$store.dispatch('user/setUserSecond', {
name: 'xiaohong',
age: 28
})
},
}
- 2、通过 mapActions 映射
<button @click="setUserSecond({ name: 'xiaoli', age: 80 })">一秒后更新信息</button>
methods:{
...mapActions('user', ['setUserSecond'])
}