Day3.18 components Case - comment function

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <script src="../lib/js/vue.js"></script>
  7     <link rel="stylesheet" href="../lib/css/bootstrap.min.css">
  8 </head>
  9 <body>
 10 <div id="app">
 11 <!--    子组件拿到 父组件中的 loadComments方法-->
 12     <comment-box @func="loadComments"></comment-box>
 13     <ul class="list-group">
 14         <li class="list-group-item" v-for="item in list" :key="item.id">
 15             <span class="badge">span</Reviewer: item.user {{}}>
 16             {{ item.content}}
 17         </li>
 18     </ul>
 19 </div>
 20 <template id="tem1">
 21     <div>
 22         <div class="form-group">
 23             <label>评论人：</label>
 24             <input type="text" class="form-control" v-model="user">
 25         </div>
 26         <div class="form-group">
 27             <label>评论内容：</label>
 28             <textarea class="form-control" v-model="content"></textarea>
 29         </div>
 30         <div class="form-group">
 31             <label>评论内容：</label>
 32             <input type="button"value = "comment" class = "BTN-Primary" @click = "Submit" > 
33 is          </ div > 
34 is      </ div > 
35  </ Template > 
36  < Script > 
37 [  
38 is      const commentBox = {
 39          Template: ' # TEMl ' ,
 40          // data assembly 
41 is          data () {
 42 is              return {
 43 is                  User: ' ' ,
 44 is                 Content: '' 
45              }
 46 is          },
 47          Methods: {
 48              Submit () { // Method Comment 
49                  / * *
 50                   * comment analysis business logic
 51                   * Comments 1. Where data is stored - - - storage to localStorage in
 52                   * 2. first organized a recent review of data objects
 53                   * 3. save the second step, the resulting object to the comments in localStorage
 54                   * 3.1 localStorage only supports the storage of string data, first call JSON.stringify
 55                   * 3.2 latest comments before saving data, must first obtain comment from the previous localStorage data (String)
 56                  * Converted to an array of objects, then, the latest comments push to the array
 57                   * 3.3 localStorage if acquired in the comment string is empty does not exist, you can return to a "[]",
 58                   * c to allow conversion
 59                   * 3.4 latest comments list data, call again JSON.stringify into an array of strings, and then call localStorage.setItem ()
 60                   * / 
61                  var the comment = {the above mentioned id: Date.now (), the User: the this .user, Content: the this .content}
 62 is                  // Get all the comments from localStorage 
63 is                  var List = the JSON.parse (localStorage.getItem ( ' comments ' )||  ' [] ' );
 64-  
65                  list.unshift (the Comment);
 66                  // re-save the latest data review 
67                  localStorage.setItem ( ' Comments ' , JSON.stringify (List));
 68  
69                  the this .user =  the this .comment =  '' ;
 70                  // triggered func (loadComments method call parent components) 
71 is                  the this $ EMIT. ( ' FUNC ' )
 72  
73 is  
74              }
 75          }
 76     };
 77      const VM =  new new Vue ({
 78          EL: ' #app ' ,
 79          Data: {
 80              List: [
 81                  {ID: Date.now (), User: ' Bai ' , Content: ' I'm Born with ' },
 82                  {ID: Date.now (), User: ' Fu ' , Content: ' I'm born with! ' },
 83                  {ID: Date.now (), User: ' Wang Wei ' , Content: ' I'm born with !!' }
 84              ]
 85          },
 86          beforeCreate () {
 87          //     not call loadComments method here, in the implementation of this hook function, data, and methods have not been initialized 
88          },
 89          Created () {
 90              // here the method calls loadComments 
91 is              the this .loadComments ()
 92          },
 93          methods: {
 94              loadComments () { // definition of a loadComments method, from the local localStorage, load a list of comments 
95                  var list = the JSON.parse (localStorage.getItem ( ' comments') || '[]');
 96                 this.list = list
 97             }
 98         },
 99         components:{
100             // 子组件
101             commentBox:commentBox
102         }
103     })
104 </script>
105 </body>
106 </html>
Day3.18 components Case - comment function

Guess you like
