vue-组件

单文件组件

单文件组件只是把一个组件单独写在一个.vue文件中,供别的组件引入然后注册

使用脚手架构建项目时可使用：

npm create vue@latest

后续选项根据自己需要选择

<template>
//这里书写模板
//与第一类引入方式相比，不需要写出字符串，正常书写就行
//使用vue 3.0时，template和script至少存在一个
</template>

<script>
// 这里书写js
// 若使用ts，需要下载ts的加载器，属性中加上lang="ts"
</script>

<style>
	//这里书写样式
</style>

css相关

在使用单文件组件，或许会出现相同类名的样式等，这些样式都会生效，相同样式的显示结果与导入的顺序有关

<style scoped>
</style>

在style的属性中加入scoped，能够使该组件内的样式变为局部样式（作用域、私有化的思想）

scoped使用了data-v-hash（hash为哈希值）的方式来使css有了它对应模块的标识

组件命名和使用规则

命名规则

在给组件命名时，我们需要注意不要使用HTML中已有的标签名

命名时可以是一个单词，也可以是多个单词（可以使用驼峰命名法）

//shoping
//Shoping
//MyList
//myList
//my-list

使用规则

<shoping></shoping>
<shoping/>

单双标签都可使用

//myList
<myList/>
//my-list
<myList/>

组件属性传值

在组件中，我们可以为其设置属性，像a标签的src属性，title属性等

属性有两种写法:简单声明和详细描述:

简单声明：props:["prop1","prop2"]

详细描述 ：

props: {
	propA: Number,		// 基础的类型检查 (`null` 匹配任何类型)
	propB: [String, Number],	// 多个可能的类型
	propC: {	type: String,
     		 required: true	// 必填的字符串
   	},
	propD: {	type: Number,
      		default: 100	// 带有默认值的数字
    	},
	propE: {	type: Object,	// 带有默认值的对象或者数组填Array
		default: function () {	// 不建议直接填对象(因为对象直接量会一直占用内存),一般使用工厂函数,调用时才创建对象节省资源
        		return { message: 'hello' }
      		}
    	},
	propF: {
      		validator: function (value) {// 自定义验证函数返回为true就代表数据符合我们规定
			return ['success', 'warning', 'danger'].indexOf(value) !== -1
      		}
    	}
  }

组件属性的类型验证

见上个标题的详细描述 （propF），可以改用数组的includes方法

validator:(value){
	return  ["blue","red","green"].includes(arg)
}