Vue学习笔记32--自定义指令--对象式

总结：
   1.autofocus属性，用于input自动获取焦点
   2.directives指令中 this 是指 window 
   3.vm 中使用directives进行自定义指令，为局部指令
   4.全局指令和全局过滤器类似，应在vm之外使用 directive进行声明使用

自定义指令总结：

定义语法
- 局部指令：
  - 对象式：new Vue({directives:{指令名称：配置对象}})
  - 函数式：new Vue({directives(){}})

- 全局指令：
  - Vue.directive(指令名，配置对象) 　　　　　　
  - Vue.directive(指令名，回调函数)

配置对象中常用的3个回调
- bind (element, binding){}--指令与元素成功绑定时(一上来)
- inserted (element, binding) {}--指令所在元素被插入页面时
- update (element, binding) {}--指令所在的模版被重新解析时
备注
- 指令定义时不加v-，但使用时要加v-
- 指令名如果是多个单词，要使用kebdb-case命名方式(或全小写)，不要用camelCase命名——

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自定义指令--对象式</title>
  <!-- js阻塞 -->
  <script type="text/javascript" src="../Js/vue.js"></script>
</head>
 
<body>
  <div id="root">
    <h3>
      自定义指令：<br>
      需求一：定义一个v-big指令，和v-text功能类似，但会把将绑定的数值放大10倍<br>
      需求二：定义个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点<br>
    </h3>
    <hr>
    总结：<br>
    1.autofocus属性，用于input自动获取焦点<br>
    2.directives指令中 this 是指 window <br>
    3.vm 中使用directives进行自定义指令，为局部指令<br>
    4.全局指令和全局过滤器类似，应在vm之外使用 directive进行声明使用
    <hr>
    <h3>{{name}}</h3>
    <h3>当前的n值是:<span v-text="n"> </h3>
    <h3>放大10倍n值是:<span v-big-number="n"> </h3>
    <button @click="n++">n++</button>
    <hr>
    v-bind:<input type="text" v-bind:value="n"><br><br>
    <!-- v-fbind:<input type="text" v-fbind:value="n" autofocus> -->
    <!-- v-fbind:<input type="text" v-fbind:value="n"> 方法式 <br><br> -->
 
    <!-- v-fbind:<input type="text" v-fbindobj:value="n"> 局部对象式 <br><br> -->
 
    v-fbind:<input type="text" v-fbindobjall:value="n"> 局部对象式 <br><br>
 
    v-fbindobjall:<input type="text" v-fbindobjall:value="n"> 全局对象式 ，可以访问<br><br>
  </div>
  <hr>
  <div id="root2">
    v-fbindobjall:<input type="text" v-fbindobjall:value="x"> 全局对象式 可以访问 <br><br>
    <!-- v-fbind:<input type="text" v-fbind:value="n"> 局部对象式,无法访问 <br><br> -->
  </div>
</body>
 
</html>
<script type="text/javascript">
  Vue.config.productionTip = false
  // --------------全局自定义指令开始--------------
  Vue.directive('fbindobjall', {
    // 指令与元素成功绑定时(一上来)
    bind (element, binding) {
      console.log('bind fbindobjall')
      element.value = binding.value
    },
    // 指令所在元素被插入页面时
    inserted (element, binding) {
      console.log('inserted fbindobjall')
      element.focus()
    },
    // 指令所在的模版被重新解析时
    update (element, binding) {
      console.log('update fbindobjall')
      element.value = binding.value
      // element.focus()
    }
  })
  // --------------全局自定义指令结束--------------
 
  //console.log(vm)
  Vue.config.productionTip = false
  const vm2 = new Vue({
    el: '#root2',
    data: {
      name: 'v-text 学习笔记',
      x: 1,
    },
 
 
  })
  const vm = new Vue({
    el: '#root',
    data: {
      name: 'v-text 学习笔记',
      n: 1,
    },
    //--------------局部自定义指令--------------
    directives: {
      // ---------------函数式写法---------------
      // big函数何时被调用==》
      // 1.指令与元素成功绑定时被调用 
      // 2.指令所在的模版被重新解析时，被调用
      'big-number' (element, binding) {
        element.innerText = binding.value * 10
        console.log('element', binding.value)
        // 指令中 this 是指 window
        console.log('element', this)
      },
      //方法式，使用element.focus 默认不会获取焦点
      fbind (element, binding) {
        element.value = binding.value
        element.focus()
      },
      // ---------------函数式写法---------------
 
      // ---------------对象式 自定义指令---------------
      /* fbindobj:
      {
        // 指令与元素成功绑定时(一上来)
        bind (element, binding) {
          console.log('bind')
          element.value = binding.value
        },
        // 指令所在元素被插入页面时
        inserted (element, binding) {
          console.log('inserted')
          element.focus()
        },
        // 指令所在的模版被重新解析时
        update (element, binding) {
          console.log('update')
          element.value = binding.value
          // element.focus()
        }
      }*/
      // ---------------对象式 自定义指令---------------
    }
 
 
  })
 
</script>