vue基础七：.vue文件，vue-cli、vue.config.js、ref属性、props配置

本文链接：https://blog.csdn.net/ak739105231/article/details/121678538

单文件组件的写法

1. 单文件组件的样式

单文件组件都是.vue为后缀的文件；
内容：
	<template></template>
	<script>
		// 组件交互相关的代码,包含数据等
		export default {
		}
	</script>
	<style>
		/* 组件的样式 */
		.demo{
			background-color: aquamarine;
		}
	</style>

在这里插入图片描述

2.单文件组件的使用流程

1.创建多个.vue文件（即组件）
2.创建一个名为App.vue的文件，引用需要的组件
3.创建一个名为main.js的文件，new一个vue实例对象vm，components注册App组件，可以加上template
4.创建index.html文件，引入vue.js以及main.js
备注：index.html中的容器的唯一标识如：id、class等，要和App中的一致

App.vue

<template>
	<div id="demo">
		<school></school>
		<student></student>
	</div>
</template>

<script>
	import school from './05_01单文件组件.vue'
	import student from './05_02单文件组件.vue'
	export default {
		name:'App',
		components:{
			school,
			student
		}
		
	}
</script>

main.js

import Vue from 'vue'
import  App from './app.vue'

const vm = new Vue({
	render:h =>h(App),
})
vm.$mount('#app')

index.html

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

3. vue-cli的安装

前提：安装nodejs、npm，并配置好两个的path，可参考

https://www.runoob.com/nodejs/nodejs-npm.html

第一步: 全局安装@vue/cli
	npm install -g @vue/cli
或 淘宝：npm install -g cnpm --registry=https://registry.npmmirror.com
第二步：切换到你要创建项目的目录，然后使用命令创建项目
	vue create xxxxx
第三步：启动项目
	npm run serve

备注：
1.如出现下载缓慢配置npm淘宝镜像：npm config set registry https://registry.npm.taobao.org
2.Vue 脚手架隐藏了所有webpack相关的配置，若想查看具体的webpackc配置，请执行：vue inspect > output.js

4. ref属性

1. 被用来给元素或子组件注册引用信息（id的替代者）
2. 应用在html标签上获取是真实DOM元素，应用在组件标签上是组件实例对象（vc）
3. 使用方式：
	打标识：<h1 ref="xxxx">……</h1>   或者  <School  ref='xxxxx'></School>
	获取： this.$refs.xxxx
如：
console.log(this.$refs.title) //this为组件App,  $refs:所有html标签中标识了ref属性的dom元素集合

在这里插入图片描述

5. 修改vue默认配置

https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE

6. props属性

特别注意：props接收到的属性，不可使用事件去修改其值，否则console会报错，如果必需要改，可以在组件data中定义一个变量接收props,然后修改该变量的值，从而达到页面值变化

配置项props
功能：让组件接收外部传过来的数据
	1.传递数据：在使用组件Demo时，
		<Demo name='xxx', age='num', sex='yyy' />
	2.接收数据：在组件Demo中Script里，export default暴露中（和data同级）,
		a.第一种方式（只接收）：
			 props:['name','age','sex']
		b.第二种方式（接收的同时对数据进行类型限制）
			props:{
				name:String,
				age:Number,
				sex:String
				}
		c.第三种方式（接收的同时对数据：进行类型限制、默认值指定、是否必传）
			props:{
				name:{
					type:String,//name的类型是字符串
					required:true//name是必传的
				},
				age:{
					type:Number,
					default:18//如果不传，默认age=18
				},
				sex:{
					type:String,
					required:true
				}
		}