qq_44707181的博客

原创 css3 - flex布局

flex布局原理:通过父盒子添加flex属性，来控制子盒子的位置和排列方式flex布局父项常见属性:flex-direction: —设置主轴（x轴）的方向justify-content: —设置主轴上的子元素排列方式flex-wrap: —设置子元素是否换行align-content: —设置侧轴（y轴）上的子元素排列方式（多行）align-items: —设置侧轴上的子元素排列方式（单行）flex-flow: —复合属性，相当于同时设置了flex-direction和flex-wrap

原创 vue路由传参的两种方式(params与query)

①params的类型(需要在路由中配置)es6拼接路由中path配置②query的类型（路由中不需配置）路由中不需配置

原创 for...in,for..of与arr中的应用函数

for…infor…in…遍历对象-----遍历obj的keyfor…in…遍历数组下标for…offor…of…遍历数组元素v-for遍历对象，默认遍历value值,index对应key值数组中的应用函数:① map( ) ----返回一个新的数组，数组中的元素为原始数组调用函数处理后的值。例：-----使用map()对数组中的元素 * 2:let arr2 = this.arr.map((n) => {return n * 2})②filter() 方法创建一个新的数组，新

原创 vue对象传参（对象）

将要跳转的页面//传递参数//用JSON.stringify( )转换完毕后，再用encodeURIComponent( )将参数转换一下，就可以传参了let obj = {name：’ tome ‘,age：’ 15 ’}var arr = JSON.stringify( this.obj )this.$router.push( ‘/shop/’ + endcodeURIComponent( arr ) )//接受参数//接受参数的时候，用decodeURLComponent( )

原创 v-bind绑定style

class绑定的两种方式：对象语法（偏多），数组语法1.对象语法:style = " {key(属性名)：value(属性值)}"key可以驼峰命名①html中直接使用,value必须为字符串（写死情况）②data中设置(引用变量)2.数组语法（很少使用）...

原创 动态绑定class

1.基本绑定（data中绑定—字符串形式）2.对象形式（通过修改boolean值，增加class）3.放在methods中4.数组格式（很少使用）

原创 ES6

1.数组解构2.对象的解构3.ES6 声明字符串的方式（模板，变量拼接…）4.箭头函数5.this指向（call( )改变this的指向）call( )方法箭头函数简写6.给函数参数赋初值7.symbol的使用symbol创建对象8.迭代器（for of遍历）9.setset的操作10.Map( )map的操作...

原创 ES10

1.Object.fromEntries( ) – 用来创建一个对象（参数为二维数组或者map）//二维数组const result = Object.fromEntries([[‘name’,‘尚硅谷’],[‘name’,‘尚硅谷’],])//Mapconst m = new Map( )m.set(‘name’,‘AAA’)const result = object.fromEntries(m)Object.entries 将对象转数组 （与Object.fromEntries(

原创 ES9

1.对象展开2.对象扩展符 …const obj = {q:‘第一组’,w:‘第二组’}…obj //q:‘第一组’,w:‘第二组’例2：对象合并(需求)3.正则扩展—命名捕获分组//4.正则扩展—反向断言（判断这次的匹配结果的true，false情况）正向断言:根据当前匹配的后面的内容，来判断前面的内容是否满足调件反向断言:根据当前匹配的前面的内容，来判断后面的内容是否满足调件//声明字符串let str = ‘456456564你知道么11111啦啦啦’；

原创 ES7-8

1.includes (ES7) == indexOf判断元素是否存在于一个数组中，存在true,不存在false例:const arr = [‘Tom’,‘Jarry’,‘xiaomMng’,‘xiaoHong’]判断arr.includes(‘Tim’); -------返回falsearr.includes(‘Jarry’); -------返回true2.( ES7) 幂运算**例子：计算2的10次方2**10 == Math.pow(2,10)3.async和a

原创 async与await封装ajax请求---ES8

//发送Ajax请求，返回的结果是promise对象function sendAjax(url){return new Promise((resolve,reject) => {//1.创建对象const x = new XMLHttpRequest( );//2.初始化 Get请求x.open(‘GET’,URL);//3.发送x.send( );//4.事件绑定x.onreadystatechange = function( ){if(x.readyState

原创 ES6路由请求地址拼接

原创 Vue路由传参

Vue路由传参1.路由中使用 “？”拼接 （route,query）跳转前的页面：跳转页面路由进行？拼接所要向跳转页面的参数。跳转后的页面：使用$route的query中接收上层页面传来的路由参数，2.this.$router.params.参数名称...

原创 Vue组件动态样式（props）

子组件中：htmldata中使用propos传递数据父组件中:html中绑定传值data中动态设置css样式

原创 Vue computed计算属性使用

{{totalCount}}data:shopList:[{price:5,num:5},{price:6,num:6}]computed:{totalCount(){let total = 0shopList.forEach(function(ele,index){total += ele.price * ele.num})return total}}totalCount为html中的data值，不需在data中声明，不是方法，实时更新。totalCount为61...

原创 vue filter过滤器使用

vue filter过滤器的使用HTML**姓名 ：{{ele.name}}年龄 ：{{ele.age}}性别 ：{{ele.gender | attr}}Datalist:[{name:‘TOM’,age:10,gender:0},{name:‘TOMs’,age:10,gender:1},{name:‘TOM1’,age:10,gender:1},{name:‘TOM2’,age:10,gender:1}]Filter过滤器attr(data){return data ==

原创 css自定义border

通过css修改border-bottom的长度(使用::after伪类).home::after {content: ‘’;width: 10%;height: 5px;display: block;margin: 0 auto;border-bottom: 2px solid ;}为元素home新增border-bottom边框;width修改border-bottom的长度，height修改距离元素的高度。注意: display:block必有，否则不生效。...

原创 uni-app 页面跳转并传参

uni页面传参①传递单个参数传递参数页面：元素绑定事件在methods中声明具体方法，接收形参。使用ES6拼接字符串 " ` ` ",把需要传递的参数拼接在所跳转的路径后面。跳转后的页面:在onload()中接收前页面传来的参数，再取值②传递多个参数（Object形式）传递参数页面：元素绑定事件在事件中设置需要传递的数据在methods中声明具体的方法，接收形参。使用json.stringify( )将 所传递的值转换为 JSON 字符串。..

原创 Vue全选，多选，单选，反选

1.全选 cheakAll: false改变全选状态，为true时全部打勾（遍历单选）getAll(){this.shopList.forEach(（item ，index）=> {item.check = this.cheackAll//check为单选状态})}2.多选，单选① var n = 当前shopList中的check值为ture的个数② if(选中的长度 == 全选的长度)，全选为true,否则为falsechangAll(){第一种方式//选中状态 fi