[-4] Vue- notes d'introduction

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      <! - ------------------------- ------------- M.丶L ---------------------------------- ------------- ->
 10          <! - todolist组件拆分->
 11          <div id = "root">
 12              <div>
 13                  <input v-modèle = » InputValue »
/> 14                  <bouton @ click = "ajouter">提交</ button>
 15                 <UL>
 16                      <article TODO-V- pour = "(Point, index) de la liste": Key = "index": contenu = "article"> </ TODO-article>
 . 17                  </ UL>
 18 est              </ div>
 19          </ div>
 20      <! - -------------------------------------- M. Dian L ----------------------------------------------- - >
 21 est      <script>
 22 est          // global Assembly 
23 est          Vue.component ( 'TODO-article' , {
 24              les accessoires: [ 'contenu'],         // valeur de l'attribut reçu 
25              modèle: « <li>
élément </ li> » 26          })
 27         // le sous-ensemble 
28          var TodoItem = {
 29              Les accessoires: [ 'Contenu' ],
 30              Modèle: '<li> {{contenu}} </ li>'
 31 est          }
 32          // ---- principe de proximité, réalisé ici le sous-ensemble 
33 est          
34 est          nouveau nouveau Vue ({
 35              EL: "la racine #" ,
 36              composants: {         // déclaration d'enregistrement assemblage partiel 
37 [                  'TODO-Item' : TodoItem
 38 est              },
 39              données: {
 40                  pour InputValue: '' ,
 41 est                 Liste: []
 42              },
 43              méthodes: {
 44                  add: fonction () {
 45                      ce .list.push ( ce .inputValue)     // 添加
46                      ce .inputValue = ''                 // 置空
47                  }
 48              }
 49              
50          } )
 51      </ script>
 52  
53 </ body>
 54 </ html>
[-4] Vue- notes d'introduction

Je suppose que tu aimes
