title: vue_1 date: 2025-01-28 12:00:00 tags: - 前端 categories: - 前端
vue3
Webpack ~ vite
vue3是基于vite创建的
vite 更快一点
一些准备工作
准备后如图所示
插件
Main.ts
// 引入createApp用于创建应用 import {createApp} from 'vue' // 引入App根组件 import App from './App.vue' createApp(App).mount('#app')
App 是根组件,createApp是盆
npm run dev
APP.vue
<template> <div class="app"> <h1>你好啊!</h1> </div> </template> <script lang="ts"> export default { name:'App' //组件名 } </script> <style> .app { background-color: #ddd; box-shadow: 0 0 10px; border-radius: 10px; padding: 20px; } </style>
简单效果实现
<template> <div class="person"> <h2>姓名:{% raw %}{ {name}}{% endraw %}</h2> <h2>年龄:{% raw %}{ {age}}{% endraw %}</h2> <button @click="changeName">修改名字</button> <button @click="changeAge">修改年龄</button> <button @click="showTel">查看联系方式</button> </div> </template> <script lang="ts"> export default { name:'Person', data(){ return { name:'张三', age:18, tel:'13888888888' } }, methods:{ // 修改姓名 changeName(){ this.name = 'zhang-san' }, // 修改年龄 changeAge(){ this.age += 1 }, // 展示联系方式 showTel(){ alert(this.tel) } } } </script> <style scoped> .person { background-color: skyblue; box-shadow: 0 0 10px; border-radius: 10px; padding: 20px; } button { margin: 0 5px; } </style>
这个代码分别是cue组件的三个主要部分,分别对应的模版,脚本和样式
模版部分:也就是trmplate
模版
模版是vue组件的视图部分,定义了组件的html结构
在vue中。模版部分是通过高{% raw %}{ {}}{% endraw %}语法实现数据绑定的,{% raw %}{ {name}}{% endraw %} 会绑定到 data 中的 name 数据。
其中的@click 指令绑定点击事件,点击按钮时执行相应的方法,chageName,changeAge,changeTel
<template> <div class="person"> <h2>姓名:{% raw %}{ {name}}{% endraw %}</h2> <h2>年龄:{% raw %}{ {age}}{% endraw %}</h2> <button @click="changeName">修改名字</button> <button @click="changeAge">修改年龄</button> <button @click="showTel">查看联系方式</button> </div> </template>
脚本部分
脚本定义了vue组件的逻辑部分
-
data :组件的状态,即组件中使用的数据
-
Methods:定义组件的方法,这些方法可以在模版中调用来响应用户事件
-
name : 组件的名字,这里是'Person',在vue开发工具中查看到这个组件
<script lang="ts"> export default { name:'Person', data(){ return { name:'张三', age:18, tel:'13888888888' } }, methods:{ // 修改姓名 changeName(){ this.name = 'zhang-san' }, // 修改年龄 changeAge(){ this.age += 1 }, // 展示联系方式 showTel(){ alert(this.tel) } } } </script>
这段代码是一个 Vue 组件 的脚本部分,使用的是 TypeScript 语法。它定义了组件的 数据、方法 和 组件的名称
export default { name: 'Person', 这里就是组件的名称 data() { ... }, methods: { ... } }
export default 是一个 ES6 模块语法,它表示该文件导出的内容是一个对象,并且该对象是默认导出的。这使得 Vue 在加载组件时可以导入这个对象并使用它来渲染组件
样式部分
<style scoped> .person { background-color: skyblue; box-shadow: 0 0 10px; border-radius: 10px; padding: 20px; } button { margin: 0 5px; } </style>
scoped 属性确保这些样式只作用于当前组件,不会影响到其他组件。这是因为 Vue 会为每个组件自动加上独特的属性选择器(如 .person 只作用于当前组件的 .person 元素)。
app.vue
<template> <div class="app"> <h1>你好啊!</h1> <Person/> </div> </template> <script lang="ts"> import Person from './components/Person.vue' export default { name:'App', //组件名 components:{Person} //注册组件 } </script> <style> .app { background-color: #ddd; box-shadow: 0 0 10px; border-radius: 10px; padding: 20px; } </style>
Export default{}
export default { name: 'App', components: { Person } }
export default 语句使得这个对象成为当前模块的默认导出。这意味着在其他地方使用 import 时,就可以导入这个对象。该对象定义了一个 Vue 组件,组件的名字是 App(通过 name: 'App' 设置)。App 是这个 Vue 组件的名称,它通常是根组件或父组件的名称。
• name 属性指定了当前组件的名字。在 Vue 开发工具中,App 组件将显示为 App,它通常是 Vue 应用的根组件。
• App 组件是父组件,而 Person 组件是它的子组件。
• components 是一个 Vue 组件选项,表示当前组件所使用的子组件。
• 这里通过 components: { Person } 注册了 Person 组件,意味着在 App 组件的模板中可以使用 <Person 标签来引用 Person 组件。
• 由于我们已经通过 import Person from './components/Person.vue' 导入了 Person 组件,所以在 components 中注册它时,只需要直接写 Person 就可以了。
【OptionsAPI 与 CompositionAPI】
Options API 的弊端
Options
类型的 API
,数据、方法、计算属性等,是分散在:data
、methods
、computed
中的,若想新增或者修改一个需求,就需要分别修改:data
、methods
、computed
,不便于维护和复用。
Composition API 的优势
可以用函数的方式,更加优雅的组织代码,让相关功能的代码更加有序的组织在一起。
<template> <div class="person"> <h2>姓名:{% raw %}{ {name}}{% endraw %}</h2> <h2>年龄:{% raw %}{ {age}}{% endraw %}</h2> <button @click="changeName">修改名字</button> <button @click="changeAge">修改年龄</button> <button @click="showTel">查看联系方式</button> </div> </template> <script lang="ts"> export default { name:'Person', beforeCreate(){ console.log('beforeCreate') }, setup(){ console.log(this) //setup中的this是undefined,Vue3在弱化this了 // 数据,原来是写在data中的,此时的name、age、tel都不是响应式的数据 let name = '张三' let age = 18 let tel = '13888888888' // 方法 function changeName() { name = 'zhang-san' //注意:这样修改name,页面是没有变化的 console.log(name) //name确实改了,但name不是响应式的 } function changeAge() { age += 1 //注意:这样修改age,页面是没有变化的 console.log(age) //age确实改了,但age不是响应式的 } function showTel() { alert(tel) } // 将数据、方法交出去,模板中才可以使用 return {name,age,tel,changeName,changeAge,showTel} } } </script> <style scoped> .person { background-color: skyblue; box-shadow: 0 0 10px; border-radius: 10px; padding: 20px; } button { margin: 0 5px; } </style>
这段代码展示了一个vue3组件的setup()函数的使用,并且展示了一些vue3中的特性
Setup与compositionAPI
-
组件名称
export default { name: 'Person', beforeCreate() { console.log('beforeCreate') },
beforeCreate() 是一个 生命周期钩子,它会在 Vue 实例被创建之前调用。这是 Vue 2 和 Vue 3 中都存在的生命周期钩子,但是在 Vue 3 的 Composition API 中,生命周期钩子的使用方式发生了变化,通常会使用 onBeforeMount 等新的钩子函数(在 setup() 函数中)。
-
setup函数
setup() { console.log(this) // setup中的this是undefined,Vue3在弱化this了
• setup() 函数是 Vue 3 引入的 Composition API 的一部分,目的是简化组件的状态和行为的管理。
• 在 setup() 中,this 是 undefined,这与 Vue 2 中的 this(指向当前组件实例)不同。Vue 3 通过 Composition API 进行了优化,弱化了对 this 的依赖,增强了对组合逻辑的关注。此时,你应该通过返回的对象来访问数据和方法,而不是通过 this。
-
定义数据
let name = '张三' let age = 18 let tel = '13888888888'
-
定义方法
function changeName() { name = 'zhang-san' // 注意:这样修改name,页面是没有变化的 console.log(name) // name确实改了,但name不是响应式的 } function changeAge() { age += 1 // 注意:这样修改age,页面是没有变化的 console.log(age) // age确实改了,但age不是响应式的 } function showTel() { alert(tel) }
changeName()、changeAge() 和 showTel() 是组件的方法。修改 name 和 age 时,你会发现页面没有发生变化。这是因为 name 和 age 是普通的 JavaScript 变量,而不是响应式数据。
如果你希望这些数据能够自动反映到模板中,应该使用 Vue 3 的响应式 API(如 ref()