vue_03组件

1. *****组件化开发

2. *****SPA

3. *****脚手架

4. *****组件化开发
   什么是组件化开发: 今后一个网页都是由组件组成的
   拿到网页，先划分组件，再分组件开发，最后再拼接成一个网页
   为什么: 1. 团队协作开发
   2. 松耦合
   如何:

5. 拿到网页，先划分组件

6. 定义组件

7. 将组件拼回主页面中

问题: 组件分类:

1. 根组件: 一个页面中只有一个的组件：
   new Vue({
   el:"#app",
   data:{ … }
   })
2. 全局组件: 可出现在任意位置的组件
   Vue.component(“组件名”,{
   template:"#tplxxx",
   data(){ return { … } }
   })
   
3. 子组件: 只能出现在规定父组件内的组件
   如何: 2步
   1. 将Vue.component降级为普通的js对象
      //Vue.component(“todo-add”,{
      var todoAdd={
      template:"#tplTodoAdd",
      data(){ return { … } }
      }
   2. 在父组件的{}中的components下添加子组件对象：
      Vue.component(“todo”,{
      template:"#tplTodo",
      data(){ return { … } },
      components:{ todoAdd }
      //vue会自动将todoAdd ->
      })

*****组件间传参:
父->子:
问题: 父组件的成员，子组件无权直接使用
解决: 2步
1. 在子组件对象中添加props属性:
var 子组件={
template:"#tpl子组件",
props:[ “自定义属性名” ]
data(){ return {…} }
}
后果: 2个:
1. 为子组件标签添加了一个自定义扩展属性，用于接收父组件的值。
<子组件 自定义属性="">
2. 子组件对象中多处一个同名的模型变量，可用于获取外部传入的属性值，在内部执行操作。
2. 在父组件的中
<子组件 :自定义属性=“父组件的数据”></子组件>
将父组件data中的数据通过绑定方式，传递给子组件的自定义扩展属性。
其实，父子组件用的还是同一个数据对象，任何一方修改，另一方都会受影响。

2. *****SPA
   Single Page Application
   什么是: 整个应用程序只有一个完整的HTML页面文件
   单页面应用中所谓的“页面”，其实就是组件
   由一个路由器根据URL地址中的锚点地址不同，选择不同的组件替换
   vs 多页面应用:
   单页面应用的优点:
   请求次数: 多页面应用每更换一次页面就需要重新发送请求
   单页面应用每更换一次页面，只需要从本地加载组件即可，不用重复发请求
   资源共用: 多页面应用每更换一次页面，都需要重复请求相同的资源
   单页面应用仅在首次加载时请求一次资源文件，之后更换页面，因为不是更换整个html文件，所以共用资源无需重复下载。
   效率: 多页面应用，每次更换页面需要重建整棵DOM树，效率低
   单页面应用，每次更换页面无需重建DOM树，仅是替换部分子树片段即可。效率高。
   页面过渡效果: 多页面应用不可能实现页面过渡效果
   单页面应用可以实现页面过渡效果
   单页面应用的缺点：
   1. 首屏加载慢，要下载全部资源
      已经解决: 在路由中设置延迟加载
   2. 不便于搜索引擎优化

实现单页面应用: vue-router.js

1. 先创建一个唯一的完整的index.html
   引入vue-router.js
   在div#app中添加一个标签，用于为将来要加载的"页面"组件占位
2. 分别创建多个“页面”组件对象和模板
   “页面”组件对象必须以子组件形式创建
3. 定义路由字典:
   路由字典:保存一组路径与组件对象对应关系的数组
   var routes=[
   {path:"/相对路径名", component: "页面"组件对象 }
   ]
4. 定义路由器对象，将路由字典放入路由器中:
   才是真正负责导航/替换页面内容的对象
   var router=new VueRouter({ routes })
5. 将路由器对象，加入当前页面的根组件new Vue中
   new Vue({
   …,
   router,
   …
   })
   

嵌套路由:
何时: 多个页面中包含相同的区域(页头,页脚,导航)时
如何: 2步:

1. 将多个页面共用的部分，保存在一个新创建的组件中
   新组件同时包含
2. 定义路由字典:
   //home: 是保存相同部分的组件
   {path:"/",component:home,children:[
   {path:"/",component:index},//默认路径 /
   {path:"/index",component:index},// /index
   {path:"/details",component:details} // /details
   ]},
   //login和之前页面没有相同部分
   {path:"/login",component:login}
   加载时:
   #/ /"/" 先加载home页头
   /"/" 再加载index替换home中的
   #/details /"/" 先加载home页头
   /details="/details" 再加载details替换home中的
   #/login /"/" 先加载home页头
   没有/login
   撤掉home页头
   /login="/login" 只加载login