前端
vvfar
这个作者很懒,什么都没留下…
展开
-
flex弹性布局
1、display:flex默认水平布局2、flex-direction:column/row 转换轴3、flex-wrap:wrap 当宽度不够时自动换行4、flex-flow:column wrap-reverse5、flex-grow:1 自动充满屏幕6、justify-content:flex-start/flex-end/center/space-between...原创 2022-04-20 12:40:54 · 196 阅读 · 0 评论 -
axios语法
1、全局引入import Axios from "axios"Vue.prototype.$axios=Axios.create({ baseURL:config.baseApi});Vue.prototype.$config=config;2、建立config文件export default{ baseApi:"http://vueshop.glbuys.com/api", token:"1ec949a15fb709370f"}3、视图create原创 2022-04-02 19:09:33 · 206 阅读 · 0 评论 -
Vuex状态管理
1、vue cil 4.x版本支持vuex 3版本npm install vue@32、cli安装import Vuex from "vuex"Vue.use(Vuex);3、分模块let counter={ namespaced:true, state:{ count:100, users:[ {id:1,name:"张三",age:18}, {id:2,name:"李四",age:22}, {id:3,name:"原创 2022-04-01 17:49:47 · 183 阅读 · 1 评论 -
Vue2局部组件
<html> <head> <script src="vue.js"></script> </head> <body> <div id="app" v-cloak> <input-component></input-component> </div> </body> .原创 2021-09-15 14:33:28 · 233 阅读 · 0 评论 -
vue2全局组件
<html> <head> <script src="vue.js"></script> </head> <body> <div id="app" v-cloak> <public-component></public-component> </div> </body> .原创 2021-09-15 14:17:04 · 466 阅读 · 0 评论 -
双向绑定原理
<html> <head> </head> <body> <input type="text"> <span id="text"></span> </body></html><script> var text=document.getElementById("text"); var data={};.原创 2021-09-10 14:38:58 · 98 阅读 · 0 评论 -
建造者模式
var Human=function(param){ this.skill=param && param.skill || '保密'; this.hobby=param && param.hobby || '保密'; } Human.prototype={ getskill:function(){ return this.skill; }, ge...原创 2021-09-03 10:18:50 · 64 阅读 · 0 评论 -
工厂模式(1)
var Java=function(content){ this.content=content; (function(content){ var div=document.createlement('div'); div.innerHTML=content; div.style.color='green' document.getElementById('contai...原创 2021-09-02 13:19:39 · 55 阅读 · 0 评论 -
简单工厂模式
原始写法: var LoginAlert=function(text){ this.content=text } LoginAlert.prototype.show=function(){ } var userNameAlert=new LoginAlert('用户名不能多于16个字母或数字') userNameAlert.show() var passwordAlert=new LoginAlert('输入密码不正确!'.原创 2021-09-02 10:04:00 · 87 阅读 · 0 评论 -
promise/async/await实例
//test1 let code=200; let p1=new Promise((resolve,reject)=>{ setTimeout(()=>{ if(code==200){ resolve("成功!"); }else{ reject("失败!"); } }) }) p1.th...原创 2021-08-26 10:26:26 · 78 阅读 · 0 评论 -
ES6 promise前端ajax请求
let request=(method,url,data)=>{ let request=new XMLHttpRequest() return new Promise((resolve,reject)=>{ request.onreadystatechange==function(){ if(request.readyState==4){ resolve(reque.原创 2021-08-26 10:24:02 · 92 阅读 · 0 评论 -
安装Typescript
npm config set registry http://registry.npm.taobao.orgnpm i -g typescripttsc -v新建ex1.tslet hello:string="hello world"let message:any="我是任意类型"message=truemessage=20console.log(hello)编译为jstsc ex1.ts启动html代码安装live server检测js代码nod.原创 2021-08-10 16:00:15 · 59 阅读 · 0 评论 -
async/await/promise
function getTime(){ return new Pormise((resolve,reject)=>{ setTimeout(()=>{ resolve(10) },30) });}async function getAsync(){ let num=await getTime() console.log(num)}getAsync()原创 2021-08-07 17:32:09 · 50 阅读 · 0 评论 -
箭头函数(es6)
let person=()=>{ console.log("大家好")}person()let person(..args)=>{ console.log(args)}高阶函数function person(){ return function(wrap){ return function(prop){ console.log(wrap,prop) } }}let person=.原创 2021-08-07 17:17:07 · 59 阅读 · 0 评论 -
模块化(es6)
//导出export let name="张三"export default name<script type="module"> import {name} from "./global.js" console.log(name)</script>原创 2021-08-07 16:56:21 · 51 阅读 · 0 评论 -
解构赋值(es6)
let person={ name:"张三", age:20}let {name,age,city="北京"}=personconsole.log(name,age)//或者let name,age({name,age}=person)console.log(name,age)//取别名let {name:Pname,age,city="北京"}=person深层嵌套let person={ children:{ name:"张三".原创 2021-08-07 11:49:12 · 56 阅读 · 0 评论 -
对象字面量语法扩展
let title="VUE"let price=80let book={title,price}console.log(book)对象方法的简写let person={ say(){ console.log("say方法") }}person.say()计算属性名,属性名出线:-或中文,需要用[]let ageAttr='age'let person={ ['first-name']:"四", ['last-name']:.原创 2021-08-07 10:58:46 · 67 阅读 · 0 评论 -
Object.assign对象的拷贝与合并
let target={a:1}let source1={b:2}let source2={c:3}Object.assgin{target,source1,source2}console.log(target)如果目标对象有同名属性,或多个源对象有同名属性,后面的属性会覆盖前面的属性。let target={a:1,b:2}let source1={b:3,c:3}let source2={c:4}Object.assign(target,source1,source2).原创 2021-08-07 10:37:18 · 82 阅读 · 0 评论 -
扩展运算符三个点的使用
扩展运算符理解起来并不难,其作用就是用于取出对象中的所有可遍历的属性,拷贝合并到当前对象之中。可以实现拷贝对象、合并对象、拷贝数组、合并数组。//对象浅拷贝let obj1={a:1,b:2}let obj2={...obj1}obj2.a=3console.log(obj1)console.log(obj2)//对象合并let obj3={...obj1,...obj2}...原创 2021-08-05 17:01:09 · 86 阅读 · 0 评论 -
模板字面量之变量占位符&默认参数
变量占位符可以看做是JavaScript字符串的升级版,可以将JS表达式嵌入到模板字面量中。let name="张三"let str=`欢迎${name}同学,学习Vue`console.log(str)let price=10let amount=3let str=`商品价格${price},商品数量${amount},总价${(amount*price).toFixed(2)}`console.log(str)在ES5中声明函数参数是不能有默认值的,但是在ES6中是可以写默原创 2021-08-05 16:40:35 · 211 阅读 · 0 评论 -
模板字面量之多行字符串
模板字面量是增强版的字符串,它用反引号`(按键1左边的按键)标识。 在ES6出现之前,咱们在做开发,字符串里面是不支持换行的,这样咱们在做程序的时候可读性很差。ES5字符串换行的方式: 1.使用反斜杠\ 2.使用拼接字符串var a=`aaa bbb`console.log(a)...原创 2021-08-05 15:21:47 · 160 阅读 · 0 评论 -
const常量的声明
const 声明一个只读变量,声明之后不允许改变。意味着,一旦声明必须初始化,否则会报错,常量的命名规范:全部大写。对于引用类型保证的不是变量的值不变,而是保证变量指向的内存地址所保存的数据不允许改变。const a=[1,2,3]a.push(4)console.log(a)const obj={"book":VUE"}//报错obj={"book","JAVA"}console.log(obj)...原创 2021-08-05 14:23:54 · 889 阅读 · 0 评论 -
let与var的区别
1.作用域不一样 var来声明变量,只有函数作用域和全局作用域,没有块级作用域,也就是说可以在代码块{}外部使用。而let可以实现块级作用域,只能在代码块 {} 内有效,在 {} 之外不能访问。if(1==1){ let a=1}//报错console.log(a)2.let没有变量提升 ES6 明确规定,如果区块中存在let和const命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错。总之,在代码块内,使用let命令声明变量之原创 2021-08-05 14:15:25 · 3594 阅读 · 0 评论 -
layui框架
1、layui栅格<div class="layui-container"> 常规布局(以中型屏幕桌面为例): <div class="layui-row"> <div class="layui-col-md9"> 你的内容 9/12 </div> <div class="layui-col-md3"> 你的内容 3/12 </div> </div>原创 2021-07-27 09:23:31 · 1237 阅读 · 0 评论