初识vue

创建vue3项目

手动创建项目的命令

使用npm或者yarn包管理工具都可以搭配vite手动创建项目

1
2
3
4
#使用npm create命令创建项目
npm create vite@latest
#使用yarn create命令创建项目
yarn create vite

示例

创建之后可以在终端输入yarn安装项目的全部依赖

安装完之后输入 yarn dev 启动本地服务器

通过模板自动创建项目

1
2
3
4
5
6
#使用npm6或更低版本创建项目
npm create vite@latest <项目名称> --template <模板名称>
#使用npm7或更高版本创建项目
npm create vite@latest <项目名称> -- --template <模板名称>
#使用yarn create命令创建项目
yarn create vite <项目名称> --template <模板名称>

示例

vue3目录结构

.vscode : 存放vscode编辑器的相关配置

node_modules:存放通过npm或yarn安装的所有依赖包和插件

public：存放的不可编译的静态资源文件，如图像、字体文件、favicon.ico等，使用绝对路径进行访问

src：存放的开发者编写的源代码，，通常包括组件、样式、逻辑、API等

assets：存放的可编译的静态资源文件，如图像、样式表、JavaScript文件等，使用相对路径进行访问

components:存放单文件组件

App.vue：项目的根组件，也是 Vue组件的入口文件，通常包含整个应用的主要框架结构

main.js:项目的入口文件，通常会在这里创建Vue实例，并挂载到DOM上

style.css:项目的全局样式文件

.gitignore:向git上传代码时需要忽略的文件列表

index.html:默认的主渲染文件，项目的HTML模板，通常在这里包含项目的主要静态元素，并在<body>中挂载Vue应用

package.json:项目的配置文件，定义了项目的基本信息、依赖、脚本等

README:项目的使用说明文件

vite.config.js:存放的vite的相关配置，比如插件、路径别名、开发服务器等

yarn.lock: 用于确保每次安装依赖时都使用相同版本的锁文件。它由yarn管理，确保依赖的稳定性

vue运行过程

创建vue实例

在 Vue 项目中，main.js 文件是整个应用的入口文件。在执行 npm run dev 命令时，Vite 或 Webpack 会从 src/main.js 开始加载应用。

main.js

1
2
3
4
5
import { createApp } from 'vue'   // 引入 Vue
import './style.css'               // 引入全局样式
import App from './App.vue'  // 引入根组件
// 创建 Vue 实例并挂载到 #app 元素上
createApp(App).mount('#app')

生成虚拟 DOM 和组件渲染

在 Vue 3 中，组件的渲染分为结构、样式和交互三个部分。在 App.vue 中，我们通常看到三个部分：<template>、<script> 和 <style>。

App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!--交互-->
<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>
<!--结构-->
<template>
  <div>
    <a href="https://vite.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>
<!--样式-->
<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

交互：使用 <script setup> 语法，引入子组件 HelloWorld.vue。

结构：模板部分，定义页面的 HTML 结构。

样式：使用 <style scoped> 编写组件的样式。

当 App.vue 渲染时，它首先加载 HelloWorld 组件，并在模板中渲染该组件。Vue 会将模板转换成虚拟 DOM，并根据响应式数据的变化来更新视图。

创建入口文件

index.html 是项目的首页，入口页，也是整个项目唯一的HTML页面

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
  </head>
  <body>
    <div id="app"></div> <!-- Vue 会将应用挂载到这个元素 -->
    <script type="module" src="/src/main.js"></script> <!-- 引入入口文件 -->
  </body>
</html>

这个页面的 #app 元素将是 Vue 实例的挂载点。

script 标签引入了 main.js 文件，这是整个 Vue 应用的入口。

vue开发基础

单文件组件

每个单文件组件由模板、样式和逻辑3个部分构成

1
2
3
4
5
6
7
8
9
<template>
<!-此处编写组件的结构->
</template>
<script>
/*此处编写组件的逻辑*/
</script>
<style>
/休此处编写组件的样式*/
</style>

初始数据绑定

定义数据：

1
2
3
4
5
6
7
8
9
<script>
export default{
 setup(){
 return{
  数据名：数据值
 }
 }
 }
</script>

使用setup语法糖来定义数据的语法格式如下。

1
2
3
<script setup>
const数据名=数据值
</script>

当页面渲染时，模板中的会被替换为实际的数据

在Mustache语法中还可以将表达式的值作为输出内容。表达式的值可以是字符串、数字等类型，示例代码如下

1
2
3
4
5
{{'Hello Vue.js'}}
{{number+1}}
{{obj.name }}
{{ok 'YES':'NO'}}
{{'<div>HTML标签</div>'}}

数据绑定的实现

创建src\components\Message.vue文件

1
2
3
4
5
6
<template>
    {{ message }}
</template>
<script setup>
const message = '不积跬步无以至千里'
</script>

更改main.js

1
2
3
4
5
import { createApp } from 'vue'
import './style.css'
import App from './components/Message.vue'

createApp(App).mount('#app')

将vue引入HTML页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <p>{{message}}</p>
    </div>

    <script>
        const vm=Vue.createApp({
             setup(){
                return{
                    message:'hello world'
                }
             }
            })
            vm.mount('#app')
    </script>
</body>
</html>

响应式数据绑定

vue为开发者提供了如下函数定义响应式数据

ref()

1
2
3
4
5
6
7
8
9
10
<template>
    {{ Message }}
</template>
<script setup>
import { ref } from 'vue'
const Message = ref('Hello World')
setTimeout(() => {
    Message.value = 'Hello Vue 3.0'
}, 2000)
</script>

reactive()

1
2
3
4
5
6
7
8
9
10
11
<template>
    {{obj.message}}
</template>
<script setup>
import { reactive } from 'vue'
const obj=reactive({message:'Hello World'})
setTimeout(() => {
    obj.message = 'Hello Vue 3.0'
}, 2000);
</script>

toRef()

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
    <div>message的值:{{message}}</div>
    <div>obj.message的值:{{obj.message}}</div>
</template>
<script setup>
import { reactive, toRef } from 'vue'
const obj = reactive({ message: 'hello' })//创建一个响应式对象
const message=toRef(obj,'message') // 将响应式对象obj中的message属性转换为响应式引用
setTimeout(() => {
    message.value = 'world'
}, 2000)

</script>

toRefs()

1
2
3
4
5
6
7
8
9
10
11
12
<template>
    <div>message的值:{{message}}</div>
    <div>obj.message的值:{{obj.message}}</div>
</template>
<script setup>
import { reactive, toRefs } from 'vue'
const obj = reactive({ message: 'hello'})
let {message} = toRefs(obj)
setTimeout(() => {
    message.value = 'world'
}, 2000)
</script>

区别

**使用 reactive**：当你需要处理 对象 或 数组 的响应式数据时，reactive 更自然，因为它能深度响应式地处理这些类型的数据，并且不需要 .value 访问对象的属性。

**使用 ref**：当你需要处理 基本类型（如字符串、数字、布尔值）时，ref 更适合，因为它是为这些类型专门设计的，能够轻松管理单一数据。

**使用 toRef**：当你想将 响应式对象 的某个属性转换为单独的响应式引用时，使用 toRef。它会返回一个新的响应式引用 Ref，你可以直接通过 .value 访问这个属性。

**使用 toRefs**：当你需要将 整个响应式对象 中的每个属性转换为响应式引用时，使用 toRefs。它返回一个新的对象，包含响应式对象中每个属性的 ref 引用。

内容渲染指令

v-text用于渲染DOM元素的文本内容，如果文本内容中包含HTML标签，那么浏览器不会对其进行解析。

1
2
3
4
5
6
7
<template>
    <div v-text="Message">
    </div>
</template>
<script setup>
const Message = '<span>Hello World</span>'
</script>

在使用Vue进行内容渲染时，如果内容中包含HTML标签并且希望这些标签被浏览器解析，则可以使用v-html。v-html用于渲染DOM元素的HTML内容，其用法与v-text相似。

1
2
3
4
5
6
7
<template>
    <div v-html="html">
    </div>
</template>
<script setup>
const html = '<strong>Hello World</strong>'
</script>

属性绑定指令

在Vue开发中，有时需要绑定DOM元素的属性，从而更好地控制属性的值，此时可以使用属性绑定指令v-bind来实现。

v-bind还支持将属性与字符串拼接表达式绑定。

1
2
3
4
5
6
7
8
<template>
    <p><input type="text" v-bind:placeholder="username"></p>
    <p><input type="password" :placeholder="password"></p>
</template>
<script setup>
const username = ref('请输入用户名')
const password = ref('请输入密码')
</script>

事件绑定指令

在Vue开发中，有时需要给DOM元素绑定事件，从而利用事件实现交互效果，这时可以利用事件绑定指令v-on来实现。

v-on还有简写形式，可以将”v-on:事件名”简写为“@事件名”

1
<标签名 V-on:事件名="事件处理器"></标签名>
1
2
3
4
5
6
7
8
<template> 
    <button @click="showInfo">输出信息</button>
</template>
<script setup>
const showInfo = () => {
    console.log('我是一个按钮');
}
</script>

双向数据绑定指令

Vue为开发者提供了v-model指令来实现双向数据绑定，使用它可以在input、textarea和select元素上创建双向数据绑定，它会根据使用的元素自动选取对应的属性和事件组合，负责监听用户的输入事件并更新数据。

1
<标签名 v-model=:"数据名"></标签名>

为了方便对用户输入的内容进行处理，v-model提供了3个修饰符。v-model的修饰符如下表所示:

.number (如果不加.number默认是字符串类型)

1
2
3
4
5
6
7
8
9
10
11
<template>
    请输入姓名:<input type="text" v-model="username">
    <div>姓名是: {{username}}</div>
    <input type="text" v-model.number="n1">+<input type="text" v-model.number="n2">={{n1+n2}}
</template>
<script setup>
import { ref } from 'vue'
const username = ref('zhangsan')
const n1 = ref(1)
const n2 = ref(2)
</script>

条件渲染指令

在Vue中，当需要根据不同的判断结果显示不同的DOM元素时，可以通过条件渲染指令来实现。条件渲染指令可以辅助开发者按需控制DOM元素的显示与隐藏。

条件渲染指令如下。

v-if

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
    小明的学习评定等级为:
    <p v-if="type === 'A'">优秀</p>
    <p v-else-if="type === 'B'">良好</p>
    <p v-else>差</p>
    <button @click="type ='A'">切换成优秀</button>
    <button @click="type ='B'">切换成良好</button>
    <button @click="type ='C'">切换成差</button>
</template>
<script setup>
import { ref } from 'vue'
const type = ref('B')
</script>

v-show

v-show的原理是通过为元素添加或移除display:none样式来实现元素的显示或隐藏。当需要频繁切换某个元素的显示或隐藏时，使用V-show会更节省性能开销；而当只需要切换一次显示或隐藏时，使用V-f更合理。

1
2
3
4
5
6
7
8
9
<template>
    <p v-if="flag">通过v-if控制的元素</p>
    <p v-show="flag">通过v-show控制的元素</p>
    <button @click="flag = !flag">显示/隐藏</button>
</template>
<script setup>
import { ref } from 'vue'
const flag = ref(true)
</script>

列表渲染指令

Vue提供了列表渲染指令V-for。开发者只需在模板中定义一件商品的结构，V-for便会根据开发者提供的数据自动渲染商品列表中所有的商品

1
2
3
4
5
6
7
8
9
<template>
    <div v-for="(item,index) in list":key="index">
        索引是:{{index}} ---元素的内容是:{{item}}
    </div>
</template>
<script setup>
import {reactive} from 'vue'
const list=reactive(['张三','李四','王五'])
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
    <div v-for="item in list" :key="item.id">
        id是: {{ item.id }} --- 元素的内容是: {{ item.message }}
    </div>
</template>
<script setup>
import {reactive} from 'vue'
const list = reactive([
    { id: 1, message: 'hello' },
    { id: 2, message: 'world' },
    { id: 3, message: 'vue' },
])
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
    <div v-for="(value,name) in user" :key="name">
        属性名是:{{name}} --- 属性值是:{{value}}
    </div>
</template>
<script setup>
import {reactive} from 'vue'
const user=reactive({
    id:1,
    name:'张三',
    gender:'男'
})
</script>

事件对象

通过事件方法的参数获取事件对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
    <div>count的值为:{{ count }}</div>
    <button @click="addCount">count+1</button>
</template>
<script setup>
import { ref } from 'vue'
const count = ref(1)
const addCount = event => {
    count.value++
    if(count.value%2 === 0){
       event.target.style.border="3px dotted"
    }else{
        event.target.style.border="3px solid"
    }
}
</script>

通过$event获取事件对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<template>
    <div>count的值为:{{ count }}</div>
    <button @click="addCount">count+1</button>
    <button @click="addCountN(3,$event)">count+n</button>
</template>
<script setup>
import { ref } from 'vue'
const count = ref(1)
const addCount = event => {
    count.value++
    if(count.value%2 === 0){
       event.target.style.border="3px dotted"
    }else{
        event.target.style.border="3px solid"
    }
}
const addCountN =(n,event)=>{
    count.value+=n
    if(count.value%2 === 0){
       event.target.style.border="3px dotted"
    }else{
        event.target.style.border="3px solid"
    }
}

</script>

事件修饰符

阻止默认事件行为

.prevent

1
<a href="test.html" v-on:click.prevent>阻止默认跳转行为</a>

阻止事件冒泡

.stop

1
2
3
4
5
6
7
8
9
<template>
    <div v-on:click ="show('我是父元素的事件')">
    <button v-on:click="show('我是子元素的事件')">事件冒泡</button>
    <button v-on:click.stop="show('我是子元素的事件')">阻止事件冒泡</button>
    </div>
</template>
<script setup>
let show=message =>console.log(message)
</script>

事件冒泡控制台输出：

1
2
我是子元素的事件
我是父元素的事件

阻止事件冒泡控制台输出:

1
我是子元素的事件

事件捕获

.captrue

1
2
3
4
5
6
<div v-on:click.capture ="show('我是父元素的事件')">
    <button v-on:click="show('我是子元素的事件')">事件冒泡</button>
    <button v-on:click.stop="show('我是子元素的事件')">阻止事件冒泡</button>
      <!-- 事件捕获 -->
   <button v-on:click="show('我是子元素的事件')">事件捕获</button>
    </div>

控制台输出:

1
2
我是父元素的事件
我是子元素的事件

使事件只触发一次

.once

1
<button v-on:click.once="show('我是当前元素的单击事件并且只执行一次')">只执行一次</button>

使DOM元素只有自身触发事件时才执行事件方法

.self

1
2
3
4
5
6
7
8
9
10
11
<template>
   <div v-on:click="show('我是祖先元素的事件')">祖先元素
      <div v-on:click.self="show('我是父元素的事件')">父元素
         <div v-on:click="show('我是子元素的事件')">子元素</div>
      </div>
       
   </div>
</template>
<script setup>
let show=message =>console.log(message);
</script>

点击子元素输出：

1
2
我是子元素的事件
我是祖先元素的事件

监听滚动事件

.passive主要用于优化移动端设备的滚屏性能，优先响应滚动事件而不是滚动事件的回调函数

1
<div v-on:scroll.passive="onScroll"></div>

捕获特定按键

  • **.enter:**捕获Enter键
1
2
3
4
5
6
7
8
9
<template>
 <input type="text" v-on:keyup.enter="submit">
</template>
<script setup>
let show=message =>console.log(message);
let submit=()=>{
  console.log("捕获到Enter键盘");
}
</script>

输入框输入enter/enter+其他组合键，控制台输出捕获到Enter键盘

加上.exact 只能输入enter输出

  • **.esc:**捕获Esc键

  • **.tab:**捕获Tab键

  • **.delete:**捕获Delete和Backspace键

  • **.ctrl:**捕获Ctrl键

  • **.alt:**捕获Alt键

  • **.shift:**捕获Shift键

  • **.meta:**捕获Ctrl键

捕获鼠标按键

.left:捕获鼠标左键

.middle:捕获鼠标中键

.right:捕获鼠标右键

1
2
3
4
5
6
<template>
 <button v-on:click.left="show('捕获到鼠标左键')"></button>
</template>
<script setup>
let show=message =>console.log(message);
</script>

计算属性

定义计算属性

computed()函数的参数为一个回调函数，开发者需要在回调函数中实现计算功能，并在计算完成后返回计算后的数据，语法格式如下。

1
2
3
4
5
6
<script setup>
import computed from 'vue'
const 计算属性名 =computed(()=>{
 return 计算后的数据
})
</script>

输出计算属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
    <p>初始message:{{message}}</p>
    <p>反转之后的message:{{reversedMessage}}</p>
    <button @click="updateMessage">更改</button>
</template>
<script setup>
import { ref, computed } from 'vue'
const message = ref('Hello Vue3!')
const reversedMessage = computed(() => 
    message.value.split('').reverse().join('')
)
const updateMessage = () => {
    message.value = 'Hello'
}
</script>

侦听器

侦听器通过watch()函数定义，watch()函数的语法格式如下。

1
watch(侦听器的来源，回调函数，可选参数)

侦听器的来源：

  • 一个函数，返回一个值
  • 一个响应式数据
  • 一个响应式对象
  • 一个由以上类型组成的数组

回调函数：

数据发生变化时要调用的回调函数，这个回调函数的第1个参数表示新值，即数据发生变化后的值，第2个参数表示旧值，即数据发生变化前的值。

可选参数：

是一个对象

deep：默认情况下，当侦听一个对象时，如果对象中的属性值发生了变化，则无法被监听到。如果想监听到，可以将该选项设为true,表示进行深度监听。该选项的默认值为false,表示不使用该选项。

immediate：:默认情况下，组件在初次加载完毕后不会调用侦听器的回调函数，如果想让侦听器的回调函数立即被调用，则需要将选项设为true。该选项的默认值为false,表示不使用该选项。

1
2
3
4
5
6
7
8
9
10
<template>
<input type="text" v-model="cityName">
</template>
<script setup>
import {watch,ref } from 'vue'
const cityName = ref('beijing')
watch(cityName,(newValue,oldValue)=>{
    console.log(newValue,oldValue);
})
</script>

更改输入框的值，控制台输出新值 旧值

绑定class属性

1
2
3
4
5
6
7
8
9
10
11
<template>
    <div v-bind:class="className">梦想</div>
</template>
<script setup>
const className = 'box'
</script>
<style>
.box{
   border:1px solid black;
}
</style>

将class属性值绑定为对象

在Vue中，可以将class属性值绑定为对象，从而动态地改变class属性值。对象中包含的属性名表示类名，属性值为布尔类型，如果属性值为true,表示类名生效，否则类名不生效。将class属性值绑定为对象的示例代码如下。

1
2
3
4
5
6
7
<template>
<div v-bind:class="{className:isActive}"></div>
</template>
<script setup>
import {ref} from 'vue'
const isActive = ref(true)
</script>

将class属性值绑定为数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<template>
    <div v-bind:class="[activeClass,borderClass]"></div>
    <div v-bind:class="[isActive?activeClass:'',borderClass]"></div>
    <div v-bind:class="[{active:isActive},borderClass]"></div>
</template>
<script setup>
import { ref } from 'vue'
const isActive = ref(true)
const activeClass = ref('active')
const borderClass = ref('border')
</script>
<style>
.active{
    width: 100px;
    height: 10px;
    margin-bottom: 2px;
    background-color: rgb(59, 192, 241);
}
.border{
    border:2px solid rgb(0,0,0);
}
</style>

绑定style属性

在Vue中，将styl/属性值绑定为对象时，该对象中的属性名表示CSS属性名，属性值为CSS属性值。以对象语法绑定元素的stye属性

将style属性值绑定为对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
    <div v-bind:style="{'background-color':pink,width,height:height+'px'}">
       <div v-bind:style="{backgroundColor:isBlue?blue:'black',width:'50px',height:'20px'}"></div>
        <div v-bind:style="myDiv"></div>
    </div>
</template>
<script setup>
import {ref,reactive} from 'vue'
const isBlue = ref(false)
const blue=ref('blue')
const pink=ref('pink')
const width=ref('100%')
const height=ref(40)
const myDiv=reactive({
    width:'50px',
    height:'20px',
    backgroundColor:'red'
})
</script>

将style属性绑定为数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
    <div v-bind:style="[activeClass,borderClass]"></div>
    <div v-bind:style="[isActive?activeClass:'',borderClass]"></div>
    <div v-bind:style="[{backgroundColor:'rgb(59,192,241)',height:'10px'},borderClass]"></div>
</template>
<script setup>
import { ref,reactive } from 'vue'
const isActive = ref(true)
const activeClass = reactive({
    backgroundColor:'rgb(59,192,241)',
    height:'10px'
})
const borderClass = reactive({
    border:'2px solid black'
})

</script>

组件基础

选项式API和组合式API

选项式API

1
2
3
4
5
6
7
8
9
10
<script>
export default{
 data(){
 return{//定义数据}
},
 methods:{//定义方法}，
 computed:{//定义计算属性}，
 watch:{//定义侦听器}
}
</script>

组合式API

1
2
3
4
5
6
7
8
9
10
11
12
<script>
import {computed,watch} from 'vue'
export default{
 setup()
  const数据名=数据值
  const方法名=()=>{}
  const计算属性名=computed(()=>{})
  watch(侦听器的来源，回调函数，可选参数)
  return{数据名，方法名，计算属性名}
 }
}
</script>

setup语法糖

1
2
3
4
5
6
7
8
9
10
11
<script setup>
import {computed,watch} from 'vue'
//定义数据
const 数据名=数据值
//定义方法
const 方法名=()=>{}
//定义计算属性
const 计算属性名=computed(()=>{})
//定义侦听器
watch(侦听器的来源，回调函数,可选参数)
</script>

举例：选项式API

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<template>
    <div>数字:{{ number }}</div>
    <button @click="addNumber">+1</button>
</template>
<script>
export default {
    data() {
        return {
            number: 1
        }
    },
    methods: {
        addNumber() {
            this.number++;
        }
    }
}
</script>

组合式API

1
2
3
4
5
6
7
8
9
10
11
<template>
    <div>数字:{{ number }}</div>
    <button @click="addNumber">+1</button>
</template>
<script setup>
import { ref } from 'vue'
let number=ref(1)
const addNumber=()=>{
    number.value++
}
</script>

生命周期函数

组合式API下的生命周期函数：

1
2
3
4
5
6
7
8
9
10
11
12
<template>
    <div class="container">container</div>
</template>
<script setup>
import { onBeforeMount, onMounted } from 'vue'
onBeforeMount(() => {
    console.log('DOM元素渲染前',document.querySelector('.container'))
})
onMounted(() => {
    console.log('DOM元素渲染后',document.querySelector('.container'))
})
</script>

选项式API下的生命周期函数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
    <div class="container">container</div>
</template>

<script>
export default {
    data() {
        return {
            value: "Hello"
        };
    },
    beforeCreate() {
        console.log("实例对象创建前：" + this.value); 
    },
    created() {
        console.log("实例对象创建后：" + this.value);
    }
};
</script>

控制台输出：

1
2
实例对象创建前:undefined
实例对象创建后:Hello

注册组件

全局注册

1
component('组件名称'，需要被注册的组件)

在src\main。js文件中注册一个全局组件MyComponent,示例代码如下。

1
2
3
4
5
6
7
8
9
import { createApp } from 'vue';
import './style.css';
import App from './App.vue';
import MyComponent from './components/MyComponent.vue';

const app = createApp(App);
app.component('MyComponent', MyComponent);
app.mount('#app');

component()方法支持链式调用，可以连续注册多个组件，示例代码如下。

1
2
3
app.component('ComponentA',ComponentA)
.component('ComponentB',ComponentB)
.component('ComponentC',ComponentC)

局部注册

1
2
3
4
5
6
7
8
9
10
<script>
import ComponentA from './ComponentA.vue';

export default {
  components: {
    ComponentA
  }
};
</script>

在使用setup语法糖时，导入的组件会被自动注册，无手动注册，导入后可以直接在模板中使用，示例代码如下:

1
2
3
<script setup>
import ComponentA from'./ComponentA.vue'
</script>

引用组件

ComponentUse.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
    <h5>父组件</h5>
    <div class="box">
        <GlobalComponent/>
        <LocalComponent/>
    </div>
</template>
<style>
.box {
 display: flex;
}
</style>
<script setup>
import GlobalComponent from './GlobalComponent.vue';
import LocalComponent from './LocalComponent.vue';

</script>

GlobalComponent.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
    <div class="global-container">
        <h5>全局组件</h5>
    </div>

</template>
<style>
    .global-container {
       border:1px solid black;
       height: 50px;
       flex:1;
    }
</style>

LocalComponent.vue

1
2
3
4
5
6
7
8
9
10
11
12
<template>
    <div class="local-cantainer">
        <h5>局部组件</h5>
    </div>
</template>
<style>
.local-cantainer {
    border: 1px dashed black;
    height: 50px;
    flex: 1;
}
</style>

main.js

1
2
3
4
5
6
7
8
import { createApp } from 'vue'
import './style.css'
import App from './components/ComponentUse.vue'
import GlobalComponent from './components/GlobalComponent.vue'
const app = createApp(App)
app.component('GlobalComponent', GlobalComponent)
app.mount('#app')

解决组件之间的样式冲突

scoped

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
    <h5>父组件</h5>
    <div class="box">
        <GlobalComponent/>
        <LocalComponent/>
    </div>
</template>
<style scoped> 
.box {
 display: flex;
}
h5{
    border: 1px dotted black;
}
</style >
<script setup>
import GlobalComponent from './GlobalComponent.vue';
import LocalComponent from './LocalComponent.vue';

</script>

深度选择器

如果给当前组件的<style>标签添加了scoped属性，则当前组件的样式对其子组件是不生效的,如果在添加了scoped属性后还需要让某些样式对组件生效，则可以使用深度选择器来实现。

深度选择器通过：deep()伪类来实现，在其小括号中可以定义用于子组件的选择器，例如，“:deep(.title)”被编译之后生成选择器的格式为”[data-v-7ba5bd90].title”。

ComponentUse.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<template>
    <h5>父组件</h5>
    <div class="box">
        <GlobalComponent/>
        <LocalComponent/>
    </div>
</template>
<style scoped> 
.box {
 display: flex;
}
h5{
    border: 1px dotted black;
}
/* 用:deep()选择器 */
:deep(.title){
   border: 3px dotted black;
}
</style>
<script setup>
import GlobalComponent from './GlobalComponent.vue';
import LocalComponent from './LocalComponent.vue';

</script>

LocalComponent.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
    <div class="local-cantainer">
         <!-- 添加class属性 -->
        <h5 class="title">局部组件</h5> 
    </div>
</template>
<style>
.local-cantainer {
    border: 1px dashed black;
    height: 50px;
    flex: 1;
}
</style>

声明props

在不使用setup语法糖的情况下，可以使用props选项声明props。prop选项的形式可以是对象或字符串数组。声明对象形式的props的语法格式如下。

1
2
3
4
5
6
7
8
9
<script>
export default{
 props:{
 自定义属性A:类型
 自定义属性B:类型，
 ...
 }
}
</script>

如果不需要限制props的类型，可以声明字符串数组形式的props,示例代码如下。

1
props:['自定义属性A','自定义属性B'],

当使用setup语法糖时，可使用defineProps()函数声明props,语法格式如下。

1
2
3
<script setup>
const props=defineProps({'自定义属性A':类型}，{'自定义属性B':类型})
</script>

使用defineProps()函数声明字符串数组形式的props,语法格式如下。

1
const props=defineProps(['自定义属性A','自定义属性B'])

在组件中声明了props后，可以直接在模板中输出每个prop的值，语法格式如下。

1
2
3
4
<template>
{{自定义属性A}}
{{自定义属性B}}
</template>

静态绑定props

通过静态绑定orops的方式为子组件传递数据，其语法格式如下。

1
<子组件标签名 自定义属性A="数据" 自定义属性B="数据”/>

在上述语法格式中，父组件向子组件的props传递了静态的数据，属性值默认为字符串类型。

如果子组件中未声明props,则父组件向子组件中传递的数据会被忽略，无法被子组件使用。

Count.vue

1
2
3
4
5
6
7
8
<template>
    初始值: {{ num }}
</template>
<script setup>
const props=defineProps({
    num:String
})
</script>

Props.vue

1
2
3
4
5
6
<template>
    <Count num="1"/>
</template>
<script setup>
import Count from './Count.vue';
</script>

动态绑定props

字符串

从父组件中为子组件传递字符串类型的props数据，示例代码如下。

Child.vue

1
2
3
4
5
6
7
<template>

</template>
<script setup>
const props = defineProps(['init'])//可以接受父组件传来的名为init的数据
console.log(props)
</script>

Props.vue

1
2
3
4
5
6
7
8
<template>
    <Child :init="username"/>
</template>
<script setup>
import Child from './Child.vue';
import { ref } from 'vue';
const username = ref('zhangsan');
</script>

布尔

Child.vue

1
2
3
4
5
6
7
<template>

</template>
<script setup>
const props = defineProps({init:Boolean})
console.log(props)
</script>

Props.vue

1
2
3
4
5
6
7
8
9
10
11
<template>
    <Child init/>
    <Child :init="false"/>
    <Child :init="isFlag"/>

</template>
<script setup>
import Child from './Child.vue';
import { ref } from 'vue';
const isFlag = ref(true);
</script>

数字

Child.vue

1
2
3
4
5
6
7
<template>

</template>
<script setup>
const props = defineProps(['init'])
console.log(props)
</script>

Props.vue

1
2
3
4
5
6
7
8
9
10
11
<template>
  
    <Child :init="12"/>
    <Child :init="age"/>
</template>
<script setup>
import Child from './Child.vue';
import { ref } from 'vue';
// const username = ref('zhangsan');
const age = ref(12);
</script>

对象

Child.vue

1
2
3
4
5
6
7
<template>

</template>
<script setup>
const props = defineProps(['init','weight','height'])//可以接受父组件传来的名为init的数据
console.log(props)
</script>

Props.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
  
    <Child :init="{height:'180厘米',weight:'70千克'}"/>
    <Child :height="bodyInfo.height":weight="bodyInfo.weight"/>
    <Child v-bind="bodyInfo"/>

</template>
<script setup>
import Child from './Child.vue';
import { reactive } from 'vue';
// const username = ref('zhangsan');
// const age = ref(12);
const bodyInfo = reactive({
    height: '180厘米',
    weight: '70千克'
})
</script>

验证props

基础类型检查

为props指定基础类型检查，示例代码如下。

1
2
3
4
5
6
7
8
9
10
props:{
 自定义属性A:String,
 自定义属性B:Number,
 自定义属性C:Boolean,
 自定义属性D:Array,
 自定义属性E:Object,
 自定义属性F:Data,
 自定义属性G:Function,
 自定义属性H:Symbol,
}

通过配置对象的形式定义验证规则，示例代码如下。

1
2
3
props:{
自定义属性：{type:Number},
}

如果某个prop的类型不唯一，可以通过数组的形式为其指定多个可能的类型，示例代码如下。

1
2
3
props:{
 自定义属性：{type:[String,Array]},//字符串或数组
}

必填项的校验

声明porops时通过required属性设置必填项

1
2
3
props:{
 自定义属性：{required:true},
}

属性默认值

在声明props时，可以通过default属性定义属性默认值，当父组件没有向子组件的属性传递数据时，属性将会使用默认值。

1
2
3
props:{
自定义属性：{default:O},
}

自定义验证函数

validator(）函数可以将prop的值作为唯一参数传入自定义验证函数，如果验证失败，则会在控制台中发出警告。

1
2
3
4
5
6
7
props:{
 自定义属性：{
  validator(value){
  return ['success','warning','danger'].indexOf(value)!==-1;
  },
 },
}

在子组件中声明自定义事件

在不使用setup语法糖时，可以通过emits选项声明自定义事件，示例代码如下。

1
2
3
4
5
<script>
export default{
 emits:['demo']
}
</script>

在使用setup语法糖时，需要通过调用defineEmits()函数声明自定义事件，示例代码如下。

1
2
3
<script setup>
const emit=defineEmits(['demo'])
</script>

在子组件中触发自定义事件

当使用场景简单时，可以使用内联事件处理器，通过调用$emit()方法触发自定义事件，将数据传递给使用的组件，示例代码如下。

1
<button @click="$emit('demo',1)">按钮</button>

在上述代码中，$emit（）方法的第1个参数为字符串类型的自定义事件的名称，第2个参数为需要传递的数据，当触发当前组件的事件时，该数据会传递给父组件。

除了使用内联方式外，还可以直接定义方法来触发自定义事件

在不使用setup语法糖时，可以从setup()函数的第2个参数（即setup上下文对象）来访问到emit()方法，示例代码如下。

1
2
3
4
5
6
7
8
export default{
 setup(props,ctx){
  const update =()=>{
   ctx.emit('demo',2)
  }
  return {update}
 }
}

如果使用setup语法糖，可以调用emit()函数来实现，示例代码如下。

1
2
3
4
5
<script setup>
const update =()=>{
 emit('demo',2)
}
</script>

在父组件监听自定义事件

CoustomEvents.vue

1
2
3
4
5
6
7
8
9
10
11
12
<template>
    <p>父组件当前的值为:{{ number }}</p>
    <CustomSubComponent @updataCount="updataEmitCount" />
</template>
<script setup>
import CustomSubComponent from './CustomSubComponent.vue';
import { ref } from 'vue';
const number = ref(1);
const updataEmitCount = (value) => {
    number.value += value;
}
</script>

CustomSubComponent.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
    <p>值为:{{ count }}</p>
    <button @click="add">加n</button>
</template>
<script setup>
import { ref } from 'vue'
const emit = defineEmits(['updataCount'])//声明一个自定义事件
const count = ref(1)
const add = () => {
    count.value++
    emit('updataCount', 2) //触发事件，传递值给父组件
}
</script>

跨级组件之间的数据传递

provide()函数

provide()函数可以提供一个值，用于被后代组件注入。provide()函数的语法格式如下。

1
provide(注入名，注入值)

不适用setup语法糖:

1
2
3
4
5
6
7
8
9
<script>
import {ref,provide} from 'vue'
export default{
 setup()
 const count ref(1)
 provide('message',count)
 }
}
</script>

使用setup:

1
2
3
4
<script setup>
import {provide} from 'vue'
provide('message','Hello Vue.js')
</script>

全局依赖，在main.js

1
2
const app=createApp(App)
app.provide('message','Hello Vue.js')

inject()函数

通过inject()函数可以注入上层组件或者整个应用提供的数据。inject()函数的语法格式如下。

1
inject(注入值，默认值，布尔值)

不使用setup

1
2
3
4
5
6
7
8
9
10
11
<script>
import inject from 'vue';
export default{
 setup(){
  const count=inject('count')
  const foo=inject('foo','default value')
  const baz=inject('foo',()=>new Map())
  const fn=inject('function',()=>{},false)
 }
}
script>

使用setup

1
2
3
4
<script setup>
import inject from 'vue'
const count=inject('count')
</script>

定义动态组件

1
<component:is="要渲染的组件"></component>

iS属性的属性值可以是字符串或组件，当属性值为组件时，如果要实现组件的切换，需要调用shallowRef(）函数定义响应式数据，将组件保存为响应式数据。shallowRef()函数只处理对象最外层属性的响应，它比ref()函数更适合于将组件保存为响应式数据。

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
    <button @click="showComponent=MyLeft">展示MyLeft组件</button>
    <button @click="showComponent=MyRight">展示MyRight组件</button>
    <div>
        <component :is="showComponent"></component>
    </div>
</template>
<script setup >
import MyLeft from './MyLeft.vue';
import MyRight from './MyRight.vue';
import {shallowRef} from 'vue';
const showComponent = shallowRef(MyLeft);
</script>

利用KeepAlive组件实现组件缓存

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
    <button @click="showComponent=MyLeft">展示MyLeft组件</button>
    <button @click="showComponent=MyRight">展示MyRight组件</button>
    <div>
        <KeepAlive>
            <component :is="showComponent"></component> 
            //被缓存的组件
        </KeepAlive>
    </div>
</template>
<script setup >
import MyLeft from './MyLeft.vue';
import MyRight from './MyRight.vue';
import {shallowRef} from 'vue';
const showComponent = shallowRef(MyLeft);
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
    MyLeft组件
    <div>
        count值:{{count}}
        <button @click="count++">+1</button>
    </div>
</template>
<script setup>
import {ref,onMounted,onUnmounted} from 'vue';
const count = ref(0);
onMounted(()=>{
    console.log('MyLeft组件被挂载');
});
onUnmounted(()=>{
    console.log('MyLeft组件被卸载');
})
</script>

加入

之后MyLeft组件就不会被卸载

组件缓存相关的生命周期函数

当组件被激活时，会触发组件的onActivated()生命周期函数；当组件被缓存时，会触发组件的onDeactivated()生命周期函数。这两个生命周期函数的语法格式如下。

1
2
3
4
//onActivated()生命周期函数
onActivated((=>{})
//onDeactivated()生命周期函数
onDeactivated(()=>{})

KeepAlive组件的常用属性

1
2
3
<KeepAlive include="组件名1,组件名2">
被缓存的组件
</KeepAlive>

非setup

1
2
3
4
5
<script>
export default{
 name:'MyComponent'
}
</script>

什么是插槽

定义插槽

1
2
3
4
5
<template>
 <button>
  <slot></slot>
 </button>
</template>

在标签内可以添加一些内容作为插槽的默认内容。如果组件的使用者没有为插槽提供任何内容，则默认内容生效；如果组件的使用者为插槽提供了插槽内容，则该插槽内容会取代默认内容。

使用插槽

使用插槽即在父组件中使用子组件的插槽，在使用时需要将子组件写成双标签的形式，在双标签内提供插槽内容。例如，使用MyButton件的插槽的示例代码如下。

1
2
3
4
5
<template>
 <MyButton>
  按钮
 </MyButton>
</template>

因为插槽内容是在父组件模板中定义的，所以在插槽内容中可以访问到父组件的数据。内容可以是任意合法的模板内容，不局限于文本。例如，可以使用多个元素或者组件作为插槽内容，示例代码如下。

1
2
3
4
<MyButton>
 <span style="color:yellow,">按钮</span>
 <MyLeft/>
</MyButton>

子组件 (ChildComponent.vue)：

1
2
3
4
5
6
7
<template>
  <div>
    <h3>子组件内容</h3>
    <slot></slot>  <!-- 插槽 -->
  </div>
</template>

父组件：

1
2
3
4
5
6
<template>
  <ChildComponent>
    <p>这是父组件传递的内容</p>
  </ChildComponent>
</template>

输出结果：

子组件内容
这是父组件传递的内容

具名插槽

1
<slot name="插槽名称"></slot>

在父组件中，如果要把内容填充到指定名称的插槽中，可以通过一个包含V-sot指令的<template>标签来实现，语法格式如下。

1
2
3
<组件名>
<template v-slot:插槽名称></template>
</组件名>

与v-on和v-bind类似，v-slot也有简写形式，即把v-slot:替换为#。例如，v-slot:title可以简写为#title。

作用域插槽

定义数据

在封装组件的过程中，可以为预留的插槽定义数据，供父组件接收并使用子组件中的数据。在作用域插槽中，可以将将数据以类似传递props属性的形式添加到标签上。

1
<slot message="Hello Vue.js"></slot>

接收数据

默认插槽在Vue中，每个插槽都有name属性，表示插槽的名称。在定义插槽时虽然省略了标
签的name属性，但是name属性默认为default,这样的插槽属于默认插槽。

在父组件中可以通过v-slot指令接收插槽中定义的数据，即接收作用域插槽对外提供的数据。通过v-slot指令接收到的数据可以在插槽内通过Mustachei语法进行访问。

1
2
3
<MyHeader v-slot="scope">
<p>{{scope.message )}</p>
</MyHeader>

通过v-slot接收从作用域插槽中传递的数据，scope作为形参，表示从作用域插槽中接收的数据，该形参的名称可以自定义。

什么是自定义指令

私有自定义指令：在组件内部定义的指令

全局自定义指令：在全局定义的指令。

常用的自定义指令生命周期函数：

常用的自定义指令生命周期函数的参数如下表所示。

binding中包含以下6个常用属性:

value:传递给指令的值。

arg:传递给指令的参数

oldValue:之前的值，仅在beforeUpdate()函数和updated()函数中可用，无论值是否更改都可用。

modifiers:一个包含修饰符的对象（如果有）。例如，在v-my-directive.foo.bar中，修饰符对象是{foo:true,bar:true}。

instance:使用该指令的组件实例。

dir:指令的定义对象

私有自定义指令的声明与使用

没有使用setup

1
2
3
4
5
export default{
 directives:{
  color:{}
 }
}

在使用自定义指令时，需要以“v-”开头

1
<h1 V-color>标题</h1>

如果使用setup语法糖，任何以”v”开头的驼峰式命名的变量都可以被用作一个自定义指令

1
2
3
4
5
6
<template>
 <span v-color></span>
</template>
<script setup>
 const vColor ={}
</script>

全局自定义指令的声明与使用

1
directive('自定义指令名称'，对象)

第1个参数类型为字符串，表示全局自定义指令的名称；
第2个参数类型为对象或者函数，可以是对象或者函数形式，用于接收指令的参数值。

1
2
3
4
5
6
7
8
9
10
11
12
13
import { createApp } from 'vue'
import './style.css'
import App from './components/DirectiveComponent.vue'

const app = createApp(App)

app.directive('fontsize', {
mounted:el=>{
  el.style.fontSize = '24px'
 }
})
app.mount('#app')

1
2
3
<template>
<p v-fontsize>组件</p>
</template>

为自定义指令绑定参数

在标签中使用自定义指令时，通过等号(=)的方式可以为当前指令绑定参数

1
2
<h1 v-color="color"></h1>
<div v-demo="{color:'red',text:'hello'}"></div>//如果指令需要多个值，可以传递一个对象

自定义指令的函数形式

对于自定义指令来说，通常仅需要在mounted()函数和updated()函数中操作DOM元素，除此之外，不需要其他的生命周期函数。mounted()函数和updated()函数中的代码完全相同。此时，可以将自定义指令简写为函数形式。

将私有自定义指令简写为函数形式的示例代码如下

1
2
3
const vFontSize =(el,binding)=>{
  el.style.fontSize=binding.value
}

将全局自定义指令简写成函数形式的示例代码如下。

1
2
3
app.directive('fontSize',(el,binding)=>{
 el.style.fontSize=binding.value
})

引用静态资源

引用public目录中的静态资源

1
<img src="/demo.png">

引用src\assets目录中的静态资源

1
2
3
4
5
6
<template>
<img src='icon'/>
</template>
<script setup>
import icon from '../assets/vue.svg'
</script>