Vue笔记（一）基础

VUE

官方文档：https://cn.vuejs.org/

创建VUE项目

前提：已安装 16.0 或更高版本的 Node.js

进入要创建的目录，执行命令： npm create vue@latest

安装依赖，启动：

bash 复制代码

//进入项目目录，运行命令安装依赖
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

javascript 复制代码

<!-- 单击事件将停止传递 -->
<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文件中，这被叫做单文件组件。

javascript 复制代码

<script>
export default{
    data(){
        return{
            count:0
        }
    }
}
</script>
<template>
    <button @click="count++">这是一个组件</button>
</template>

使用组件

一个组件可以被多次使用（同一父组件内），每使用一个组件，就创建一个新的实例。

在父组件中导入子组件
注册组件，将导入的组件暴露给模版
使用组件

javascript 复制代码

<script>
//1. 导入组件
import ButtonCounter from './ButtonCounter.vue'

export default{
    //2. 注册组件
    components:{
        ButtonCounter
    }
}
</script>

<template>
    <h1>Child component</h1>
    <!-- 3.使用组件 -->
    <ButtonCounter />
    <ButtonCounter />
</template>

父组件向子组件传值

子组件声明props
父组件传数据给子组件

javascript 复制代码

//1. 子组件声明props
<script>
    export default{
        props:['name']
    }
</script>

<!-- 使用参数 -->
<template>
    <h1>{{ name }}</h1>
</template>

//2. 父组件传值
<ButtonCounter name="My name is VUE" />

监听事件

子组件可以用过调用内置的$emit方法，通过传入事件名称来抛出一个事件
父组件可以通过v-on或@来选择性地监听组件上抛出的事件

javascript 复制代码

//1. 子组件抛出hello事件
<template>
    <button @click="$emit('hello')">点击我抛出事件</button>
</template>

//2. 父组件监听器抛出的hello事件
<child-component @hello="alert(1)" />

插槽

父组件向子组件中传入内容

子组件中定义<slot>作为一个占位符
父组件使用子组件时传入内容

javascript 复制代码

//1. 子组件中定义<slot>占位
<template>
    <h1>插槽</h1>
    <slot />
</template>

//2. 父组件中使用子组件时，传入内容
<child-component>
    This is content.
</child-component>

动态组件

有些场景会需要在两个组件间来回切换，比如Tab，可以通过<component>元素和特殊的is attribute实现：

javascript 复制代码

// child-component可以是 1.被注册的组件名，也可以是 2.导入的组件对象
<component :is="child-component"></component>

当使用<component>来在多个组件间切换时，被切换掉的组件会被卸载，可以通过<keepAlive>组件强制被切换掉的组件扔保持存活状态。