Vue笔记-vue-bi-ji

最近看了点halo博客项目的源码，发现由于不是前后端分离，代码平添许多复杂性，自己想添加功能或者修改前端样式，都不太方便。就想着把项目改成前后端分离。
由于之前学过点Vue，现在就再拿起来了。

Vue笔记

1. VueComponent.prototype.__proto__= Vue.prototype。
2. Vue是特殊的VueComponent，类似于面向对象的继承。
3. 一个子组件对应一个VueComponent对象实例。
4. DOM中的非普通属性（v-bind或者:），会被绑定到VueComponent对象上（即props传递）。
5. 数据在哪个组件中定义，就到哪个组件中修改

一些细节

1. data写成函数，返回完全独立的对象，不被共用，每个VueComponent实例拥有独立的一份。

2. computed，从data数据经处理而来，有缓存机制。

3. v-model实际含义如下

   <input v-model=“searchText”>

   相当于

   <input v-bind:value=“searchText” v-on:input=“searchText = $event.target.value” >

4. 事件处理及常用修饰符（stop、once、prevent、passive、capture、self）等。

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a> 
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a> 
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form> 
<!-- 添加事件监听器时使用事件捕获模式 --> 
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
 <div v-on:click.capture="doThis">...</div> 
<!-- 只当在 event.target 是当前元素自身时触发处理函数 --> 
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

5. Vue对数据的监视默认浅层，对于数组或对象内部元素属性的修改，无法监视。

6. watch默认浅层监视，深层监视设置deep为true。

7. 生命周期
   Vue组件生命周期

8. 模板解析
   有些 HTML 元素，诸如 <ul>、<ol>、<table> 和 <select>，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 <li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部。使用is属性可以解决

   <table>
   <tr is="blog-post-row"></tr>
   </table>
   

9. 关于filter

   • 组件内部定义

     filters:{
         function(value, a,b ){
             return value.slice(a, b)
         }
     }
     

   • 全局注册

     Vue.filter('filter-name', function(){})
     

10. 关于mixin

    mixin可以用于组件之间公共的、复用的配置，像VueOption一样定义，使用方法类似filter，全局与局部。

11. 关于插件

    插件在Vue启动之前进行前置工作，如配置全局过滤器、全局mixin等。

    /*插件中注册过滤器*/
    export default {
        install(Vue) {
            Vue.filter('mySlice', slice);
        }
    }
    /*插件中添加mixin*/
    export default {
        install(Vue, a, b, c) {
            Vue.mixin(mixin);
            console.log("参数是", a, b, c);
        }
    }
    /*插件中修改原型对象*/
    export default {
        install(Vue, a) {
            console.log(Vue);
    
            Vue.prototype.sayHello = function () {
                alert(a);
            }
        }
    }
    

父子通信的方法总结

父组件传递给子组件

• props
  props由父组件传自子组件，子组件中，可以像data中数据一样使用，但不建议修改，只读取

当组件返回单个根节点时，非 prop 的 attribute 将自动添加到根节点的 attribute 中，同样的规则适用于事件监听器。

当返回的不是根节点时（Vue3），使用v-bind:$attrs指定attribute接受

delCompeleted: {
      type: Function,
      required: true,
    },
    todoItems: {
      type: Item,
      required: true,
    },
    todoItemCount: {
      type: Number,
      required: true,
    }

子组件传递给父组件

• 父组件传递函数给子组件，在子组件中调用。
  可以理解为在子组件中，this.parent.targetFunction()
• 子组件emit事件。
  子组件中，this.$emit(‘event-name’, arg0, arg1)
  父组件中@event-name=“eventHandler”
• 使用ref
  子组件中，this.$emit{(}^{\prime }event-nam{e}^{\prime },arg0,arg1)this.$refs.child.$on(‘event-name’, this.eventHandler)
• 全局事件总线$bus
  任意组件间通信

  new Vue({
    render: h => h(App),
    beforeCreate() {
        /*安装全局事件总线*/
        Vue.prototype.$bus = this;
    }
  }).$mount('#app');
  
  /* 事件处理组件 */
  beforeMount() {
    this.$bus.$on("show-name", (name) => alert(name));
  },
  beforeDestroy() {
    this.$bus.off('show-name');
  }
  
  /* emit事件的组件 */
  this.$bus.$emit('show-name', this.name);
  

• 消息订阅发布
  pubsub-js库，工作模式类似事件总线