学习收获笔记

1、Vue的directives，自定义指令

　　vue.directive 生命周期

1. bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
2. inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。
3. update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
4. componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
5. unbind:只调用一次，指令与元素解绑时调用。

Demo:这是一个局部的自定义指令

<p >
  自定义change指令{{count}}
  <input type="text" v-change="count" v-model="count" v-if="!(count<2)">
  <button @click="count--">减小</button>
</p>

directives:{
  change:{
    componentUpdated:function(el,bindings){
      console.log('被绑定元素所在模板完成一次更新周期时调用');
    },
    bind:function(){
      console.log('只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作')
    },
    inserted:function(){
      console.log('被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。')
    },
    update:function(el,bindings){
      console.log('被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。');
      console.log(bindings.oldValue)
      console.log(bindings.value)
    },
    unbind:function(){
      console.log('只调用一次，指令与元素解绑时调用')
    }
  }
}

全局的自定义指令：

创建一个unit.js文件
Vue.directive('color',{

  bind:function(){
    console.log('自定义全局指令---------')
  },
  unbind:function(el,bindings){
    console.log('解除指令',bindings.value)
  },
  update:function(){
    console.log('更新')
  }
})
main.js文件中引入unit.js文件即可全局使用color这个指令。

2、Vue的use，自定义指令

安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法将被作为 Vue 的参数调用。

当 install 方法被同一个插件多次调用，插件将只会被安装一次。初次之外，也可以引入自己定义的组件：

import SjAlert from '@/plugins/alert'
Vue.use(SjAlert)

plugins文件夹下alert文件夹中alert.vue文件：

<template>
  <div class="alert-container" v-if="show">
    <div v-text="title">提示标题</div>
    <div v-text="content">提示内容</div>
    <button @click="close">确定</button>
  </div>
</template>
<script>
  export default  {
    name:"Alert",
    data(){
      return {
        show:false,
        title:'',
        content:'',
        ok:null
      }
    },
    methods:{
      close(){
        this.show = false;
        if(this.ok){
          this.ok();
        }
      }
    }
  }
</script>
<style>

</style>

index.js文件：

import Alert from '@/plugins/alert/Alert'
const alert = {};
alert.install = function(Vue){
  //生成一个Vue的子类，同时也是这个子类也就是组件
  const SjAlertConstructor = Vue.extend(Alert);
  //实例化一个对象
  const instance = new SjAlertConstructor();
  //将这个实例挂载到我创建的div上
  //并将此div加入全局挂载点的内部
  instance.$mount(document.createElement('div'));
  document.body.appendChild(instance.$el);
  //通过VUE原型注册一个方法
  //让所有的实例共享这个方法
  Vue.prototype.$sjAlert = (title,content,method = ()=>{})=>{
    //挂在到vue原型上 暴露参数和方法
    instance.title = title?title:'';
    if(content) instance.content = content;
    if(method) instance.ok = method;
    instance.show = true;
  }
};
3、computed介绍：

• computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
• computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择

使用介绍：

<div >
  totalMarks---{{totalMarks}}  使用computed
  <button @click="i++"> 加</button>
</div>

computed:{
  totalMarks:function(){
    let total=0;
    let me = this;
    console.log(total);
    for(var i=0;i<=this.i;i++){
      total += i;
    }
    return total;
  }
}

与watch之间的区别：

　　刚开始总是傻傻分不清到底在什么时候使用watch，什么时候使用computed。这里大致说一下自己的理解：

• watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象，