Vue study summary (b)

Brand cases and other parts of the additions and deletions to check the effect of:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="./lib/vue.js"></script>
    <link rel = "stylesheet" href = "./ lib / bootstrap.min.css"  /> 
    <-! you need to use Jquery it? ? ? In fact, unwanted jq Js mainly carried out by a query operation DOM elements, and a process for VUE is exempt from the operation of the DOM, it is not necessary to load -> 
  </ head > 
  < body > 
    < div ID = "App" > 
      < div class = "Panel Panel-Primary" > 
        < div class = "Panel-heading" > 
          < h3 class = "Panel-title" > add brand </ h3 > 
        </ div >
        ="panel-body form-inline">
          <label>
            Id:
            <input type="text" class="form-control" v-model="id" />
          </label>
          <label>
            Name:
            <input
              type="text"
              class="form-control"
              v-model="name"
              @keyup.f2="add"
            />
          </label>

          <!- <->In the VUE use the event binding mechanism, when the designated handler for the element, if the plus () you can pass the parameter
          input
            type="button"
            value="添加"
            class="btn btn-primrary"
            @click="add"
          />
          <label>
            搜索名称关键字：
            <input
              type="text"
              class="form-control"
              v-model="keywords"
              id="search"
              v-focus
              v-color="'red'"
            />
          </label>
        </div>
      </div>

      <table class="table table-bordered table-hover table-striped">
        <thead>
          <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Ctime</th>
            <th>Opertion</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in search(keywords)" :key="item.id">
            <td>{{ item.id }}</td>
            <td v-text="item.name"></td>
            <td>{{ item.ctime  | dateFormat(' ')}}</td>
            <td>
              <a href="" @click.prevent="del(item.id)">删除</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div> 
    < Script > 
      // global filter, formatting time 
      Vue.filter ( " the dateFormat " , function (dateStr, pattern =  "" ) {
         // the given time string, to obtain a particular time 
        var dt =  new new a Date (dateStr); 

        var Y = dt.getFullYear ();
         // ! ES6 is later added padStart new use, auto-completion of a length of 2, with the purpose is to supplement 0 digits into two 0 ! bits 
        var m = (dt.getMonth () +  . 1 .) .toString () padStart ( 2 , " 0 " );
         var d = dt
          .getDate()
          .toString()
          .padStart(2, "0");

        if (pattern.toLowerCase() === "yyyy-mm-dd") {
          return `${y}-${m}-${d}`;
        } else {
          var hh = dt
            .getHours()
            .toString()
            .padStart(2, "0");
          var mm = Dt 
            .getMinutes () 
            .toString () 
            .padStart ( 2 , " 0 " );
           var SS = dt 
            .getSeconds () 
            .toString () 
            .padStart ( 2 , " 0 " ); 

          return `{Y} $ - $ m} { - $ {D}} $ {HH: mm} {$: $ `{SS}; 
        } 
      }); 

      // custom global modifier keys: the new system will automatically generate several keys, this number is the key corresponding to the key! In order to avoid difficult to remember to declare a definition! 
      Vue.config.keyCodes.f2 =  113 ;
       //Obtaining focus - that the point can be taken to a page refresh in the search box 
      Vue.directive ( " Focus " , { 
        the bind: function (EL) {}, 
        inserted The: function (EL) { 
          el.focus (); 
        }, 
        Update : function (EL) {} 
      }); 
      // get the focus into the font color of the specified color! 
      Vue.directive ( " Color " , { 
        the bind: function (EL, Binding) { 
          el.style.color = binding.value; 
        } 
      }); 
      // Create instance Vue 
      var VM = new Vue({
        el: "#app",
        data: {
          id: "",
          name: "",
          keywords: "",
          list: [
            { id: 1, name: "奔驰", ctime: new Date() },
            { id: 2, name: "宝马", ctime: new Date() }
          ]
        },
        methods: {
          add() {
            //Obtained from the data id name, organization objects, a method to add an array 
            var CAR = {ID: the this .id, name: the this .name, the ctime: new new a Date ()};
             the this .list.push (CAR);
             the this .id =  the this .name =  "" ; 
          }, 
          del (id) { 
            // the delete data id - find the index, the method calls the array splice 
            the this .list.some ((Item, I) => {
               IF ( item.id == ID) {
                 the this .list.splice (I, . 1 );
                 //In some methods of the array, if the return true, this would immediately terminate the array subsequent cycles 
                return  to true ; 
              } 
            }); 
            // second method - specialized lookup index 
            // var index = this.list.findIndex (Item => { 
            //      IF (item.id == ID) { 
            //          return to true; 
            //      } 
            // }) 
            // this.list.splice (index,. 1) 
          }, 
          Search (Keywords) { 
            // The key word data search 
            //      var newList = [] 
            //     the this list.forEach (Item => {. 
            //          IF (item.name.indexof (Keywords) = -!. 1) { 
            //              newList.push (Item ) 
            //         } 
            //      }) 
            //      return newList 
            // new method forEach some filter findIndex these are arrays, each array will be on, and traversing, executing the operation 
            return  the this .list.filter (Item => {
               // in ES6 in a string to provide a new method, called String.prototype.includes ( 'string to be included') corresponds to contain 
              IF (item.name.includes (Keywords)) {
                 return Item; 
              } 
            } ); 
          } 
        } 
      }); 
    </ Script > 
  </ body > 
</ HTML >
Vue study summary (b)

Guess you like
