大事件项目+css基础+vue内容学习解析

堆叠层级（z-index）：数越大级数越高，显示的越上面；通常用于处理元素之间的的堆叠排放显示

光标类型（cursor）：主要分为4种，default默认、pointer小手、text工字型、move十字；一般用于提示用户当前元素可以做些什么

过渡效果（transition）：它主要用于延缓触发特点条件后的元素变化，就比如图片的放大缩小通过过渡可以显示出过程等

渐变：对于渐变这一块内容，渐变的样式是很多变的，因此死记是不可以的，所以当有需要的时候参阅菜鸟文档即可

图标的使用（link：favicon）

透明度（opacity）：用于改变整个元素的透明度值在0-1之间

1.1.平面转换

平面转换中移动的时候是以元素的左上角原起点进行移动的，旋转的时候是以元素的中心点为原点的；且平面移动的时候可以以像素值为单位也可以以百分比为单位进行。

/* 平面转换移动 */
 transform: translate(-500px); 
/* 平面旋转 */
 transform: rotate(-360deg); 
/* 改变盒子转换原点 */
 transform-origin: right bottom; 
/* 缩小 */
 transform: scale(0.5, 0.5);
/* 倾斜 */
 transform: skew(60deg);
/* 多重转换 */
transform: translate(-500px) rotate(-360deg) scale(0.5, 0.5);
}

2.所遇到的问题描述：

3.扩展学习部分：

4.学习总结：

今天学习的内容都是一些样式的使用，没有什么难度，但是主要还是要在实际的应用场景中使用；例如轮播图的特效涉及的内容就会包括相对定位、绝对定位、溢出隐藏、光标类型等部分内容，对于今天所学内容没有太多可以描述，只能是在实际的应用案例中，才能体会到这些CSS样式该用在什么地方，以及这些样式具体能用于什么等。

日期：11月2日 CSS样式：动画animation、空间转换、立体呈现transform-style

01-前端基础导学课程哔哩哔哩bilibili

1.今天所学内容摘要：

空间转换就是平面转换的升级版，空间转换的应用就是在原平面转换的基础属性后面加上XYZ等坐标信息，使用空间转换搭配立体呈现可以实现搭建一个立体物品的功能，同时搭配过渡效果可以实现特定条件下的改变立体物品的形态等效果，动画的作用类似过渡，但是比过渡强大，动画可以在起始的时候就进行播放，而过渡只是实现元素的变化过程，相比之下动画可以循环的实现元素的动态效果。

1.1.动画

动画的效果实现分为两部分：一、创建动画的效果，二、在元素样式中应用动画效果

/* 动画的实现事件 */
@keyframes change {
    100% {
        transform: rotate3d(1, 1, 0, 1700deg)
    }
}

.cube {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 250px auto;
    transform-style: preserve-3d;
    transform: rotate3d(1, 1, 0, 180deg);
    /* linear ：匀速
       steps（）：分步动画，工作中 ， 配合精灵图动画使用 
       infinite： 循环播放
       alternate: 反向播放
       forwards: 播放完停止
       backward：播放完后以原始样子展示
    */
    animation: change 3s forwards linear;
}

2.所遇到的问题描述：

3.扩展学习部分：

4.学习总结：

今天所学内容中有趣的就是三者的结合，利用立体呈现实现平面到立体的功能，然后利用空间转换实现平面元素的调整，搭建一个立体，后续使用动画效果实现立体的拆解效果或者是扩散效果。今天利用所学内容实现了一个正方体魔方的搭建，同时实现了正方体拆分的效果，在这之上实现了三重的显示效果，搭配自定义的照片之类的很好看。

日期：11月6日 CSS自适应、rem单位、Less使用

01-前端基础导学课程哔哩哔哩bilibili

1.今天所学内容摘要：

本日学习内容概述：视口标签、媒体查询、rem自适应、less使用。

视口标签在html文件创建的初始化就存在，了解一下即可，不用刻意记忆

<meta name="viewport" content="width=device-width, initial-scale=1.0">

媒体查询通常用于监视网页满足某一条件时执行对应的css样式，之前是用于检测手机的分辨率，自动的修改网页的css样式达到适应手机大小的作用，目前这一功能可以通过导入自适应的js文件来实现，因此也不重要了，了解即可。

1.1.less使用

less的作用就是为了方便化css文件的定义，在less文件中可以实现更加智能，灵活好理解的代码编程，同步当less中文件保存时，会自动生成对应的css文件，总体来讲less的存在就是让css拥有了更加完善的功能，算是一个拓展，但是less不能直接引用入html，在html中使用的还是css样式

1.1.1.less文件中的导入操作

导入less文件，会在css中自动转换生成对应css内容

@import "../css/T11_6_less使用.less";
@import "../css/base.css";

1.1.2.less文件中的导出操作

注释不能放在代码上方，且一次只能使用一条导出的代码

// out: false
// 禁止导出
// out: ../css/
// 控制导出css的位置

1.1.3.less中运算以及变量定义

less中&符号表示当前元素，不会生成子元素

// 定义变量
@myColor : pink;
// 使用变量
div {
    // 运算法则
    width: (68 / 37.5rem);
    height: (29 / 37.5rem);
    background-color: @myColor;
    a {
        display: block;
        &:hover {
            color: #000;
        }
    }
}

2.所遇到的问题描述：

3.扩展学习部分：

4.学习总结：

今天学习了web移动端开发的基础内容，让网页可以基础的匹配手机屏幕，自动的适应不同手机的分辨率大小；同时也了解了一个关于css文件的拓展文件，对此表示使用less文件实现效果可能会比css好一些，不仅是因为less的功能更完善，更加是因为他的代码逻辑书写更加符合我的代码书写风格；最后今天也是有练习一个简单的案例，案例就是在网页基础上应用自适应而已，将单位px换算为rem。

日期：11月7日媒体查询、VW与VH单位

01-前端基础导学课程哔哩哔哩bilibili

1.今天所学内容摘要：

今天将上次粗略了解的媒体查询又学习了一遍：媒体查询可以说是一种响应式设计，针对于上次学习的自适应式设计，我觉得媒体查询的优势就在于它能够便捷的解决不同设备布局问题，但是它也要手动布置某一程度上也不推荐使用，因为上一次以及学习过自动化的不同设备布局方式了；其次今天学习了VW与VH单位，主要的应用场景就是网页的自适应，相对于之前的rem，VW更加的使用与网页，它的换算是以视口宽度的1%来决定的，本身就是一种可适应的单位，而不是固定值。

1.1.媒体查询

之前学习的媒体查询是简便的写法，媒体查询是有完整的格式的

// 屏幕大于 1024px 或小于 1440px 时应用该样式
@media screen and (min-width: 1024px) and (max-width: 1440px) { 
  ...
}

注意：设置布局分界点时需要注意样式的先后顺序，后面的 @media 范围不应该包含前面的范围（满足条件时，后面的样式会覆盖前面的样式）

2.所遇到的问题描述：

3.扩展学习部分：

4.学习总结：

今天学习的很快，这部分内容都是蛮简单的基础，因此今天学习完内容后，也是往后学习了后一天的内容；就今天学习的两个部分内容而言其实都是为了应付web移动端的使用，VW与REM两个单位的使用在实际的使用中应该考虑哪一个都需要根据实际的情况判断，我个人是更喜好使用VW的，今天学习上也没有什么问题出现，在后面的案例练习中也只是单位的换算而言，不难。

日期：11月8日 Bootstrap的使用

01-前端基础导学课程哔哩哔哩bilibili

1.今天所学内容摘要：

今天学习了一个类似Element的网页布局工具，Bootstrap中包含已经定义好的组件、已经设置好的样式、图标库等内容，但是我在在下载图标库的时候出现问题，下载不下来，还没解决这问题；Bootstrap的使用因为是已经给定好的，所以不难，主要是根据设计稿修改，需要自己找。

1.1.Bootstrap使用

在今天学习的案例中用到较多的是自适应的块级布局，即当屏幕尺寸多大时需要调整为四个一行显示，多大时会调整为两个、一个的形式显示。

其次还要明白，Bootstrap在网页中的块级划分时是划分为12个区域的，也就是说如果想一行显示4个div那么一个div中类的给定就要调整为3.

//bootstrap引入为JS与CSS两部分，我习惯在head中就全部引用好
<script src="../bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">

//bootstrap中支持版心样式的应用
<!-- 调用类名：container:响应式布局版心类 -->
<div class="container">

//同时也支持直接调用设计好的FLEX布局
<div class="row">

//顶部固定
<div class="fixed-top">

//今天最主要的还是块级布局
<div class="col-lg-3 col-md-6"></div>

注意：在块级布局的类样式中，lg、md都是有固定的意义在的，代表的都是屏幕尺寸的区间含义！

2.所遇到的问题描述：

3.扩展学习部分：

4.学习总结：

今天就只是学习了一个Bootstrap的使用，针对于今天所学内容的练习案例可以说就是对于这个组件的复制粘贴，难点就是对组件的内容修改，将其的样式覆盖为自己的样式；而这里的难点就是要会找组件定义的样式在哪里，然后才能根据样式名称修改内容，总体下来没有之前做的案例有难度，学习的状态也蛮好的，也有思路。

日期：11月9日 Vue基础、案例小黑记事本

001-Vue2-3入门到实战导学视频1哔哩哔哩bilibili

1.今天所学内容摘要：

；主要包括有：

v-bind：用于为HTML标签绑定属性值，如设置href，css样式等（应用场景：需要动态获取链接等，或者动态变换样式等地方） v-on：为HTML标签绑定事件（应用场景：验证用户输入是否正确跳出弹框等 v-if；v-else；v-else-if：条件性的渲染某元素，判定为true时渲染，否则不渲染（应用场景：网购时更具条件筛选内容等方面） v-show：根据条件展示某元素，区别在于切换的是display属性的值（应用场景：账号输错时的提示信息 v-for：列表渲染，遍历容器的元素或对象的属性（应用场景：查询信息后输出对应内容）

1.1.小黑案例

案例中就是将所学内容融汇在一起；

unshift 的作用就是修改原数组添加、 filter过滤条件用于筛选原变量中符合条件内容等

<div id="app">
	<input type="text" placeholder="请输入任务" v-model="name"><button @click="add">添加任务</button>
	<ul>
	    <li v-for="(item,index) in islist" :key="item.id">
	        <span> {{index + 1}} </span>
	        <span> {{item.name}} </span>
	    </li>
	</ul>
	<span>{{ islist.length }}</span>
	<button @click="del">清空任务</button>
</div>

const app = new Vue({
	    el: '#app',
	    data: {
	        islist: [
	            { id: 1, name: '黄超群大师' }
	        ],
	        name: ''
	    },
	    methods: {
	        add() {
	            if (this.name.trim() === '') {
	                alert("请输入名称")
	                return
	            }
	            // unshift修改原数组添加
	            this.islist.unshift({
	                id: +new Date(),
	                name: this.name
	            })
	            this.name = ''
	        },
	        del() {
	            this.islist = []
	        }
	    }
	})

2.所遇到的问题描述：

3.扩展学习部分：

4.学习总结：

今天学习了Vue这一内容，Vue主要就是为我们在前端HTML中提供了更多的方法以及功能，就好像是jsp中el表达式以及JSTL标签的结合版，更加的便捷化；今天的学习更多的是一种结合化使用思想，就像Vue中的双向绑定事件完全可以结合着v-bind的绑定标签属性值使用，通过输入的路径，直接传递给绑定属性值的url等；Vue的双向绑定事件也简化了HTML中获取用户输入内容的方法，以及v-for的循环在之前的案例中完全代替了复杂内容；今天的学习状态不是很好，还没有调整过来，还是需要形成习惯化。

日期：11月13日 Vue的快捷实现方法，Watch监听器，计算属性computed

001-Vue2-3入门到实战导学视频1哔哩哔哩bilibili

1.今天所学内容摘要：

今天大体学习内容是：六个快捷的方法实现，Watch的数据监听及时实现，计算属性computed的应用；

1. 键盘回车事件enter： @keyup.enter="en1" 该语句的实际意义就是实现键盘上的回车监听事件，一般实际应用在搜索框输入后回车搜索

2. 去除空格trim： v-model.trime=‘username’ 该方法常用于输入内容后获取纯粹的文本

3. 转数字number： v-model.number=“username” 对这个语句的应用不了解，暂时不了解应用方向

4. 阻止冒泡stop： @click.stop="spnfn" 一般用于阻止两个叠加的div模块同步触发弹窗

5. 阻止默认行为prevent：@click.prevent 常用于去除超链接标签的默认跳转行为

1.1.样式控制

样式控制是在赋予元素样式的同时会进行条件的判断，当条件满足的情况下才会赋予元素此样式

<h3>样式控制</h3>
<ul>
    //判断当前元素是否符合条件，符合则赋予高亮颜色
    <li v-for="(item,index) in islist" :key="item.id" @click="activeIndex = index"
        :class="{color1: index == activeIndex}">
        <a href="" @click.prevent>
            {{ item.name }}
        </a>
    </li>
</ul>

1.2.行内样式控制

类似于样式控制，但是样式控制是将整一个样式为基础，而行内样式控制则是用单一的样式元素做基础，分别赋予，这样做的好处就是可以将vue的data变量通过变量形式放入样式中动态改变样式

<h3>行内样式控制</h3>
<div class="color1">
    <div class="color2" :style="{width: percent + '%' , 'background-color': 'green'}"></div>
</div>

1.3.计算属性computed

计算属性(优点：具有缓存，调用多次的时不会重复执行)

computed: {
    // 简写
    sum() {
        return this.islist.reduce((sum, item) => sum + item.name, 0)
    },
    // 完整
    fullname: {
        // 获取
        get() {
            return this.islist.reduce((sum, item) => sum + item.name, 0)
        },
        // 修改
        set() {
             this.isList = this.isList.filter(item => item.id !== id)
        }
    }
}

1.4.watch监听

该监听出现的场景有实时的翻译，例如百度的中英文翻译，输入中文后同步的翻译为英文显示；实现原理就是，同步的监听输入数据，将输入的数据获取到后进行修改输出

data: {
    obj: {
        words: '',
        result: ''
    }
},
watch: {
    //该方法会在数据变化时调用执行
    //newValue新值， oldValue老值（一半不用）
    obj: {
        // 深度监听
        deep: true,
        immediate: true, //立刻执行
        handler(newValue) {
            // 你要取消定时器的标识符。该 ID 由相应的setTimeout()调用返回。
             clearTimeout(this.timer)
             // 防抖：延迟执行 -> 延迟等一会，一段时间后执行
             this.timer = setTimeout(async () => {
                 const res = await axios({
                     url: 'heeps://applet-base-api-t.itheima.net/api',
                     params: {
                         words: newValue
                     }
                 })
                 this.result = res.data.data
             }, 300)
        }
    }
}

2.所遇到的问题描述：

3.扩展学习部分：

4.学习总结：

总体来讲今天学习的内容还算可以，不是很难理解，但是计算属性这部分内容的应用以前从来没接触过，因此学习的时候也不是很能理解，它的应用范围似乎很广泛，而且很灵活，但是我认为在前后端结合后这部分内容的应用应该不会太广泛，毕竟数据的统计以及应用一般情况不是写死在前端的，而是后端获取的，再则计算这部分内容一般也会由后端完成后直接发送数据给前端，因此这部分内容没深入了解。

日期：11月14日 vue生命周期、饼图渲染、vue的脚手架工程化

001-Vue2-3入门到实战导学视频1哔哩哔哩bilibili

1.大体内容概要

今天学习内容包括vue的4个大生命周期，以及如何使用vue实现图表数据的渲染，其次是使用脚手架工具一键实现工程化的vue项目创建。

4大生命周期：

创建阶段（一般是准备数据的阶段） 分为响应式数据准备好之前 beforeCreate 以及 响应式数据准备好之后 created 所谓的之前之后是指data中的数据是否加载完成

同理：只有当数据加载好之后才能开始进行发送请求获取数据等操作

挂载阶段（渲染模板，将数据填入页面）分为 模板渲染之前 beforeMount 以及 模板渲染之后 mounted 意思是指网页中的元素是否已经加载完成同理：只有当网页中元素已经加载好后才能对网页元素进行获取操作，例如让输入框获取焦点等操作

更新阶段分为 数据修改了，视图未更新 beforeUpdate 以及 数据修改了，视图更新 updated 意思指在网页中修改填入数据，后台有没有对这一操作进行反馈

卸载阶段分为 beforeDestroy 以及 destroyed 一般用前一个属性，应用的场景就是当网页关闭的时候将网页的定时器或者其他功能全部关闭

图表数据渲染：Examples - Apache ECharts
这一部分内容没什么好讲的，主要就是会看官方文档，然后要会对官方提供的代码会修改
主要的就是当我们需要用自己的数据去覆盖原代码数据的时候不能直接修改原代码写死，而是应该通过书写方法针对于需要修改的地方重新写一遍，进行动态数据替换
tc () {
    this.myChart.setOption ({
        series: [
            {
                data: this.list.map (item => ({value: item.price , name: item.name})) 
            }
        ]
    })
}

2.重要内容摘要

2.1.vue的脚手架工程化安装

2.2.工程化项目的全局与局部组件

在生成的项目中可以创建或者说定义局部与全局的组件，即将网页的内容拆开变成一块一块的内容，每一块内容都会成为一个组件。

2.2.1 定义局部组件

局部组件与全局组件都是定义在src文件中的components文件夹下，局部组件通过一下方法引用，填写于App.vue文件的js部分中

// 导入局部注册的组件
import HmHeader from './components/HmHeader.vue'
// 局部注册
components: {
  // 组件名：组件对象
  HmHeader: HmHeader
}

2.2.2 定义全局组件

全局组件的引用需要在main.js文件中注入,这里需要注意，一开始创建的main.js文件不是这样的，但是想要全局组件的引用我暂时只找到这个办法可以实现。

// 1）导入自定义全局组件
import HmButton from './components/HmButton.vue'

// 2）V5全局组件必须配置
const app = createApp(App)

// 3）进行全局注册
app.component('HmButton', HmButton)

// 4）.mount函数返回根组件实例
app.mount('#app')

3.问题分析

报错：vue的版本不对因此生成的脚手架项目不对，在main.js中的代码书写格式就会有差异，我按照2的版本书写，但是自己的版本是3所以会因为代码不合乎逻辑报错

解决：通过查阅官网进行修改代码，将对应版本代码替换一下就好了

4.学习总结

今天学习的状态还行，对于这部分内容的理解也比较好，但无论是生命周期也好，图表渲染也好，到后面都会有一个跨度，在学习工程化项目后，文件的样式就变动蛮大的，因此还没有具体的在这个项目中使用过生命周期以及图表渲染，不知道怎么样的实现比较快比较方便；工程化的vue项目可以说还算蛮简便的，将文件的内容都聚集到一起，也省去了好多自己不必要的操作。

日期：11月15日 scoped样式冲突、props详解、v-model详解、ref和$refs获取dom和组件、$nextTick、非父子通信-provide-inject

001-Vue2-3入门到实战导学视频1哔哩哔哩bilibili

1.大体内容概要

今天学习的内容中常用的是scoped样式冲突，用于便捷传递获取子父之间数据的是props详解，v-model在这部分中常用于实现子父之间的双向绑定，但是应用时不能只用v-model而是需要更加的拆分，其余内容一般也就ref用的多用于获取网页组件元素。
scoped样式冲突：常加在各个组件的style中<style scoped>，防止各组件的样式冲突乱用
非父子通信：非父子通信就是将数据写入provide中，然后再子组件中通过inject取出父级中存入的数据
APP.vue
// 父级定义，子孙级皆可调用
provide() {
  return {
    color: this.color,
    size: this.size
  }
}

BaseB.vue
// provide 定义可共享数据后由此接收
  inject: ['size' , 'color']
}
ref和$refs获取dom和组件:代替了原项目中的document.querySelector写法，相对于更加便捷，在需要被获取的组件元素上添加ref，后续再通过$refs去调用定义的元素即可

$nextTick：该属性通过搭配ref使用，因为ref需要获取网页元素，但是一般情况下该属性之前也会有一个属性的应用，会导致dom无法全部加载获取不到元素，而该元素的作用就是等DOM更新后，才会触发执行此方法内的函数体，完全可以实现ref的实现需求。

2.重要内容摘要

2.1.props详解

通过标签传递参数，也可以通过标签监听事件实现双向传输，具体操作如下：

App.vue
<!-- （1）给组件标签，添加属性的方式传值 -->
<BaseOne :myTitle="myTitle"></BaseOne>
<!-- 2. 父组件监听事件 -->
<BaseTwo @changeFn="changeFn"></BaseTwo>
<script>
export default {
  data() {
    return {
      myTitle: 'Hello word'
    }
  },
  methods: {
    // 3. 提供处理函数，形参中获取参数
    changeFn(newTitle) {
      this.myTitle = newTitle
    }
  },
}
</script>

BaseOne.vue
<script>
export default {
  // a. 基础写法 (这种方式通常用于判断传递过来的参数是否符合类型，不符合则报错)
   props: {
     myTitle: String
   }
}
</script>

BaseTwo.vue
<button @click="handleClike">BaseTwo + 子元素修改父元素</button>
<script>
export default {
  methods: {
    handleClike() {
      // 1. $emit触发事件，给父组件发送消息通知
      this.$emit('changeFn','子元素修改父元素')
    }
  }
}
</script>

2.2.v-model详解

v-model无法直接实现子父组件之间的数据双向绑定于传输，因此这部分内容的设置通常是在父级中设置v-model，在子级中通过v-model的拆分形式来接收。

App.vue
<BaseC v-model:visible = "isShow">
    
BaseC.vue
<input
    type="text"
    ref="inp"
    :value="visible"
    @input="$emit('update:visible', $event.target.value)"
/>
props: {
  visible: String
},

3.问题分析

4.学习总结：

今天学习内容较多，学的内容也比较复杂，不是很好记忆，但是学习内容有更替，就是学习了前面内容后，很快后面就会被新学的内容替代，其次今天也是自己做了一个小案例，实现的代码形式相比视频中所教内容也是有自己的思想，因此对于今天的所学内容中有部分的自己理解，对有部分内容的理解也很全面了，但是对于另外的一部分内容因为学习的时候时常出现错误，所以也不是很会，只能跳过处理不耗费时间。

日期：11月16日 vue自定义指令、插槽、路由的基本使用

001-Vue2-3入门到实战导学视频1哔哩哔哩bilibili

1.大体内容概要

今天学习内容总体分为三部分：自定义指令、插槽、路由；自定义指令就是对通用内容的提取，设置在外部后续供大家调用使用，插槽与之类似，但是插槽是为自己留白，供大家自由修改；路由则是实现通过路径切换页面的功能。

vue自定义指令：自定义指令的创建分为全局与局部，常用的应该是全局，而在vue3中全局的自定义指令可以写在主js文件之外的文件中，我叫做外部全局文件定义，相比直接定义在main.js中另外创建一个文件更加好排版布局。

插槽：插槽的作用就是在组件中留出空，可以在App.vue中定义修改组件的内容，同时插槽也提供名称选定的模式，可以在定义插槽的时候设定名称，后续就可以选定名称对指定空区域进行填充修改内容；插槽还支持数据的传递功能，一般情况下应用于表单数据的返回提交，或者列表数据的修改等。

2.重要内容摘要

2.1.路由的基本使用

路由的作用就是实现当前网页内部的页面替换，实现原理就是通过路径的访问实现，访问不同的组件页面，实现页面的替换而不切换网页。实现的基础需要一个路由的基础外部js文件，然后再main.js文件中注册router即可使用。

注意点：再设置被访问文件的时候，文件名一定要由两个单词组成

2.1.1.路由基础外部文件router.js

import { createRouter, createWebHashHistory } from 'vue-router'
import File1 from '../views/File1.vue'
import File2 from '../views/File2.vue'

// 固定的配置文件
const routes = [
    {
        path: '/file1',
        component: File1
    },
    {
        path: '/file2',
        component: File2
    }
]

const router = createRouter({
    history: createWebHashHistory(),
    routes
})

export default router;

2.1.2.main.js路由注册

import { createApp } from 'vue'

import App from './App.vue'

import router from './router/router.js'

// 路由注册use
createApp(App).use(router).mount('#app')

2.1.3.路由应用

<template>
  <div>
    <div>
      <a href="#/file1">file1的切换</a>
      <router-link to="/file2">file2的切换</router-link>
    </div>
      <div>
        <!-- 路由出口->匹配的组件所展示的位置 -->
        <router-view></router-view>
      </div>
  </div>
</template>

3.问题分析

4.学习总结：

今天学习的内容看起来很少，但是都是联动的内容，无论是自定义指令还是插槽都是联动使用的，都用于对一个网页的减少耦合化，增加代码的复用性，简便性等，插槽的应用更是为了方便代码变化的灵活性；后续增加的路由功能也不难，单纯依赖与一个基础的js文件，其他的就是对文件中内容的改写就可以实现了。总体来说，今天学习的内容蛮简单的，但是在实际的应用中就不知道简不简单了，单个好理解，搭配在一起使用我还没试过。

日期：11月20日路由带参传输，组件缓存，二级路由

001-Vue2-3入门到实战导学视频1哔哩哔哩bilibili

1.大体内容概要

今天相继上一次学习内容而言增加了路由的带参跳转，以及对于某些页面的跳转后缓存功能；其次也是了解了什么是二级路由。
路由的带参传输：路由的带参传输分为两种，一种是路径后直接跟随？参数名=参数值实现传递；另一种是修改路由的路径配置在路径后加上/: 参数名后续再传递参数时只需/参数值就可以了，两种方法中传单参适用第二种，反之第一种；

path: '/file3/:key',
component: File3

<router-link to="/file3/file3参数传递">file3的切换</router-link>

<router-link to="/file2?key=file2参数传递">file2的切换</router-link>
组件缓存：组件缓存也是keep-alive ，属于Vue的内置组件，包裹动态组件时可以缓存，一般用于缓存主页等内容，防止每次返回主页都重新刷新加载一次，该组件通常搭配属性：include、exclude、max使用；且在使用该属性的时候通常会触发使用两个生命周期函数：activated当组件被激活时触发、deactivated当离开页面时触发等。


<keep-alive :include="keepno">
  
  <router-view></router-view>
</keep-alive>

2.重要内容摘要

2.1.二级路由

路由可以划分为一级路由与二级路由，二级路由通常写在一级路由内部，而不是说路径的延续；二级路由的使用需要属性children，同时使用二级路由需要搭配二级路由出口，也就是在一级路由组件的页面编写router-view。

path: '/',
redirect: 'file1',
// 通过 children 配置项 ，可以配置嵌套子路由
//  1. 在children配置项中，配置规则
// 2. 准备二级路由出口
children: [
    {
        path: 'article',
        component: Article
    }
]

3.问题分析

4.学习总结：

今天学习状态还行，因为学习内容就是路由的延续所以还是好理解的，组件缓存的出现就是为了映射二级路由的返回，二级路由中又了解到了一个快捷返回上一个页面的代码$router.back()，返回上一级页面后搭配组件缓存实现不重新刷新页面的功能；参数的传递也已经涉及到了数据的接口请求等部分的内容了。

日期：11月21日 VueCli自定义创建项目、ESLint手动修正代码规范错误、vuex的基本认知、vuex-分模块

001-Vue2-3入门到实战导学视频1哔哩哔哩bilibili

1.大体内容概要

今天学习内容中基础好理解的是VueCli自定义创建项目以及ESLint手动修正代码规范错误；较为复杂的是vuex分模块，较为难理解的是vuex的基本认知。
VueCli自定义创建项目： 这一部分内容我在学习的时候就没怎么将操作步骤记下来，就是很基础的一个思路，在指定位置打开管理员命令窗口输入vue create 项目名即可创建项目，进入后选择最后一个自定义选项，后续内容的选择都是根据需求选择，可以在百度中找到。
ESLint手动修正代码规范错误：这一部分就是用于企业级的团队开发代码规范的，一般情况都开启配置比较好，实现方式就是打开设置后右上角有一个打开设置按钮，点击后进去配置文件界面，配置内容如下：
// 当保存的时候，eslint自动帮我们修复错误
 "editor.codeActionsOnSave": {
     "source.fixAll": true
 },
 // 保存代码，不自动格式化
 "editor.formatOnSave": false
注意：默认情况下配置的第二条是开启true状态，需要删除原有指令。
Vuex的分模块：这一部分简单理解就是创建一个文件夹module将原配置文件中配置内容拆分成小块的js文件进行配置，最后通过原配置文件中的modules属性将各个小块内容导入汇聚，注意的点有以下几点：
// user 模块
const state = {}
const mutations = {}
const actions = {}
const getters = {}
export default {
  // 开启命名空间 这一步通常情况下都配置上
  namespaced: true,
  state,
  mutations,
  actions,
  getters
}
// 原模块
// state中信息过长时
// 将state树分割出一个user state。
modules: {
  user: user
}

2.重要内容摘要

2.1.Vuex的基础认知

Vuex的核心就是解决了父子传递的不便性，它建立了一个独立在外的仓库可以供父子组件进行使用传递参数，且Vuex提供的配置文件中也解决了父子组件中的各种方法处理问题，在独立的配置中Vuex直接就打包好了一个方法的使用，后续只需要在组件中通过map映射就可以直接调用。

//主配置文件
import { createStore } from 'vuex'
import user from './module/user'
// 类似 Redux 中的建立状态树

export default createStore({
  // 开启严格模式  当项目开发完后这一个 配置需要删除
  strict: true,

  // 1、创建仓库  存储所有全局数据
  state: {
    title: '大标题',
    count: 100,
    list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]
  },

  // 2、 需要通过计算获取state里的内容获取的数据
  // 只能读取不可修改
  getters: {
    // 注意点
    // 1. 形参第一个就是state
    // 2. 必须有返回值
    filterList (state) {
      return state.list.filter(item => item > 5)
    }
  },

  //  3、定义对state的各种操作，处理同步
  mutations: {
    addCount (state, n) {
      state.count += n
    },
    subCount (state, n) {
      state.count -= n
    }
  },

  // 3.actions 处理异步
  // 注意:不能直接操作 state，操作 state，还是需要commit mutation
  actions: {
    // context 上下文 (此处未分模块，可以当成store仓库)
    // context.commit('mutation名字 ，额外参数)
    changeCountAction (context, num) {
      // 这里是setTimeout模拟异步，以后大部分场景是发请求
      setTimeout(() => {
        context.commit('addCount', num)
      }, 1000)
    }
  },

  // state中信息过长时
  // 将state树分割出一个user state。
  modules: {
    user: user
  }
})

2.2.Vuex映射关系

Vuex的映射使用很简单，就是在需要映射的内容前加上map后通过impor导入即可，其中涉及属性的内容配置在computed中，涉及方法的内容配置在methods中。

// 添加映射，简化书写
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'Son2Vue',
  computed: {
    // 将$store.state简化
    ...mapState(['count'])
  },
  methods: {
    // 将store中的mutations映射直接可以使用
    ...mapMutations(['subCount'])
  }
}
// 添加映射，简化书写
import { mapActions, mapGetters, mapState } from 'vuex'
export default {
  name: 'Son1Vue',
  computed: {
    // 映射子模块中的属性
    ...mapState(['user']),
    ...mapState('user', ['name']),
    // 映射getters
    ...mapGetters(['filterList'])
  },
  methods: {
    // 简化actions的引用
    ...mapActions(['changeCountAction'])
  }
}

3.问题分析

4.学习总结：

今天学习的内容其实主要就是一个仓库的配置，以及仓库中各种内容的引用，在组件中如何实现快捷的导入配置内容等；Vuex的内容中最重要的应该是分模块的内容，毕竟当数据一旦庞大起来，数据的划分很重要，数据划分的方法很重要，所以在Vuex中的分模块开发需要了解掌握，其余内容都是基础性的，数据的配置还是数据的修改实现的方法，其实就是换了一个地方书写而已，具体的实现逻辑就是那样的。

日期：11月22日购物车案例

001-Vue2-3入门到实战导学视频1哔哩哔哩bilibili

1.大体内容概要

今天学习内容主要就是基于Vuex内容实现一个购物车案例；

实现思路：

通过vue create 项目名创建一个基于Vuex的基础脚手架项目

配置基本的静态购物车界面（基础内容就不多说了）

基本的数据接口请求，视频中已经帮忙配置好了，直接调用即可

实现数据的动态化处理，通过接口获取商品数据，替代原静态购物车中写死的数据

创建store文件夹，存放Vuex的空仓库

通过Vuex的空仓库实现父子组件之间的数据共享，以及对于数据的操作等

2.重要内容摘要

import axios from 'axios'
export default {
  namespaced: true,
  state () {
    return {
      // 购物车数据 [{}, {}]
      list: []
    }
  },
  mutations: {
    updateList (state, newList) {
      state.list = newList
    },
    // obj: { id: xxx, newCount: xxx }
    updateCount (state, obj) {
      // 根据 id 找到对应的对象，更新count属性即可
      const goods = state.list.find(item => item.id === obj.id)
      goods.count = obj.newCount
    }
  },
  actions: {
    // 请求方式：get
    // 请求地址：http://localhost:3000/cart
    async getList (context) {
      const res = await axios.get('http://localhost:3000/cart')
      context.commit('updateList', res.data)
    },
    // 请求方式：patch
    // 请求地址：http://localhost:3000/cart/:id值  表示修改的是哪个对象
    // 请求参数：
    // {
    //   name: '新值',  【可选】
    //   price: '新值', 【可选】
    //   count: '新值', 【可选】
    //   thumb: '新值'  【可选】
    // }
    async updateCountAsync (context, obj) {
      // 将修改更新同步到后台服务器
      await axios.patch(`http://localhost:3000/cart/${obj.id}`, {
        count: obj.newCount
      })
      // 将修改更新同步到 vuex
      context.commit('updateCount', {
        id: obj.id,
        newCount: obj.newCount
      })
    }
  },
  getters: {
    // 商品总数量 累加count
    total (state) {
      return state.list.reduce((sum, item) => sum + item.count, 0)
    },
    // 商品总价格 累加count * price
    totalPrice (state) {
      return state.list.reduce((sum, item) => sum + item.count * item.price, 0)
    }
  }
}

3.问题分析

4.学习总结：

今天就练习了一个购物车的案例，主要时间其实是花在了网页的搭建上面，这样的目的其实也是为了自己多适应适应网页的搭建，相对于Vuex的内容，基础的内容搭建更加复杂，Vuex的使用只要逻辑思考到位，一步一步都能编写出来，要分清state的存储，mutations的方法调用，actions的异步处理等就好。今天的学习还是蛮快的，效率还可以。

日期11月23日综合案例练习-01

001-Vue2-3入门到实战导学视频1哔哩哔哩bilibili

1.大体内容概要

实现一个所学内容整合的vue项目案例，主要是一个购物app界面的设计，今天完成了登录界面，首页界面，搜索界面等部位的设计。

涉及知识点：

对于vant的全局以及局部导入使用

对于postcss-px-to-viewport-8-plugin的适配性的配置

对于一级路由二级路由的配置

创建Axios的实例,拦截器统一处理异常

实现了一个数据的持久化操作

全局前置导航守卫

首页动态渲染

思路考虑：

基础的底部框架需要使用静态页面搭建好，先写入死数据，具体动态数据后续修改

静态页面搭建完就需要考虑路由的连接，需要实现路由跳转功能了

有了静态页面就要考虑数据的动态部署，因此就要考虑发送请求获取数据（要注意创建axios实例）

对于发送请求的操作为了方便阅读可以统一放在api文件夹中通过js文件定义为函数处理

最后在页面中调用封装的请求函数，实现动态渲染数据

后续还没学到

2.重要内容摘要

2.1.实例化axios

import axios from 'axios'
import { showToast, showLoadingToast, closeToast } from 'vant'
import store from '@/store/index'
// 创建 axio实例， 将来对创建出来的实例。进行自定义配置
// 好处： 不会污染原始的 axios实例
const instance = axios.create({
  baseURL: 'http://cba.itlike.com/public/index.php?s=/api/',
  timeout: 5000,
  headers: { 'X-Custom-Header': 'foobar' }
})

// 自定义配置 - 请求/响应 拦截器
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  showLoadingToast({
    message: '请求中...',
    forbidClick: true, // 禁止背景点击
    loadingType: 'spinner', // 配置loading图标
    duration: 0 // 不会自动消失
  })

  // 请求头进行token添加
  const token = store.getters.token
  if (token) {
    config.headers['Access-Token'] = token
    config.headers.platform = 'H5'
  }

  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
  // 2xx 范围内的状态码都会触发该函数。
  // 对响应数据做点什么
  const res = response.data
  if (res.status !== 200) {
    // 给提示
    showToast(res.message)
    // 抛出一个错误的promise
    return Promise.reject(res.message)
  } else {
    // 关闭当前展示的提示
    closeToast()
  }
}, function (error) {
  // 超出 2xx 范围的状态码都会触发该函数。
  // 对响应错误做点什么
  return Promise.reject(error)
})

// 导出实例
export default instance

2.2.api文件夹中js请求函数封装

import request from '@/utils/request'

// 获取图形验证码
export const getPicCode = () => {
  return request.get('/captcha/image')
}

// 获取短信验证码
export const getMsgCode = (captchaCode, captchaKey, mobile) => {
  return request.post('/captcha/sendSmsCaptcha', {
    form: {
      captchaCode,
      captchaKey,
      mobile
    }
  })
}

// 验证码登录
export const codeLogin = (mobile, smsCode) => {
  return request.post('/passport/login', {
    form: {
      isParty: false,
      mobile,
      partyData: {},
      smsCode
    }
  })
}

3.问题分析

4.学习总结：

今天写项目的时候也是出现了报错，但是报错的原因是因为老师提供的接口调用不存在了，不是自己的书写原因，所以没有写下来；在今天所学内容中，我认为要记的内容还是有点多的，但是这些内容单拿出来一部分，就很难理解，所以我不打算写在笔记中，在项目中我都做了注释，方便后续不会的时候可以去看一下，今天完善项目的速度不是很快，因为我学到一半发现自己把以前学的java有点忘了，稍微回顾了一下。s

日期：11月27日综合案例练习-02

001-Vue2-3入门到实战导学视频1哔哩哔哩bilibili

1.大体内容概要

今天主要完成了vue2内容综合案例的全部内容，其实在这一部分内容中很多地方都是很类似的，无论是哪一种网页的设计还是js，css的配置都是一样的，所以对于这些内容就不多描述了，因为每一次的网页设计都是要根据需要来配置的，不是死板的，主要的内容或者通用的内容也就是那些有关于路由的全局守卫配置，或者请求的axios拦截配置等。

2.重要内容摘要

2.1.打包配置

对于今天的重要内容：打包的时候我用的是npm run build方法，yarn build不知道为什么使用不了，然后再配置综合案例打包的时候，配置了路径为相对路径却无法使用，被识别，因此我试了以下别的项目打包配置却可以，可能是我案例中的内容大多被我注释导致的。

//打包前在路由js配置文件中实现路由的懒加载，减少第一次加载页面压力
const ProDetail = () => import('@/views/prodetail')

3.问题分析

4.学习总结：

今天内容学习还算可以，对于大部分内容其实都是老师自己的理解，网页的设计的底层逻辑都是静态网页布局加上动态数据渲染，在深一点理解就是对于动态数据的渲染的各种学习，最近越学习就越会发现，好多的方法自己都不知道，在面对有些数据的处理的时候总是会出现问题，这一点就是自己学习的问题，所以也是想赶紧将这一部分内容全部学习完，然后学习我感兴趣的事情了。

日期：11月28日 vue3的基础学习

001-Vue2-3入门到实战导学视频1哔哩哔哩bilibili

1.大体内容概要

首先是vue3的创建不同于vue2，而是使用npm init vue@latest创建项目

vue3中在script内代码的编写改变较大，不在使用data、method等内容，而是改用在script中加入setup选项实现混合式编程；将一切不同的代码统一化书写，其中动态变量的定义使用const count = ref（变量）的方式实现，再则computed的计算属性也被替代了不在直接写在computed中编写而是const double = computed(() => count.value * 2)以这种方式直接写在script中实现，watch数据监听的使用也变简化：
watch(count, (newValue, oldValue) => {
console.log(newValue, oldValue)
})
最后在vue3中父子传递其实变化不大，只是使用的方式不同而已。

2.重要内容摘要

2.1.依赖注入 provide()、inject()

有一个父组件，里头有子组件，有孙组件，有很多后代组件，共享父组件数据

<template>
  <div class="page">
    顶层组件
    <RoomMsgItem/>
  </div>
</template>

<script setup>
import {provide, ref} from 'vue'
import RoomMsgItem from './room-msg-item.vue'
//组件嵌套关系：RoomPage -> RoomMsgItem ->RoomMsgComment
// 1.顶层组件提供数据
provide('data-key', 'this is room data')
// 传递响应式的数据
const count = ref(0)
prodive('count-key', count)
setTimeout(()=>{
    count.value = 100
}, 3000)
</script>

<script setup>
import { inject } from "vue";
// 2.接收数据
const roomData = inject('data-key')
//接收响应式数据
const countData = inject('count-key')
</script>
<template>
    <div class="comment">
        底层组件
        <div>
            来自顶层组件中的数据为：{{ roomData }}
        </div>
        <div>
            来自底层组件中的数据为：{{ counntData }}
        </div>
    </div>
</template>

3.问题分析

4.学习总结：

今天学习的内容主要就是一些简单的vue3基础内容，包括的重点内容就是一个跨级传递数据，今天学习的状态不太好，可能最近自己没休息好，感觉脑子昏昏沉沉，学习的时候学一点忘一点，不是有效学习，不能说学习的内容很难，只能说自己状态不佳，对于学习内容不是那么感兴趣，有些疲惫了。希望下个月可以自己调正好状态

日期：11月29日 Pinia-持久化、-ESlint配合Prettier完成代码风格配置，ElementPlus按需引入

001-Vue2-3入门到实战导学视频1哔哩哔哩bilibili

1.大体内容概要

2.重要内容摘要

2.1.Pinia持久化

Pinia的持久化就是本地存储的意思，但是pinia的持久化更加方便，可以直接使整一个的模块中内容一次性的实现持久化

//实现将pinia的使用提取出来到store的index.js文件中实现 （独立化）
import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(persist)
export default pinia
//使module文件夹中各个js文件在被外部引用时可以省略modules的路径编写（'@/store'）
export * from './modules/user'

2.2.-ElementPlus按需引入

这一部分内容就是实现代码的自动修复以及自动格式化的功能

相关网站：快速开始 | Element Plus (element-plus.org)

项目安装eslint		pnpm install element-plus
自动导入		    pnpm add -D unplugin-vue-components unplugin-auto-import

然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中
// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

2.3.ESlint配合Prettier完成代码风格配置

依旧要注意在设置中配置当保存时eslint自动帮我们修复错误以及保存代码，不自动格式化

 rules: {
    //前置:
    //1. 禁用格式化插件 prettier format on save 关闭
    //2. 安装Eslint插件 ， 并配置保存时自动修复
    'prettier/prettier': [
      'warn',
      {
        singleQuote: true, //单引号
        semi: false, //无分号
        printWidth: 80, //每行宽度至多80字符
        trailingComma: 'none', //不加对象|数组最后逗号
        endOfLine: 'auto' // 换行符号不限制（win mac 不一致）
      }
    ],
    'vue/multi-word-component-names': [
      'warn',
      {
        ignores: ['index'] // vue组件名称多单词组成
      }
    ],
    'vue/no-setup-props-destructure': ['off'], //关闭props结构的校验
    // 添加未定义变量错误提示
    'no-undef': 'error'
  }

3.问题分析

4.学习总结：

最近学习状态一直在下滑，我感觉自己需要空几天好好想想自己的心态，感觉情绪最近一直忽上忽下的，有点对学习懊恼了，想好好学习但是又缺乏动力，想着自己学了这些有什么用，我学了就忘记学了就忘记，学的内容又杂，对于java而已学习的东西好像都全部还回去了一样，几个月不去学习java，让我感觉我学习到底是为了什么，感觉很迷茫了。

日期：11月30日大事件项目-02

001-Vue2-3入门到实战导学视频1哔哩哔哩bilibili

1.大体内容概要

今天学习在内容总结下来就是要学会看Element puls的官方文档，在这个项目中使用的都是官方文档中的包装好的组件，静态渲染了整个页面，其余的动态处理就是通过api请求获取数据然后填入即可。

其余就是了解到对于部分内容的编辑可以通过打包为一个公用的vue文件，通过动态渲染实现不同地方的应用

安装 element-plus 图标库
pnpm i @element-plus/icons-vue
修改后端传输的时间格式
import { dayjs } from 'element-plus'
export const formatTime = (time) => dayjs(time).format('YYYY年MM月DD日')

2.重要内容摘要

2.1.登录与注册的输入框校验

在一般情况下，我们都需要对输入框的输入做及时的判断，来提醒用户，而Element中就提供了具体的语法，定义好的规则需要通过prop实现绑定

<el-form :rules="rules" >

const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 5, max: 10, message: '用户名必须是5-10位的字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    {
      pattern: /^\S{6,15}$/,
      message: '密码必须是6-15位的非空字符',
      trigger: 'blur'
    }
  ],
  repassword: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    {
      pattern: /^\S{6,15}$/,
      message: '密码必须是6-15的非空字符',
      trigger: 'blur'
    }，
    {       //自定义规则
      validator: (rule, value, callback) => {
        if (value !== formModel.value.password) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}

3.问题分析

4.学习总结：

今天的状态还行，学习的内容就是合理的利用Element实现网页的布局以及动态的渲染，其次也是学习到了一些组件的打包思路，以及时间格式的改造等，总体来说还可以，但是今天学习的笔记写的不太好，对于今天学习的内容的大概描述不太清晰，今天完成的项目部分还是挺多的，但是就是写完以后没有巩固，导致自己对于所写的内容的总体理解不太好，希望下个月开始能改善自己的毛病。

没有CD的男人

关注

32
点赞
踩
28

收藏

觉得还不错? 一键收藏
0
评论
大事件项目+css基础+vue内容学习解析

堆叠层级（z-index）：数越大级数越高，显示的越上面；通常用于处理元素之间的的堆叠排放显示光标类型（cursor）：主要分为4种，default默认、pointer小手、text工字型、move十字；一般用于提示用户当前元素可以做些什么过渡效果（transition）：它主要用于延缓触发特点条件后的元素变化，就比如图片的放大缩小通过过渡可以显示出过程等渐变：对于渐变这一块内容，渐变的样式是很多变的，因此死记是不可以的，所以当有需要的时候参阅菜鸟文档即可图标的使用（link：favicon）
复制链接

扫一扫