# Vue-QuickStart

**Repository Path**: rainyheights/vue-quick-start

## Basic Information

- **Project Name**: Vue-QuickStart
- **Description**: vue学习快速上手，基于Vue2的。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-07-26
- **Last Updated**: 2024-01-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue笔记
渐进式框架：生态完善，提供路由，提供数据管理，ui组件库，vant，elementui
形式规模，可被逐步集成，简介使用，单个页面到整个项目。
单页面应用（SPA）
服务端渲染，开发桌面端，移动端

>版本：vue2+vue3

vue：官方构建是 vite构建的

>npm init vue@latest
>项目名称不能含有大写 字母

### P5目录结构 ：
node_modules:运行依赖文件
public：资源文件，图片之类的
src：源码文件夹，存放代码
index.html:入口页面，必须的文件，不需要修改
package.json:信息描述文件，项目版本信息和 依赖信息，，相当于pom.xml
vue.config.js:配置文件 ，相当于application.yml

### 模板语法
基于html，声明式将组件实例绑定到dom上
> 模板语法

```txt
<template>
<h3>模板语法</h3>
  <p>{{msg}}</p><!--文本插值-->
  <p>{{hello}}</p><!--文本插值-->
</template>
<!--顺序是这样的-->
<script>
export default {
  data(){
    return{
      msg:"你好简单的东西",
      hello:"hello,World"
    }
  }
}
</script>
```
```txt
<h3>模板语法</h3>
<p>{{msg}}</p><!--文本插值-->
<p>{{hello}}</p><!--文本插值-->
<p>{{number+10}}</p><!--文本插值-->
<p>{{!boolean?'yes':'no'}}</p><!--文本插值-->
<p>{{message.split('').reverse().join('')}}</p><!--文本插值-->
<!--只能使用单一表达式，建议不使用-->
<!--插入html-->
<!--  <span v-html="rawHtml">你好</span>-->
<!--指令-->
```
### 属性绑定：
> 使用v-bind,文本值通过双花括号{{}},若绑定的值为空，将会被移除
>
> 添加html：v-html
>
> 简写：v-bind==>:

动态绑定属性内容。

### 条件渲染

> v-if
>
> v-else
>
> v-show
>
> ![img.png](img.png)

### 列表渲染
> v-for
> 使用item in items语法
> ![img_1.png](img_1.png)

### 通过key管理状态
```txt
  <p v-for="(item,index) of result" v-bind:key="item.shopId">{{item.title}}</p>
```

### 内连事件处理器，执行js
v-on 或者@

```txt
<template>
<h3>内连事件处理器</h3>
  <button v-on:click="count++">ADD</button>
  <button @click="count++">ADD</button>
  <p>{{count}}</p>
  <h3>函数添加</h3>
  <button @click="addCount">ADD</button>
</template>

<script>
export default {
  name: "EventDemo1",
  data(){
    return{
      count:0
    }
  },
  methods:{
    addCount(){
      console.log("点击了")
      //所有写在data里面的都可以用this引用
      this.count++
    }
  }
}
</script>

<style scoped>

</style>
```
![img_2.png](img_2.png)
### 获取event对象

getEvent(msg,$e)

### 事件修饰符
v-on ->.stop,.prevent,.up等等

![img_3.png](img_3.png)


### 数组变化
![img_4.png](img_4.png)

### 计算属性
> 计算属性和函数效果相同，然而计算属性会缓存，方法不会

### class绑定
通过逻辑来操作css样式，用v-bind来绑定属性

![img_5.png](img_5.png)

### style绑定
```txt
<template>
<p :style="{color:'red',fontFamily:'宋体'}">你好</p>
<p :style="object">你好</p>
</template>

<script>
export default {
  name: "Style",
  data(){
    return{
      //绑定成对象来实现样式绑定
       object:{
         color:'red',
         fontFamily:'宋体',
         fontSize:'30px'
       }
    }
  }
}
</script>

<style scoped>

</style>
```

### 侦听器

![img_6.png](img_6.png)

函数名必须和监听的数据对象保持一致

### 表单数据绑定
v-model，用户输入同时获取输入的信息

### 组件式开发
>组件之间可以相互调用，嵌套开发
> ![img_7.png](img_7.png)

vue实现了自己的组件模型

## 组件数据传递
### 组件的注册方式
1：引入，注入，使用(推荐)
2：全局引入，在main.js里面引人（不推荐😺）

### 组件传递数据props
组件之间不是完全独立的，是可以相互传递数据的

通过子父级间传递，只能父传子

### 组件传递效验
>
> ![img_9.png](img_9.png)
> 儿子事件触发父亲事件，关键字emit
>

### v-model绑定组件事件
>![img_10.png](img_10.png) ![img_11.png](img_11.png)

### 遗传Attribute（少用）
![img_12.png](img_12.png)

### 插槽slot
![img_13.png](img_13.png)
```vue
  <SlotBaseExtends>
    <template #header="props">
    <div>
        <p>{{msg}}</p>
        <p>{{props.msg}}</p>
    </div>
</template>
<template #main="props">
    <p>{{props.demo}}</p>
</template>
</SlotBaseExtends>
<VueLife/>
```
具名插槽：v-slot:指定名称来进行插槽的指定渲染，解决重复渲染的问题，v-slot可以简写为 #

> 简写总结：
>
> v-bind=> :
>
> v-on=>   @
>
> v-slot+> #

假设插槽需要同时渲染父组件和子组件，解决办法则是子传父，然后父传子，最后子插槽 渲染

![img_14.png](img_14.png)

## 组件的生命周期（从创建到销毁）
数据侦听->编译模板->挂载实例
关键节点具有生命周期的钩子函数

![img_15.png](img_15.png)

> 创建期：beforeCreated created
>
> 挂载期：beforeMount   mounted
>
> 更新期：beforeUpdate  updated
>
> 销毁期：beforeUnmount unmounted
>
> 生命周期函数都是自动执行的

### 应用场景
使用$ref来 操作dom
```txt
<template>
  <p ref="name">组件的生命周期的应用</p>
  <h3 v-for="(i,index) of banner">{{i.title}}</h3>
</template>

<script>
export default {
  name: "VueLife",
  data(){
    return{
       banner:[]
    }
  },
  beforeMount() {
    console.log(this.$refs.name);
  },
  mounted() {
    //ui渲染
    //先把结构渲染出来重要，而不是细节数据
    console.log(this.$refs.name);
    console.log(this.banner)
  },
  created() {
    //模拟网络请求
    this.banner=[
      {
        title:"aaa"
      }
    ]
  }
}
</script>

<style scoped>

</style>
```
### 组件的相互切换

![img_16.png](img_16.png)

![img_17.png](img_17.png)

### 异步组件
>切换时才会去加载，不要一次性加载,优化项目性能
>![img_18.png](img_18.png)

>Vue是一款流行的JavaScript框架，用于构建用户界面。它具有许多常用的特性，以下是Vue的一些常用特性，详细介绍如下：

1. 声明式渲染：
Vue使用简洁的模板语法，可以将数据和DOM进行绑定，实现声明式的渲染。通过将数据和模板进行绑定，Vue可以自动追踪数据的变化，并在数据发生变化时更新DOM。

2. 组件化开发：
Vue采用组件化开发的方式，将用户界面拆分成多个独立的组件。每个组件都有自己的模板、逻辑和样式，可以被复用和组合，从而实现更高效的开发。

3. 双向数据绑定：
Vue通过v-model指令实现双向数据绑定。它可以将表单元素和数据模型进行双向绑定，当用户修改表单元素的值时，数据模型会自动更新，反之亦然。

4. 条件渲染：
Vue提供了v-if和v-show指令，用于根据条件来渲染DOM元素。v-if根据条件动态创建或销毁DOM元素，v-show只是通过CSS的display属性来控制元素的显示与隐藏。

5. 列表渲染：
通过v-for指令，Vue可以迭代数组或对象，并根据每个元素生成对应的DOM元素。这使得在用户界面中展示列表数据变得非常简单。

6. 计算属性：
Vue提供了计算属性的概念，可以根据已有的数据动态计算出新的属性。计算属性可以缓存计算结果，在依赖的数据没有发生变化时直接使用缓存的结果，避免重复计算。

7. 绑定样式和样式类：
Vue可以通过v-bind指令绑定内联样式和样式类。可以根据不同的数据状态动态改变元素的样式，提供更好的用户交互和视觉效果。

8. 生命周期钩子：
Vue提供了一系列的生命周期钩子函数，允许开发者在组件的不同阶段执行自定义的逻辑。例如，在组件创建后执行初始化操作，在组件销毁前进行资源清理等。

9. 自定义指令：
Vue允许开发者自定义指令，用于扩展Vue的功能。可以通过自定义指令来操作DOM，绑定事件，实现复杂的交互效果。

10. 插件系统：
Vue提供了插件系统，允许第三方开发者开发和共享Vue的插件。可以通过插件来增加全局功能、自定义指令和过滤器等。

11. 状态管理：
Vue提供了Vuex库，用于管理应用程序的状态。Vuex使用单一状态树的概念，使得状态的管理和更新更加简单和可预测。

12. 路由管理：
Vue提供了Vue Router库，用于管理应用程序的路由。可以通过Vue Router实现多页面之间的跳转、参数传递和路由守卫等功能。

13. 异步组件：
Vue可以通过异步组件来延迟加载组件，提高应用程序的加载速度。可以根据需要动态加载组件，减少首次加载时的资源消耗。

14. 单文件组件：
Vue支持使用单文件组件的方式组织代码。单文件组件将模板、样式和逻辑放在同一个文件中，使得代码的组织更加清晰和可维护。

15. TypeScript支持：
Vue提供了对TypeScript的支持，可以使用TypeScript来编写Vue应用程序。TypeScript提供了类型检查和更好的编码提示，使得开发更加可靠和高效。

总结起来，Vue具有声明式渲染、组件化开发、双向数据绑定、条件渲染、列表渲染、计算属性、绑定样式和样式类、生命周期钩子、自定义指令、插件系统、状态管理、路由管理、异步组件、单文件组件和TypeScript支持等常用特性。这些特性使得Vue成为一个强大且灵活的JavaScript框架，适用于构建现代化的Web应用程序。
>