Vue补充内容

vite

创建Vue3.0的工程项目可以使用vite进行创建(只能创建Vue3.0)

//创建项目命令
npm init vite-app 项目名称

//运行项目步骤
cd 项目名称
npm install
npm run dev

项目运行流程

在工程化的项目中,vue要做的事情: 通过main.js把App.vue渲染到index.html的指定区域中

1. App.vue用来编写待渲染的模板结构
2. index.html中需要预留一个el区域
3. main.js把App.vue渲染到index.html所预留的区域中

在template中定义根节点

在vue2.x的版本中,template节点内的DOM结构仅支持单个根节点

<template>
	<!--vue2.x中,template节点内的所有元素,是外层"必须有"唯一的根节点进行包裹,否则报错-->
	<div id="app">
		...
	</div>
</template>

但是在,vue3.x的版本中,template中支持定义多个根节点

<template>
	<div></div>
	<div></div>
</template>

/deep/样式穿透

如果当前组件的style节点添加了scoped属性,则当前组件的样式对其子组件是不生效的。如果想让某些样式对子组件生效,可以使用/deep/深度选择器
注意: /deep/是vue2.x中实现样式穿透的方案。在vue3.x中推荐使用:deep()替代/deep

Class与Style绑定

在实际开发中经常会遇到动态操作元素样式的需求。因此,vue允许开发者通过v-bind属性绑定指令,为元素动态绑定class属性的值和行内的style样式。

<h3 class= 'thin' :class="isItalic ? 'italic' : ''">MyDeep 组件</h3>
<button @click="isItalic = !isItalic">Toggle Italic</button>
<script>
	data(){
		return{
			isItalic: true
		}
	}
</script>
<style>
	.thin{//字体变细
		font-weight: 200
	}
	.italic{//倾斜字体
		font-style: italic
	}
</style>

以数组语法绑定HTML的class

如果元素需要动态绑定多个class的类名,此时可以使用数组的语法格式

<h3 class="thin" :class="[isItalic ? 'italic' : '',isDelete ? 'delete' : '']">MyDeep组件</h3>
<button @click="isDelete = !isDelete">Taggle Delete</button>
<script>
	data(){
		return{
			isDelete: true
		}
	}
</script>
<style>
	.delete{
		text-decoration: line-through;
	}
</style>

以对象语法绑定HTML的class

<h3 class="thin" :class="classObj">MyDeep组件</h3>
<button @click="classObj.Delete = !classObj.Delete">Taggle Delete</button>
<script>
	data(){
		return{
			classObj: {
				delete: false
			}
		}
	}
</script>
<style>
	.delete{
		text-decoration: line-through;
	}
</style>

以对象语法绑定内联的style样式

:style的对象语法十分直观-----看着非常像CSS,但是其实是一个JavaScript对象。CSS property名可以用驼峰(camelCase)或短横线分割来命名

<div :style="{color: active,fontSize: fsize + 'px','background-color': bgcolor}">样式</div>
<button @click="fsize += 1">字号 +1</button>
<button @click="fsize -= 1">字号 -1</button>
<script>
	data(){
		return{
			active: 'red',
			fsize: 30,
			bgcolor: 'pink'
		}
	}
</script>

props验证

对象类型的props节点提供了多种数据校验方案

基础的类型检查

export defalut{ //支持8种类型
	props: {
		propA: String,		//字符串类型
		propB: Number,		//数字类型
		propC: Boolean,		//布尔类型
		propD: Array,		//数组类型
		propE: Object,		//对象类型
		propF: Date,		//日期类型
		propG: Function,	//函数类型
		propH: Symbol		//符号类型
	}
}

多个可能的类型

export defalut{
	props: {
		//propA属性的值可以是字符串或者数字
		propA: [ String, Number ]
	}
}

必填项校验

export defalut{
	props: {
		//propA属性的值可以是字符串或者数字
		propA: {
			type: String,
			required: true
		}
	}
}

属性默认值

export defalut{
	props: {
		//propA属性的值可以是字符串或者数字
		propA: {
			type: String,
			default: 100
		}
	}
}

自定义验证函数

export defalut{
	props: {
		//propA属性的值可以是字符串或者数字
		propA: {
			//通过validator函数,对propA属性值进行校验,属性值可以通过形参value进行接收
			validator(vale){
				return ['success','warning','danger'].indexOf(value) !== -1
			}
		}
	}
}

计算属性vs方法

opA: {
//通过validator函数,对propA属性值进行校验,属性值可以通过形参value进行接收
validator(vale){
return [‘success’,‘warning’,‘danger’].indexOf(value) !== -1
}
}
}
}

## 计算属性vs方法
相对于方法来说,计算属性会缓存计算的结果,只有计算属性的依赖项发生变化时,才会重新进行计算。