Vue3入门(学习笔记)看这一篇就够了

我的Vue3学习笔记

学习资料来源

vue官方文档: Vue3中文官方文档

vue3项目建立和初始化

1. 在创建目录的文件夹下输入命令：

npm init vue@latest

2. 建议npm全局换源，下载速度快
3. VSCode插件输入vue，选择安装最多的插件即可
4. 按照提示，选择安装选项，一般来说无脑回车即可
5. 安装成功后，按照提示进入创建的vue项目目录，运行如下代码：

npm install  //安装依赖项
npm run dev

即可运行第一个vue项目

vue目录结构

1. public -》浏览器的图标
2. node_modules：依赖项
3. src ：源码文件夹

模版语法

export default{
	data(){   //以函数方式返回对象
		return {
			msg:"hello world",
			}
		},	
}

1. 双括号内是单一表达式,不能是条件语句
2. 原始html:

<p v-html="rawHTML"></p>
rawHTML为data()中定义的html语句

3. 属性绑定: 属性绑定是指div中的class指向变量

假设在data(){}中定义了变量dynamicId和dynamicClass
原来: <div class="myclass">
使用属性绑定: <div v-bind:id="dynamicId"  v-bind:class="dynamicClass">
v-bind后面可以跟着任意的动态字符,应用不止于id和class,也可以是其它属性
由于使用频繁,用:来代替v-bind:

4. 条件渲染

1. v-if //仅在条件为true时渲染,基于元素的添加和删除
2. v-else
3. v-else-if
4. v-show //始终渲染, 只有css的display属性被改变

5. 列表渲染

v-for ,使用item in items方式进行渲染

<p v-for="item in names">{{item}}</p>
<p v-for="(item,index) in objects"></p>
v-for 可以遍历对象和数组
遍历对象有三个值(value,key,index);遍历数组有2个值,item和index

6. 使用v-on 或者@来监听DOM事件,在事件触发时执行对应的JavaScript代码

1. 事件处理器可以是内联事件处理器或方法事件处理器

v-on:click="methodName" @click="methodName"

7. 事件参数可以获取event对象和通过事件传递参数

<p @click="getName(item, $event)"></p>
使用$event来表示事件参数
methods:{
	getName(name, e){
	console.log(name,e)
	}
}

8. 官方文档查询事件修饰符及其使用,比如阻止默认事件等
9. 计算属性依赖于缓存,计算一次显示多次; methods每次显示都要重新计算
10. class绑定:可以接受对象和数组, 是v-bind对class的特殊增强,只能数组嵌套对象,不能对象嵌套数组.
11. style 绑定:

<p :style="{color:activeColor, fontSize:activeFontsize,}"><p>

12. 侦听器: 使用watch来监测响应式数据的变化

export default{
	data(){
		return{
			message:"前端"
			} 
	},
	watch:{
    	message(newValue,oldValue){   //命名必须和data中监测的数据名一样
    		//数据变化是自动执行的函数
    		console.log(newValue,oldValue);
    	}
	}
}

13. 表单输入绑定v-model

<form>
     <input type="text" v-model="message"> //把输入内容实时获取并且绑定到message变量
</form>
v-model有三个修饰符,.lazy发生change事件是触发,  .number只接受数字  .trim去掉两侧空白

14. 模版引用(浪费性能,慎用)

使用模版引用的方式来获取底层dom操作
在标签中指定ref属性,

<div ref="myContainer">{{content}}</div>
console.log(this.$refs.myContainer)   获取到该标签

组件

1. 把vue组件定义在一个.vue文件中
2. 用template承载html标签; 用script承载业务逻辑; 样式写在style中
3. 组件的引用有三个步骤:

   1. 在script中通过import 引入
   2. 注入组件,写在components中
   3. 以标签的形式引入

   <template>
   <!-- 显示组件3 -->
   	<myConponents/>
   	</template>
   
   <script>
   
   //引入组件1
   import myConponents from "./components/myComponents.vue"
   
   //注入组件2
   export default{
       components:{
           myConponents,
       }
   }
   </script>
   
   <style scoped> //添加scoped使得样式只在当前组将中生效
   </style>
   

4. 组件嵌套:在组件总注册组件
5. 组件的注册

局部注册:见第三点
全局注册(不建议使用): 在main.js中引入; 在app.mount之前注册全局组件,

import myComponent from "./components/myComponent"
app.component("myComponent",myComponent)
//之后直接在模版中<myComponent/>就可以引用成功,不在需要引入和注入

props的使用

1. 使用props在组件间传递数据, 父->子组件 ,子组件使用props接收,可以传递任意数据
2. props可以效验数据,使用type指定数据类型,使用default指定默认数据
3. 数组或对象必须需要通过工厂函数放回默认值

   default(){
   return ['null']
   }
   

4. 使用required来指定必须传递这个数据
5. props的数据是只读的,不允许修改

组件事件

1. 使用$emit方法来触发自定义事件
2. 子元素的按钮触发了函数,这个函数触发了自定义事件,父元素接收到自定义事件,然后触发一个新的函数.

3.  //在子组件中定义自定义事件
    this.$emit("自定义事件名","传递的数据")
    this.$emit("myTriggerFunction",this.message)
    //父元素在子组件的显示控件中使用自定义事件
    <Child  @自定义事件名="函数名"  />
   

4. v-model+watch+$emit实现表单数据实时传输

插槽slot

1. <slot>是插槽出口,标示了父元素提供的插槽内容在哪里被渲染
2. 父元素使用<子组件名>(要传递的内容)</子组件名>
3. 插槽内容可以访问到父组件的作用域,因为它实在父组件中被定义的
4. 在子组件中可以定义多个slot
5. 使用v-slot的方法使用具名插槽

   //父组件
   <child>
   	<template v-slot:header>  或  <template #header>
   	    模版内容
   	</template>
   <child>
   
   //子组件
   <slot name="header"></slot>
   

6. v-slot可以简写为#
7. 父组件获得子组件的slot传过来的数据:

   //子组件
   <slot :msg="childMessage">
   //父组件
   <child v-slot="slotProps">
   {{slotProps.msg}}
   </child>
   

8. 具名插槽子组件传给父组件自己查

组件生命周期

1. 创建期:beforeCreate , created
2. 挂载期:beforeMount ,mounted
3. 更新期: beforeUpdate, updated
4. 销毁期: beforeUnmount, unmounted
5. 这些函数都是可以自动执行的
6. 数据量大时先渲染结构,再渲染数据,那么在mounted中定义数据的获取
7. 动态组件

   <template>
   	<component :is="wantToShow"></component>  //指定想显示的组件名,是动态的
   <template>
   
   data(){
   	return{
   		wantToShow:"componentA",
   	}
   }
   

8. 把组件放在<keep-alive>标签中,可以防止组件的自动卸载
9. 使用defineAsyncComponent方法来实现异步功能,仅在组件用到时加载

   import {defineAsyncComponent} from 'vue'   //先从vue中引入
   const ComponentB=defineAsyncComponent(()=>
   	import("./components/ComponentB.vue")
   )
   

数据逐级透传(祖先->子孙)

1. 组件使用祖先传递的数据
2. 祖先使用provide,子孙使用inject接受,具体使用到时再参考其他博客即可

vue应用

1. 一个vue项目只有一个vue实例对象,作为根组件
2. app.mount(‘#app’)挂载后才能渲染, 其中的#表示的是index.html中一个<div id=‘app’>,表示挂载在这个实例当中