[-4] Vue- introductory notes

 1 <!DOCTYPE HTML>
 2 <html lang="zh">
 3 <head>
 4         <meta charset="utf-8" />
 5         <title>Vue</title>
 6         <script src="../../vue.js"></script>
 7 </head>
 8 <body>
 9     <!-- --------------------------------------Mr丶L----------------------------------------------- -->
10         <!-- todoList 组 件 拆 分-->
11         <div id="root">
12             <div>
13                 <input v-model="inputValue" />
14                 <button @click="add">提交</button>
15                 <UL>
 16                      <Item TODO-V- for = "(Item, index) of List": Key = "index": Content = "Item"> </ TODO-Item>
 . 17                  </ UL>
 18 is              </ div>
 19          </ div>
 20      <-! -------------------------------------- Mr Dian L ----------------------------------------------- - >
 21 is      <Script>
 22 is          // global assembly 
23 is          Vue.component ( 'TODO-Item' , {
 24              the props: [ 'Content'],         // value of the attribute received 
25              Template: '<Li>
item</li>'
26         })
27         // the sub-assembly 
28          var TodoItem = {
 29              The props: [ 'Content' ],
 30              Template: '<Li> {{Content}} </ Li>'
 31 is          }
 32          // ---- proximity principle, performed here the sub-assembly 
33 is          
34 is          new new Vue ({
 35              EL: "the root #" ,
 36              components: {         // registration statement partial assembly 
37 [                  'TODO-Item' : TodoItem
 38 is              },
 39              Data: {
 40                  for inputValue: '' ,
 41 is                 list:[]
42             },
43             methods:{
44                 add:function () {
45                     this.list.push(this.inputValue)    //添加
46                     this.inputValue=''                //置空
47                 }
48             }
49             
50         })
51     </script>
52 
53 </body>
54 </html>
[-4] Vue- introductory notes

Guess you like
