Front-end training-intermediate level (38)-vue 2.x instructions and custom instructions

Posted May 26, 20206 min read

The most basic front-end is HTML + CSS + Javascript. Mastering these three technologies is an entry, but it is only an entry. Now the definition of front-end development is far more than that. The front-end small classroom(HTML/CSS/JS), in order to improve the technical level and lay a solid foundation for the central idea of the basic idea, we start classes(every Thursday)

We have seen some instructions in the previous sections more or less, and today we will detailly introduce the built-in instructions and how to customize the instructions.

Built-in instructions

v-text, v-html

v-text

Update the element's textContent. Note, not innerText.

I prefer to use interpolation. If you want to update part of textContent, you obviously need to use{{Mustache}}interpolation.

<span v-text = "msg"> </span>
<!-Is equivalent to->
<span> {{msg}} </span>

v-html

Update the element's innerHTML.

Note:The content is inserted as normal HTML-will not be compiled as a Vue template. If you think so, then you should learn how to use component mode development.

For example, the content you insert will not have the scoped style, and it is also useless if there is a v-if or the like.

I do n t recommend you to use this command because XSS is too risky

<div v-html = "html"> </div>

v-show, v-if, v-else, v-else-if

v-show

Display and hide by controlling the ** display of style.(Understandably still in the DOM tree)

<div>
    <span v-show = "level <10"> Little rookie </span>
    <span v-show = "level <20 && level> = 10"> Big rookie </span>
    <span v-show = "level> = 20"> old bird </span>
</div>

v-if, v-else, v-else-if

Control display and hiding through create and destroy.(It can be understood that it does not exist in the DOM tree and has been released)

<div>
    <span v-if = "level <10"> Little rookie </span>
    <span v-else-if = "level <20"> Great rookie </span>
    <span v-else> Old bird </span>
</div>

v-for

Originated from traversing rendering data. You can traverse values, arrays, objects.

<div v-for = "(item, index) in items"> </div>
<div v-for = "(val, key) in object"> </div>
<div v-for = "(val, name, index) in object"> </div>

v-on

Used for binding events. Abbreviated as @

<!-Method processor->
<button @ click = "handle"> btn </button>
<button v-on:click = "handle"> btn </button>

<!-Inline statement->
<button v-on:click = "handle('hello', $event)"> </button>

<!-Dynamic Event(2.6.0+)->
<button @ [event]= "handle"> </button>
<button v-on:[event]= "handle"> </button>

<!-Stop bubbling->
<button @ click.stop = "handle"> </button>

<!-Prevent default behavior->
<button @ click.prevent = "handle"> </button>

<!-Prevent default behavior, no expression->
<form @ submit.prevent> </form>

<!-Concatenation modifier->
<button @ click.stop.prevent = "handle"> </button>

<!-Key modifier, key alias->
<input @ keyup.enter = "handle">

<!-Key modifier, key code->
<input @ keyup.13 = "handle">

<!-Clicking on the callback will only trigger once->
<button v-on:click.once = "handle"> </button>

<!-Object syntax(2.4.0+)->
<button v-on = "{mousedown:handle, mouseup:handle}"> </button>

v-bind

Set attribute, property, and component props. The abbreviation is :.
When setting class or style, support array, object, string

<!-Bind an attribute->
<img v-bind:src = "imageSrc">

<!-Dynamic attribute name(2.6.0+)->
<button v-bind:[key]= "value"> </button>

<!-Abbreviation->
<img:src = "imageSrc">

<!-Dynamic attribute name abbreviation(2.6.0+)->
<button:[key]= "value"> </button>

<!-Inline string stitching->
<img:src = "'/path/to/images /' + fileName">

<!-class binding->
<div:class = "{red:isRed}"> </div>
<div:class = "[classA, classB]"> </div>
<div:class = "[classA, {classB:isB, classC:isC}]">

<!-style binding->
<div:style = "{fontSize:size + 'px'}"> </div>
<div:style = "[styleObjectA, styleObjectB]"> </div>

<!-Bind an object that is all attribute->
<div v-bind = "{id:someProp, 'other-attr':otherProp}"> </div>

<!-Bind DOM attribute through prop modifier->
<div v-bind:text-content.prop = "text"> </div>

<!-prop binding. "Prop" must be declared in my-component. ->
<my-component:prop = "someThing"> </my-component>

<!-Pass the props of the parent component to the child components through $props->
<child-component v-bind = "$props"> </child-component>

<!-XLink->
<svg> <a :xlink:special="foo"> </a> </svg>

v-model

Two-way data binding. Can be understood as syntactic sugar(:value`` @ input), with different processing for different elements

Native DOM input, textarea, select

Using input as an example, it can be understood that the following two are the same.(In fact, it is different, such as the input method)

<input v-model = "val">

<!-Unlock syntactic sugar->

<input:value = "val" @ input = "val = $event.target.value">

Custom component

<v-input v-model = "val">

<!-Unlock syntactic sugar->

<v-input:value = "val" @ input = "val = $event">

v-slot

Named slot or a slot that requires receiving prop. Abbreviated as #.

<!-Named slot->
<base-layout>
  <template v-slot:header>
    Header content
  </template>

  Default slot content

  <template #footer>
    Footer content
  </template>
</base-layout>

<!-Named slot receiving prop->
<infinite-scroll>
  <template v-slot:item = "slotProps">
    <div class = "item">
      {{slotProps.item.text}}
    </div>
  </template>
</infinite-scroll>

<!-Receive the default slot of prop, use destructor->
<mouse-position v-slot = "{x, y}">
  Mouse position:{{x}}, {{y}}
</mouse-position>

v-pre

Skip the compilation process of this element and its child elements. Can be used to display original Mustache tags. Skipping a large number of nodes without instructions will speed up compilation.

v-cloak

Hide uncompiled Mustache tags until the instance is ready.

The principle is that this directive maintains on the element until the associated instance finishes compiling, and works with the CSS rule [v-cloak]{display:none}

v-once

Only render elements and components once. Subsequent re-rendering, the element/component and all its child nodes will be treated as static content and skipped. This can be used to optimize update performance.

Custom command

Generally speaking, in Vue2.0, code reuse and abstraction are mainly component development.

We do not care about DOM for component development, only the declaration cycle of components(created, mounted and other hook functions).

If we need to care about the DOM, then we can use custom instructions.

Registration Instructions

Global registration

//Register a global custom instruction `v-focus`
Vue.directive('focus', {
  //When the bound element is inserted into the DOM ...
  inserted:function(el) {
    //focus element
    el.focus()
  }
})

Local registration

{
    data() {},
    ...,
    directives:{
      focus:{
        //Definition of instruction
        inserted:function(el) {
          el.focus()
        }
      }
    }
}

Hook function

  • bind:only called once, called when the instruction is first bound to an element Here you can perform one-time initialization settings.
  • inserted: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 happen before the update of its child VNode **. The value of the instruction may or may not have changed. But you can ignore unnecessary template updates by comparing the values before and after the update(see hook function parameters below for details).
  • componentUpdated:the VNode of the component where the instruction is located and its child VNode are called after all updates.
  • unbind:Called only once, Called when the instruction and element are unbound.

Input parameter of hook function

Next we look at the parameters of the hook function(ie el, binding, vnode and oldVnode).

The instruction hook function will be passed the following parameters:

  • el:The element bound by the instruction can be used to directly manipulate the DOM.

  • binding:an object containing the following properties:

    • name:instruction name, excluding v- prefix.
    • value:the binding value of the instruction, for example:inv-my-directive = "1 + 1", the binding value is 2.
    • oldValue:the previous value bound by the instruction, only available in the update and componentUpdated hooks. Available regardless of whether the value has changed.
    • expression:instruction expression in string form. For example, in v-my-directive =" 1 + 1 ", the expression is " 1 + 1 ".
    • arg:the parameter passed to the instruction, 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.

  • oldVnode:the last virtual node, only available in the update and componentUpdated hooks.

Except for el, all other parameters should be read-only and never be modified. If you need to share data between hooks, it is recommended to use the element's dataset(data-\ *).

WeChat public account:front-end linong

clipboard.png

references

  1. Front-end training catalog, front-end training plan, front-end training plan