There are tens of millions of front-end frames, and the unique vue accounts for half

I'm the fashion. Let's take a rocket to learn Vue

 

"Fashion learning Vue by rocket" -- Chapter 11: binding syntax of user-defined components and classes in Vue

The last chapter recalled: "let me see it more!" the fashion said a little misty...

"Well, you'll see more. Go to dinner later. After dinner, I'll tell you today's skills. Time is tight and the task is heavy!" the old man said and went to recuperate.

Fashion knocked the case twice and went to the old man for dinner. Today it was potato stew. It was really delicious. Fashion ate two bowls of rice and took a nap at noon.

Didi, the alarm clock is ringing. It's time to learn the fashion. I hurried to the computer room.

"Come on, today we'll learn about custom components and class bindings in Vue," the old man said. Fashion took out his notebook and began to write it down

About custom directives

In addition to the default core directives (v-model and v-show), Vue also allows you to register custom directives. Next, we register a global instruction v-focus. The function of this instruction is to obtain the focus of the element when the page is loaded

<div id="app">
  <p>When the page is loaded, input Element auto focus:</p>
  <input v-focus="">
</div>
  
<script>
// Create root instance
new Vue({
  el: '#app',
  directives: {
    // Register a local custom directive v-focus
    focus: {
      // Definition of instruction
      inserted: function (el) {
        // Focus element
        el.focus()
      }
    }
  }
})
</script>

An instruction definition object can provide the following hook functions (all optional):
bind: called only once when the instruction is bound to the element for the first time. One time initialization settings can be performed here.
Inserted: called when the bound element is inserted into the parent node (only the parent node is guaranteed to exist, but it may not have been inserted into the document).
Update: called when the VNode of the component is updated, but may occur before its child VNode is updated. The value of the instruction may or may not have changed. However, you can ignore unnecessary template updates by comparing the values before and after the update

Instruction value data - abbreviation

In many cases, you may want to trigger the same behavior during bind and update, regardless of other hooks

<div id="app">
  <p>When the page is loaded, input Element auto focus:</p>
  <input v-focus="true">
</div>
  
<script>
// Create root instance
new Vue({
  el: '#app',
  directives: {
    // Register a local custom directive v-focus
    focus: function (el,data) {
        // Focus element
        //Gets the focus if the value of the instruction is true
        if(data.value==true){
           el.focus()
        }
       
    }
  }
})
</script>

About class binding:

The class list and inline style of operation elements are a common requirement of data binding. Because they are all attributes, we can handle them with v-bind

Vue.js v-bind specifically enhances it when dealing with class and style. The result type of an expression can be an object or an array in addition to a string.

We can pass an object to v-bind:class to dynamically switch class:

<div v-bind:class="{ active: isActive }"></div>

The above syntax indicates that the existence of the active class will depend on whether the data attribute isActive is true or false

You can dynamically switch multiple class es by passing in more properties in the object

<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

The data is as follows

data: {   isActive: true,   hasError: false }

The rendering result is

<div class="static active"></div>

The bound data object does not need to be defined inline in the template:

<div v-bind:class="classObject"></div>

The data are as follows

data: {   classObject: {     active: true,     'text-danger': false   } }

classObject objects can be dynamically obtained by calculation

Array syntax

We can pass an array to v-bind:class to apply a class list:

<div v-bind:class="[activeClass, errorClass]"></div>

data: {   activeClass: 'active',   errorClass: 'text-danger' }

Render as

<div class="active text-danger"></div>

Bind inline style - object syntax

Object syntax

The object syntax of v-bind:style is very intuitive -- it looks very much like CSS, but it's actually a JavaScript object. CSS attribute names can be named with camel case or kebab case (remember to enclose them in single quotes)

<div v-bind:style="{ color: activeColor, fontSize: '24px' }"></div>

data: {   activeColor: 'red', }

Render results

<div style="color:red, font-size: 24px"></div>

It is usually better to bind directly to a style object, which makes the template clearer:

data: {   styleObject: {     color: 'red',     fontSize: '13px'   } }

Object syntax is often used in conjunction with the calculated properties of the returned object.

vue provides application transition effects in many different ways when inserting, updating or removing DOM.

"Well, let's talk about this touch today," said the old man...