Vue3学习笔记

是 否 +2 论坛币

k人 参与回答

经管之家送您一份

应届毕业生专属福利!

求职就业群

赵安豆老师微信：zhaoandou666

经管之家联合CDA

送您一个全额奖学金名额~ !

立即领取

感谢您参与论坛问题回答

经管之家送您两个论坛币！

+2 论坛币

一、项目创建

1. 安装Node.js
2. 建立一个项目

npm create vue@latest

#安装依赖
npm install

#启动项目
npm run dev #vue3
npm run serve #vue2

3. 项目结构
   • node_modules -- 存储依赖项
   • public -- 存放静态图像（favicon.ico)
   • index.html -- 项目的入口点
4. .vue文件结构

   <template><header> #vue2中必须有唯一的根元素<div>
   
   <script>
   
   <style>

二、双向绑定——页面元素值与脚本中的数据同步更新

1. 对象的绑定（也可以使用ref）

import { ref, reactive } from "vue";

#使用reactive绑定
let salaryInfo = reactive({name:'roy',salary:15000})
salaryInfo.salary += 1000  #不用.value

#使用ref绑定
let salaryInfo = ref({name:'roy',salary:15000})
salaryInfo.value.salary += 1000

2. 绑定对象中的属性

let salaryInfo = reactive({name:'roy',salary:15000})

let name = toRef(salaryIngo, "name")
let salary = toRef(salaryIngo, "salary")

#或者
let {name, salary}= toRefs(salaryIngo)

3. 绑定元素

<input ref="name" abc="123"/>

#输出ref对象
console.log(name)

#输出input元素
console.log(name.value)

#输出元素内的值
console.log(name.value.value)

#输出123
console.log(name.value.getAttribute("abc")

三、自定义组件传参

1. 子组件向父组件传递参数

   ## 子组件son.vue
   let name = ref("roy")
   let salary = ref(10000)
   # 将参数暴露给父组件
   defineExpose({name, salary})

   ---

   ## 父组件father.vue
   # 在模板中使用子组件
   <div>
     <son ref="salaryInfo"></son>
   </div>
   # 导入子组件
   import son from "./components/son.vue"
   # 输出ref对象
   console.log(salaryInfo)
   # 输出proxy对象
   console.log(salaryInfo.value)
   # 输出子组件中的name
   console.log(salaryInfo.value.name)
   # 输出子组件中的salary
   console.log(salaryInfo.value.salary)

2. 父组件向子组件传递参数

##子组件son.vue

let name = ref("roy")
let salary = ref(10000)

#将参数暴露给父组件
defineProps(["salaryInfo"])

--------------------------------------
##父组件father.vue
#在模板中使用子组件
<div>
    <son :salary-info="salaryInfo"></son> #html页面对大小写不敏感，props中驼峰命名在父组件中
                                          #使用时必须用等价的短横线分割命名
</div>

#导入子组件
import son from "./components/son.vue"

let salaryInfo = reactive({name:'roy', salary:15000})

需要使用TypeScript定义一个salaryInfo的类型接口

四、生命周期

包括创建、挂载、更新和销毁四个阶段。

• 创建阶段（beforeCreate、created）：初始化响应式数据和事件
• 挂载阶段（beforeMount、mounted）：将模板编译渲染成真实的DOM并插入页面
• 更新阶段（beforeUpdate、updated）：当数据变化时，虚拟DOM重新渲染和打补丁
• 卸载阶段（beforeUnmount(Vue 3) / beforeDestroy(Vue 2)、unmounted(Vue 3) / destroyed(Vue 2)）：实例被销毁

父子组件生命周期

加载渲染过程：

父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

更新过程：

父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

销毁过程：

父 beforeUnmount -> 子 beforeUnmount -> 子 unmounted -> 父 unmounted

五、Vue-Router

1. 安装

#创建项目时引入，或者
npm install vue-router@4    #版本号4

六、Pinia

1. 安装

#创建项目时引入，或者
npm install pinia

扫码加我 拉你入群

请注明：姓名-公司-职位

以便审核进群资格，未注明则拒绝

分享0 收藏0 回帖

关键词：学习笔记 Vue 习笔记 Components Component