传统编写方式的弊端
- 代码依赖关系混乱，顺序之间也存在各种各样的问题
- 代码复用率不高，主要体现在不同的HTML之间
组件化编写方式
- 组件尽量搞得细致一点，因为主要是为了复用
- 如果一个程序多是用多组件编写的，那么就是一个组件化的应用
- JS也有类似组件化的东西称为模块化
组件
- 创建school组件const school=Vue.extend({}),组件是没有资格写el的，因为他就是一块砖，哪里需要哪里搬
- 最终都被vm管理，跟着大哥走
- 组件中的data得用函数式，这样每一次的调用都return不同的值
Vue中使用组件总共分三步
- 创建
- 注册（类似声明）：创建大哥vm，然后在大哥中就不用写data了，写components：{真正的组件名：前面const的名}
- 全局注册组件：Vue.component没有s（'hello',hello）
- 这样每个vm实例都可以使用这个组件了
- 使用：组件时包含所有的，但是前面只有js，怎么办，使用前文学的template把div插到里面去，使用组件标签，在前面直接使用<组件名></组件名>
组件是vm内自带的data可以用对象式，但是涉及到组件就必须用函数式，因为要复用
组件的几个注意点
如果注册的组件名和你前面创建的名字一样的话，那么是可以直接就写一个组件的
组件的嵌套
在一个组件里使用另一个组件 app组件，用来管理所有组件
- vm里注册app-components：{app}
- app里components：{其他组件}
VueComponents-事件总线和源码分析会涉及到，现在先跳过，三个视频，跟原型还有点关系
单文件组件
起名：School.vue：尽量使用大写，且这是一个浏览器不支持的后缀最终要转化为JS
- 然后别的地方要用这个组件的时候import导入但是没有暴露
- 暴露的方法是三种，在JS模块化那里，一般都用export default
- 先写组件，写功能
- 然后写app，把功能都集合起来
- 然后app再被真大哥vm引用main.js
- 然后大哥的el选择的模板在index.html里 然后最好大哥就把template给写了
- index那边先把src=vue.js写了，再把src=mainjs写了就差不多
- 但是目前还没有脚手架，所以运行不了
脚手架
- 脚手架目前最新是4.x vue是2.x
- 安装完cli，直接bue ceate xxx 就可以创建脚手架了，但是vue给力的给你生成了一个例子，所以实质上，生成的就是一个项目
- 然后他会询问你你用vue2还是vue3
- 这个项目里的各个文件具体是干嘛的什么package啥的都介绍一下
- npm run serve之后，直接去找main.js
- 在main.js里直接导入包 vue和app（所有的父组件）
- asset里面是放的静态资源，图片什么的
- components里面放所有的组件们
- 整个页面在index里面，介绍一下这个index里面的各种语句
- render就是一个函数，vue帮你调，调的时候使用createElement函数，帮你解决你引入残缺版本Vue的问题
- render实在vm那写的别的地方不需要
- 把没用的东西优化之后render:h>=h(app)
- 算是省了大头（不用模板解析器了），然后加上小头（render）
修改默认配置，当然最好是都别改
ref标签
类似于id的替代者
