系列文章只是对基本内容的整理和记录，不具备深度。

vue 全局组件

语法：Vue.component('组件名', 组件对象)

代码示例：

<script>
    Vue.component('Button', {
      template: `<button>Button-Component</button>`
    });
    const Header = {
      template: `<div>
          <h1>Header Component</h1>
          <Button />
      </div>`
    }
    const App  = {
      components:{Header},
      template: `<div><Header/><Button/></div>`
    };

    new Vue({
      el: '#app',
      components:{App},
      template: `<App/>`
    })
  </script>

效果：

过滤器 filter|filters

全局过滤器：

过滤器定义格式：Vue.filter('过滤器名', 过滤器处理方法)

过滤器使用格式：{{数据变量 | 过滤器名 }}

代码示例 实现并使用一个字符串翻转过滤器：

 Vue.filter('reverseString', (str) => {
      return str.split('').reverse().join('');
    });

    new Vue({
      el: '#app',
      template: `<div>
        <input v-model="str" />
        <p>Reverse: {{str | reverseString}}</p>
      </div>`,
      data(){
        return {
          str: ''
        }
      }
    })

效果：

组价内过滤器：

过滤器定义格式 filters:{ 过滤器名: function(param) { } }

过滤器使用格式：{{数据变量 | 过滤器名 }}

代码示例：组件内的字符反转过滤器

    new Vue({
      el: '#app',
      template: `<div>
        <input v-model="str" />
        <p>Reverse: {{str | reverseString}}</p>
      </div>`,
      data(){
        return {
          str: ''
        }
      },
      filters: {
        reverseString(str){
          return str.split('').reverse().join('')
        }
      }
    })

效果同上面是一样的。

过滤器使用额外参数

如果过滤器需要通过额外的参数进行不同的操作，可以在函数声明的第一个参数之后，增加需要的参数，比如：

reverseString(data, arg1,arg2,....){
    return data;
}

其中，data 是传入过滤器需要处理的值，而后面的 arg1 ... 则是额外的参数，而在模板中使用的时候，可以直接擦传入其他额外的参数值。比如：

{{ str | reverString('type1', 'arg2') }}

watch 单属性变化监听

注意 watch 里面不能更新 watch 的data，否则会可能造成死循环，vue 在 development 版本会发警告。

使用方式：

watch: {
  // key 为在 data 中的属性键名
  // 参数 newValue 和 oldValue 分别是新旧值   
  key(newValue, oldValue){
  }
}

watch 普通常量状态

代码示例：

new Vue({
  el: '#app',
  template: `<div>
    <input v-model="str" />
    <p>str: {{str}}</p>
    <p>watchStr: {{watchStr}}</p>
  </div>`,
  data(){
    return {
      str: '',
      watchStr: ''
    }
  },
  watch: {
    str() {
      if(this.str === 'abc') this.watchStr = Date.now();
    }
  }
})

效果：

watch 对象或数组

因为对象和数组使用的是引用，不能直接监听整个对象或者数组，需要在 watch 中将对象或者数组名声明成一个对象，然后将 deep 属性置为 true，在 handler(newV,oldV) 中处理 watch 操作。

watch 对象代码示例（数组一样）：

new Vue({
  el: '#app',
  template: `<div>
    <input v-model="obj.name" />
    <p>obj.name: {{obj.name}}</p>
  </div>`,
  data(){
    return {
      obj: {
        name: '',
        newName:''
      },
    }
  },
  watch: {
    obj:{
      deep: true,
      handler(newV, oldV) {
        console.log(newV.name,oldV.name);
      }
    }
  }
})

效果:

computed

定义方式：computed:{newKey(){return newValue}}

使用方式：{{ newKey }}

框架优化：如果 computed 中值未发生任何变化，是不会调用方法重新计算值。

代码示例：

new Vue({
  el: '#app',
  template: `<div>
      <input v-model="val1" />
      <input v-model="val2" />
      <p>newV：{{newV}}</p>
  </div>`,
  data(){
    return {
      val1: '',
      val2: ''
    }
  },
  computed:{
    newV(){return this.val1 + this.val2}
  }
})

效果：

slot

匿名 slot

slot 是 Vue 的内置组件，主要是为了父组件能够非常方便的向子组件传递DOM或者其他的组件内容，而不仅仅是传值。

slot 本质和 React this.props.children 其实是一样的，但因为不是 JSX，因此在不使用 JSX 开发 vue 的时候，slot 更加实用方便。

代码示例：

const Header = {
  template: `<div><slot></slot></div>`
}
const TitleComponent = {
  template: `<s>deleted Title Component</s>`
}
const App = {
  components: {Header, TitleComponent},
  template:`<div>
      <Header> <h1> H1 title </h1> </Header>
      <Header> <h2> H2 title </h2> </Header>
      <Header> <h3> <TitleComponent /> </h3> </Header>
  </div>`
}
new Vue({
  components:{App},
  el: '#app',
  template: `<div><App /></div>`,
  data(){return {}},
})

上述代码中，声明了一个 Header 组件，其中由一个 slot，然后在 App 中调用了三次 Header 组件，并且每次传入的内容都不一样，两次是 HTML DOM，而第三次是 HTML + Vue Component，效果如下：

具名 slot

具名 slot 主要应用场景是组件内部需要多个 slot 的情况，将插入 DOM 插入到指定的位置

具名 slot 声明方式：<slot name="slotName"> </slot> 通过 name 声明 slot 的name

具名 slot 使用方式：<h1 slot="slotName"> </h1 > 在 DOM 中，通过 slot= 关联声明的 slot

代码示例：

const Header = {
  template: `<div>
    <p> first slot </p>
    <slot name="first"></slot>
    <p> second slot </p>
    <slot name="second"></slot>
  </div>`
}
const TitleComponent = {
  template: `<s>deleted Title Component</s>`
}
const App = {
  components: {Header, TitleComponent},
  template:`<div>
      <Header>
          <h1 slot="first"> Fist slot DOM</h1>
          <TitleComponent slot="second"> second slot DOM </TitleComponent>
      </Header>
  </div>`
}
new Vue({
  components:{App},
  el: '#app',
  template: `<div><App /></div>`,
  data(){return {}},
})

效果：