vue.js - 关于vue的一些疑问 数据的双向绑定 以及使用dom的问题

问题描述

问 题

正在学vue 可以说是边做边学 做了个音乐播放器
现在还只是能搜索播放
我想请问 我现在的播放时间是写在点击事件里了 所以不点击都不会变
是应该怎么能在这个值发生变化就可以视图中跟着变化呢

mounted不是很理解 是类似于ready这种 图上写的是编译好html的时候执行的 是只执行一次是吧

<div class="timeLine">
                        <span class="time">{{this.$store.state.currentTime}}</span>
                        <div class="animateLine">
                            <span class="passline"></span>
                            <span class="passbtn" id="passsbtn"></span>
                        </div>
                        <span class="time">
                            {{this.$store.state.sc}}
                        </span>
                    </div>
                    
                    <script>
    import Vue from 'vue'
    import AwesomeSwiper from 'vue-awesome-swiper'
    import {formatTime} from '../app/common.js'
    Vue.use(AwesomeSwiper)

    export default{
        data(){
            return{
                swiperOption: {
//                    自由播放时间间隔
                    autoplay: 0,
//                    初始slide索引
                    initialSlide :1
                },
                isplaying:false,
               songName:this.$store.state.chosenList.songname,
                singer:this.$store.state.chosenList.singername,
                albumpic_big:this.$store.state.chosenList.albumpic_big,
                 albumpic_small:this.$store.state.chosenList.albumpic_small,
                m4a:this.$store.state.chosenList.m4a, 
               sc:this.$store.state.sc,
                currentTime:this.$store.state.currentTime
            }
        },  
        mounted(){
            var audio=document.querySelector("#audio");
            var playbtn1=document.querySelector("#playbtn1");
            var playbtn2=document.querySelector("#playbtn2");
            audio.play();
            playbtn1.style.display="none";
            playbtn2.style.display="block";
            this.isplaying=true;
//            为了缩小的播放器点击弹出播放界面保留播放时间用的
            audio.currentTime=this.$store.state.currentTimes;
            
            this.$store.state.currentTime=formatTime(Math.round(audio.currentTime))
           
            var passbtn=document.querySelector("#passbtn");
            console.log(passbtn)
            passbtn.touchstart = function (e) {
                passbtn.touchmove = function () {
                    console.log('move');
                };
                passbtn.touchend = function () {
                    console.log('mousestop');
                    document.touchmove = null;
                    document.touchend = null;
                };
            };
        },

        methods:{
            play:function(){
                var audio=document.querySelector("#audio");
                var albumImg=document.querySelector(".albumImg");
                var playbtn1=document.querySelector("#playbtn1");
                var playbtn2=document.querySelector("#playbtn2");
                var passline=document.querySelector(".timeLine .animateLine .passline");
                
//                总时长
                this.$store.state.sc=formatTime(Math.round(audio.duration))
//                已播放的时长
                 this.$store.state.currentTime=formatTime(Math.round(audio.currentTime))
                
                if(!this.isPlaying){
                    audio.play();
                    this.isPlaying = true;
                    playbtn1.style.display="none"
                    playbtn2.style.display="block"
                    passline.style.animationPlayState="running";
                    passline.style.animationDuration=Math.round(audio.duration)+'s';
                    albumImg.style.animationPlayState="running";
                }
                else{
                    this.isPlaying = false;
                     audio.pause();
//                     audio.currentTime = 0;
                     playbtn1.style.display="block"
                     playbtn2.style.display="none"
                     passline.style.animationPlayState="paused";
                     albumImg.style.animationPlayState="paused";
                }
            },
            pre:function(){
              this.$store.state.chosenListIndex= this.$store.state.chosenListIndex-1
              this.$store.state.chosenList=this.$store.state.list[this.$store.state.chosenListIndex]
              
              this.songName=this.$store.state.chosenList.songname
              this.singer=this.$store.state.chosenList.singername
              var audio=document.querySelector("#audio");
              audio.play();
                           
            },
            next:function(){
              this.$store.state.chosenListIndex= this.$store.state.chosenListIndex+1
              this.$store.state.chosenList=this.$store.state.list[this.$store.state.chosenListIndex]
            
              this.songName=this.$store.state.chosenList.songname
              this.singer=this.$store.state.chosenList.singername
              var audio=document.querySelector("#audio");
              audio.play();
            },

            shrinkBottom:function(){

                var audio=document.querySelector("#audio");
                this.$store.state.currentTimes=audio.currentTime
                console.log(this.$store.state.currentTimes)
            }
        }
    }
</script>

还有问题就是像上面 我仍然是用到了js来寻找dom 我清楚vue不赞成dom操作 但是由于自己水平所限很是不知所措 并不知道更好的解决办法 而且把这些变量在不同方法中写了好几遍 在vue中我不清楚全局的变量应该怎么写写在哪

解决方案

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div id="app">
        <ul>
            <li>
                <button @click="$refs.audio.play()">play</button>
            </li>
            <li>time: {{ currentTime }}</li>
            <li>
                <audio ref="audio" @timeupdate="getTimes" src="http://screencasts.b0.upaiyun.com/podcasts/teahour_episode_78.m4a"></audio>
            </li>
        </ul>
    </div>

    <script src="http://cdn.bootcss.com/vue/2.1.0/vue.min.js"></script>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    currentTime: 0,
                }
            },
            methods: {
                getTimes() {
                    this.currentTime = this.$refs.audio.currentTime
                }
            }
        })
    </script>
</body>
</html>

---

rxjs watch change

https://github.com/r-park/sou...

这篇关于vue.js - 关于vue的一些疑问 数据的双向绑定 以及使用dom的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！