Shallow deep into the Vue: Data Binding

Previous data we use simple rendering, so if we want to render dynamic tags classcan operate so what?

Why bind

Simple data rendering, including expressions, functions included. In fact, just in the label rendering, if the following conditions are met how to do it:

The need for some kind of "show operation" inside the label.
Flow needs to be controlled to control various rendering at different data.
We need to render an array.

This time it is a simple render can not solve the problem, how do?

Come out of the data binding it!

What is binding

Before looking at what the binding is to first find out what is the instruction :

In "vue", the command is with v-special attributes prefix, used to modify the tag (custom components here also are grouped together for the label, because it uses the same methods and native label), constraints, and its value is the same template syntax , support for regular expressions, variables.

Instruction to monitor changes in their values, and to change it to a reaction in which the DOM

Finally, the last chapter we look at an example:

<h1>{{ if(msg == '1') return time }}</h1>

Here we want to use flow control to control whether to display the time, but unfortunately, does not support js template syntax grammar.

But "vue" in such an instruction to make up the template syntax is not supported regret js syntax:

v-if

Let's look at the revised code:

<h1 v-if="msg=='1'">{{ formatTime(time) }}</h1>

First msgvalue of the assignment is 1:

And then modify msgthe value of a look:

What it did not show, because our msgvalues are not 1.

v-if Instruction is the perfect solution to the second problem we originally put forward:

Flow needs to be controlled to control various rendering at different data .

Let us return to the beginning of the topic.

This is the instruction, and instruction in the native official, there is a directive is designed to bind tag attributes:

v-bind

Naming the very image, bindliteral translation is bound to mean.

How to bind

Here the use of divlabels show how v-bindthe use, by the same token on another label:

<div v-bind:属性名="表达式"></div>

We take the first question about the practice, for example:

The need for some kind of "show operation" inside the label .

Here we have based on isDarkthe value of the background color to determine the display time of it

When the isDarktime is true, the background color to black, white text into.
When the isDarktime is false, the background color turns white text to black.

First define isDark:

  data() {
    return {
      msg: 'hello vue',
      time: new Date(),
      isDark: False
    }
  }

Then add about style under two conditions:

<style>
  .dark{
    background-color: black;
    color: white;
  }

  .light{
    background-color: white;
    color: black;
  }
</style>

Next to h1tag a binding instruction:

<h1 v-bind:class="isDark ? 'dark' : 'light'">{{ formatTime(time) }}</h1>

Results are as follows:

We will isDarkchange the value to true:

Perfect to achieve the effect of the demand.

This is the charm of instructions.

last question

Two instructions to solve the above-mentioned two we originally put forward three questions, then the remaining one do?

We need to render an array .

When we need to render the table will encounter this scenario, how to render an array of it? Template syntax and does not support such a complex operation.

Make a last instruction in this chapter:

v-for

Ah, is still very image. js which also has for Well ~

Take a look at what it is doing:

v-for It will be for each item (list bound) data sources, generate a similar label.

Then take a look at how to use a label with instructions to do here, similar to other labels:

<!-- 写法1 -->

<a v-for="别名 in 数据源" v-bind:key="唯一标识">{{ 别名.字段 }}</a>

<!-- 写法2 -->

<a v-for="(下标, 别名) in 数据源" v-bind:key="唯一标识">{{ 别名.字段 }}</a>

Because the new version vuerequires v-forinstruction to render the label must bind a key used to uniquely identify , in most cases we can directly use the index to be identified

We continue to use the code before the presentation, first define an array of url:

  data() {
    return {
      msg: 'hello vue',
      time: new Date(),
      isDark: true,
      urlList: [
        {
          text: '链接1',
          url: '#1'
        },

        {
          text: '链接2',
          url: '#2'
        },

        {
          text: '链接3',
          url: '#3'
        }
      ]
    }
  }

Then render a wave of schedule:

<a v-for="(item, index) in urlList" v-bind:key="index" v-bind:href="item.url">{{item.text}}</a>

Results are as follows:

Rendering result is three alabels, very correct -

Perfect solution to the last question.

What are some instructions it?

There are other official instructions, a mention here:

v-on

v-on Command can bind an event, such as a button click event.

Switching context as in the example above, the event may be modified by clicking a button isDarkvalue, thereby controlling to change the background. Every time you do not need to manually modify the next isDarkvalue of the.

This practice is left not stop the curiosity you come ~