chopper云音乐开发笔记

2018-08-10 admin

依赖版本号

  "dependencies": {
    "axios": "^0.18.0",
    "fastclick": "^1.0.6",
    "jsonp": "^0.2.1",
    "vue": "^2.5.2",
    "vue-awesome-swiper": "^3.1.3",
    "vue-router": "^3.0.1"
  },

问题总汇

1. 开发前的准备工作

  1. vue-cli脚手架安装
vue init webpack my-project

  1. 配置meta标签
  <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

  1. 解决移动端300ms延迟
//main.js
import FastClick from 'fastclick'
FastClick.attach(document.body)
  1. 解决抓取接口的跨域问题 (没用原视频讲的jsonp方法) 参考文章: https://blog.csdn.net/u012369… https://blog.csdn.net/fabulou…

2. props中 数组和对象 的写法

   props: {
    items: {
      type: Array,
      default () {
        return []
      }
    }
   }

3. <keep-alive>缓存路由页面

<keep-alive>
    <router-view/>
</keep-alive>

了解更多<keep-alive>: https://segmentfault.com/a/11…

4. promise封装

   new Promise((resolve, reject) => {
    jsonp(url, option, (err, data) => {
      if (!err) {
        console.log(data);
        reslove(data)
      } else {
        console.error(err)
        reject(reject)
      }
    })
  })

5. get请求的url拼接

     url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)

    function param (data) {
      let url = ''
      for (let i in data) {
        let value = data[i] !== undefined ? data[i] : ''
        url += `&${i}=${encodeURIComponent(value)}`
      }
      return url ? url.substring(1) : ''
    }

6. encodeURI() 与 encodeURIComponent()区别

encodeURI()是对整个URL编码的函数,对特殊含义的符号"; / ? : @ & = + $ , #“不进行编码,解码函数decodeURI()。 encodeURIComponent()能编码”; / ? : @ & = + $ , #"这些特殊字符,解码函数decodeURIComponent()。 例:

encodeURIComponent('{ "ct": 24 }') // 结果: "%7B%20%22ct%22%3A%2024%20%7D"
encodeURI('{ "ct": 24 }')  //结果:"%7B%20%22ct%22:%2024%20%7D"

参考文章: https://www.cnblogs.com/huzi0…

7. scoped 与 module区别

网上一搜一大堆内容,我用的module,就是每次写$style.className好头疼。。。

8. css样式:两行后省略

display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;

9. 箭头函数与普通函数中的this指向

见我提的问题:https://segmentfault.com/q/10… 参考文章:https://www.cnblogs.com/freel…

10. 开发工具 network下的 HXR中的请求 与 JS中的请求 区别

没弄明白

11. vue-awesome-swiper 鼠标滑动图片后自动轮播停止

(未解决)

原文链接:https://segmentfault.com/a/1190000015957692

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-37685.html

文章标题:chopper云音乐开发笔记

相关文章
JavaScript库开发者们的规则
保持无侵入性 我的HTML标记不想知道你的JavaScript代码。 严禁修改和扩展Object.prototype! 这条很重要,因此需要一条完全针对它的规则。对象是JavaScript功能的基本构建模块,不要搞乱它们。 不要...
2015-11-11
Vue 短信验证码组件开发详解
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此...
2017-03-17
五个值得尝试的前端开发工具
在过去的几年时间里,出现了许多全新的网页应用程序,不过,由于应用程序的功能越来越丰富,也导致了前端开发的复杂度大幅增加。 现在也有不少前端开发工具,比如Backbone和EmberJS框架都能提供稳定的App开发解决方案。同时,Javasc...
2015-12-23
使用AngularJS开发我们下一款Web应用的七个理由
在当下这个电子商务时代,每一家企业都热衷于通过网络拓展自身业务。而这也使Web开发人员市场呈现出前所未有的红火态势。根据最近发布的一份调查报告,全球网站总数已经超过8.76亿个,而且这一数字还在不断上升当中。市场上用于Web开发的平台亦多种...
2015-12-25
Webpack(含 4)配置详解——从 0 配置一套开发模板
前言 源代码 熟悉 webpack 与 webpack4 配置。 webpack4 相对于 3 的最主要的区别是所谓的零配置,但是为了满足我们的项目需求还是要自己进行配置,不过我们可以使用一些 webpack 的预设值。同时 webpack...
2018-05-02
推荐15款最好的 Twitter Bootstrap 开发工具
銆€銆€Twitter Bootstrap 鑷�浠�2011骞存渶鍒濆彂甯冨埌缃戜笂鍚庯紝杩呴€熸垚涓� Web 棰嗗煙鏈€娴佽�岀殑鍝嶅簲寮忓墠绔�寮€鍙戞�嗘灦涔嬩竴锛屾槸缃戦〉璁捐�$殑浼樼�€瀹炶返銆俆witter Bootstra...
2015-12-23
JavaScript数据类型判定的总结笔记
用typeof 来检测数据类型 Javascript自带两套类型:基本数据类型(undefined,string,null,boolean,function,object)和对象类型。 但是如果尝试用typeof 来检测对象类型都一律返回&...
2017-03-27
前端开发领域推荐关注的微信公众号
这篇文章分享了前端领域的多个值得关注的技术、设计、极客、创业相关微信公众号。其中有最受欢迎的热门公众号、也有专注某个技术或设计的公众号,涵盖:算法、JavaScript、Nodejs、程序员、Web前端、Linux、数据库、创业、UI设计和...
2017-03-23
如果我实现了自己的OS,我算开发者中的精英吗?
相信有很多Linux爱好者心中都怀有编出一个自己的操作系统的理想,一位外国网友在quora上提出了这个问题。本期#linuxstory 说#节目翻译节选了一个令人启迪的回答,让我们从另一个角度思考个人重新发明轮子的意义。以下是网友的答案: ...
2015-12-25
梳理前端开发使用eslint-prettier检查和格式化代码
问题痛点 在团队的项目开发过程中,代码维护所占的时间比重往往大于新功能的开发。因此编写符合团队编码规范的代码是至关重要的,这样做不仅可以很大程度地避免基本语法错误,也保证了代码的可读性。 对于代码版本管理系统(svn 和 git或者其他)...
2018-05-07
回到顶部