2, custom VUE instruction

Use ref to get focus

You can get the DOM by ref, and then manipulate the DOM implementation to get focus

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>hello vue</title>
  <! Vue library -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>

  const app = Vue.createApp({
    mounted(){
      this.$refs.input.focus();
    },
    template: ` 
       
 
         
       
 `
  });


  const vm = app.mount('#root');
</script>

</html>
Copy the code

The results

You can do this using ref, but you can’t reuse it!

Custom instruction implementations get focus

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>hello vue</title>
  <! Vue library -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>

  const app = Vue.createApp({
    / / using v - focus
    template: ` 
       
 
         
       
 `
  });

  // Custom instruction
  app.directive("focus", {// Time: 16:39:43 on June 15, 2021
    // We receive a single parameter, which is the DOM node
    mounted(el){ el.focus(); }});const vm = app.mount('#root');
</script>

</html>
Copy the code

The results

Local custom instructions

Mixin, global custom directive, let’s write a local custom directive.

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>hello vue</title>
  <! Vue library -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>

  // Local custom instruction
  const directives = {
    focus: {
      mounted(el){ el.focus(); }}}const app = Vue.createApp({
    // Introduce custom directives
    // This is the way to write it
    // directives: directives,
    // Use the following method:
    directives,
    / / using v - focus
    template: ` 
       
 
         
       
 `
  });

  const vm = app.mount('#root');
</script>

</html>
Copy the code

The results

instructions

Mounted () specifies the mounted lifecycle function. Other lifecycle functions can also be used in custom directives.

Custom instructions with attribute values

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>hello vue</title>
  <! Vue library -->
  <script src="https://unpkg.com/vue@next"></script>
  <! - style -- -- >
  <style>
    .header{
      position: absolute;
    }
  </style>
</head>

<body>
  <div id="root"></div>
</body>

<script>

  // Local custom instruction
  const directives = {
    pos: {
      mounted(el, binding){
        el.style.top = binding.value + 'px'; }}}const app = Vue.createApp({
    // Introduce custom directives
    directives,
    / / using v - pos
    template: ` 
       
 
         
       
 `
  });

  const vm = app.mount('#root');
</script>

</html>
Copy the code

The results

Modify and validate data

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>hello vue</title>
  <! Vue library -->
  <script src="https://unpkg.com/vue@next"></script>
  <! - style -- -- >
  <style>
    .header{
      position: absolute;
    }
  </style>
</head>

<body>
  <div id="root"></div>
</body>

<script>

  // Local custom instruction
  const directives = {
    pos: {
      // mounted is executed only once, so top changes in data are not reflected on the page
      mounted(el, binding){
        el.style.top = binding.value + 'px';
      },
      // We write an updated lifecycle function
      updated(el, binding){
        el.style.top = binding.value + 'px'; }}}const app = Vue.createApp({
    // Introduce custom directives
    directives,
    // Use data instead of 50
    data(){
      return {
        top: 60}},/ / using v - pos
    template: ` 
       
 
         
       
 `
  });

  const vm = app.mount('#root');
</script>

</html>
Copy the code

The results

shorthand

// The following statement 1 is equivalent to statement 2, as long as these two are equivalent, plus the life cycle function is not equivalent
/ / write 1
app.directive("focus".(el, binding) = > {
    el.style.top = binding.value + 'px';
});

/ / write 2
app.directive("focus", {mounted(el, binding){
        el.style.top = binding.value + 'px';
    },
    updated(el, binding){
        el.style.top = binding.value + 'px'; }});Copy the code

Attributes of a custom directive

Similar to v-ops: ABC, ABC is the attribute, let’s see how to get this ABC

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>hello vue</title>
  <! Vue library -->
  <script src="https://unpkg.com/vue@next"></script>
  <! - style -- -- >
  <style>
    .header{
      position: absolute;
    }
  </style>
</head>

<body>
  <div id="root"></div>
</body>

<script>

  // Local custom instruction
  const directives = {
    pos: {
      mounted(el, binding){
        console.log(binding);
        console.log(binding.arg);
        el.style.top = binding.value + 'px'; }}},const app = Vue.createApp({
    // Introduce custom directives
    directives,
    // Use data instead of 50
    data(){
      return {
        top: 60}},/ / using v - pos
    template: ` 
       
 
         
       
 `
  });

  const vm = app.mount('#root');
</script>

</html>
Copy the code

The results

Optimize the distance Settings above

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>hello vue</title>
  <! Vue library -->
  <script src="https://unpkg.com/vue@next"></script>
  <! - style -- -- >
  <style>
    .header{
      position: absolute;
    }
  </style>
</head>

<body>
  <div id="root"></div>
</body>

<script>

  // Local custom instruction
  const directives = {
    pos: {
      mounted(el, binding){
        el.style[binding.arg] = binding.value + 'px'; }}},const app = Vue.createApp({
    // Introduce custom directives
    directives,
    // Use data instead of 50
    data(){
      return {
        top: 60}},/ / using v - pos
    template: ` 
       
 
         
       
 `
  });

  const vm = app.mount('#root');
</script>

</html>
Copy the code

The results

We can change left to right, etc., to achieve the same effect!