VUE
官方文档：https://cn.vuejs.org/
创建VUE项目
前提：已安装 16.0 或更高版本的 Node.js
进入要创建的目录，执行命令：npm create vue@latest
安装依赖，启动：
//进入项目目录，运行命令安装依赖
npm install
//启动vue项目
npm run dev
VUE项目目录结构
.vscode //编辑器生成的一些配置
node_modules // vue项目的运行依赖文件
public //资源文件
src //源码文件，主要操作的文件夹
.gitignore //git忽略文件的配置
index.html // 项目的入口文件
package.json //npm管理文件，一些依赖的版本等
README.md // 项目介绍文件，自定义
vite.config.js // vue的配置文件
事件修饰符
在处理事件时调用 event.preventDefault() 或 event.stopPropagation() 是很常见的。尽管我们可以直接在方法内调用，但如果方法能更专注于数据逻辑而不用去处理 DOM 事件的细节会更好。
为解决这一问题，Vue 为 v-on 提供了事件修饰符。修饰符是用 . 表示的指令后缀，包含以下这些：
. stop
. prevent
. self
. capture
. once
. passive
<!-- 单击事件将停止传递 -->
<a @click.stop="doThis"></a><!-- 提交事件将不再重新加载页面 -->
<form @submit.prevent="onSubmit"></form><!-- 修饰语可以使用链式书写 -->
<a @click.stop.prevent="doThat"></a><!-- 也可以只有修饰符 -->
<form @submit.prevent></form><!-- 仅当 event.target 是元素本身时才会触发事件处理器 -->
<!-- 例如：事件处理器不来自子元素 -->
<div @click.self="doThat">...</div>
组件
一般会将组件定义在一个单独的.vue文件中，这被叫做单文件组件。
<script>
export default{data(){return{count:0}}
}
</script>
<template><button @click="count++">这是一个组件</button>
</template>
使用组件
一个组件可以被多次使用（同一父组件内），每使用一个组件，就创建一个新的实例。
- 在父组件中导入子组件
- 注册组件，将导入的组件暴露给模版
- 使用组件
<script>
//1. 导入组件
import ButtonCounter from './ButtonCounter.vue'export default{//2. 注册组件components:{ButtonCounter}
}
</script><template><h1>Child component</h1><!-- 3.使用组件 --><ButtonCounter /><ButtonCounter />
</template>
父组件向子组件传值
- 子组件声明
props - 父组件传数据给子组件
//1. 子组件声明props
<script>export default{props:['name']}
</script><!-- 使用参数 -->
<template><h1>{{ name }}</h1>
</template>//2. 父组件传值
<ButtonCounter name="My name is VUE" />
监听事件
- 子组件可以用过调用内置的
$emit方法，通过传入事件名称来抛出一个事件 - 父组件可以通过
v-on或@来选择性地监听组件上抛出的事件
//1. 子组件抛出hello事件
<template><button @click="$emit('hello')">点击我抛出事件</button>
</template>//2. 父组件监听器抛出的hello事件
<child-component @hello="alert(1)" />
插槽
父组件向子组件中传入内容
- 子组件中定义
<slot>作为一个占位符 - 父组件使用子组件时传入内容
//1. 子组件中定义<slot>占位
<template><h1>插槽</h1><slot />
</template>//2. 父组件中使用子组件时，传入内容
<child-component>This is content.
</child-component>
动态组件
有些场景会需要在两个组件间来回切换，比如Tab，可以通过<component>元素和特殊的is attribute实现：
// child-component可以是 1.被注册的组件名，也可以是 2.导入的组件对象
<component :is="child-component"></component>
当使用<component>来在多个组件间切换时，被切换掉的组件会被卸载，可以通过<keepAlive>组件强制被切换掉的组件扔保持存活状态。
