# snack

**Repository Path**: tortoise-black/snack

## Basic Information

- **Project Name**: snack
- **Description**: 贪吃蛇小游戏
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-11-23
- **Last Updated**: 2023-11-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# snack

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

<!-- 在element里加一个div -->
this.element.insertAdjacentHTML('beforeend', '<div></div>')

bind（this）绑定当前this

开发的时候免不了有时候需要向某个节点appendchild，添加子节点，但是如果是在vue中，就会发现通过操作dom的appendchild方式添加节点会出现样式对这些新增的节点无效。

解决思路

通过查看原始的节点与新增的节点发现，原始节点与新增节点的class都一样，但是原始的节点在class后面还会多出data-v-XXXXXXX这个属性，然后再去查看head引入的css样式同样发现在class名后面也会多加一个[data-v-XXXXXXX]的后缀。

原因

最后通过测试知道，这是因为vue文件中的style标签添加了scoped的原因，而scoped的作用是为了保证这些css样式只会对当前vue文件(组件)生效，但是由于其他vue文件(组件)中也有可能会出现相同的class名相同的css样式，于是vue就采用了添加随机后缀的方式防止class名重复的样式出现样式覆盖的情况。

解决办法

把style标签的scoped干掉即可

注意点

当然这么做的前提是你得保证当前vue文件(组件)中的样式不会出现与其他组件样式class重名，否则可能会出现样式覆盖的情况，不过只是一个vue文件(组件)干掉scoped是不会出现样式覆盖的，因为其他的组件可以避免样式覆盖。