在做项目过程遇到的相关问题___只记录问题，后期补上方法

• 快速上下滚动时，在苹果手机有一瞬间的留白

>>在路由添加 scrollBehavior()=>({y:0})
图片加上宽度，

• ​​​​​​​跨越和代理服务器上传问题

在confit 文件下的index文件使用代理 进行配置


this.$route.query.id;

•  一个事件多个方法  @click="selected(item),nav()"  fn(){selected(dd) nav() }

 <router-link :to="{ path:'/home/game', query: { num:  1} }">  

•  concat() 方法用于连接两个或多个数组。

该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
语法
arrayObject.concat(arrayX,arrayX,......,arrayX)

• vue 的公共样式可以放或者导入从 最外面的index  

localStorage.getItem

router-link会阻止click事件  router-link中加.native才能生效

• addCart(goods){

        this.$set(goods, 'num', 1)
        this.setCart(goods)
     },
赋值操作，虽然可以新增属性，但是不会触发视图更新

受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的

要处理这种情况，可使用$set()方法，既可以新增属性,又可以触发视图更新。

Computed property "playerData" was assigned to but it has no setter.
需要使用this.setPlayerData()方法对playerdata数据操作

正确写法：this.$set(this.data,”key”,value’)


vuex 中的 {__ob__: Observer}

这些数据是vue这个框架对数据设置的监控器，一般都是不可枚举的。

animation-play-state: paused|running


create-keyframe-animation   添加动画


<img src="../../../static/img/star.png">


<img src="static/img/star.png">  script 和 <img src="">像这样 都可以用
在样式中需要写 在dev 是 可以直接 background: url(/static/img/star.png)
但是在build 时候是读取不到的，在build 是需要重新定位图片地址 如：background: url(/static/h5/static/img/star.png)


在vue学习中遇到给router-link 标签添加事件@click 、@mouseover等无效的情况
所以如果在想要在router-link上添加事件的话需要@click.native这样写

Vue-- 监听路由变化，数据无法更新？


提醒一下，当使用路由参数时，例如从 /user/foo 导航到 user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。 意思很明显了：虽然路由参数发生了变化，但组件还是那个组件，Vue生命周期也还没结束，此时并不会刷新数据。（开发spa页面，一切都是以路由为起点的，路由变化，页面跟着变化）


不过，官网也提出了相应的解决方案：复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch（监测变化） $route 对象：

Q: vue 2.0 使用@click.self 绑定自身事件不触发是怎么回事？
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->


A:
<div v-on:click.self="close" ref="pop">
    <button></button>
</div>


<!--


给组件绑定原生事件


有时候，你可能想在某个组件的根元素上监听一个原生事件。可以使用 .native 修饰 v-on 


-->


<my-component v-on:click.native.self="close"></my-component>


close(e) {
    console.log(e.target)
    this.$refs.pop.style.display = 'none'
}


this.refs.refName.style.webkitAnimationPlayState = 'paused'



定义和用法
scrollTo() 方法可把内容滚动到指定的坐标。
语法
scrollTo(xpos,ypos)
window.scrollTo(100,500)


this.$refs.lyricList.scrollTo(0, 0, 1000)


scrollToElement


let lineEl = this.$refs.lyricLine[lineNum - 5]
this.$refs.lyricList.scrollToElement(lineEl, 1000)


this.$refs.lyricList.$el.style[transitionDuration] = 0
this.$refs.middleL.style.


opacity = 1 - this.touch.percent


created: function () {
  const router = this.$router;
  router.go({path:'/home/main'});
}


router.redirect({
  '*':"/home/main"
});  



vue-router中v-link指令特性


控制台报错： The play() request was interrupted by a call to pause()

 

<li @click="selectItem(song, index)" class="item" v-for="(song, index) in songs">

methods:
selectItem(item, index) {
        this.$emit('select', item, index)
      },


vm.$emit( event, […args] )


参数：


{string} event
[...args]
触发当前实例上的事件。附加参数都会传给监听器回调。


1) detailData.user.nickname 不能三点及以上 需要代替
2) 使用代替后 可以使用 filters



computed :
监听多个数据或者一个数据来维护返回一个状态值 ，只要其中一个或多个数据发生了变化，则会从新计算整个函数体，从新返回状态值
watch :
只有一个一个监听据，只要这个数据发生变化，就会在返回两个参数，第一个是当前的值，第二个是变化前的值，每当变化的时候，则会触发函数体的里的逻辑行为，来进逻辑后续操作


watch
'test.dd'(){}


timeupdate 事件在音频/视频（audio/video）的播放位置发生改变时触发。
该事件可以在以下情况被调用:
播放音频/视频（audio/video）
移动音频/视频（audio/video）播放位置
提示： timeupdate 事件通常与 Audio/Video 对象的 currentTime 属性一起使用，该属性返回音频/视频（audio/video）的播放位置（以秒计）。


当浏览器能够开始播放指定的音频/视频时，会发生 canplay 事件。
let audio = document.getElementById("audio")
  audio.addEventListener('canplay',()=>{
  <!-- duration 放在canplay事件可以防止duration NaN -->
    this.duration = parseInt(audio.duration)
    console.log(2,this.duration)
  })
当音频/视频处于加载过程中时，会依次发生以下事件：
loadstart
durationchange
loadedmetadata
loadeddata
progress
canplay
canplaythrough


在苹果手机中，类似列表上下滑动，会不流畅时，给列表最外面层添加样式


在  overflow:scroll部分，也就是需要滑动的层处，加css:  -webkit-overflow-scrolling: touch;


test项目: verflow-y: auto;  -webkit-overflow-scrolling: touch;