qq_40832034

第 3 章使用 Vue 脚手架

本篇笔记很多代码没有写进去，因为文件较多，看 link

1、初始化脚手架

1）说明

2）具体步骤

3）脚手架文件结构

详见案例 vue_test

4）render函数

这里引用的vue是vue.runtime.xxx.js，不是完整版的，所以不能渲染template配置项，需要使用 render 配合，
使用vue.runtime.xxx.js好处：就能使得不用引用完整版的vue，省空间。

关于不同版本的Vue：

vue.js与vue.runtime.xxx.js的区别：
(1).vue.js是完整版的Vue，包含：核心功能+模板解析器。
(2).vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。
因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容。

5）vue.config.js 配置文件

使用vue inspect > output.js可以查看到Vue脚手架的默认配置。
使用vue.config.js可以对脚手架进行个性化定制，详情见：https://cli.vuejs.org/zh

2、ref 属性

<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>