我的前端保命手册-1
HTML基础1. HTML 文件中的 DOCTYPE 是什么作用？HTML超文本标记语言: 是一个标记语言, 就有对应的语法标准
DOCTYPE 即 Document Type，网页文件的文档类型标准。
主要作用是告诉浏览器的解析器要使用哪种 HTML规范 或 XHTML规范 来解析页面。
DOCTYPE 需要放置在 HTML 文件的 <html>标签之前，如：
1234<!DOCTYPE html><html> ...</html> (目前主流)
1234<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> ...</html> (早期)
2. HTML、XML、XHTML 之间有什么区别？它们都属于标记语言。
语言
中文名
说明
HTML4
超文本标记语言
主要用于做界面呈现。HTML 是先有 ...
全球疫情图
前言在学了Echarts之后，也在看到官网上有很多包括地图的实例，于是想着如何创建一个能够动态更新的疫情地图，鉴于国内疫情情势总体向好，而全球的疫情并不乐观的情况下，便制作了全球的疫情地图，这篇博客的教程也是基于Echarts学习
所需基础知识
html、css、js
ajax
JQuery
Echarts
总体界面设计
首先便是将页面搭建起来啦，这里我选择展示的数据分别是疫情地图（中心位置），各国确诊人数饼状图（仿人民日报类型，右边位置），全球疫情趋势（左下角）以及各大洲疫情状况（左上角），这里页面设计是基于b站Echarts学习的页面设计改动的，剔除了两三个图表
创建对应文件夹，用来存放静态资源
设计地图界面，这里采用3 6 3的flex布局
页面代码书写
css样式书写
右上角实时时间代码书写
html页面的代码如下
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869 ...
基于vue的简易Todo-List
1.简介基于Vue半全家桶的新拟态板ToDoList，一个todolist而已，用几乎Vue全家桶是不是有点小题大做，是的，必须的，因为要巩固的知识，并且功能也相应的增加了，你可以打卡想看的书或者电影，以及小小的改变了todolist的相应逻辑，当天未完成的ToDo会累计到待完成任务，看着一天一天积下来的待办，多多少少希望减少你的惰性吧（希望目的达到），从而激发你一天满满的动力
注意：所使用的是localStorage存储数据（没用服务器），所以，如果你一不小心用了什么清垃圾软件或者手动清掉浏览器数据的话，它会消失，它会消失，它会消失
采用纯less写样式，只写了PC端响应式布局，没做移动端适配（就不要尝试用手机打开了，大丑）
在线地址
2.功能 1.输入代办，按下回车键，添加到当天待办事项 2.点击完成按钮，完成该代办，添加至完成事项 3.点击删除按钮，删除该待办 4.动态显示已完成和未完成事项数量 5.当天未完成待办，第二天添加至待完成任务，可在第二天点击“今天完成”重新添加至我的一天中 6.阅读选项打卡想看的书 7.电影选项卡打卡想看的电影 8.点击头像就是回到我的博客啦 9.导 ...
vue基础6-路由_vant组件库使用
知识点自测
url的组成部分都有哪些, hash值指的什么
今日学习目标
能够了解单页面应用概念和优缺点
能够掌握vue-router路由系统使用
能够掌握链接导航和编程式导航用法
能够掌握路由嵌套和路由守卫
能够掌握vant组件库基础使用
1. vue路由简介和基础使用1.0 什么是路由
目标: 设备和ip的映射关系
目标: 接口和服务的映射关系
目标: 路径和组件的映射关系
1.1 为什么使用路由
目标: 在一个页面里, 切换业务场景
具体使用示例: 网易云音乐 https://music.163.com/
单页面应用(SPA): 所有功能在一个html页面上实现
前端路由作用: 实现业务场景切换
优点：
整体不刷新页面，用户体验更好
数据传递容易, 开发效率高
缺点：
开发成本高(需要学习专门知识)
首次加载会比较慢一点。不利于seo
1.2 vue-router介绍
目标: 如何在Vue项目中集成路由
官网: https://router.vuejs.org/zh/
vue-router模块包
它和 Vue.js 深度集成
可以定义 - ...
vue基础5-动态组件_插槽_自定义指令
自测
==组件创建, 注册和使用 - 伸手就来特别熟练==
指令的作用
目标
能够了解组件进阶知识
能够掌握自定义指令创建和使用
能够完成tabbar案例的开发
1. 组件进阶1.0 组件进阶 - 动态组件
目标: 多个组件使用同一个挂载点，并动态切换，这就是动态组件
需求: 完成一个注册功能页面, 2个按钮切换, 一个填写注册信息, 一个填写用户简介信息
效果如下:
准备被切换的 - UserName.vue / UserInfo.vue 2个组件
引入到UseDynamic.vue注册
准备变量来承载要显示的”组件名”
设置挂载点, 使用is属性来设置要显示哪个组件
点击按钮 – 修改comName变量里的”组件名”
1234567891011121314151617181920212223242526272829303132333435<template> <div> <button @click="comName = 'UserName&#x ...
vue基础4-生命周期_组件进阶
自测
知道window.onload的作用
ajax是什么, XMLHttpRequest的使用步骤
jQ的 $.ajax底层是什么?
Promise的作用
async和await的作用-如何和Promise配合
同步异步的概念, 代码执行顺序
请求和响应, 以及JSON解析能力
Vue基础, 组件使用, props传值, 组件通信, 计算属性使用, 对象引用类型使用
学习目标
能够说出vue组件生命周期
能够掌握axios的使用
能够了解$refs, $nextTick使用和name使用
能够完成购物车案例开发
1. vue生命周期1.0_人的-生命周期
一组件从 创建 到 销毁 的整个过程就是生命周期
Vue_生命周期
1.1_钩子函数
目标: Vue 框架内置函数，随着组件的生命周期阶段，自动执行
作用: 特定的时间点，执行特定的操作
场景: 组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据
分类: 4大阶段8个方法
初始化
挂载
更新
销毁
阶段
方法名
方法名
初始化
beforeC ...
vue基础3-vue组件_组件通信_todo案例
知识点自测
this指向
12345678910111213141516let obj = { fn: function(){ // this指向此函数的调用者 }, fn () { // this指向当前函数的调用者 (如果都是在vue里, this指向的都是vue实例对象) }, fn: () => { // this指向外层函数作用域this的值 }}obj.fn();axios().then(res => { // 这里的this的值是多少哦?})
=作用
1234567let a = 10;let b = a; b = 20; // 基础类型, 单纯的值的赋值let a = {name: "哈哈"};let b = a; // a变量的值是引用类型, a里保存的是对象在堆的内存地址, 所以b和a指向同一个对象 (引用类型= ...
vue基础2-基础API_计算属性_过滤器_侦听器
自测
会自己定义数据结构
12345"红色","red", "蓝色","blue", // 上面的数据结构, 要用1个变量来装这4个值, 用什么数据结构呢?(数组还是对象) - 对象(可映射key->value) "小明", "小蓝", "小赵"// 上面的结构用数组比较合适
马上能反应过来循环遍历是什么, 索引(下角标)是什么
12345let arr = [10, 32, 99];// 索引就是数字, 标记每个值对应的序号, 从0开始// 索引是0, 1, 2// 数组需要用索引来换取值, 固定格式 arr[索引]// 遍历就是挨个取出来
数组的filter方法使用
1234567let arr = [19, 29, 27, 20, 31, 32, 35];let newArr = arr.filter((val) => {return val >= 30})// 数组调用.fil ...
vue基础1-vue脚手架&基础API
必安装 - vue-devtools学习, 调试vue必备之利器 - 官方提供的呦
右上角-插件-谷歌访问助手-打开Chrome商店-搜索vue-devtools回车-然后添加至Chrome等待下载后自动安装-右上角显示已经添加即代表成功
如果实在打不开谷歌商店, 换个网 / 直接用备用文件夹里的vue-devtools插件包安装到浏览器扩展程序也一样用
==不要图标上带橘黄色beta的==
==如果这个网址打不开, 就用预习资料里备用的本地版安装也可以, 安装过程和上个插件安装过程一致==
vscode-插件补充vue文件代码高亮插件-vscode中安装
代码提示插件-vscode中安装
知识点想学会今天的内容, 先测测这几个会不会
表达式, 变量是什么
new的作用和含义
实例化对象
什么是对象上的, 属性和方法
对象的赋值和取值
this的指向
npm/yarn是什么, package.json干什么的, 下载包的命令是什么, 什么是模块化开发
函数的形参实 ...
初识Vuex
vuex基础-介绍
为什么会有Vuex ?
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用**集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测**的方式发生变化。
vuex是采用集中式管理组件依赖的共享数据的一个工具，可以解决不同组件数据共享问题。
结论
修改state状态必须通过**mutations**
**mutations**只能执行同步代码，类似ajax，定时器之类的代码不能在mutations中执行
执行异步代码，要通过actions，然后将数据提交给mutations才可以完成
state的状态即共享数据可以在组件中引用
组件中可以调用action
vuex基础-初始化功能
建立一个新的脚手架项目, 在项目中应用vuex
1$ vue create demo
开始vuex的初始化建立，选择模式时，选择默认模式
初始化：
第一步：npm i vuex --save => 安装到**运行时依赖** => 项目上线之后依然使用的依赖 ,开发时依赖 =&g ...
