Vue3的基本操作使用(仅仅作为个人学习使用)

不想说话而已

已于 2023-12-26 11:01:31 修改

阅读量358

点赞数 9

文章标签：学习 vue.js javascript 前端

于 2023-12-26 10:47:17 首次发布

本文链接：https://blog.csdn.net/z905102975/article/details/135213008

版权

简介

官网文档

简介：

Vue具有易学易用的特点，提供了一个响应式的数据绑定系统和组件化的架构。它使开发者能够轻松地构建交互式的用户界面，通过简单地将HTML模板与Vue实例中的数据进行绑定。Vue还提供了许多常用的工具和库，以便于开发者构建高效、可维护的Web应用程序。

Vue的核心特性包括：

响应式数据绑定：Vue使用了一种基于依赖追踪的观察者机制，可以自动追踪数据的变化并更新对应的视图。
组件化架构：Vue提供了组件系统，允许开发者将页面划分为多个独立、可重用的组件，这样可以更好地组织和管理代码。
虚拟DOM：Vue使用虚拟DOM来优化性能，通过比较虚拟DOM的差异来最小化实际DOM操作的次数，提高渲染效率。
指令：Vue提供了一系列指令，用于处理DOM元素上的交互和动态行为，例如v-bind、v-if、v-for等。
插件系统：Vue具有丰富的插件生态系统，可以轻松地集成第三方库或扩展Vue的功能。
生态系统：Vue拥有庞大的社区和生态系统，提供了许多与Vue配套使用的工具、库和插件，以及丰富的官方文档和教程资源。

总的来说，Vue是一个灵活、高效的前端框架，被广泛应用于构建现代化的Web应用程序。无论是初学者还是有经验的开发者，都可以通过Vue来创建出优雅、易维护的用户界面。

作用：

Vue的主要作用是帮助开发者构建用户界面。具体来说，它可以用于以下方面：

构建单页应用：Vue可以被用于构建单页应用（Single Page Application，SPA），这种应用程序通过JavaScript动态地更新页面内容，而不需要重新加载整个页面。
创建交互式用户界面：Vue提供了一种响应式数据绑定机制，使开发者能够轻松地创建交互式用户界面，当数据发生改变时，Vue会自动更新对应的视图，从而实现数据和UI的同步。
组件化开发：Vue提供了组件化的开发模式，将页面划分为独立、可重用的组件，方便开发者管理和维护代码。
提高开发效率：Vue提供了许多工具和库，如Vue CLI、Vuex、Vue Router等，使开发者能够更快速、更高效地开发Web应用程序。
容易上手：Vue的API设计简洁明了，易于学习和使用，使得初学者也能够快速入门。

总的来说，Vue可以帮助开发者构建高效、优雅、易维护的Web应用程序，提高开发效率，减少开发成本，是一个非常实用的前端框架。

1.应用的创建：

npm create vue@latest

2.模板语法的基本使用：

<buuton>{{butNmae}}</button>

<script setup>
import {ref} from "vue";

const butNmae = ref("按钮一")

</script>

3.在main.js文件中注册，这里是以App.vue作为根组件：

import { createApp } from 'vue'
// 从一个单文件组件中导入根组件
import App from './App.vue'

//创建
const app = createApp(App); 

//挂载，以后全局注册其他的应用时，这句话要始终放在最后一行，否则可能会出现挂载失败的情况
app.mount('#app')

4.组件的定义和使用

定义组件

<template> 

   <button>点击按钮</button> 

</template> 

<script setup> 

</script> 

<style scoped>
 button{ 
   background: #6da6e1; 
   width: 70px; 
   height: 30px;
   outline: none;
   border: 0; 
   color: white;
   border-radius: 3px; 
} </style>

组件的使用

<template> 

<MyButton></MyButton>

 </template> 

<script setup> 
import MyButtonfrom "@/components/MyButton.vue";


</script>

 <style scoped>

 </style>

效果预览：

5、函数方法的定义

const sub = ()=>{
   console.log("函数方法定义");
}

6.父组件和子组件之间的传值

父组件向子组件传值

msg是子组件所接受的值

<template> 

<MyButton :msg="提交"></MyButton>

 </template> 

<script setup> 
import MyButtonfrom "@/components/MyButton.vue";


</script>

 <style scoped>

 </style>

子组件接受值：

<template> 

<button>{{props.msg}}</button>

 </template> 

<script setup> 
import {ref} from "vue";

//添加多个值时，逗号分割
const props = defineProps({
        msg:String
})


</script>

 <style scoped>

 </style>

效果预览：

其他的写法接受父组件值

const props = defineProps(['initialCounter'])

子组件像父组件传递值，通过自定义事件的方式来传递

1、定义一个自定义事件

// emit事件
const emit = defineEmits(['sub']);

2、在函数中使用emit事件

const sub = ()=>{
    emit('sub', "内容"); 
}

3、在父组件中监听该事件

其中submit是执行函数方法名

    <MyButton @sub="submit"></MyButton >

更好的一种方法（依赖注入）传递值，Provide，Inject

Provide定义

第一个参数被称为注入名
第二个参数是提供的值

<script setup>
import { provide } from 'vue'

provide(/* 注入名 */ 'message', /* 值 */ 'hello!')
</script>

Inject

<script setup>
import { inject } from 'vue'

const message = inject('message')
</script>

对注入值的默认设置

// 如果没有祖先组件提供 "message"
// `value` 会是 "这是默认值"
const value = inject('message', '这是默认值')

当需要修改值时

父组件的写法：

<!-- 在供给方组件内 -->
<script setup>
import { provide, ref } from 'vue'

const location = ref('North Pole')

function updateLocation() {
  location.value = 'South Pole'
}

provide('location', {
  location,
  updateLocation
})
</script>

子组件的写法：

<!-- 在注入方组件 -->
<script setup>
import { inject } from 'vue'

const { location, updateLocation } = inject('location')
</script>

<template>
  <button @click="updateLocation">{{ location }}</button>
</template>

如果不希望该值被修改

<script setup>
import { ref, provide, readonly } from 'vue'

const count = ref(0)
provide('read-only-count', readonly(count))
</script>

到这里我们介绍了两种父组件和子组件的通信方式

区别

他们的区别在于：

props

只可读，不可修改，且只能传递到他的子元素中，无法传递更深层次的组件

Provide

可以进行修改，并且，其任意的子孙后代元素都可以进行使用，不需要依次传递

总结：

这里只介绍了vue3的内嵌式的写法

应用创建
模板语法的基本使用
组件的定义和使用
函数方法的定义
父组件和子组件之间的传值