精华内容
下载资源
问答
  • 接着在vue项目中的main.js引入: import axios from ‘axios’ 然后需要在vue原型上添加axios对象 vue.prototype.axios=axios这里是调用方法:this.axios=axios 这里是调用方法: this.axios=axios这里是

    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,来进行判断,因此可以根据兼容...

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

    浏览器兼容问题:

    判断浏览器是否兼容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做兼容

    如果直接写heightwidth,意思是不管你怎样,就只显示这么大,
    但是如果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层: 数据层;数据可能是我们固定的死数据,更多的是来自服务器,从网络上请求下来的...

    前端开发中遇到的问题及解决方法

    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>
    
    展开全文
  • 这里写自定义目录标题欢迎使用Markdown编辑器新改变功能快捷键合理创建标题,有助于目录生成如何改变文本样式插入链接与图片如何插入一段漂亮...,丰富你文章UML 图表FLowchart流程图导出与导入导出项目场景...

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

    a标签及其属性在各浏览器的兼容性
    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");
    
    展开全文
  • 在web前端开发中遇到的问题

    千次阅读 2019-03-23 09:31:44
    借助符合场景的前端框架,eg.jQ ,MVVM 页面内容多而复杂,项目管理如何去维护 用模块化和组件化思路来管理,即采用代码管理中分而治之方法,将复杂代码结构拆分成多个独立,简单,解耦合结构或文件管理...
  • DOM 节点 : 文档本身就是一个文档对象 ...注释是注释节点 ...设置超链接:href:用于指定连接目标url地址 ul标签type值:disc,square,circle ol标签type属性,type=a,编号使用英文字母;type=1,使用数字编码;...
  • 1. 父类标签使用transform引起子类fixed定位失效问题 父类标签使用transform,且transform值不为none时,会导致子类标签使用fixed定位失效。 解决方法:1.父类移除transform样式 2.把需要使用fixed子元素移出...
  • Google的科学使用也包含了很多内容,这里我们先说如何不通过Google解决遇到的问题。 问题 这是一段含有一小块错误的JS代码,功能主要是实现点击 旋转的音乐图标的时候,如果音乐再播放,就暂停,如果音乐暂停了,就...
  • 目录1.h5调用手机打电话功能2.ES6 Object.assign()方法3.Expression has changed after it was checked. Previous value: '3'. Current value: '2'.内容1.h5调用手机打电话功能head 里面加上:<meta name=...
  • 问题:设置background:cover,chrome,ff,ie9+正常,ie9兼容模式(推测是ie7)及ie8两边有留白解决:放弃在body上设置背景图片,在html上加一个div专门放背景图片 <div id="div1"><img src="./images/content_bg...
  • 前端做登录注册时提交按钮问题 在用ajax传数据给后端时,通常给button按钮绑定js事件 &amp;amp;amp;lt;form class=&amp;amp;quot;form-horizontal&amp;amp;quot;&amp;amp;amp;gt; &amp;amp;...
  • 记录开发过程中遇到的问题及通过自己摸索或查阅网上的教程整理出的解决方案,如有不全或者错误欢迎留言更正 #####1. 如何设置输入框 input 中 placeholder的字体颜色、字号 input::-webkit-input-placeholder{ /*...
  • 在使用nuxt过程遇到打包构建情况,有用nuxt generate,有用nuxt build,那么两者区别是什么呢??? 文件区别 nuxt generate generate:构建应用程序并生成每个路径作为HTML文件(用于静态托管...
  • 记录开发过程中遇到的问题及通过自己摸索或查阅网上的教程整理出的解决方案,如有不全或者错误欢迎留言更正 目录 nth-last-child(n) 选择器 设置倒数第n个子元素 cordova+vue 项目打包成Android(apk)应用 前端...
  • 记录开发过程中遇到的问题及通过自己摸索或查阅网上的教程整理出的解决方案,如有不全或者错误欢迎留言更正 目录 vue嵌套路由跳转问题 路由拦截 nodejs 中文乱码问题 node去掉favicon.ico v-html node中path....
  • 记录开发过程中遇到的问题及通过自己摸索或查阅网上的教程整理出的解决方案,如有不全或者错误欢迎留言更正 目录 1.es6 新增三种字符串方法 2.对象转字符串/数组转字符串 3.js属性对象的hasOwnProperty方法 4.search...
  • 前端字体最优设置 前端代码规范 Object.defineProperty 快速浮点数转整数 数组去重 正文 1. chromium目前不支持mp3音频格式 2. 前端字体最优设置 body { font-family: -apple-system, BlinkMacSystemFont, ...
  • angular2 [ngStyle] [ngClass]用法 node 版本更新 css 超出隐藏 css width和height 计算 css3自适应布局单位vw,vh angular 组织默认事件和冒泡 angular innerHtml string startsWith() 方法 css 透明度设置 ...
  • 2.ES6 Object.assign()方法 3.Expression has changed after it was checked. Previous value: ‘3’. Current value: ‘2’. 内容 1.h5调用手机打电话功能 head 里面加上: <meta name="format-detection" ...
  • 目录 1.momentJS 技巧 2.if 小技巧 3…Uncaught TypeError: a[b].target.className.indexOf is ...两个日期/时间时差 moment(endTime).diff(moment(startTime), ‘years’) moment(endTime).diff(moment(startTime),
  • 小程序,子页面传值给父页面方法 小程序,input高度设置 angular 当数据改变时,页面数据不改变解决办法 小程序wx.base64ToArrayBuffer调用时,提示thirdScriptError “atob” failed;undefined Error: “a...
  • angular2 [ngStyle] [ngClass]用法 node 版本更新 css 超出隐藏 css width和height 计算 css3自适应布局单位vw,vh angular 组织默认事件和冒泡 angular innerHtml string startsWith() 方法 css 透明度设置 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,591
精华内容 1,436
关键字:

前端开发中遇到的问题