我不知道的vue

1，以点.开头的文件里面放的是隐藏文件（就是里面保存的文件名是，禁止上传到github的文件名），比如.gitignore文件内容：

就表示node_modules文件隐藏起来不上传，所以每次下载项目需要先npm install

2，组件表示项目里必须有的（比如浏览器里的搜索框），插件表示可有可无（比如flash插件没有也行），即插即用。所以组件一般放在components文件夹下，插件放在plugins文件夹下。

3，一般子组件做某个动作的时候触发一个函数，这个函数里面包含这句话：this.$emit（‘自定义事件名比如closedk’，“要传递的值a”），表示让父组件调用父组件中定义的closedk函数，参数是a。应用场景：父组件嵌套子组件，子组件一旦关闭父组件也得关闭。

4，要更改vue-cli的端口号，向vue.config.js文件中添加：

5，查看vue-cli项目启动方式，打开package.json文件：

scipts下的都可以使用npm run 命令运行，比如npm run serve表示启动项目，npm run server表示启动服务，npm run build表示项目打包，所以可以在这里自定义项目启动方式。

6，上面那个vue-cli-service其实是指向node_modules/.bin/vue-cli-service文件中的内容，当然最后运行的是这个路径下的内容：

那个node  server运行的是package.json同级目录下的server文件夹中的内容

7，项目打包build指的是：把所有文件打包成js,css，html,img等放到build文件夹下，在生产环境运行的是build文件夹下是这些资源。而不是我们平时写的那些文件，这个对我来说意义不大。 

8，vue是MVVM架构，vuex(M)，vue(V)，vue-router(VM)

9，vue过滤器用法：
<span>{{  过滤器名称  }} </span>
<script>
Vue.filter（‘过滤器名称’，function(值）{
              处理值；
              return   值
}）
</script>
10，vue自定义指令：这个太烦了再搜吧；

11，vue的style中，在属性前添加：[v-cloak]，表示在页面渲染前使用该样式，页面渲染完毕移除

12，<slot></slot>插槽，可以让父组件这样调用子组件：<Water>里面随便写点啥都能显示</Water>，而不是只能<Water />

13，v-once  表示该组件只渲染一次，用在状态不会改变的组件上，可以用来提高性能：<p v-once>{{msg}}</p> //msg不再改变

14，子组件接收父组件传递的值：子组件处用props；
父组件：
<child   :name="namego"  />
export default{
     data(){
          return{
            namego: 'bob'
}}}
子组件：
  <div   :name="name'> 
export default{
   props: ['name']
}

15，父组件接收子组件事件：子组件处用this.$emit()；

https://www.cnblogs.com/yu-cover/articles/9826565.html
 

视频路径：https://www.bilibili.com/video/BV1KE411n71D?from=search&seid=14668339594689277902

通信

1，父传递给子组件：
三种方式：props:{ msg:1}、this.$refs.refname.name、this.$children[0].name
2​​​​，子传递给父：
this.$emit("gotchange",e)，<Child  @gotchange="methods1"/>    这是一种观察者模式（子组件派发，子组件监听，父组件响应）
3，兄弟通信：
通过共同的父辈进行通信：this.$parent.$on("changes",e),  this.$parent.$emit("changes",e)
4，祖宗和子代通信：
祖宗与data同级：provide:{ name:"bob"}  ,  子代与data同级：inject:['name']
5，没有任何关系的两个组件通信：
vue.prototype.$bus= new Vue();  //全局总线
this.$bus.$on("changes",e)   ， this.$bus.$emit("changes",e)

插槽

1，匿名插槽
父组件：<Child>  kaixinkaixin </Child>     ；        子组件：<div>  <slot></slot>
或者父组件：<Child>  <template v-slot:default>kaixinkaixin</template>    </Child>    ； 子组件  ：<div>  <slot></slot>
2，具名插槽
父组件：<Child>  <template v-slot:giao  >kaixinkaixin</template>    </Child>    ； 子组件  ：<div>  <slot  name="giao"></slot>
3，作用域插槽
父组件：<Child>  <template v-slot:giao=“slotprops"  >  {{slotprops.age}} </template>    </Child>    ；   子组件：<div>   <slot  name="giao"  age="11"></slot>

vue.extend和vue.component

1, js中构造函数和实例对象：
构造函数：function Person(name,sex) {
    this.name=name;
    this.sex=sex;
    this.eat=function () {   };
}
实例对象： const    female = new Person("bob","女");
2，vue中组件构造器extend和组件实例component:
const  VisManager =  Vue.extend({
        props: [],
        data: function() {
            return {}
        },
        template: ""
    });
组件实例：Vue.component("VisManager0"，VisManager）；
Vue.component("VisManager1"，VisManager）；
3，如果子组件export出一个extend，那么父组件使用子组件的时候，需要在components参数中添加子组件的extend值：
子组件：
父组件：
4，如果子组件export出一个{ }，那么父组件引入的中间js文件，Vue.component("PlotManager", () => import("./PlotManager/PlotManager.vue"));  父组件就可以直接使用子组件了；
如果子组件export出一个extend，那么父组件中间js文件，Vue.component("StreetView", StreetView);  export {  StreetView   }  ;  父组件才可以使用子组件；