# Vue简单学习

**Repository Path**: lx-jian/vue-simple-learning

## Basic Information

- **Project Name**: Vue简单学习
- **Description**: 简单学习Vue
黑马教程
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-09
- **Last Updated**: 2025-06-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue简单学习

#### 介绍
简单学习Vue
黑马教程

##### 基础 MY_ONE.html
el挂载点
data数据对象

##### 第一部分 MY_ONE.html
v-text指定文本
v-html指定标签
v-on指定方法(v-on:可简写成@)

##### 第二部分 MY_TWO.html
v-show切换样式来隐藏（消耗较小）
v-if切换dom元素（消耗更大）
v-bind给属性绑定值,区别与v-on

##### 第三部分 MY_THREE.html
v-for（循环渲染数列之类）
v-on补充（可以添加参数之类）
v-model（数据双向绑定）

##### 页面编写 MY_SEARCH.html
css除了单纯的改变样式还可以设置动态的样式(如鼠标放在元素上时会怎么样……等等)


##### setup语法糖
<!-- <script setup>语法糖 -->
setup 加上之后的作用很多，如：可以使用组合式的生命函数钩子、可以使用import导入、提升性能、更好支持TS，总之在VUE3项目中推荐使用

##### 其他
嵌套应用div中的img标签的class，写css的时候可以写 .xxx img就可以，不然不能应用到子标签里面



#### pinia-study

This template should help get you started developing with Vue 3 in Vite.


##### Project Setup

```sh
npm create vue@latest
```

```sh
npm install
```
##### 安装pinia：

```sh
npm install pinia
```

src\main.js中的关键代码：
```js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
const app = createApp(App)
const pinia = createPinia()
app.use(pinia)
```

##### 定义Store
```js
export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0, name: 'Eduardo' }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})
```
但是还有另一种定义方式:
https://pinia.vuejs.org/zh/core-concepts/#setup-stores

##### 运行构建步骤：
```sh
npm run dev
```

```sh
npm run build
```

##### 犯错
注意前端代码特别是js特别容易犯错，即使没有导入依赖也没有的提示显示出来（如index.js中没有导入ref就没有提示，程序依旧可以启动，但是看控制台就可以发现很多错误了并且去修正了。