2020.7.5：src从@开找、.prevent、父子组件监听、components命名、slot、scoped、router-view、路由模式、浏览器流程、watch监听、vuex仓库

1. 寻找目录可以使用 @ 从src 开始寻找（功能来自 webpack）

 

2. prevent 阻止事件默认行为

 

3. 子组件 触发事件：使用 this,$emit("change",this.chooseId) 　　第一个参数是事件的 名字，第二个参数是相关的 数据

 

    父组件 监听事件：使用 @change="handleChange" 　　@ 后面跟的是第一个参数，=后跟 methods 里面的 函数 调用

 

4. components （组件） 采用 大驼峰式 命名法（首字母必须大写）

 

5. 使用 <slot></slot> 插槽，可以把任何组件或者内容放置在插槽内，形成一个 通用 的 Center 或者 Modal 组件

 

6. 组件引入的 style 后加一个 scoped ，避免污染全局。

 

7. 使用 npm i vue-router 安装 vue-router ，构建单页应用程序

 

8.  <router-view></router-view>　　：　　<!-- 该组件会根据不同的访问路径，渲染不同的组件 -->

 

9. 路由模式：

 

    - hash： 路径来自于地址栏中 # 后面的值，这种模式兼容性比较好
 
    - history： 路径来自于真实的 地址路径，旧浏览器不兼容
 
    - abstract： 路径来自于内存
 
10. 浏览器访问流程
 
    - 浏览器 => 地址 => 服务器 => html+css+js => 浏览器 => 渲染页面，执行 js => 创建 vue 实例 => 渲染根组件 => router-view 根据不同的路径渲染不同的组件

11. watch 监听数据
　　-
　　　　　　watch: {
 　　　　　　   // 监控某些数据的变化，当数据变化时要做一些事
  　　　　　　  // "$route.params.id"(){
  　　　　　　  //   console.log("Id变化了");

　　　　　　    // }
   　　　　　　 "$route.params.id": {
    　　　　　　  immediate: true, //一开始的数据也要当做是一种变化
     　　　　　　 handler() {
    　　　　　　    this.setChannelName();
     　　　　　　   this.setDatas();
　　　　　　      }
 　　　　　　   }
　　　　　　  }
12.　　　namespaced: true, //开启命名空间

13. 取出 vuex 仓库里面的数据
　　import { mapState } from "vuex";
　　var result = mapState("channels", ["data", "isLoading"]);
　　console.log(result);