[Difference between el and template]

main.js

import Vue from 'vue'new Vue({el: ' #app',data: {name:'chen'}})

index.html

 <div id="app">{{message}}</div>

After normal operation, let's consider a problem:

• If we want to display the data in data in the interface, we must modify index.html
• If we customize the component later, we must also modify index.html to use the component
• But in the future development of the html template, I don't want to manually modify it frequently. Is it possible to do it?

Define the template property:

• In the previous Vue instance, we defined the el attribute to bind with #app in index.html, so that the Vue instance can manage its content later
• Here, we can put the { in the div element{message}}The content is deleted, and only one element with the basic id of div is retained
• But if I still want to show {{message}}, what should I do?

We can define another template attribute, the code is as follows:

 new Vue({el: '#app',template: '
{{message}}
',data: {message: 'Hello!'}})

Repackage and run the program, showing the same result and HTML code structure

So, what is the relationship between el and template template?

• In our previous study, we know that el is used to specify the DOM to be managed by Vue, which can help to parse the instructions, event monitoring and so on.
• If the template is also specified in the Vue instance, the content of the template template will replace the mounted template of the corresponding el.

What's the benefit of doing this?

• After doing this, we don't need to operate index.html again in future development, just write the corresponding tags in the template

However, writing template modules is very troublesome.

• It doesn't matter, the content in the template template will be extracted later.It will be written in three parts: template, script, style, and the structure becomes very clear.