Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Written in the beginning

This is an essay! The short! The short! Get to know it. Soon, you’ll get better. (✪ ✪ omega)

In the use of HTML tags, most of the use of tags is free, you can be free to use both tesselation, but there are several tags need our attention, such as

    , < OL > and < SELECT > these several tags, the internal tag can appear is strictly limited.
,

For example,

    tags should have

  • tags inside. But what happens if you force the < H1 > tag inside them?
tags should have

, < TBody >, and

tags inside, and
 
<! DOCTYPE HTML > < HTML > <head> <title>is</title> </head> <body> <table> <h1> <h1> I am not Li </h1> </ul> </body> </ HTML >Copy the code

Looking at the figure above, we can see that the h1 tag written directly under the

tag is actually moved outside the
tag, while the < H1 > tag written directly under the < UL > tag is not moved, but also not recognized by the < UL > itself, so it is ignored.

(… Is this it? Ok, I know, I will be careful not to write this in the future.

A pit

It should be normal for most people not to write this, but for those of you who use Vue, I’m guessing that someone might have stumbled on it. Let’s take a look at the following two pieces of pseudocode.

<table>
  <my-row v-for="(item, index) in list" :key="index"></my-row>
</table>
// or
<ul>
  <my-li v-for="(item, index) in list" :key="index"></my-li>
</ul>
Copy the code

Is it very, very familiar? Are they wrong? No problem? Half and half!

If you are in an engineered Vue project, i.e. written to a.vue file, there is no problem, Vue will handle it for you at compile time.

However, if you are a CDN project, then you should pay attention, such as:

<! DOCTYPE html> <html lang="en"> <head> <title>is</title> <script SRC = "https://cdn.bootcdn.net/ajax/libs/vue/2.5.4/vue.js" > < / script > < / head > < body > < div id = "app" > < table > < my - row > "< / my - row > < / table > < / div > < script > Vue.com ponent (' my - row, {template: ` < h1 > < / h1 > orange someone `}) new Vue ({el: "#app" }) </script> </body> </html>Copy the code

Then you will still have the above problem, this problem may be relatively easy to encounter beginners, Vue official website also slightly mentioned. Click here

Is property to fill in the hole

Vue official website has mentioned this problem, of course, there is a corresponding solution, the answer is the is attribute. Those of you who are familiar with dynamic components are probably familiar with them. The IS attribute is often used in conjunction with the built-in Component component to achieve the effect of dynamic components.

But it can also be used to solve this problem. Let’s change the above code slightly:

<! DOCTYPE HTML > < HTML > < head > < title > is < / title > < script SRC = "https://cdn.bootcdn.net/ajax/libs/vue/2.5.4/vue.js" > < / script >  </head> <body> <div id="app"> <table> <tr is="my-row"></tr> </table> </div> <script> Vue.component('my-row', {template: ` < h1 > < / h1 > orange someone `}) new Vue ({el: "# app"}) < / script > < / body > < / HTML >Copy the code

So the pit is filled in. It’s a very small problem, but it’s worth recording, and that’s it. End of chapter. (◕ ˇ ∀ ˇ ◕)







At this point, this article is finished, sa Hua Sa hua.

I hope this article has been helpful to you. If you have any questions, I am looking forward to your comments. Same old, likes + comments = you know it, favorites = you know it.