Vue2.0开发企业级移动端音乐Web App：https://coding.imooc.com/class/107.html

• WebPack：https://blog.csdn.net/qq_40794973/article/details/95480527

---

BetterScroll

• https://ustbhuangyi.github.io/better-scroll
• https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/

---

1 初始化项目 

npm install babel-runtime vuex fastclick vue-lazyload axios jsonp better-scroll@0.1.15 create-keyframe-animation js-base64 lyric-parser good-storage --save

npm install babel-register babel-polyfill connect-history-api-fallback eslint-plugin-html eventsource-polyfill express http-proxy-middleware opn webpack-dev-middleware webpack-hot-middleware stylus stylus-loader eslint-plugin-html --save-dev

package.json: https://github.com/yuanyu1997/vue-music/blob/master/Reception/package.json  

---

给DOM对象添加一个class 

<div id="div" class="a b c d e f g"></div>
<script>
    // 添加的className
    const className = "666";
    // dom对象
    const dom = document.getElementById("div");
    //a b c d e f g
    console.log(dom.className);

    let newClass = dom.className.split(' ');
    newClass.push(className);
    // className之间空格符分开
    dom.className = newClass.join(' ');

    //a b c d e f g 666
    console.log(dom.className);
</script>

 

---

HTML DOM getAttribute() 方法 

https://www.runoob.com/jsref/met-element-getattribute.html

getAttribute() 方法通过名称获取属性的值

<a id="jump" href="https://www.runoob.com/jsref/met-element-getattribute.html">HTML DOM getAttribute() 方法</a>

const caiNiao = document.getElementById('jump');
console.log(caiNiao.getAttribute('href')); // 获取href属性

caiNiao.setAttribute('href', 'https://blog.csdn.net/qq_40794973'); //修改href
caiNiao.setAttribute('属性名', '属性值');//添加属性
console.log(caiNiao.getAttribute('href'));
console.log(caiNiao);

---

vue事件处理 

https://blog.csdn.net/wangmx1993328/article/details/83270166 

<div id="app">
    <!--
    事件修饰符:
      .prevent: 阻止事件的默认行为 event.preventDefault()
      .stop: 停止事件冒泡 event.stopPropagation()
    -->
    <a href="http://www.baidu.com" @click.prevent="goToBaiDu">百度一下</a>
    <div @click="fatherDiv" style="width: 200px;height: 200px;background: red">
        <!--@click.stop-->
        <div @click.stop="sonDiv" style="width: 100px;height: 100px;background: blue"></div>
    </div>

</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        methods: {
            fatherDiv() {
                alert("外层");
            },
            sonDiv() {
                alert("内层");
            },
            goToBaiDu() {
                alert("就不百度");
            }
        }
    })
</script>

<div id="app">
    <div @touchstart="touchstart" @touchmove.stop.prevent="touchmoveStop"
         style="width: 500px;height: 500px;background: darkgrey"></div>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        methods: {
            // touchstart 手指触摸屏幕时触发事件
            touchstart() {
                console.log("手指触摸屏幕");
            },
            //touchmove 手指在屏幕上移动时触发
            touchmoveStop() {
                console.log("手指在屏幕上移动");
            }
        }
    })
</script>

target 事件属性：https://www.runoob.com/jsref/event-target.html

---

<div id="app">
    <div @click="showIndex">
        <a v-for="(person, index) in personArr"
           :key="index"
           :data-index="index"
           href="javascript:void(0)">
            {{person}}
            <hr>
        </a>
    </div>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            personArr: ['蔡徐坤', '乔碧萝', '张三', '李四', '王二']
        },
        methods: {
            showIndex(e) {
                const dom = e.target
                const index = dom.getAttribute('data-index')
                alert(index)
            }
        }
    })
</script>

---

Window setTimeout() /clearTimeout() 方法

Window setTimeout() 方法

https://www.runoob.com/jsref/met-win-settimeout.html

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式

• 如果你只想重复执行可以使用 setInterval() 方法
• 使用 clearTimeout() 方法来阻止函数的执行

// 3 秒（3000 毫秒）后弹出 "Hello" :
setTimeout(function(){ alert("Hello"); }, 3000);

Window clearTimeout() 方法 

https://www.runoob.com/jsref/met-win-cleartimeout.html

var myVar;
function myFunction() {
    myVar = setTimeout(function(){ alert("Hello") }, 3000);
}
myFunction();

 3秒内执行下面函数，警告框将不会弹出

function myStopFunction() {
    clearTimeout(myVar);
}
myStopFunction();

---

递归调用 

<html>
<head>
  <script type="text/javascript">
    let count = 0
    let timer
    function timedCount() {
      document.getElementById('txt').value = count
      count = count + 1
      // 每隔1000调用当前函数
      timer = setTimeout("timedCount()", 1000)
    }
    function stopCount() {
      clearTimeout(timer)
    }
  </script>
</head>
<body>
<form>
  <input type="button" value="开始计时！" onClick="timedCount()">
  <input type="text" id="txt">
  <input type="button" value="停止计时！" onClick="stopCount()">
</form>
</body>
</html>