---

一、初始化脚手架

说明

Vue 脚手架是 Vue 官方提供的标准化开发工具 (开发平台)。 其最新的版本是 4.x。官方文档： https://cli.vuejs.org/zh/。

具体步骤

第一步(仅第一次执行)：

全局安装 @vue/cli

npm install -g @vue/cli
1

终端命令执行完成之后，通过以下命令检查vue脚手架（vue/cli）是否安装完成以及查看版本号。

第二步：

切换到你要创建项目的目录，然后使用命令创建项目

vue create xxxx
1

第三步：

启动项目

切换到项目录，执行下面指令

npm run serve
1

备注 ：

1.如出现下载缓慢请配置 npm 淘宝镜像：npm config set registry https://registry.npm.taobao.org

2.Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的 webpack 配置，请执行：vue inspect > output.js

二、脚手架文件结构

├── node_modules 
├── public
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src
│   ├── assets: 存放静态资源
│   │   └── logo.png
│   │── component: 存放组件
│   │   └── HelloWorld.vue
│   │── App.vue: 汇总所有组件
│   │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件 
├── README.md: 应用描述文件
├── package-lock.json：包版本控制文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

关于不同版本的 Vue

vue.js 与 vue.runtime.xxx.js 的区别：

1. vue.js 是完整版的 Vue，包含：核心功能 + 模板解析器。
2. vue.runtime.xxx.js 是运行版的 Vue，只包含核心功能，没有模板解析器。

因为 vue.runtime.xxx.js 没有模板解析器，所以不能使用 template 这个配置项，需要使用 render 函数接收到的 createElement 函数去指定具体内容。

vue 脚手架默认创建的是 vue.runtime.xxx.js 完整版的文件太大了

三、ref 属性 与 props 配置

1. ref 属性

首先 ref 的引用是相当于一个 DOM 节点（如果是子组件则指向的是其实例），而且是一个 string 类型的值。 通俗的将就类似于原生 js 用

document.getElementById("#id")。

但是只是类似，他们的不同点是Vue是操控虚拟DOM ，也就是说在渲染初期并没有这个 ref 的属性，这个属性是在创建Vue实例以后才被加到虚拟DOM中的。所以在官方文档的最后提醒开发者不能将 ref 的结果在模版中进行数据绑定。

其作用就是用于给节点打标识，引用方式：this.$refs.xxxxxx

举例

components 中，定义 School.vue

<template>
	<div class="school">
		<h2>学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
	</div>
</template>

<script>
	export default {
		name:'School',
		data() {
			return {
				name:'青岛大学',
				address:'青岛'
			}
		},
	}
</script>

<style>
	.school{
		background-color: gray;
	}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

App.vue 中引用 School 组件

<template>
	<div>
		<h1 v-text="msg" ref="title"></h1>
		<button ref="btn" @click="showDOM">点我输出上方的DOM元素</button>
		<School ref="sch"/>
	</div>
</template>

<script>
	//引入School组件
	import School from './components/School'

	export default {
		name:'App',
		components:{School},
		data() {
			return {
				msg:'欢迎学习Vue！'
			}
		},
		methods: {
			showDOM(){
				console.log(this.$refs.title) //真实DOM元素
				console.log(this.$refs.btn) //真实DOM元素
				console.log(this.$refs.sch) //School组件的实例对象（vc）
			}
		},
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

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)
})
1
2
3
4
5
6
7
8
9
10
11
12

2. props 配置

props 可以是数组或对象，用于接收来自父组件的数据。 props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义验证和设置默认值。其用于父组件给子组件传递数据。

举例：

<template>
	<div>
		<h1>{{msg}}</h1>
		<h2>学生姓名：{{name}}</h2>
		<h2>学生性别：{{sex}}</h2>
		<h2>学生年龄：{{myAge+1}}</h2>
		<button @click="updateAge">尝试修改收到的年龄</button>
	</div>
</template>

<script>
	export default {
		name:'Student',
		data() {
			console.log(this)
			return {
				msg:'我是一个青岛大学的学生',
				myAge:this.age
			}
		},
		methods: {
			updateAge(){
				this.myAge++
			}
		},
		//简单声明接收
		// props:['name','age','sex'] 

		//接收的同时对数据进行类型限制
		/* props:{
			name:String,
			age:Number,
			sex:String
		} */

		//接收的同时对数据：进行类型限制+默认值的指定+必要性的限制
		props:{
			name:{
				type:String, //name的类型是字符串
				required:true, //name是必要的
			},
			age:{
				type:Number,
				default:99 //默认值
			},
			sex:{
				type:String,
				required:true
			}
		}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

读取方式

读取方式一 : 只指定名称

props: ['name', 'age', 'setName']

读取方式二 ： 指定名称和类型

props: { name: String, age: Number, setNmae: Function }

读取方式三: 指定名称/类型/必要性/默认值

props: { name: {type: String, required: true, default:xxx}, }