vue-v-xxx Library Based on Vue extension

Jun asked if there was no time to return.
How to cut the candles in the west, but when it rains at night.

As an old driver who is familiar with vue, he often uses some instructions. The official instructions provided by vue are too few to satisfy his exuberant desire. Instead, he writes them once every time and teaches us to be helpful all the time. In order to carry out the spirit of dedication, he uses this library and spares a lot of time to accompany his family and friends.

After all, we are serious official soft texts.

What is vue instruction?

  • Before we get to know the library, let's review the Vue instructions

1. We often use several instructions.

v-text , v-html , v-show , v-if , v-else ,v-for , v-bind , v-on ,
v-model , v-once

Specific usage Go to official website No more elaboration

What is custom instruction?

In some cases, you still need to do the underlying operations on ordinary DOM elements, and then you will use custom instructions.

<input  v-focus>// take as an example

// Inside the component
directives: { 
  focus: { 
  // Definition of instructions 
  inserted: function (el) { 
    el.focus() 
    } 
  } 
}

Hook function

An instruction definition object can provide the following hook functions (all optional):

  • bind: Called only once, the first time an instruction is bound to an element. One-time initialization settings are available here.
  • Insert: Called when the bound element is inserted into the parent node (only the parent node is guaranteed to exist, but not necessarily inserted into the document).
  • update: Called when the VNode of the component is updated, but may occur before its sub-VNode is updated. The value of the instruction may or may not change. But you can ignore unnecessary template updates by comparing values before and after updates.
  • CompoonentUpdated: The VNode of the component in which the instruction resides and its sub-VNodes are all updated and invoked.
  • unbind: Called only once, when the instruction is unbound to the element.

Parameters of hook function

  • el: The element bound by the instruction can be used to manipulate DOM directly.
  • binding: An object that contains the following properties:

    • Name: instruction name, excluding v-prefix.
    • Value: The binding value of the instruction, for example, in v-my-directive="1 + 1", is 2.
    • oldValue: The previous value of the instruction binding is available only in the update and component Update hooks. Whether the value changes or not is available.
    • Expression: An instruction expression in the form of a string. For example, in v-my-directive="1 + 1", the expression is "1 + 1".
    • arg: The parameters passed to the instruction are optional. For example, in v-my-directive:foo, the parameter is "foo".
    • Modifiers: an object containing modifiers. For example, in v-my-directive.foo.bar, the modifier object is {foo: true, bar: true}.
  • vnode: Virtual node generated by Vue compilation.
  • Old Vnode: The last virtual node is available only in the update and component Update hooks.

How to install vue-v-xxx?

Based on the vue instructions, add and enrich some commonly used instructions, see how to use it

install

  • You can install it through npm. It is recommended to install it in NPM mode. It can be better used in conjunction with web pack packaging tools.
# install vue-v-xxx

 npm install vue-v-xxx --save

# or

 yarn add vue-v-xxx --save

<!-- Import style -->

<link rel="stylesheet" href="https://unpkg.com/vue-v-xxx/lib/vue-v-xxx.css" />

<!-- Introducing Component Library -->

<script src="https://unpkg.com/vue-v-xxx"></script>

Use


import Vue from 'vue'

import App from './App'

import Vxxx from 'vue-v-xxx'

import 'vue-v-xxx/lib/vue-v-xxx.css'

Vue.config.productionTip = false

Vue.use(Vxxx)

/* eslint-disable no-new */

new Vue({

  el: '#app',

  components: { App },

  template: '<App/>'

})

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title>vue-v-xxx</title>

    <link rel="stylesheet" href="https://unpkg.com/vue-v-xxx/lib/vue-v-xxx.css" />

  </head>

  <body>

    <div id="app">

      <h1 title="Welcome">Welcome to use {{ value }}</h1>

      <button v-copy="value">Click me!</button>

    </div>

  </body>

  <!-- import Vue before vue-v-xxx -->

  <script src="https://unpkg.com/vue/dist/vue.js"></script>

  <!-- import JavaScript -->

  <script src="https://unpkg.com/vue-v-xxx/lib/vue-v-xxx.umd.js"></script>

  <script>

    new Vue({

      el: '#app',

      data: {

        value: 'vue-v-xxx'

      }

    })

  </script>

</html>

What additional instructions do we provide?

v-call call call instruction

The command quickly calls or sends text messages.

<template lang="pug">
.v-xxx
  div(v-call="tel") Click to dial☎️
  div(v-call:sms="10086") Click on Text Message💬
</template>
<script>
  export default {
    name: 'v-call',
    data() {
      return {
        tel: '10086'
      }
    }
  }
</script>

v-copy replication instruction

In many cases, we need to replicate operations

<template lang="pug">
.v-xxx
  Button(@click="handleClick" v-copy="value") Click replication
  div
    textarea(placeholder="Paste here" style="margin-top:40px;width:100%;height:100%;")
</template>
<script>
  export default {
    name: 'v-copy',
    data() {
      return {
        value: ''
      }
    },
    methods: {
      handleClick(html = 'You duplicated me,Go and stick it.') {
        this.value = html
      }
    }
  }
</script>

v-debounce throttling instruction

V-debounce supports incoming throttling time v-debounce:2000 default 2s

<template lang="pug">
.v-xxx
  h3 Immediate trigger:{{num}}
  input(v-model="num")
  h3 After throttling:{{num2}}
  input(v-debounce:2000="num2")
</template>
<script>
  export default {
    name: 'v-debounce',
    data() {
      return {
        num: 'Immediate change',
        num2: 'Throttling value'
      }
    }
  }
</script>

v-throttle throttle instruction

V-throttle supports incoming throttle time v-throttle:500 default 500ms

<template lang="pug">
.v-xxx
  h1 No trembling
  h2 Clicks:{{num}}
  Button(@click="addNum") (Point me)
  h1 Add anti shake
  h2 Clicks:{{num2}}
  Button(v-throttle="addNum2") (Point me)
</template>
<script>
  export default {
    name: 'v-throttle',
    data() {
      return {
        num: 0,
        num2: 0
      }
    },
    methods: {
      addNum() {
        this.num++
      },
      addNum2() {
        this.num2++
      }
    }
  }
</script>

v-ellipsis ellipsis instruction

V-ellipsis is often used in tables, and v-ellipsis is omitted by default.

<template lang="pug">
.v-xxx
  div(v-ellipsis) {{des}}
  div(v-ellipsis:3)
    p {{des2}}
</template>
<script>
export default {
  name: 'v-ellipsis',
  data() {
    return {
      des:
        'Single line ellipsis single line ellipsis single line ellipsis single line ellipsis single line ellipsis single line ellipsis single line ellipsis single line ellipsis single line ellipsis single line ellipsis single line ellipsis single line ellipsis single line ellipsis single line ellipsis single line ellipsis single line ellipsis single line ellipsis single line ellipsis single line ellipsis single line ellipsis single line ellipsis single line ellipsis',
      des2:
        'Multi-line ellipsis, multi-line ellipsis, multi-line ellipsis, multi-line ellipsis, multi-line ellipsis, multi-line ellipsis, multi-line ellipsis, multi-line ellipsis, multi-line ellipsis, multi-line ellipsis, multi-line ellipsis, multi-line ellipsis, multi-line ellipsis, multi-line ellipsis, multi-line ellipsis, multi-line ellipsis, multi-line ellipsis, multi-line ellipsis and multi-line ellipsis'
    }
  }
}
</script>

v-pin Fixed Instruction

V-pin supports incoming location and location value v-pin:left || top default left

<template lang="pug">
.v-xxx
  div(v-pin="200") Top 200 px
  div(v-pin:left="300") Left 300 px
</template>
<script>
  export default {
    name: 'v-pin'
  }
</script>

v-focus instruction

v-focus is very useful for mobile login

<template lang="pug">
.v-xxx
  input(v-focus)
</template>
<script>
export default {
  name: 'v-focus'
}
</script>

Concluding remarks

If you have good instructions, welcome to issue, cover as much as possible. Once selected, you will get mysterious gifts. We look forward to your joining.

Divine friendship

Give a star if you think it's good.

Tags: Javascript Vue npm Mobile

Posted on Mon, 07 Oct 2019 09:14:44 -0700 by TheLoveableMonty