# 说明
通过`v-model`实现双向绑定



## 普通情况
对于单个文本输入框或者文本域都是直接绑定对于值

```
<p{{ msg }}</p>
<input v-model="msg" placeholder="占位符" />
<textarea v-model="msg" placeholder="占位符"></textarea>
```
# 特殊情况
## 单个复选框
绑定的是布尔值

```vue
<input type="checkbox" id="checkbox" v-model="checkedType" /> 
```

## 多个复选框
绑定的是由多个`value`值构成的数组
```vue
<input type="checkbox" value='0' id="checkbox" v-model="checkedArray" /> 
<input type="checkbox" value='1' id="checkbox" v-model="checkedArray" />
<input type="checkbox" value='2' id="checkbox" v-model="checkedArray" /> 

/*
checkedArray:[0,1,2]
*/
```

## 单选框
直接绑定到值

```vue
<input type="radio" id="two" value="0" v-model="typesValue" />
```

## 下拉选择框
直接绑定到值
```
<select v-model="selectedValue">
  <option disabled value="">X</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
```

VUE3-表单双向绑定

# 事件处理
## 说明
通过`v-on`绑定事件，也可以简写为`@`
## 分类
- 内联事件处理器
- 方法事件处理器



## 内联事件处理器
### 说明
事件被触发时执行的内联js语句
### EG
```vue
<button v-on:click='numbers++'></button>

<button @click='numbers++'></button>
```

## 方法事件处理器
### 说明  
接受一个组件内定义的方法名或对某个方法的调用，自动接受原生DOM事件并触发执行

### EG
```vue
<script lang='ts'>
...
let userinfos1 = ref([1,2,3])
const changeuserinfos1 = ()=>{
  userinfos1.value=[3,4,5]
}
</script>

<template>
	<p @click="changeuserinfos1">{{ userinfos1 }}</p>
</template>
```


### 配合TS使用标注类型
对于原生DOM事件需要手动标注类型
```vue
<script lang='ts'>
...
let userinfos1 = ref([1,2,3])

/*
(parameter) target: any
参数“target”隐式具有“any”类型

const changeuserinfos1 = (target)=>{
  userinfos1.value=[3,4,5];
  console.log('target', target)
}

*/

const changeuserinfos1 = (target: MouseEvent)=>{
  userinfos1.value=[3,4,5];
  console.log('target', target)
}
</script>

<template>
	<p @click="changeuserinfos1">{{ userinfos1 }}</p>
</template>

```


# 常见的原生DOM元素的类型  

```ts
interface HTMLElementTagNameMap {
    "a": HTMLAnchorElement;
    "abbr": HTMLElement;
    "address": HTMLElement;
    "applet": HTMLAppletElement;
    "area": HTMLAreaElement;
    "article": HTMLElement;
    "aside": HTMLElement;
    "audio": HTMLAudioElement;
    "b": HTMLElement;
    "base": HTMLBaseElement;
    "bdi": HTMLElement;
    "bdo": HTMLElement;
    "blockquote": HTMLQuoteElement;
    "body": HTMLBodyElement;
    "br": HTMLBRElement;
    "button": HTMLButtonElement;
    "canvas": HTMLCanvasElement;
    "caption": HTMLTableCaptionElement;
    "cite": HTMLElement;
    "code": HTMLElement;
    "col": HTMLTableColElement;
    "colgroup": HTMLTableColElement;
    "data": HTMLDataElement;
    "datalist": HTMLDataListElement;
    "dd": HTMLElement;
    "del": HTMLModElement;
    "details": HTMLDetailsElement;
    "dfn": HTMLElement;
    "dialog": HTMLDialogElement;
    "dir": HTMLDirectoryElement;
    "div": HTMLDivElement;
    "dl": HTMLDListElement;
    "dt": HTMLElement;
    "em": HTMLElement;
    "embed": HTMLEmbedElement;
    "fieldset": HTMLFieldSetElement;
    "figcaption": HTMLElement;
    "figure": HTMLElement;
    "font": HTMLFontElement;
    "footer": HTMLElement;
    "form": HTMLFormElement;
    "frame": HTMLFrameElement;
    "frameset": HTMLFrameSetElement;
    "h1": HTMLHeadingElement;
    "h2": HTMLHeadingElement;
    "h3": HTMLHeadingElement;
    "h4": HTMLHeadingElement;
    "h5": HTMLHeadingElement;
    "h6": HTMLHeadingElement;
    "head": HTMLHeadElement;
    "header": HTMLElement;
    "hgroup": HTMLElement;
    "hr": HTMLHRElement;
    "html": HTMLHtmlElement;
    "i": HTMLElement;
    "iframe": HTMLIFrameElement;
    "img": HTMLImageElement;
    "input": HTMLInputElement;
    "ins": HTMLModElement;
    "kbd": HTMLElement;
    "label": HTMLLabelElement;
    "legend": HTMLLegendElement;
    "li": HTMLLIElement;
    "link": HTMLLinkElement;
    "main": HTMLElement;
    "map": HTMLMapElement;
    "mark": HTMLElement;
    "marquee": HTMLMarqueeElement;
    "menu": HTMLMenuElement;
    "meta": HTMLMetaElement;
    "meter": HTMLMeterElement;
    "nav": HTMLElement;
    "noscript": HTMLElement;
    "object": HTMLObjectElement;
    "ol": HTMLOListElement;
    "optgroup": HTMLOptGroupElement;
    "option": HTMLOptionElement;
    "output": HTMLOutputElement;
    "p": HTMLParagraphElement;
    "param": HTMLParamElement;
    "picture": HTMLPictureElement;
    "pre": HTMLPreElement;
    "progress": HTMLProgressElement;
    "q": HTMLQuoteElement;
    "rp": HTMLElement;
    "rt": HTMLElement;
    "ruby": HTMLElement;
    "s": HTMLElement;
    "samp": HTMLElement;
    "script": HTMLScriptElement;
    "section": HTMLElement;
    "select": HTMLSelectElement;
    "slot": HTMLSlotElement;
    "small": HTMLElement;
    "source": HTMLSourceElement;
    "span": HTMLSpanElement;
    "strong": HTMLElement;
    "style": HTMLStyleElement;
    "sub": HTMLElement;
    "summary": HTMLElement;
    "sup": HTMLElement;
    "table": HTMLTableElement;
    "tbody": HTMLTableSectionElement;
    "td": HTMLTableDataCellElement;
    "template": HTMLTemplateElement;
    "textarea": HTMLTextAreaElement;
    "tfoot": HTMLTableSectionElement;
    "th": HTMLTableHeaderCellElement;
    "thead": HTMLTableSectionElement;
    "time": HTMLTimeElement;
    "title": HTMLTitleElement;
    "tr": HTMLTableRowElement;
    "track": HTMLTrackElement;
    "u": HTMLElement;
    "ul": HTMLUListElement;
    "var": HTMLElement;
    "video": HTMLVideoElement;
    "wbr": HTMLElement;
}

```

# 事件修饰符
| 事件修饰符名称 | 用途                                             |
| -------------- | ------------------------------------------------ |
| `.stop`        | 阻止事件的冒泡行为                               |
| `.prevent`     | 阻止元素的默认行为(如`a`标签默认点击跳转行为)    |
| `.self`        | 只有在`event.target`是当前元素自身时触发处理函数 |
| `.once`        | 事件只会触发一次                                 |
| '.passive'     | 事件只会在捕获阶段触发                           |
| '.`passive'          |      不拦截默认事件                 |


### passive修饰符
在滚动监听`@scoll，@touchmove`时，每次都使用内核线程查询prevent会使滑动卡顿,使用.passive 修饰符跳过内核线程查询，可以大大提高流畅度。[参考](https://blog.csdn.net/qq_40230735/article/details/123497435)


# 按键修饰符
## EG
```vue
 
<input @keyup.enter="change" />
```

## 按键别名
-   `.enter`   回车键
-   `.tab`  `Tab`键
-   `.delete` (捕获“Delete”和“Backspace”两个按键)
-   `.esc`  左上角`Esc`按键
-   `.space` 空格键
-   `.up`  小键盘上方向键
-   `.down` 小键盘下方向键
-   `.left` 小键盘左方向键
-   `.right` 小键盘右方向键


## 鼠标按键修饰符
-   `.left` 鼠标左键
-   `.right` 鼠标右键
-   `.middle`  鼠标滚轮键下按

VUE3-事件与事件修饰符

# 条件渲染  
## v-if
### 说明
用于条件性的渲染一块内容，只有在`v-if`表达式的值返回为真时才会渲染



### EG
```vue
<div v-if='false'></div>
```

## v-else
### 说明
`v-else`必须跟在`v-if`或`v-else-if`后才可以被识别，相当于`v-if`或`v-else-if`的`else`区块
### EG
```vue
<div v-if='false'></div>
<div v-else></div>
```

## v-else-if
### 说明
必须跟在`v-if`后才可以被识别
### EG
```vue
<div v-if='false'></div>
<div v-else-if='true'></div>
```

## v-show
### 说明
同样是根据表达式的值选择性的渲染一块内容
### EG
```vue
<div v-show='false'></div>
```

## v-if和v-show的区别
1. v-if为false时是整个dom节点都不在，初始为false时不会做任何事，只有在切换为`true`时对应的区块内的**事件监听器和子组件**都会被销毁与重建;而`v-show`无论初始条件如何都会渲染，只是通过`css`的`display`属性设置隐藏
2. `v-if`有更高的切换消耗，`v-show`具有更高的初始渲染消耗


# 列表渲染
## 特点
Vue可以侦听**响应式**数组的变更方法[指的是会对原数组产生变更的方法]，包括以下几种：
-   `push()`
-   `pop()`
-   `shift()`
-   `unshift()`
-   `splice()`
-   `sort()`
-   `reverse()`


对于不可变方法[如`filter()`，`concat()` 和 `slice()`]，可先将原数组采用`ref`包裹，然后直接对其赋值替换整个数组

```ts
let userinfos1 = ref([1,2,3])
const changeuserinfos1 = ()=>{
	userinfos1.value=[3,4,5]
}
```


在计算属性中对于数组的变更方法不能直接使用，需要先创建一个基于原数组的复制数组，再对其进行操作

VUE3-条件渲染与列表渲染

## 说明
用于解决`template`模板中诸如三元运算符的条件过于复杂时导致模板臃肿和难以维护，所以可以采用计算属性 



## 特点
1. 会自动追踪响应式依赖
2. 返回值为一个计算属性`ref`，需要通过`.value`访问
3. 计算属性值会基于其响应式依赖被缓存

## EG

```ts
<script setup>

const userinfo = reactive({
  age: 18,
})

// 一个计算属性 ref
const isMan = computed(() => {
  return userinfo > 18 ? '成年人' : '孩子'
})
</script>

<template>
  <span>{{ isMan }}</span>
</template>
```

## 配合TS使用
### 自动推导
计算属性会根据**返回值的类型**自动推导其类型

```ts
<script setup>

const userinfo = reactive({
  age: 18,
})

// 自动推导类型为 globalThis.ComputedRef<"成年人" | "孩子">
const isMan = computed(() => {
  return userinfo.age > 18 ? '成年人' : '孩子'
})
</script>

<template>
  <span>{{ isMan }}</span>
</template>
```

### 泛型参数
通过`computed<T>`显示指定类型

```
<script setup>

const userinfo = reactive({
  age: 18,
})

// 自动推导类型为 globalThis.ComputedRef<string>
const isMan = computed<string>(() => {
  return userinfo.age > 18 ? '成年人' : '孩子'
})
</script>

<template>
  <span>{{ isMan }}</span>
</template>
```

VUE3-计算属性

# Ref
## 说明

ref()方法用于创建任何值类型的响应式数据



> 1、`ref()`方法将传入的参数包装为ref对象，通过`.value`形式获取到的数据为响应式的，在此基础上进行赋值操作才是响应式的
> 2、在`template`中并不需要添加`.value`，程序会自动添加`.value`
> 3、`null`作为原始数据类型采用`ref`包裹

## 注意点

常用于对基本数据类型实现响应式数据
对于应用数据类型虽然可以处理，但是实际上求助于reactive实现

### Eg

```ts
    <template>
      
      <p @click="addnum">{{a}}</p>
    </template>

    <script>
    import {ref} from 'vue';

    export default {
      name: 'App',
      setup(){
        let a=ref(0)
        function addnum(){
          console.log('a',a)
          /* console.log
            a RefImpl {__v_isShallow: false, dep: Set(1), __v_isRef: true, _rawValue: 0, _value: 0}
                dep: Set(1)
                [[Entries]]
                n: 0
                w: 0
                size: 1
                [[Prototype]]: Set
                __v_isRef: true
                __v_isShallow: false
                _rawValue: 1
                _value: 1
                value: 1
                [[Prototype]]: Object
          */
          //  需要通过.value形式获取到响应式数据，在此基础上操作
          a.value++
        }
        return {
          a,
          addnum
        }
      }
    }
    </script>

    <style>
    </style>
```

## 配合TS使用

### 自动推导

`ref`会根据初始化时的值推导其类型

```ts
    import { ref } from 'vue'

    // 推导出的类型：Ref<number>
    const year = ref(2020)
```

### 传入泛型
在调用`ref()`时传入一个泛型参数，覆盖其默认的推导
若指定了一个泛型参数，但是没有指定初始值，则会得到一个对应参数和undefind构成的联合类型

```ts
	import { ref } from 'vue';
	import type { Ref } from 'vue'
	let serchType: type<boolean> = ref(false);

	// 推导得到的类型：Ref<number | undefined>
	const n = ref<number>()
```


# 创建响应式数据之reactive

## 说明   
通过`reactive()`方法创建一个响应式对象或数组

## 参数
`reactive`参数只能是对象、数组、map和set

## 特点

1、VUE3使用reactive包裹的数组，可以直接通过角标更改，会检测到更改，但是Vue2中不会
2、VUE3使用reactive包裹的对象，对于对象不存在的属性可以直接更改赋值

### Eg

```vue
<template>
	<p @click="addnum">{{ a }}</p>
  <p @click="changeB">{{b}}</p>
</template>

<script>
import { reactive } from "vue";
export default {
	name: "App",
	setup() {
		let a = reactive({name:"xm",age:19});
        let b = reactive(['x','y','z'])
		function addnum() {
			a.name='xh'
            a.like="com" // vue2中对于对象不存在的属性无法直接更改,vue3可以
		}
        function changeB(){
          b[0]='a' // vue2中直接通过数组角标无法更改,vue3可以
        }
		return {
			a,
            b,
			addnum,
            changeB
		};
	},
};
</script>

<style></style>
```

## 配合TS使用
### 自动推导  

`reactive`同样会根据初始值推导类型  

```ts
// 推导得到的类型：{ title: string } 
const titleinfo = reactive({ title: '标题' })
```

###  使用接口

通过定义接口的方式指定`reactive`的类型

```ts
interface titleInterface {
	title: string
}


const titleinfo:titleInterface = reactive({ title: '标题' })
```