Yesterday’s project code announcement:

<! DOCTYPEhtml>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Student Management System</title>
    <link href=".. /public/css/bootstrap.min.css" rel="stylesheet">
    <link href=".. /public/css/style.css" rel="stylesheet">
    <style>
        .row>div{border: 1px solid # 000; }.modal{display: block;opacity:1;top: 100px; overflow:visible; }.btn{
            margin-right: 10px;
        }
        caption{
            text-align: center;
            color:# 333;
            font-size: 22px;
            line-height: 2em;
        }
        .add-btn{
            margin: 30px auto 0;
        }
        .radio-info{
            text-indent: 10px;   
        }

        .gen-span{
            margin-right: 10px;
            cursor: pointer;
            font-weight: normal;
        }
            </style>
</head>
<body>
    <div id="app">
    <div class="container">
        <table class="table table-striped">
            <caption>Student Management System V1.0 - Show students</caption>
            <tr>
                <th>The name</th>
                <th>age</th>
                <th>gender</th>
                <th>operation</th>
            </tr>
            <tr v-for='item,key in dtArr'>
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td>{{item.gender}}</td>
                <td><button class="btn btn-danger btn-xs" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo" @click='del(item.name,key)'>delete</button></td>
            </tr>
            
        </table>
    


        <hr>
        <hr>
        <hr>
        <form action="">
          <table class="table table-striped">
              <caption>Add Student information</caption>
              <tr>
                  <td>project</td>
                  <td>information</td>
              </tr>
              <tr>
                  <td>The name</td>
                  <td>
                      <input type="text" class="form-control" id="stuname" placeholder="Name" name="stuname" v-model='nameTxt'>
                  </td>  
              </tr>
              <tr>
                  <td>age</td>
                  <td>
                      <input type="text" class="form-control" id="stuage" placeholder="Age" name="stuage" v-model='ageTxt'>
                  </td>  
              </tr>
              <tr>
                  <td>gender</td>
                  <td>
                      <label class="gen-span"><input type="radio" class="radio-info" name="gender" checked value="Male" v-model='genderTxt'> 男</label>
                      <label class="gen-span"><input type="radio" class="radio-info" name="gender" value="Female" v-model='genderTxt'> 女</label>
                      <label class="gen-span"><input type="radio" class="radio-info" name="gender" value="Confidential" v-model='genderTxt'>A secret</label>
                  </td>
              </tr>
          </table>
          <div style="text-align: center;"><input type="button" class="btn btn-info btn-sm add-btn" value="Definite increase" @click='add()'/></div>
          </form>
    </div>
    <! Delete button confirmation box -->
    <div class="modal fade" id="exampleModal" tabindex="1" role="dialog" aria-labelledby="exampleModalLabel" v-show='yinc'>
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close" @click="yinc=false"><span aria-hidden="true">x</span></button>
              <h4 class="modal-title" id="exampleModalLabel">Confirmation box</h4>
            </div>
            <div class="modal-body">
              <form>
                 <div class="form-group">
                  <label for="message-text" class="control-label">Sure to delete<strong class="control-label-name" style="color:blue">{{thisName}}</strong>?</label>
                </div>
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal" @click="yinc=false">return</button>
              <a href="# # #" class="delete-a"><button type="button" class="btn btn-primary" @click='yesDel()'>confirm</button></a>
            </div>
          </div>
        </div>
      </div>
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
            // Existing data:
            / * arr: [{name: "xiao Ming, age: 12, gender:" male "}, {name: "little red", the age: 10, gender: "female"}, {name: }] */
           new Vue({
               el:'#app'.data: {dtArr:[
                        { name: 'Ming'.age:12.gender:"Male" },
                        { name: 'little red'.age:10.gender:"Female" },
                        { name: 'xiao gang'.age:16.gender:"Confidential"}].yinc:false.nameTxt:' '.ageTxt:' '.genderTxt:' '.thisName:'xxx'.index:' '
               },
               methods: {
                   add(){
                       if(!this.nameTxt || !this.ageTxt){
                            alert("Name and age cannot be blank.")
                            return
                        }
                       this.dtArr.push({ name:this.nameTxt, age:this.ageTxt, gender:this.genderTxt })
                       this.nameTxt=' ';
                       this.ageTxt=' ';
                   },
                   del(name,key){
                       this.yinc=true
                       this.thisName=name
                       this.index=key
                   },
                   yesDel(){
                    this.dtArr.splice(this.index,1)
                    this.yinc=false}}})</script>
</body>
</html>
Copy the code

1.1. Local filter of Vue

<div id='app'>
        <! - filter format: {{data parameter name | filter name}} - >The total price is: {{num | RmbFormat}}</div>
    <script>
        new Vue({
            el:'#app'.data: {num:200
            },
            // Define the filter
            filters: {// RmbFormat Filter name
                / / a value is a parameter, accept | the previous data
                RmbFormat(value){
                    return value + "Yuan"}}})</script>
Copy the code

1.2. Global filters for Vue

<div id='app'>
        <! - filter format: {{data parameter name | filter name}} - >The total price is: {{num | RmbFormat}}</div>
    <div id='app2'>
        <! - filter format: {{data parameter name | filter name}} - >The total price is: {{num | RmbFormat}}</div>
    <script>
		// When there are multiple selectors, we can promote the selectors to global variables
        //.filter(" filter name ", desired function)
        // Improves code reusability and readability
        Vue.filter("RmbFormat".value= >{
                    return value + "Yuan"
                })

        new Vue({
            el:'#app'.data: {num:200}}),new Vue({
            el:'#app2'.data: {num:500}})</script>
Copy the code

1.3. Use of filters

<div id='app'>Time is: {{times | dateFormat}}</div>
    <script>
        new Vue({
            el:'#app'.data: {times:new Date().getTime()		// Get a timestamp
            },
            filters: {dateFormat(value){
                    let dateObj = new Date(value)		// Convert it to a time object
                    let year = dateObj.getFullYear();
                    let mouth = dateObj.getMonth()+1;
                    let date = dateObj.getDate();
                    let min = dateObj.getMinutes();
                    let hours = dateObj.getHours();
                    let seconds = dateObj.getSeconds();

                    return `${year}years${mouth}month${date}day${hours}:${min}:${seconds}`}}})</script>
Copy the code

2. Local storage

2.1. LocalStorage Permanent storage

// Add data; The value of setItem is string data
localStorage.setItem('name'.'Joe');// Get data
localStorage.getItem('name'); / / zhang SAN
/ / to empty
localStorage.clear();
Copy the code

Use the console to see if there is any storage to.

Matters needing attention:

  1. It will not be deleted automatically unless it is deleted voluntarily

  2. The average browser store size is 5M

    5M = 1024 * 5kb

SessionStorage temporary sessionStorage

// Add data; The value of setItem is string data
sessionStorage.setItem('name'.'Joe');// Get data
sessionStorage.getItem('name'); / / zhang SAN
/ / to empty
sessionStorage.clear();
Copy the code

Matters needing attention:

  1. Closing the browser automatically clears the data
  2. The average browser store size is 5M
  3. The format is similar to localStorage, but the essence is different.

3. Vue instruction

Vue framework features: bidirectional data binding and componentized development

3.1 Principle of in-depth bidirectional data binding (key points)

One of the most unique features of Vue is its non-invasive responsive system. Data models are just plain old JavaScript objects. And when you modify them, the view is updated. How does it work in Vue? Object. DefineProperty is used to convert all properties in the Vue into getters/setters. Object.defineproperty is a non-shim feature in ES5, which is why Vue does not support IE8 and earlier browsers.

Object.defineproperty implements Object hijacking

Vue two-way data binding principle:

Data hijacking with Object.defineProperty() is combined with the publish-subscriber pattern to achieve two-way data binding

Grammar:

Object.defineProperty(obj, prop, desc)

  1. objThe current object for which attributes need to be defined
  2. propThe name of the property you currently want to define
  3. descAttribute descriptor

Data attributes:

Define attributes for objects via Object.defineProperty(). There are two types of attributes: data descriptors and access descriptors.

  1. valueRepresents its default value
  2. writableThe true flag can be modified, and the false flag cannot be modified (default: false)
  3. configurableDescribe whether the property is configured and can be deleted, which can be considered as the master switch default value false (not deleted)
  4. enumerableDescribes whether the property is present in a traversal for in or object.keys () default false(traversal is not possible)
let obj = {};
Object.defineProperty(obj, 'name', {
    value: 'Joe'
})
obj.name = 'bill'
console.log(obj.name) / / zhang SAN

Copy the code
let obj = {};
Object.defineProperty(obj, 'name', {
    value: 'Joe'.writable: true
})
obj.name = 'bill'
console.log(obj.name)
Copy the code
let obj = {};
  Object.defineProperty(obj, 'name', {
    value: 'Joe'.writable: true.configurable: true.enumerable: true
  })
  obj.name = 'bill'
  // delete obj.name
  console.log(obj.name) / / li si
  console.log(Object.keys(obj)) // ['name']
Copy the code

3.2 Basic principle of bidirectional binding

<input type="text" id="oipt">
    <p id="op"></p>

    <script>
        let obj = {}
        let val = "Silent value"

        Object.defineProperty(obj,"iptVal", {get(){
                return val
            },
            set(newVal){
                oipt.value = newVal
                op.innerHTML = newVal
            }
        })
        oipt.value = obj.iptVal
        op.innerHTML = obj.iptVal

        oipt.addEventListener("keyup".function(e){
            obj.iptVal = e.target.value
        })
    </script>
Copy the code