# note-project

**Repository Path**: xiaowu15/note-project

## Basic Information

- **Project Name**: note-project
- **Description**: 这只是我的一个人期末作业练习
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-05-29
- **Last Updated**: 2022-10-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, vite

## README

# Vue 3 + Vite

This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

## Recommended IDE Setup

- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
- note-node文件需要重新下载npm包

##### 项目问题

###### 一、

1. vant 轮播图 父元素 不能有display: flex；

2. 使用v-show 控制父元素时会出现相同问题

3. 应该是 v-show 控制了display原因

4. 最终 取消了 轮播图 父元素的 display : flex;

5. 使用 v-if 解决

###### 二、

   1. 浏览器回到顶部 

      ```js
      // 滚动到app所在的位置（无滚动效果），如app在顶部，即回到顶部
      document.getElementById("app").scrollIntoView();
      ```

   2. scss 循环写法

      ```scss
      @each $item in class1,class2,class3 {
          .#{$item} {
              width:80px;
          }
      }
      // 带值
      @each $item,$num in (class1:80px,class2:10px,class3:50px) {
          .#{$item} {
              width:#{$num};
          }
      }
      // 多个数组 是 竖着看 
      @each $item, $height,$width in  (class1,50px,50px),
      								(class2,80px,80px),
          							(calss3,100px,100px)
      {
          .#{$item} {
              height:#{$height};
              width:#{$width};
          }
      }
      ```

      

###### 三、

1. 背景图 模糊

   ```css
   filter: blur(2px)
   ```

   

2. css缩放元素 ，但是网页文档流中还是原来的大小

   ```css
   transform: scale(0.7);
   /*使元素外边距为负解决*/
margin-right: -5px;
   ```
   
3. scss 循环用index()获取下标

   ```scss
   $list :-7px,-6px,-24px;
   @each $var in $list {
   	$index:index($list,$var);
       &:nth-child(#{$index}) {
       	margin-right: #{$var};
       }
   }
   ```

   index(数组，元素) 返回 数组中找到的第一个元素，没有找到返回false 如果元素相同，只会返回第一个元素的下标

   ```
   index(1px solid red, 1px)
   1
   >> index(1px solid red, solid)
   2
   >> index(1px solid red, red)
   3
   >> index(1px 1px red, 1px)
   1 
   ```


##### 四、

vue3 setup(){

reactive()   数据重新赋值页面不会更新，解决方法使用ref或者对值使用key：value;的键值对来改变值

}