# 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语法糖 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就没有提示,程序依旧可以启动,但是看控制台就可以发现很多错误了并且去修正了。