前端笔记汇总

一、Html

1、div同行显示

通过float设置向左向右对齐，宽度足够会同行

<style type="text/css">
/*同行靠左*/
.div1{
	float:left;
	width:600px;
	background: #8d97dc;
}
/*同行靠右*/
.div2{
	float:right;
	background: #e29c9c;
	width:350px;
    
}
</style>

<div  class="div1">div1：我是普通div1</div>
<div  class="div1">我要和div1同行</div>

<div  class="div2">div2：我是普通div2</div>
<div  class="div2">我要和div2同行</div>

2、div布局居中

<div style="margin:auto;"/>

二、JS

1、循环遍历

//使用for
for (let item of data.activity.merchIdList) {
    for (let i = 0; i < this.dataList.length; i++) {
     if (item === this.dataList[i].mrchId) {
        this.$refs.table.toggleRowSelection(this.dataList[i], true)
      }
    }
 }
 
 //使用forEach
  data.activity.merchIdList.forEach(v => {
       this.dataList.forEach(_v => {
         if (v === _v.mrchId) {
           this.$refs.table.toggleRowSelection(_v, true)
         }
       })
     })
           

三、Vue

（一）、常用

1、this.$router.push参数获取

this.$router.push()默认参数是path,path不能和params一起使用

//path方式
this.$router.push({path:'/AddShop', query:{id:val.ID})
this.$route.query.id

 //name方式
this.$router.push({name:'/AddShop', params:{id:val.ID})
this.$route.params.id

name使用需要在router下面index.js里面添加相关映射

{ path: '/AddShop', component: _import('modules/mar/shop-add-or-update'), name: 'AddShop', meta: { title: '增加商品' } },

2、v-for使用

模板里面使用:

 <template v-for="site in sites">
   <li>{{ site.name }}</li>
   <li>--------------</li>
 </template>

直接使用：

<div class="tableList" v-for="item in this.dataList" v-text="item.mrchNameC" />

下拉框使用:

<el-select v-model="value" @change="selectCupn" placeholder="请选择券类型">
   <el-option  v-for="item in typeList"  :key="item.value"  :label="item.label" :value="item.value"/> 
 </el-select>
            

3、父子组件传递消息

3.1、父组件获取子组件信息

   <!--声明ref-->
  <child-component ref="child"></child-component>
  // 初始化子组件
  this.$refs.child.init(data)
  // 获取子组件信息
  this.$refs.child.dataForm

3.2、子组件传递给父组件消息

 <!--父组件-->
 <child-component @childHanlder="parentHandler"></child-component>
 // 子组件触发方法
 parentHandler(msg)
 
 <!--子组件-->
 this.$emit('childHanlder', msg);

4、upload组件带token的两种方法

方法一：

<el-upload
 action="http://localhost:8888/UploadFile";
 :headers="myHeaders">
 <el-button size="small" type="primary">点击上传1</el-button>
</el-upload>

data: {
 myHeaders: {
     token: this.$cookie.get('token')
 }
}

方法二: 使用http-request代替默认的action

<el-upload
 action="#"
  :http-request="uploadFile">  #
 <el-button size="small" type="primary">beforeUpload方式上传</el-button>
</el-upload>

uploadFile (param) {
     let formData = new FormData()
     formData.append('file', param.file)
     this.$http.post(this.$http.adornUrl('/mar/activity/upload'), formData)
       .then(({data}) => {
         if (data && data.code === 0) {
           this.url = data.path
           this.$message({
             message: '上传成功',
             type: 'success',
             duration: 500,
             onClose: () => {
               this.$emit('upload', data.path)
             }
           })
         } else {
           this.$message.error(data.msg)
         }
       })
   }

5、引入文件方式（@ .）

# 引入src下对应路径下的所有文件
import '@/element-ui'

# 引入src下对应路径下的指定文件
import SingleUpload from "@/components/upload/singleUpload";

# 引入相对路径下的指定文件
import AddOrUpdate from "./brand-add-or-update";
import CategoryCascader from "../common/category-cascader";

（二）、错误分析

1、浏览器访问本地图片不到

错误原因：现在浏览器由于安全策略的问题，直接访问静态文件是不被允许的。
可以使用nginx代理访问，在nginx的配置文件中加入如下配置

location /newpay-manager/file/ {
           alias 'D:/home/mach/activity/img/';
           index  index.html index.htm;
       }

2、下拉框不显示

Unknown custom element:<el-select>组件不显示，未引入

import ElementUI from 'element-ui' //引入所有组件
Vue.use(ElementUI)  // 使用elementUI

import {Message, Select, Option, Cascader} from 'element-ui';//引入对应的组件

elementUI分为全部引入和按需引入

（三）、常用命令

1、切换cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install

2、移除node_modules

npm install rimraf -g
rimraf node_modules

（四）、理论

1、简述

• 一套构建用户界面的渐进式框架
• 是一个轻量级的MVVM（Model-View-ViewModel），其实就是所谓的数据的双向绑定
• MVVM模式理解

2、webpack打包

• 打包模块的机制，只是把依赖的模块转化成可以代表这些包的静态文件
• 识别你的模块依赖，来打包你的代码，不管使用的是commonjs还是amd或者es6的import
• webpack做的就是分析代码，转换代码，编译代码，输出代码
• 主要是兼容不支持es6版本的浏览器

3、Vue-router

vue-router实现原理

四、微信小程序

1、RequestParam接收

后台使用RequestParam接收,会出现报错Required String parameter 'mobile' is not present

data 参数说明
最终发送给服务器的数据是 String 类型，如果传入的 data 不是 String 类型，会被转换成 String 。转换规则如下：

• 对于 GET 方法的数据，会将数据转换成 query string（encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)…）

• 对于 POST 方法且 header[‘content-type’] 为 application/json 的数据，会对数据进行 JSON 序列化

• 对于 POST 方法且 header[‘content-type’] 为 application/x-www-form-urlencoded 的数据，会将数据转换成

解决方案: application/x-www-form-urlencoded

url: api.AuthRegisterCaptcha,
      data: {
        mobile: that.data.mobilePhone
      },
      method: 'POST',
      header: { 
        'Content-Type': 'application/x-www-form-urlencoded' 
    }

2、点击事件传递参数View—>Js

<view bindtap="onItemClick" data-index="1">点击事件传参</view>

onItemClick: function(e){
    // 传递的参数
    let index = e.currentTarget.dataset.index;
}

3、对象的属性赋值

 var nickName = "userInfo.nickName";
 var avatarUrl = "userInfo.avatarUrl";
 that.setData({        
    [nickName]: '点击登录',
    [avatarUrl]: '../../../images/head/default.jpg'
  });

4、子元素居中

display: flex;
align-items: center;
justify-content: center;