vue实现动画
动画效果基本使用方式1：12345678910111213141516171819202122232425262728293031323334353637383940414243<template> <div> <button @click="isShow = !isShow">显示/隐藏</button> <!-- apper默认开始就显示动画 --> <transition name="hello" appear> <h1 v-show="isShow">你好呀！</h1> </transition> </div></template><script>export default { name:'T ...
VueCLI
VueCLI介绍CLI是Command-Line Interface，翻译为命令行界面，但是俗称脚手架。Vue CLI是一个官方发布vue.js项目脚手架，使用vue-cli可以快速搭建Vue开发环境以及对应的webpacki配置，
安装
全局安装@vue/cli：npm install -g @vue/cli
切换到要创建项目的目录进行创建：vue create XXXX (vue cli3)/ vue init webpack 项目名称（vue cli2）
启动项目：npm run serve
相关配置方式一：通过vue ui修改
进入vue ui后导入项目
可以管理相应的依赖和插件
在配置项，配置相关配置
方式二：直接创建配置文件配置
创建vue.config.js文件（名称必须固定）
直接在文件中修改配置文件
1234567891011121314// vue.config.jsconst { defineConfig } = require('@vue/cli-service')module.exports = defi ...
vue组件化
Vue组件化组件化的诞生由于之前的传统页面编写方式存在的问题：
依赖关系混乱不好维护
代码复用性低
所以Vue提供了组件化的方式: 每个组件有自己相应的css、html、js等代码,体现了组件的封装，解决了传统方式存在的问题
组件化的基本使用具体步骤：
使用组件构造器创建组件
注册组件
使用组件
12345678910111213141516171819202122232425262728293031323334353637383940<div id="app"> <!-- 使用组件 --> <mycpn></mycpn></div><div id="app2"> <!-- 使用组件 --> <cpn></cpn></div><script src="../js/vue.js"></script><script> //1.使用组件构造器 ...
VueJs
Vuejs基础Vue (是一套用于构建用户界面的浙进式框架。与其它大型框架不同的是，Vue被设计为可以白底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工贝链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。
Vue初体验123456789101112131415161718192021222324252627<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>初体验</title></head><body> <div id="app"> {{message}} <ul> <li v-for="item in movies ...
mock
Mock当前端工程师需要独立于后端并行开发时，后端接口还没有完成那么前端怎么获取数据？这时可以考虑前端搭建web server自己模拟假数据，这里我们选第三方库mockjs用来生成随机数据拦截Ajax请求。
官方文档
基本使用
安装mockjs：cnpm install mockjs --save-dev
创建mock文件夹以及mock配置的js文件
方式一：直接创建随机数据
123456789101112131415const Mock = require('mockjs')//随机生成idlet id = Mock.mock('@id')console.log(id)//随机生成对象let obj = Mock.mock({ id: '@id()',//随机id username: '@cname()',//随机生成中文名字 date: '@date()',//随机生成日期 avatar: "@image('200x200 ...
H5本地存储
浏览器本地存储(webStorage)LoaclStorage一种存在浏览器的域对象;并且关闭浏览器之后依然有效，只有手动清除或者清空缓存才会消失。
123456789101112131415161718192021222324252627282930313233343536373839<!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>localStorage</title></head><body&g ...
Axios
axiosaxios是一个基于promise的网络请求库，作用于node.js和浏览器中，它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequest。
使用方式
使用npm安装：$ npm install axios
使用 cdn：<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
基本使用1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768<script> //获取按钮 const btns = document.querySelectorAll(' ...
Promise
PromisePromise是一门新的技术（ES6规范）,Promis是JS中进行异步编程的新解决方案（旧方案是单纯使用回调函数）
优点：
指定回调函数的方式更加灵活
支持链式调用，可以解决回调地狱问题
Promise的状态改变promise的状态为实例对象中的一个属性[PromiseState]
1.pending(初始状态)变为resolved2.pending(初始状态)变为rejected
说明：只有这2种，且一个promise对象只能改变一次无论变为成功还是失败都会有一个结果数据成功的结果数据一般称为value，失败的结果数据一般称为reason
Promise的工作流程
相关ApiPromise(excutor){}
executor：(resolve,reject)=>{}
resolve函数：内部定义成功时调用的函数value=>{}
reject函数：内部定义失败时我们调用的函数reason=>{}
Promise.prototype.then 方法:(onResolved,onRejected)=>{}
onResolved函数：成 ...
Ajax
Ajax解决跨域1.设置跨域属性的响应头
response.setHeader(‘Access-Controll-Allow-Origin’.’*’);
2.jsonp（利用一些h5标签可以跨域的特性发送请求）
发送jsonp请求
发送异步请求Get请求123456789101112131415const xhr = new XMLHttpRequest();xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=100');//设置响应体数据的类型xhr.responseType = 'json';//设置请求头xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');xhr.send();xhr.onreadystatechange = function(){ if(xhr.readyState === 4){ ...
JavaScript
JavaScript数据类型
Number：默认值0
具体细节：
0开头8进制
0b二进制
默认是10进制
0x表示16进制
Number.MAX_VALUE数字型最大值
Number.MIN_VALUE最小值
Infinity无穷大
-Infinity无穷小
NaN非数字
相关函数：
isNaN：判断是否是非数字
Boolean：默认值false
String：默认值””
length属性：返回长度
Undefined：默认值undefined
Null：默认值null
类型函数
typeof()：判断类型
toString()：转换字符串
String()：转成字符串
parseInt()：转换为数字型
parseFloat()：转换为浮点型
Number()：转换为数字型
Boolean()：转换为布尔值
数组创建方式:
new出来：new Array()
利用字面量：let arr = [1,2,”1231”,true];
获取方式
利用索引（索引号从0开始）：数组名[索引号]
获取长度
arr.length：获取数组长度
判断是否为数组 ...
