The role of components: in order to make the code more clear and tidy, so that the functions do not affect each other
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <script src="../vue2.4.4.js"></script>
9 </head>
10
11 <body>
12 <!-- Define a vue management block, (View in MVVM) -->
13 <div id="app">
14 <!-- <login></login> -->
15
16 <template id="tlogin">
17 <div>
18 Username: <input type="text">
19 密码： <input type="text">
20 </div>
21 </template>
22
23 <!--<script type="x-template" id="tlogin">
24 <div>
25 Username: <input type="text">
26 密a码： <input type="text">
27 </div>
28 </script>-->
29 </div>
30
31
32 </body>
33
34 <script>
35 //public component
36 //Note:
37 // 1. All template code must have a root tag
38 // 2. If the name of the component is capitalized
39 // a. All letters are lowercase
40 // b. If the first letter and inside if also have upper case change the upper case to lower case and add a "-" before the letter
41 //UserName -> user-name
42
43 // 1.0 implements the definition and composition of components in two steps
44 // Definition:
45 // View.extend({
46 // template: "component's html code"
47 // });
48 /*var login = Vue.extend({
49 template:"<h1>I am login</h1>"
50 });
51 // Register:
52 // Parameter 1: The name of the current component
53 // Parameter two: component object
54 //Vue.component("login",login); // Register the component with Vue
55 Vue.component("login",login);
56 */
57
58 //2.0 component definition and composition in one step
59 // When using a component, be sure to add a root tag to the component or a compilation error will be reported
60 /*Vue.component("login",{
61 template:"<h1>login</h1>"
62 });*/
63
64 // The above two are troublesome to write template
65 //The use of 3.0 components three (!!! Commonly used)
66 Vue.component("login",{
67 template:"#tlogin"
68 });
69
70 //The use of 4.0 components four (just understand)
71 // Vue.component("login",{
72 // template:"#tlogin"
73 // });
74
75
76 // Instantiate vue object (View Model in MVVM)
77 new View({
78 // The block controlled by vm is the div whose id is app, and all vue instructions in this div can be parsed by vm
79 el: '# app',
80 data:{
81 // Data (Model in MVVM)
82 },
83 methods:{
84
85 }
86 })
87 </script>
88 </html>