vue组件、配置脚手架、浏览器本地存储

   欢迎加入前端技术营！如果你也是前端学习者或者对前端有学习的想法，那就跟着我一起从零开始进击前端。
  致力于尽可能详细且简洁的介绍前端知识、自己的捷径，也是学习路上的记录。欢迎探讨

---

---

组件

实现应用中局部功能代码和资源的集合

非单文件组件

Vue中使用组件的三大步骤：

一、定义组件(创建组件)
使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；
区别如下：
1.el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
2.data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。
备注：使用template可以配置组件结构。

二、注册组件
1.局部注册：靠new Vue的时候传入components:{组件名’组件}选项
2.全局注册：靠Vue.component(‘组件名’,组件)

三、使用组件(写组件标签)
在HTML结构编写组件标签：
<组件名></组件名>

几个注意点

组件名:

一个单词组成：
第一种写法(首字母小写)：school
第二种写法(首字母大写)：School
多个单词组成：
第一种写法(kebab-case命名)：my-school
第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)
备注：
(1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
(2).可以使用name配置项指定组件在开发者工具中呈现的名字。

组件标签:

第一种写法：
第二种写法：
备注：不用使用脚手架时，会导致后续组件不能渲染。

简写方式：

const school = Vue.extend(options) 可简写为：const school = options

组件嵌套：直接在定义组件时在组件内注册定义好的子组件，并在定义的组件内使用子组件

非单文件组件并不常用，下面通过一个例子来了解一下就好：

//引入vue
	<script type="text/javascript" src="../lib/vue.js"></script>

<!-- 准备好一个容器-->
	<div id="root">
		<hello></hello>
		<hr>
		<h1>{
  {msg}}</h1>
		<hr>
		<!-- 第三步：编写组件标签 -->
		<school></school>
		<hr>
		<!-- 第三步：编写组件标签 -->
		<student></student>
	</div>

//第一步：创建school组件
	const school = Vue.extend({
   
		template:`
			<div class="demo">
				<h2>学校名称：{
    {schoolName}}</h2>
				<h2>学校地址：{
    {address}}</h2>
				<butto