npm

使用vue-cli构建项目时，使用npm安装sass有版本要求，最新版本的会报错

axios
使用方法：
第一次使用axios，具体的用法是：
1.安装npm install axios —save

2.在vue项目中的main.js中引入：
import axios from 'axios'

3.需要在vue的原型上添加axios对象
vue.prototype.$axios=axios

调用：
this.$axios.get(路径，参数)

跨域
调用接口的时遇到跨域问题，解决方法：


在vue项目中的config文件里找到index.js


dev项中找到proxyTable{}
配置：
"/api": {
	         target: “目标地址”,
	         changeOrigin: true   //是否换源，当然得换，为了跨域
	     },



微信小程序

微信小程序中的 <text></text>不能换行 否则页面中的显示效果会出现问题

2.0.7.2迭代

火狐浏览器不兼容 td中 height：1px的写法 ，根本问题是火狐浏览器中div不会默认撑开父元素

通过将table的所有元素改为height:100%解决
el-switch开关有动画

原因是开关是有默认值的，调用接口之后开关的值被改变，因此有切换的动画。

从根本上没办法解决它，只好在它赋值完后将开关显示出来
接口的配置问题

在eduplus_web中配置跨域请求接口，在angularjs中也是可以使用的，其原理我还不太理解
报表优化时，表头有变动

这需要改变数据的组织结构，由于不想给后端增加工作量，因此我们选择把拿到的数据放在另一个数组中，对这个数组进行操作，再把这个数据渲染到页面中

获取当前时间前后n年日期
var gap = function (n)
    {
        var now = new Date;
        now.setFullYear(now.getFullYear () + n);
        return now;
    }
    var date = gap(3);
    alert("距当前日期3年后的日期时间: " + date.toLocaleString ());

this
• 在非严格模式下，foo() 最后会将 this 设置为全局对象。在严格模式下，这是未定义的行为，在访问 bar 属性时会出错——因此 “global” 是为 this.bar 创建的值。
•  obj1.foo() 将 this 设置为对象 obj1。
• foo.call(obj2) 将 this 设置为对象 obj2。
• new foo() 将 this 设置为一个全新的空对象。
为了搞清楚 this 指向什么，你必须检查相关的函数是如何被调用的。调用方式会是

以上 4 种之一，这也会回答“this 是什么”这个问题。
闭包
最常见的使用方式是模块化
解构赋值
var { x, y, z } = bar(); console.log( x, y, z ); // 4 5 6
很酷吧，是不是？

但是 { x, … } 是省略掉了 x: 部分还是 : x 部分呢？实际上我们使用这个缩写语法的时候是

略去了 x: 部分。
for in/of
for…in 在数组 a 的键 / 索引上循环，而 for…of 在 a 的值上循环
问题描述：

类似

当下方描述字不一致时 无法简单的做到每个item的间距保持一致

解决：
html：



css :

此文章记录前端开发中遇到的问题



浏览器兼容问题：



判断浏览器是否兼容css3和html5



可用modernizr插件，下载地址http://modernizr.cn/
他不能为写好的属性做自动兼容，而是可以根据js，来进行判断，因此可以根据兼容与否，进行自定义的操作，例如：

//如果浏览器支持background-size属性，就给#buttomButtom添加class为addImage
        if (Modernizr.backgroundsize) {
            $('#buttomButtom').addClass('addImage');
        } 



使IE8以下兼容css3的background-size属性



在css上添加过滤器，例如：
.buttomTopLeft{
    background-image:url("/project/image/lunbo.png");
    background-size:100% 100%;
    width: 65%;
    height: 100%;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/project/image/lunbo.png',sizingMethod='scale');
}
这里filter的意思就是为background-size做一个过滤，
这里要注意几点:
一个是url的路径一定要和background-image的路径一致
另一个是路径要写绝对路径，写了相对路径的会加载不出来图片。

对width和height做兼容



如果直接写height，width，意思是不管你怎样，就只显示这么大，
但是如果div中的img将你的div撑开怎么办，样式就会混乱，这样的话可以为你的img在css中加这样一句话：

width:expression(this.width>600?"600px":this.width+"px");

这个意思是用了expression表达式，判断高度是不是超过了600px，超过了就强制显示600px，没有超过，就按找正常width显示。

>expression表达式，意思就是将css和js联系在一起，支持IE5+
>同时支持使用元素自身属性和方法，以及浏览器对象，也括号中应该为js表达式计算的结果
>举个栗子：

top:expression(document.body.offsetHeight-110+ "px");

前端开发中遇到的问题及解决方法
1，何为MVVM?
view层：
视觉层；在前端开发中，通常是DOM层；主要作用是给用户展示各种信息；
Model层：
数据层；数据可能是我们固定的死数据，更多的是来自服务器，从网络上请求下来的数据；
ViewModel层：
视觉模型层；视觉模型层是View和Model沟通的桥梁。一方面它实现了Data Binding,也就是数据绑定，将Model的改变实时的反应到View中；另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件（点击，滚动，touch等）时，可以监听到，并在需要的情况下改变对应的Data。
2，页面跳转路径的传参，及动态设置当前页面的标题
url: ‘…/…/pagesA/aboutArti/collegeArtiList?id=’ + id + ‘&istitle=’ + name
&符号前的是传给【跳转页面】的值，+后是本页面需要传递的值，
data() {
			return {
				istitle:'',//接收上个页面传过来的值
				titleList: {
					1: {
						name: '页面名称1 '
					},
					2: {
						name: '页面名称2'
					}
				},
			}
		},
onLoad(options) {
this.onetitle = options.istitle
uni.setNavigationBarTitle({
		title: this.titleList[this.onetitle].name
});
},

接收传递值的页面，this.onetitle 是本页面的接收定义的值，如果在本页面要调用就用这个【onetitle】
❌错误代码：
data() {
			return {
				istitle:'',//接收上个页面传过来的值
			}
		},
onLoad(options) {
this.onetitle = options.istitle
uni.setNavigationBarTitle({
				if(this.onetitle == 1){
					title:"页面名称1"
				}else{
					title:"页面名称12"
				}
			});
},

错误原因：uni.setNavigationBarTitle()的参数类型是Obeject ,直接将if判断挪出来同样能解决错误。
3，数据的类型，及数据类型之间的转换
数据类型：
不可改变的原始值（基本数据类型）：number, string, boolean, undefined, null,
引用值：array, object, function
数据类型之间的转换：
Number(mix) 将值转为数字
var num = Number("123") => j结果num = 123  
var num = Number(false) =>结果 num = 0
var num = Number(null) =>结果 num = 0
var num = Number(undefined) =>结果 num = NaN

parseInt(string, radix) 可解析一个字符串，并返回整数
var num = parseInt("123.9") => j结果num = 123, 是直接将小数点后的东西直接删除，而非四舍五入
⚠️：radix是基底，非必传，以radix 目标进制为基底，将string转化为10进制
radix的取值范围2-36;radix,当 radix 为 2 时，当前对象是二进制值 数字，当前对象会被转成10进制的数字类型输出
var num = parseInt("b", 16) => j结果num = 11

parseFloat(string) 可解析一个字符串，并返回浮点数
var num = parseFloat("123.977abc") => j结果num = 123.977

toString(radix) 将当前对象以字符串形式返回
var demo = toString(1234);
console.log(typeof(demo) + ":" + demo)
 = >结果：string：1234；null 及undefined会报错
 ⚠️：radix,当 radix 为 2 时，当前对象会被转换为二进制值表示的字符串

String(mix)：将数据类型转换成 字符串
var demo = String(1234);
console.log(typeof(demo) + ":" + demo)
 = >结果：string：1234

Boolean() 将值转换为Boolean类型
var b1 = Boolean("");//返回false,空字符串
var b2 = Boolean("s");//返回true，非空字符串
var b3 = Boolean(0);//返回false，数字0
var b4 = Boolean(1);//返回true，非0数字
var b5 = Boolean(-1);//返回true，非0数字
var b6 = Boolean(null);//返回false
var b7 = Boolean(undefined);//返回false
var b8 = Boolean(new Object());//返回true，对象
总结：除 空字符串，数字0，null，undefeated，其他均会返回true

join()  将一个数组的所有元素连接成一个字符串并返回这个字符串，元素是通过指定的分隔符进行分隔的。
const elements = ['qiuqiu01', 'qiuqiu02', 'qiuqiu03'];
console.log(elements.join());
=> 结果：qiuqiu01,qiuqiu02,qiuqiu03

split()  把一个字符串分割成字符串数组。
const elements = "hello";
console.log(elements.split());
=> 结果：["h", "e", "l", "l", "o"]
项目真实数据🌰：
var imgs = "http://oss.woodscm.com/1306111493192159232/e04e83548456415798eba28dfd8bc2b4.jpg,http://oss.woodscm.com/1306111493192159232/dfb80bb7d8914ec78ce63d15d3e0d9c5.jpg"
console.log(imgs.split(","))
==> 结果：["http://oss.woodscm.com/1306111493192159232/e04e83548456415798eba28dfd8bc2b4.jpg", "http://oss.woodscm.com/1306111493192159232/dfb80bb7d8914ec78ce63d15d3e0d9c5.jpg"]

4，封装自定义底部tabbar组件的页面跳转
组件里的页面跳转不能使用uni.switchTab进行跳转，需要使用uni.redirectTo的跳转方式，是uni app的坑
uni.redirectTo({
				url:"/teaArchive/pages/archives/archives"
})

❌错误代码：
uni.switchTab({
				url:"/teaArchive/pages/archives/archives"
})

➕ 总是被我弄混淆的跳转路径方式及区别
1,uni.navigateTo(OBJECT) 
保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
  uni.navigateTo({
      url: 'test?id=1'
  });
2,uni.redirectTo(OBJECT)
关闭当前页面，跳转到应用内的某个页面。
  uni.redirectTo({
      url: 'test?id=1'
  });
3,uni.reLaunch(OBJECT)
关闭所有页面，打开到应用内的某个页面。
  uni.reLaunch({
      url: 'test?id=1'
  });
4,uni.switchTab(OBJECT)
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
	 uni.switchTab({
    url: '/pages/index/index'
 });
5,uni.navigateBack(OBJECT)
关闭当前页面，返回上一页面或多级页面。
uni.navigateBack({
    delta: 1
});

5，解决登录页面中，获取不到 苹果手机中文键盘下 输入的信息
首先对于input输入框事件，采用v-model的双向绑定方法，高效快捷监听输入框的信息；
<input v-model="login.acount" @blur='acount' type="text" placeholder="输入登录账号" placeholder-style="color:rgba(190,191,190,1)" />

在input事件中，添加blur()方法 当元素失去焦点时发生 blur 事件,即可解决获取不到 苹果手机中文键盘下 输入的信息
data() {
			return {
				login: {
					acount: '', //输入登录账号
				},
			}
},
methods:{
		acount(e){
				this.login.acount = e.detail.value
		},
}

6,三目运算符的使用
三元运算符的格式：
[条件语句] ? [表达式1] : [表达式2]
其中如条件语句为真(即问号前面的条件成立)执行表达式1，否则执行表达式2.
productDetail.price ===0 ?'面议':productDetail.price

7，后台上传的富文本图片过大，前端如何保证图片不被裁剪且百分百展示
<view class="isrich">
		<rich-text :nodes="productDetail.content"></rich-text>
</view>
.isrich img {
		max-width: 100%;
	}

只需要给富文本的图片加个最大宽度的限制即可
8，保留多行文本框【非富文本】的样式，如首行缩进，及分段
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2HLlb5xQ-1602257749051)(/Users/mac/Library/Application Support/typora-user-images/image-20201009064830415.png)]
使用textarea 而非 rich-text， rich-text会将空格及断行的样式吃掉
<textarea  v-model="supplier.remark"  disabled/>

❌错误代码：
<rich-text :nodes="supplier.remark"></rich-text> 

9，数据的增加与删除
//1，先写点击事件
<view class="adddriver" @click="addData">+新增</view>
<view class="remove" @click="removeData(index)">移除</view>
//2，在data中定于需要添加的数据
 add: {
     id: 0,
     name: '',
     date: '',
     price: 0.00,
     count: 0
  }
  // 3，在methods方法中，定义点击事件
  methods: {
        addData: function () {
             this.add.id = this.books.length + 1
             this.books.push(this.add)
             this.add = {
                 id: 0,
                 name: '',
                 date: '',
                 price: 0.00,
                 count: 0
               }
         }，
         removeData: function (index) {
            this.books.splice(index, 1)
        }
    }

⚠️：splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。
array.splice(start[, deleteCount[, item1[, item2[, …]]]])     start 指定修改的开始位置（从0计数）； deleteCount (非必传) 整数，表示要移除的数组元素的个数。
const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
console.log(months);
结果==> Array ["Jan", "Feb", "March", "April", "June"]

⚠️：push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
10，过滤器及数据的计算属性
过滤器的使用方法：
Vue.filter(‘过滤器名字’,function(形参){
return 要返回的值;
}),
//2，在页面中使用过滤器
<view>{{price | showprice}}</view>

方法一：全局使用过滤器
//1,引用过滤器
Vue.filter('showprice', function (price) {
      price = parseFloat(price)//string转换为number类型
      return '¥' + price.toFixed(2)
})
//方法二：局部使用过滤器
 methods: {
     filters:{
           showprice(price){
            return '￥'+price.toFixed(2)
            }
      }
 }

数据的计算属性
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="js/vue.js"></script>
    <style>
        table {
            border: 1px solid #e9e9e9;
            border-collapse: collapse;
            border-spacing: 0;
        }

        th,
        td {
            padding: 8px 16px;
            border: 1px solid #e9e9e9;
            text-align: left;
        }

        th {
            background-color: #f7f7f7;
            color: #5c6b77;
        }

        .t-input {
            border: none;
            width: 15px;
        }
    </style>
</head>

<body>
    <div id="app">
        <table>
            <thead>
                <tr>
                    <th></th>
                    <th>书籍名称</th>
                    <th>出版日期</th>
                    <th>价格</th>
                    <th>购买数量</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in books">
                    <td>{{item.id}}</td>
                    <td>{{item.name | namefilter}}</td>
                    <td>{{item.date}}</td>
                    <td>{{item.price | showprice}}</td>
                </tr>
                <tr>
                    <!-- <td v-for="value in item">{{value}}</td>  -->
                    <td>{{add.id}}</td>
                    <td><input type="text" v-model="add.name"></td>
                    <td><input type="text" v-model="add.date"></td>
                    <td><input type="text" v-model="add.price"></td>
                </tr>
            </tbody>
        </table>
        <h2>总价格：{{price}}</h2>

    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                books: [
                    {
                        id: 1,
                        name: '算法导论',
                        date: "2020/02",
                        price: 85.00,
                        count: 1,
                    },
                    {
                        id: 2,
                        name: '编程艺术',
                        date: "2020/05",
                        price: 30.00,
                        count: 2,
                    },
                    {
                        id: 3,
                        name: '编程珠己',
                        date: "2020/05",
                        price: 55.00,
                        count: 4,
                    },
                    {
                        id: 4,
                        name: '算法导论',
                        date: "2020/05",
                        price: 70.00,
                        count: 1,
                    }
                ]
            computed: {
                price: function () {
                    var jia = 0
                    for (let i = 0; i < this.books.length; i++) {
                        if (this.books[i].count != 0) {
                            jia = jia + (this.books[i].price * this.books[i].count)
                        }
                    }
                    return jia
                }
            },


        })

    </script>

</body>

</html>

ie不兼容a标签和download属性结合从而下载文件


a标签及其属性在各浏览器的兼容性，更多详情见：MDN
需要使用下方的兼容方法：
var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); 
var arr = image.split(',');
var mime = arr[0].match(/:(.*?);/)[1];
var bstr = atob(arr[1]);
var n = bstr.length;
var u8arr = new Uint8Array(n);
while(n--){
	u8arr[n] = bstr.charCodeAt(n);
}
window.navigator.msSaveBlob(new Blob([u8arr], {type:mime}), "download.png");