分析脚手架、ref、props

src中包含main.js、App.vue、components文件夹

1. main.js是程序的入口，

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip=false
//创建vm
new Vue({
	el:'#app',
	render:h=>h(App) //实质：生成template模板
})

2. components文件夹中写的就是各种组件，例如在components文件夹下创建一个school.vue

<template>
	<div>
		<h2>x学校名称{{name}}</h2>
	</div>
</template>

<script>
	export default{
		name:'school',
		data(){
			name:' XAUAT'
		}
	}
</script>
<style>
</style>

3. App.vue的作用是集合components中的组件

<template>
//3、使用，自动调用new VueComponent()
	<school></school>
</template>

<script>
//1、先引入school组件
import school from './components/school.vue'
	export default{
		name:'app',
		//2、注册
		components:{
			school
		}
	}
</script>

ref属性

1、 被用来给元素或者子组件引用注册信息（HTML原生属性id的替代者）
2、 用在html标签上获取的是真实的DOM元素，用在组件标签上获取的是组件的实例对象(new VueComponent())
3、使用方式

<h2 ref='xx'></h2>
<school ref='xx'></school>

//获取：
this.$refs.xx

props属性

1、功能：让组件接收外部传过来的数据
2、使用：

//上面的school标签可改为
<school name="a" address="b" tel="c"></school>
//这儿传值必须用引号，所以都是String类型，如果要传数值，给前面加冒号 :age="19"，把后面的内容按表达式来处理，不加冒号，就按字符串字面量来处理

//在school.vue中，props与data平级
//1、 简单接收
props:['name','address','tel']
//2、限制类型
props:{
	name:String,
	address:String,
	tel:Number
}
//3、更多限制
props:{
	name:{
		type:String,
		required:true, //必填
	},
	address:{
		type:String,
		required:true
	},
	tel:{
		type:Number,
		default:886666 //默认值
	}
}

props是只读的，Vue底层会监视你对props的修改，若修改，会发出警告，如果必须要修改，就把props中的内容复制到data中一份，对data中的数据进行修改