简介
简介:
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的内嵌式的写法
- 应用创建
- 模板语法的基本使用
- 组件的定义和使用
- 函数方法的定义
- 父组件和子组件之间的传值