Vue.js (通常简称为 Vue)是一套用于构建用户界面的渐进式框架。与其他框架不同的是,Vue采用了自底向上增量开发的设计。Vue的核心库只关注视图层,并且非常容易与现有项目集成。Vue也完全支持通过插件的方式进行扩展。Vue的设计理念是通过尽可能简单的API来实现响应的数据绑定和组合的视图组件。
Vue的核心特点包括:
响应的数据绑定: Vue可以将数据和DOM元素进行双向绑定,使数据的变化可以自动反映在视图上。
组件化:Vue提供了一种组合视图组件的方式,可以方便地构建复杂的用户界面。
虚拟DOM:Vue利用虚拟DOM技术对DOM操作进行优化,提高渲染性能。
渐进式框架:Vue可以逐步引入到现有项目中,也可以作为完整的前端框架使用。
总的来说,Vue是一个灵活、高效并且易于上手的前端框架,已经在很多项目中得到了广泛的应用。
import { createApp } from 'vue' //创建应用
import App from './App.vue' //引入根组件
createApp(App).mount('#app') <template> //写html
<script> //JS或者TS
<style> //样式
Composition API(Vue3)和Options API(Vue2)的区别
Options API使用data属性来定义组件的数据,而Composition API使用setup函数来定义组件的状态。这是两种API的主要区别之一。另外,Composition API还提供了更多的功能和优势,例如:可以使用函数式组件、可以直接访问props、可以使用ref和computed等。这些功能可以让组件更加灵活和可维护。
setup是所有Composition API(组合API表演的舞台 ”,组件中所用到的:数据、方法等等,均要配置在setup中。
setup(){//数据let name="张三"let tel='18848339298'//方法function showTel(){alert(tel)}return {name,showTel}}
Vue2.x配置(data、methos、computed…)中可以访问到setup中的属性、方法
但在setup中不能访问到Vue2.x配置(data、methos、computed…)
语法糖
<script setup lang="ts" name="Person1">
//数据
let name = "张三"
let tel = '18848339298'//方法npm run dev
function showTel() {alert(tel)
}
</script>
ref函数作用: 定义一个响应式的数据(基本类型响应数据)
import {ref} from 'vue'
let name = ref("张三")
reactive函数作用: 定义一个对象类型的响应式数据(基本类型不要用它,要用ref函数)
import {reactive} from 'vue'
let car=reactive({brand:'奔驰',price:100})