Vue-6

自定义指令

1. 指令是用来操作DOM
2. 指令的使用形式： 属性
3. 自定义指令方式有两种：

• 全局注册指令
  • Vue.directive( 指令的名称， 指令的配置项 )
• 局部注册指令
  • directives: {
    '指令名称': 指令的配置项
    }

4. 指令的配置项提供了5个钩子函数

• 以及钩子函数中的参数

console.log( 'el',el  ) // el 指令绑定的元素
console.log( 'binding',binding ) // 指令的详细信息
console.log( 'vnode', vnode )  // 当前绑定元素的信息
console.log( 'oldVnode',oldVnode ) // 上一个绑定元素的信息

案例： 打开网页，input自动获得焦点

<style>
        .box {
            width: 300px;
            height: 300px;
            background: blue;
        }
</style>


    <div id="app">
        <div class="box">
            <button @click='flag = false'> 点击 </button>
            <input type="text" v-if="flag" v-focus.yyb v-model="msg">
            <input type="text" v-if="flag" v-focus v-model="msg">
        </div>
    </div>

//全局注册指令 ：
Vue.directive('focus', {
        bind(el, binding, vnode, oldVnode) { //调用一次，指令一绑定在元素身上就会触发
            // console.log( 'bind focus' )
            // console.log( 'el',el  ) // el 指令绑定的元素
            // console.log( 'binding',binding ) // 指令的详细信息
            // console.log( 'vnode', vnode )  // 当前绑定元素的信息
            // console.log( 'oldVnode',oldVnode ) // 上一个绑定元素的信息
            // el.style.background = 'red'
        },
        inserted(el, binding, vnode, oldVnode) { // 当前绑定的元素插入父节点时调用
            el.focus()
            if (binding.modifiers.yyb) {
                el.style.color = 'green'
            } else {
                el.style.color = 'red'
            }
            console.log(binding)
            console.log('inserted ')
        },
        update(el, binding, vnode, oldVnode) { // 当前指令绑定的元素发生改变
            console.log('update')
            console.log('el', el) // el 指令绑定的元素
            console.log('binding', binding) // 指令的详细信息
            console.log('vnode', vnode) // 当前绑定元素的信息
            console.log('oldVnode', oldVnode) // 上一个绑定元素的信息
        },
        componentUpdated(el, binding, vnode, oldVnode) { //当前绑定元素发生改变，或是子元素发生改变
            console.log('componentUpdated')
        },
        unbind(el, binding, vnode, oldVnode) { // 组件销毁时触发
            console.log('unbind')
        }
    })

    new Vue({
        el: '#app',
        data: {
            msg: 1000,
            flag: true
        },
//局部注册指令 ：
        directives: {
            'focus': {
                bind() {

                },
                inserted() {

                },
                update() {

                },
                componentUpdated() {

                },
                unbind() {

                }
            }
        }
    })

自定义事件 ：

• 自定义事件的使用形式

1. 组件生命周期中发布事件，通过某一个事件处理程序调用
2. 绑定在组件身上 ， 通过 v-on 绑定

<style>
    .box{
      width: 100px;
      height: 100px;
      background: red;
    }
</style>


  <div id="app">
    <button @click = 'fn'> 点击 </button>
  </div>

var vm = new Vue({
    el: '#app',
    methods: {
      fn () {
        this.$emit('aa')
      }
    },
    mounted () {
      this.$on('aa',function(){
        alert('aa')
      })
    }
  })

组件通信 ：

1. 父子组件通信： 父组件将自己的数据传递给子组件

1. 父组件将自己的数据通过属性绑定的形式传递给子组件
2. 子组件在自己的配置项中通过 props 来接收这个属性
3. 这个属性可以直接向全局变量一样使用

  <div id="app">
    <Father></Father>
  </div>
  <template id="father">
    <div>
      <h3> 这里是father </h3>
      <Son :aa = "money"></Son>
    </div>
  </template>
  <template id="son">
    <div>
      <h3> 这里是son </h3>
      <p> 我老爸给了我：{{ aa }} 钱 </p>
    </div>
  </template>

  Vue.component('Father',{
    template: '#father',
    data () {
      return {
        money: '1000'
      }
    }
  })

  Vue.component('Son',{
    template: '#son',
    // props: ['aa']
    props: {
      // 属性： 属性的数据类型  给数据做属性验证，验证数据类型
      'aa': Number 
    }
  })

  new Vue({
    el: '#app'
  })

2. 子父组件通信：子组件将一个数据发送给父组件

• 如何实现：自定义事件
• 流程：

//    1. 父组件中定义一个数据，然后在methods定义一个方法用来修改这个数据

  <div id="app">
    <Father></Father>
  </div>
  <template id="father">
    <div>
      <h3> 这里是father </h3>
      <p> 这里有 {{ num }} 钱 </p>
      <hr>
      <Son @aa = 'add'></Son>
    </div>
  </template>
  <template id="son">
    <div>
      <h3> 这里是son </h3>
      <button @click = "give"> give money </button>
    </div>
  </template>

// JS代码 ：
  Vue.component('Father',{
    template: '#father',
    data () {
      return {
        num: 0
      }
    },
    methods: {
      add ( val ) {
        console.log('add')
        this.num += val
      }
    }
  })

  Vue.component('Son',{
    template: '#son',
    data () {
      return {
        money: 1000
      }
    },
    methods: {
      give () {
        this.$emit('aa',this.money)
      }
    }
  })

  new Vue({
    el: '#app'
  })

//    2. 父组件通过自定义事件的形式，将父组件的一个方法传递给子组件

  <div id="app">
    <Father></Father>
  </div>
  <template id="father">
    <div>
      <h3> 这里是father </h3>
      <p> 我这里有 {{ num }} 钱 </p>
      <hr>
      <Son :add = 'add'></Son>
    </div>
  </template>
  <template id="son">
    <div>
      <h3> 这里是son </h3>
      <button @click = "add( money )"> give money </button>
    </div>
  </template>
  
//JS部分：  
    Vue.component('Father',{
    template: '#father',
    data () {
      return {
        num: 0
      }
    },
    methods: {
      add ( val ) {
        this.num += val
      }
    }
  })

  Vue.component('Son',{
    template: '#son',
    data () {
      return {
        money: 1000
      }
    },
    props: ['add']
  })

  new Vue({
    el: '#app'
  })

// 3. 子组件可以通过this.$emit(自定义事件名称，参数1，参数2...)来订阅这个自定义事件this.$emit('aa',this.money)

  <div id="app">
    <Father></Father>
  </div>
  <template id="father">
    <div>
      <h3> father </h3>
      <p> 我有{{ jingku.money }} 钱 </p>
      <hr>
      <Son :jingku = 'jingku'> </Son>
    </div>
  </template>
  <template id="son">
    <div>
      <h3> son </h3>
      <hr>
      <input type="text" v-model = "jingku.money">
      <p> 我拿了{{ jingku.money }} 钱 </p>

    </div>
  </template>
  
  //JS部分：
  
    Vue.component('Father',{
    template: '#father',
    data () {
      return {
        jingku: {
          money: 1000
        }
      }
    }
  })

  Vue.component('Son',{
    template: '#son',
    props: ['jingku']
  })
  new Vue({
    el: '#app'
  })

3. 非父子组件通信

• 第一种形式 ： ref链绑定
  • ref不仅可以绑定组件，也可以绑定普通元素
  • 业务： 别的组件中获取另外一个组件？
  • 解决： 绑定ref

  <div id="app">
    <Brother ref = "brother"></Brother>
    <hr>
    <Sister ref = 'sister'></Sister>
    <div ref = 'box'></div>
  </div>
  <template id="brother">
    <div>
      <h3> 这里是brother </h3>
      <button @click = 'give'> give sister  money </button>
    </div>
  </template>
  <template id="sister">
    <div>
      <h3> 这里是sister </h3>
      <p> 我有 {{ jk }} </p>
    </div>
  </template>
  
  //JS代码：
  
    Vue.component('Brother',{
    template: '#brother',
    data () {
      return {
        money: 1000
      }
    },
    methods: {
      give () {
        this.$parent.$refs.sister.jk = this.money
      }
    }
  })
  Vue.component('Sister',{
    template: '#sister',
    data () {
      return {
        jk: 0
      }
    }
    
  })

  new Vue({
    el: '#app',
    mounted () {
      console.log('====================================');
      console.log(this.$refs);
      console.log('====================================');
    }
  })

• 非父子组件通信第二种形式： 事件总线
  • 事件的发布： 、$on
  • 事件的订阅 $emit
  • 通过 new Vue 在得到另外一个实例

  <div id="app">
    <Brother></Brother>
    <hr>
    <Sister></Sister>
  </div>
  <template id="brother">
    <div>
      <h3> 这里是brother </h3>
      <button @click = 'give'> give </button>
    </div>
  </template>
  <template id="sister">
    <div>
      <h3> 这里是sister </h3>
      <p> 弟弟给了我 {{ jk }} </p>
    </div>
  </template>
  
  
  //JS 代码：
  
    var bus = new Vue()
  Vue.component('Brother',{
    template: '#brother',
    data () {
      return {
        money: 1000
      }
    },
    methods: {
      give () {
       bus.$emit('aa',this.money)
      }
    }
  })


  Vue.component('Sister',{
    template: '#sister',
    data () {
      return {
        jk: 0
      }
    },
    mounted () {
      bus.$on('aa',( val ) => {
        this.jk += val
      })
    }
  })

  new Vue({
    el: '#app',
  })

cli ：

1. cli是什么？

• cli是vue提供的一个快速（自动化） 构建项目的一个脚手架 ，类似于 express-generator

2. cli的版本

• 目前最新 3.x
• 老版本是 2.x

3. cli的底层的自动化工具是： webpack
4. cli的安装 ：

• $ yarn add @vue/cli global 这个是cli3的版本
  • 如果我们还想使用cli2的脚手架，那么我们可以在安装一个包
• $ yarn add @vue/cli-init global
• 如果安装3失败了，
  • 那么你可以使用cnpm继续安装 @vue/cli @vue/cli-init
• $ cnpm i @vue/cli -g 这个是cli3的版本
  如果我们还想使用cli2的脚手架，那么我们可以在安装一个包
• $ cnpm i @vue/cli-init -g
• 如果还有问题：
  • 那么你就不要使用cli3了，你可以单独安装cli2
  • $ cnpm i vue-cli -g

5. 验证是否安装成功

• 命令行输入： $ vue 看是否有东西输出，如果输出命令提示，证明安装成功

6. 创建项目

• cli3版本创建

  1. 命令创建 【 推荐 】
     $ vue create project

     • 手动选择配置
     • 如果安装node-sass出问题，如何解决：
     • 先切换成npm源 nrm use npm
     • 使用cnpm 安装 cnpm i node-sass sass-loader -D

  2. 图形界面创建
     $ vue ui

• cli2
  1. 标准版
     $ vue init webpack project
  2. 简易版
     $ vue init webpack-simple project