[Organize and share] Several Vue commands to help you improve efficiency!

This article continues to teach you Vue, and organizes and shares a few Vue instructions to help you improve efficiency. I hope it will be helpful to everyone!

Many students who use Vue tend to ignore the instructions most easily. Because here we consider that many beginners have not even started to come into contact with Vue, before introducing v-clos Let’s first write a small demo using the well-known v-model

v-model

I believe everyone is familiar with v-model. To put it simply, it is Two-way data binding created on form controls and components

First we build a small Vue environment and introduce Vue.js into an html page

Here is a little chestnut for everyone:

  <div>
    <input><br>
    这里是文本框输入的值——{{message}}
  </div><script>
  var app = new Vue({
    el: &#39;#app&#39;,
    data: {
      message: &#39;你好，几何心凉!&#39;,
    },
  })</script>

The result of running a very simple example is beyond doubt! [Related recommendations: vuejs video tutorial, web front-end development]

Now we can see the two-way relationship more directly

1. We change the data in the model in the console

We can find that we change the value of the message in the model , the value in the View changes accordingly

2. We check the changes in the model by changing the value in the View in the text box

We find that when When we change the value in the View through the text box, the value in our Model also changes accordingly.

Summary
Through the above example, have you gained a closer understanding of Vue's two-way binding, because we can only use form elements to perform View data Of course, our other form elements can also be changed, so we won’t list them one by one;

v-model modifier

1. .lazy
We can see in the above animation that the text box bound by v-model will be updated to the Model data as long as the value of the text box changes. Many times We may implement a certain function continuously but it will affect our performance, so we use .lazymodifier
which will help us synchronize the value of the text box when our text box loses focus. Give Model

  <div>
   <h3 id="我是测试-message">我是测试——{{message}}</h3>
<input>
  </div><script>
  var app = new Vue({
    el: &#39;#app&#39;,
    data: {
      message: &#39;&#39;,
    },
  })</script>

to see the effect

2..number
We still take it Take the text box as an example. Many times we need some values ​​for users to fill in, and this value may be a number that we use for calculations. At this time, many students think of many ways, such as conversion, input and judgment, etc., but in fact v-model There is a modifier in that can help us fulfill this requirement.

Let’s take a look at it through a small chestnut. First, we want to enter a value in each of the two text boxes and we can sum it up.

You can take a look at the results

We can see that the result is not what we want. It is used as a splicing rather than a summation. , then let’s add the .number modifier and give it a try

  <div>
   <h3 id="我是求和-num-num">我是求和——{{num1+num2}}</h3>
<input><input>
  </div><script>
  var app = new Vue({
    el: &#39;#app&#39;,
    data: {
      message: &#39;&#39;,
      num1: &#39;&#39;,
      num2: &#39;&#39;,

    },
  })</script>

Let’s take a look at the result

3..trim
This one should be familiar to everyone and is relatively commonly used. It removes spaces, but it will only remove the spaces at both ends of the text box, not the middle.

  <div>
   <h3 id="我是测试-message">我是测试——{{message}}</h3>
<input>
  </div><script>
  var app = new Vue({
    el: &#39;#app&#39;,
    data: {
      message: &#39;&#39;,

    },
  })</script>

Check out the effect

Little common sense:

In fact, the v-model bound to the text box here is just syntax sugar That's it, using the value attribute and input event to complete the two-way binding. When the value of the text box changes, we trigger the input event to change the value we bound. At the same time, the value of our text box is also linked to the message

v-cloak

What exactly does v-cloak do? First let’s look at the following code

  <div>
   <h3 id="我是测试-message">我是测试——{{message}}</h3>
  </div><script>
  var app = new Vue({
    el: &#39;#app&#39;,
    data: {
      message: &#39;你好几何心凉&#39;,
    },
  })</script>

Then we find that When the page is rendered, the following moment will appear

flash by immediately

This phenomenon occurs during our actual development process, especially when our network status is not very good or the back-end interface responds slowly, so we use our v-cloak

In fact, its principle is display:none. You should understand it. That is, when the variables bound in our data have values, the Dom element is hidden, so the above problems will not occur.

(Learning video sharing: vuejs introductory tutorial, Basic programming video)

The above is the detailed content of [Organize and share] Several Vue commands to help you improve efficiency!. For more information, please follow other related articles on the PHP Chinese website!