vue学习记录 6

遇到的问题

1、将自己的代码插入项目后，图片资源无法加载。

<img src='../image/mine.png'/>此句图片可以显示
<img :src="`../image/cell${cell.value}.png`"/>此句图片会裂开

正确的字符串拼接指定图片路径：

<img :src="require(`../image/cell${cell.value}.png`)">

2、页面布局时，ul和li组件居中设置 text-align: center; 失效

正确的ul列表组件单列垂直居中设置：

ul {
  /* background-color: aquamarine; */
  display: flex;           /*灵活布局*/
  flex-direction:column;   /*垂直布局*/
  justify-content: center; /*垂直页面居中*/
  /*width百分比则靠左收缩*/
}
li {
  margin: 10px;            /*项间距*/
  margin-left: 30%;        /*左间距*/
  margin-right: 30%;       /*右间距*/
  background: rgb(147, 234, 147);
  font-size: large;
  text-align: center;      /*居中*/
  line-height: 60px;       /*项高*/
  /*如果是直接height的话，字体水平靠上垂直居中；line-height才能水平居中*/
}

3、显示NaN：未声明或者写在了声明前，或者格式不显示。

4、第三个值传递取反失败：加const  const flag = !this.flagged 

5、循环random生成随机数并存入数组，但是在下一次生成时数量不足。

数组不计入重复元素，及时删掉即可。

    playgame () {
      const arr = []
      //随即搞10个变成地鼠
      for (let i = 0; i < 10; i++) {
        const itrow = Math.floor(Math.random() * this.selectid * 3)
        const itcol = Math.floor(Math.random() * this.selectid * 3)
        if (!this.board[itrow][itcol].flagged) {
          this.board[itrow][itcol].flagged = true
          arr.push({r: itrow, c: itcol})
          this.cnt++
          this.log = arr
        }
        else {
          i--
        }
      }
      //让它们消失
      for (let i = 0; i < 10; i++) {
        const it = arr.pop()
        this.board[it.r][it.c].flagged = false
        this.log = arr
      }
    },

6、vue数组运用汇总：参考 https://blog.csdn.net/dxnn520/article/details/123120093 

arr.pop()                 // arr删尾，不用参，返回删除的元素
arr.push()                // arr加尾，要加参，返回arr新长度
arr.unshift()             // arr加首，要加参，返回arr新长度
arr.shift()               // arr删首，不用参，返回删除的元素
arr.reverse()             // arr翻转，不用参
arr.splice(首,末,替换的值)  // arr增删改，单参数表示从此删到最后
arr.sort((a,b)=> a-b)     // arr升序
arr.sort((a,b)=> b-a)     // arr降序
arr.reduce()              // 数组求和
//查找：
arr.filter()     // 筛选过滤数组里满足的元素，返回结果，不影响原数组
arr.findIndex()  // 筛选满足条件的数组的索引值
arr.indexOf()    // 返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。
//切割拼合
arr.concat()     // 方法用于连接两个或多个数组，不会影响原来的数组
arr.join('')     // 分隔 把数组用给定的分隔符隔开，返回结果，不影响原数组
arr.slice(首，末) // 分割 截取数组的某些元素，返回结果，不影响原数组

7、延时函数setTimeout和setInterval的使用：setInterval需要在data的return整一个 timer: "", 且调用的函数只写名，不带括号（带括号则只执行一次），第三个参数起为调用的函数参数

setTimeout(()=>{
    this.log = "timeout test"
},1000)

playgame () {
    this.timer = setInterval(this.getmouse,1000)
},
endgame () {
    clearInterval(this.timer)
}

8、把鼠标放在控件上时，鼠标改变样式：直接在style的控件对应的格式里加

cursor: pointer; // 手指
cursor: col-resize; // 箭头

回头研究png图片导入改鼠标。