What is the meaning of the words template:' < App/ > 'and components: {App} in vue?

Where is the App variable defined in

components: {App}? isn"t there only one App.vue file name? No App variable found! In vue"s todo-list example, the b of components is written like this: components: {"signature": variable name}, such as components: {"todo-list":TodoList}, where components: {App}, there is neither label nor variable, how do you understand it?
is also written in template: template:"< App/ >". What should be defined in template is a tag. I would like to ask, where is the < App > tag? There doesn"t seem to be this label!

Vue.js
Jul.29,2021
  1. the components: {App} you mentioned should be in the main.js entry file, so the App should be exported from the App.vue component through export default, and then the App variable should be imported through import in main.js
    2. .
  2. components: {App} is written as ES6. In an object, if the key-value pair is the same, only one can be written
    3. .
  3. template:'< App/ > 'also involves an abbreviated processing. If you don't add attributes or instructions to the component, you can write it in the form of a tag. < App/ > is actually' < App > < App/ >'
    4. . Where is the
  4. < App > tag? < App > this means that the APP component template:'< App/ > 'represents the template that uses the APP component

the above is for personal understanding. If there is anything wrong, you are welcome to beat the bricks

.

vue template syntax goes like this: 

html:
<div id='app'>
    <!-- ! -->
    <test></test>
</div>

js:
new Vue({
    components: {
        //  test 
        test: {
            template: '<div class="test"> test </div>'
        }
    }
});

the above should be understood at a glance. What you don't understand is the code that uses ES6+ (including) syntax: 

// 
let App = {
    template: '<div></div>'
}:

new Vue({
    // template  html
    //  App 
    // 
    // <App />  <App></App>
    template: '<App />'
    components: {
        // es6 , 
        App
    }
});

ES6+ syntax-Ruan Yifeng

@ jzsn Thank you for answering! With regard to the fourth point of your answer, I still don't understand whether the < App > tag is the content of the template in the App component (App.vue).

Previous: An error report about vue

Next: Summernote editor grabs youtube ID to editor and customizes it into the box?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu