VUE快速入门及概念解析

最新推荐文章于 2024-08-06 17:23:10 发布

Sti1es

最新推荐文章于 2024-08-06 17:23:10 发布

阅读量122

点赞数

分类专栏：前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_44810298/article/details/121896700

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

VUE快速入门及概念解析

本文从Vue项目的构建、Vue文件的标准结构，Vue标准使用和Vue与其他的第三方库之间的结构来写。

Vue 项目构建

前期准备

安装Vue-cli

npm install -g vue-cli

使用vue-cli构建项目

vue create project-name

进入该项目文件路径

cd ./project-name

Vue标准项目结构

总体结构

├── README.md
├── babel.config.js
├── node_modules # 导入模块
├── package.json # 项目配置中心
├── public 
├── src # 项目源码地址
└── yarn.lock

src结构

├── App.vue # 项目根文件
├── assets
│   └── logo.png
├── components # 项目VUE组件位置
│   └── HelloWorld.vue
├── main.js# 项目入口js文件
├── router # 项目路由
│   └── index.js
├── store # vuex入口
│   └── index.js
└── views # 项目展示文件地址
    ├── About.vue
    └── Home.vue

VUE文件结构

vue的文件结构可以分为以下三个部分

template：html模版书写位置
script：当前vue组件的js书写位置
style：当前vue组件的css书写位置

文件结构如下：

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  components: {
    HelloWorld
  }
}
</script>

下面对其进行分组介绍

template区

template区主要进行HTML节点的编写，包含我们自己创建的vue组件生成的html节点和vue以及其他第三方库的html节点。这里就是VUE框架各个组件结合使用的地方。

在template区中，可以在节点的text区编写js语言但要被"{{}}"包含在其中。例如

<template>
	<div>
    <p>
      {{flag ? "flag is true" : flag is false}}
    </p>
  </div>
</template>

也可以在节点的属性区域编写js语言，但一般会将复杂的js语句放到stcript区域的methods中或是vue3的setup方法中。

template>
	<div>
    <p hide="{{flag ? "flag is true" : flag is false}}">
      hello
    </p>
  </div>
</template>

vue指令

在template区域中，其实最重要的使用是vue指令；包含了vue自带的指令和我们自定义的指令

自带指令的使用

自带指令列表

指令	作用
v-if	用于判断当前dom是否需要渲染
v-else	else
v-else-if	else if
v-on	用于绑定事件
v-for	用于列表元素的渲染
v-show	用于绑定dom的hide属性的值
v-model	用于绑定表单的输入，也可用于绑定父子组件数据
v-bind	用于绑定js对象的值和属性的值，可用于父子组件的单向数据传值
v-html	直接输出html
v-pre	跳过这个元素和它的子元素的编译过程
v-once	只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过
v-memo	该指令接收一个固定长度的数组作为依赖值进行记忆比对。如果数组中的每个值都和上次渲染的时候相同，则整个该子树的更新会被跳过
v-is	已在 3.1.0 中被废弃。请换用带有 `vue:` 前缀的 `is` attribute。

指令的具体使用可以参照vue官方文档，本文仅编写一些常用案例

判断

属性变量绑定：v-bind

事件监听：v-on

dom展示：v-show

表单输入绑定：v-model

自定义指令

在VUEScript域中介绍

Slot插槽

父组件的template域中使用子组件。但是子组件中的插入其他标签。此时子组件中可以使用slot标签来获取父组件中插入的其他标签。类似于一个占位符。组件中的插槽数量并没有设置限制，可以有多个插槽。

keep-alive标签

用于动态组件的状态保持；例如在一个spa项目中；我们通过点击标签页来切换工作区中的显示内容，每次切换如果没有特定的配置，则会导致每一次切换都会重新渲染界面。为了使组件保持切换前的状态，我们可以使用keep-alive去包裹动态组件的component标签。

Script域

Script域主要用于编写当前vue对象的一些成员属性。在vue3中添加了组合式API，但选项式API仍然可以使用。

选项式API：

成员	用途
data	当前vue对象中使用的内部属性，自定响应式
props	当前vue对象暴露给父组件的数据接口，父组件可以在子组件的属性上通过数据绑定来进行数据的单向传递
computed	计算属性，提供了缓存，并可以直接在template域中通过函数名直接使用
methods	组件方法可以在这中进行定义
watch	监听器方法，格式为 dataName(oldVlaue,newValue){}
emits	声明组件自定义事件声明，用于子组件向父组件传值
expose	声明组件对外暴露的函数名或是data名
render	用于通过js直接创建html标签
directives	用于自定义指令的声明和定义
components	用于注册当前vue组件，需要使用的组件
mixins	用于分发Vue组件中可复用的功能，但是会出现命名冲突。vue3推荐使用setup
extends	用于声明组件之间的继承关系
provide	声明当前组件对其子组件及其孙组件等提供的值
inject	声明当前组件使用其父组件或是更高位组件的值
setup	组合式API入口
name	组件名称
inheriAttrs	属性继承开关
compilerOptions	配置运行时编译器的选项
delimiters	从 3.1.0 开始被废弃。请换用 `compilerOptions.delimiters`

常用API合集



<script>
export default {
  props:[],
  data:[]
}
</script>

自定义指令

provide & inject

组合式API：

组合式API的入口函数为setup(props,context),其出现的目的就是为了替换mixins选项式API，提供组件公共属性和逻辑的复用。setup函数在组件被创建之前，props被解析之后执行。

为何setup相对于mixins来说提高了组件的复用性。一般复用的逻辑我们会考虑单独放在一个js或是ts文件中。如果使用mixins，我们会将一个或是多个的复用逻辑文件引入，多个复用逻辑中就会出现命名冲突和数据来源不清楚的缺陷，因为vue在其中使用了共用代码。

而如果使用了setup，我们也可以使用外部文件引入复用的逻辑和属性。但是在引用时相对于mixins的隐式引用，我们需要声明式的引用；这样变量的命名冲突就解决了。再者调用复用文件中的方法如果需要传参，则需要显式的传递给该函数；这也保证了数据的来源去向更加明确。

https://blog.csdn.net/weixin_33389310/article/details/112314108

如何使用组合式API

setup方法的使用

首先setup本身需要以选项式API的方式在组件中声明使用，可以接受props和context两个参数，并返回需要暴露给组件使用的方法（普通方法或渲染函数）或属性。

props：组件的props选项，并且该props对象具有响应性，此时可以使用watchEffect或是watch进行监听；如果对其进行结构则会失去响应性。
context：上下文对象，其提供了三个对象和一个函数
- attrs：等于$attrs
- slots：等于$slots
- emit：等于$emit
- expose：函数，和return值不同，setup的return只能被组件内和模版中访问，而expose函数暴露的属性可以通过$refs在组件外访问。

组合式API相关函数

组合式API的相关函数需要从vue中导入使用

函数	功能	用法	引入
ref	把setup函数中不可响应的基础类型数据变成响应数据	const name = ref(‘ldh’)	const{ref} = Vue;
reactive	把setup函数中不可响应的非基本数据类型变为响应数据	const name = reactive({name: ‘ldh’})	const {reactive} = Vue;
readonly	在setup()函数中把一个响应式引用变成只读属性，如果改变就会报错。		const {readonly} = Vue;
toRefs	把响应式数据进行解构返回,在模板中就可以直接使用了。	const { name } = toRefs(person)	const {toRefs} = Vue;
computed	随着一个变量的变化，而随之变化的方法，也叫计算函数/计算属性	const countNew=computed(()=>{return count.value +5})	const {computed} = Vue；
watch	对setup函数里某个值的变化进行监听，可以得到变化后的值和变化前的值。第一次不会执行，只有变化时才会执行。	watch(name,(currentValue,prevValue)=>{console.log(currentValue,prevValue)})	const {watch} = Vue；
watchEffect	和watch( )函数基本一样，但是它是立即执行,不需要传递侦听内容，自动会感知代码依赖，不需要传递很多参数，只要传递一个回调函数	watchEffect(( )=>{})	const {watchEffect} = Vue；
provide	在setup函数中向子组件或者孙子组件进行传值（可跨层级进行传值）	provide(‘name’,‘ldh’)	const {provide} = Vue；
Inject	在setup函数中父组件传递过来的值（可跨层级进行接受）	inject(‘name’,‘hello’) , hello为传递值，不存在时的默认值	const {inject} = Vue；

组合式API中的生命周期函数

函数名称	功能描述
onBeforeMount( )	在Vue应用被挂载之前，自动执行的函数
onMounted( )	在Vue应用挂载完成之后，自动执行的函数
onBeforeUpdate()	在数据发生变化之前，自动执行的函数
onUpdate()	在数据发生变化之后，自动执行的函数
onBeforeUnmount()	在组件销毁之前，自动执行的函数
onUnmount()	在组件销毁之后，自动执行的函数
onRenderTracked()	在收集响应时依赖时，自动执行的函数
onRenderTriggered()	每次处罚页面渲染被触发时，自动执行的函数

style域

style域则是对当前组件的css样式渲染，这里不再过多赘述。

Sti1es

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE快速入门及概念解析

VUE快速入门及概念解析本文从Vue项目的构建、Vue文件的标准结构，Vue标准使用和Vue与其他的第三方库之间的结构来写。Vue 项目构建前期准备安装Vue-clinpm install -g vue-cli使用vue-cli构建项目vue create project-name进入该项目文件路径cd ./project-nameVue标准项目结构总体结构├── README.md├── babel.config.js├── node_modules
复制链接

扫一扫

专栏目录