background

As I do back-end background, front-end basic knowledge is not quite remember, see unfamiliar will have some questions. I think you will have the same question as me when you are a beginner. It will certainly help you to learn Vue3.0 series by following my lead, because I will solve all kinds of problems I encounter from your perspective.

The body of the

  • My learning habit is to read the official document first. The following figure not only points out the definition, but also gives a small example. The first one is V-model, and the second one is V-bind.

  • There is no separate comparison between the two in the official documents. Maybe the author thinks there is nothing to say, but I think there may be questions without foundation, and the two are often confused
  • I summarize the difference between the two in one sentence. V-model is the two-way binding of value outside the tag, while V-bind is the one-way binding of attributes inside the tag. Meanwhile, both support dynamic changes of data. So let me sum it up like this and it should make a lot of sense to you.

Introduction to v-Model

  • First, explain the concept of bidirectional binding: it is to modify the value of a variable, the tag value automatically changes; In turn, if you change the value of the tag, the value of the variable is updated, which is called bidirectional binding.
  • It only works in the form component, but not outside of it. This should also be taken seriously, so don’t assume that everything works. Here’s an example of an Element Plus form component for your reference.

  • :model stands for V-bind :model. Don’t think of it as v-model

Except, of course, for reference types. If a child component changes the reference type data, the parent component changes too. Reference types are described separately later.

An introduction to using V-bind data

  • Single binding: the value of a variable is changed, and the tag attribute value is automatically updated
  • V-bind can be abbreviated, and I recommend using abbreviations, which is kind of neat, because that’s how everybody plays it, so you should play it, too.

  • Fixed tags: It is very important that V-bind only bind existing tag attributes, and not write non-existing tags. If you do not realize this, problems can be difficult to detect

  • The title is the attribute of the SPAN tag, and the bound message is a variable whose value is “page load with 2021-3-13 16:39”. Vue defines variables in data. Variables are named directly inside the tag, and {is used outside the tag.

    {message}} instead!

  • Custom tags: V-bind modifies custom tags and cannot go beyond them.

  • The first parameter to componet is “todo-item”, the second parameter is {}, the props is to define the tag properties, and the template is to define the display format for the tag. In this example, a
  • tag is used for componet.

    will eventually be rendered as
  • .

conclusion

  • V – model, v – bind, v – bind: model the most easy to mix the three is the scope and scene, understand the basic writing complex logic behind it is good to do more.
  • The part I’ve highlighted in red must be paid special attention to, if you don’t pay attention to the next pothole will be you.