Principle of VUE data monitoring

1. vue monitors all levels of data in the data

2. How do I detect data in an object?

    adopt setter Implement monitoring, and in new Vue Pass in the data to be detected
   
    (1),Attributes appended to the object, vue Do not respond by default
   
    (2),To respond to the added attributes, use the following API: 
   
    		Vue.set(target,propertyName/index, value) or
   
    		this.$set(target,propertyName/index, value)
   

3. How do I detect data in an array?

   By wrapping arrays to update elements, you essentially do two things:

   (1) Call the native method to update the array.

   (2) Re-parse the template to update the page.

4. To modify an element in an array with vue, you must use the following method:

   1. Use these API s: push(), pop(), shift(), unshift(), splice(), sort(), reverse()

   2. Vue.set() or this.$set()

   Special note: Vue.set() and this.$set() cannot add attributes to VM (this) or vm's root data object (in this case, vm.data or vm._data)

<div id="root">
  <h2>Student Information</h2>
  <button @click="student.age++">Age+1</button><br/>
  <button @click="addSex">Add gender attribute, default value: male (test whether to add responsively)</button><br/>
  <button @click="student.sex = 'Unknown'">Modify Gender (Test for Responsive Modification)</button><br/>
  <button @click="addFriend">Add a friend at the top of the list</button><br/>
  <button @click="updateFirstFriendName">Change the name of your first friend to: Zhang San</button><br/>
  <button @click="addHobby">Add a hobby</button><br/>
  <button @click="updateHobby">Modify your first hobby to: Driving</button><br/>
  <button @click="removeHobby">Filter out one hobby: sleeping</button><br/>
  
  <h2>Student Name:{{student.name}}</h2>
  <h2>Student age:{{student.age}}</h2>
  <h2 v-show="student.sex">Student gender:{{student.sex}}</h2>
  <h2>Hobbies:</h2>
  <ul>
    <li v-for="(h,index) in student.hobby" :key="index">
      {{h}}
    </li>
  </ul>
  
  <h2>Friends:</h2>
  <ul>
    <li v-for="(f,index) in student.friends" :key="index">
      {{f.name}}--{{f.age}}
    </li>
  </ul>
</div>


data:{
  student:{
    name:'tom',
    age:18,
    hobby:['Having dinner','Sleep','Bean Bean'],
    friends:[ 
    {id:'001',name:'Bob',age:10,sex:'male'},
    {id:'002',name:'Alice',age:11,,sex:'female'},
    {id:'003',name:'Jame',age:12,sex:'male'}]
   
  },
  
},
methods:{
  addSex(){
    //Vue.set(this.student,'sex','man')//First
    this.$set(this.student,'sex','male') // Second
  },
  addFriend(){
    this.student.friends.unshift({name:'jack',age:70})
  },
  updateFirstFriendName(){
     this.student.friends[0].name = 'Zhang San'
     this.student.friends[0].age = 15
  },
  addHobby(){
    this.student.hobby.push('Study')
  },
  updateHobby(){
    //this.student.hobby.splice(0,1,'drive')
    //Vue.set(this.student.hobby,0,'drive')
    this.$set(this.student.hobby,0,'Drive a car')
  },
  removeHobby(){
    this.student.hobby = this.student.hobby.filter((h)=>{
      return h !== 'Sleep'
    })
  }
}

Collect form data

1. If: <input type="text"/>, the v-model collects the value, and the user inputs the value.

2. If: <input type="radio"/>, the v-model collects the value and configures the value for the label.

3. If: <input type="checkbox"/>,

    1,No Configuration input Of value Attributes, then what's collected is checked(Check or Unchecked, Boolean)
   
    2,To configure input Of value Attributes:
   
    		(1),v-model Initial values are non-arrays, then what is collected is checked(Check or Unchecked, Boolean)
   
    		(2),v-model The initial value is an array, so what you collect is an array value Composed Array
   

Note: Three modifiers for v-mdel:

• lazy: lose focus and collect again
• Number: The input string is converted to a valid number
• trim: enter the first and last spaces and filter them out

Filter

• Definition: Specific formatting of the data to be displayed before it is displayed (for some simple logical processing)

• Grammar:

    1,Registration filter: Vue.filter(name,callback) or new Vue{filters: {}}
  
    2,Using filters:{{ xxx | Filter Name}} perhaps v-bind: attribute = "xxx | Filter Name"
  

• Remarks:

    1,Filters can also receive additional parameters, multiple filters can also be concatenated, and the data filtered by the concatenated filter is the previous filter return Data
  
    2,Instead of changing the original data, a new corresponding data is generated
  

<div id="root">
<!-- The filter takes the data you need to filter as the first parameter by default, does not require you to pass it manually, you pass it manually as the second parameter-->
  <!-- 1,Using filters in interpolation syntax  -->
  <h2>Filter time:{{time | timeFormter('YYYY-MM-DD') | mySlice}}</h2>
  
   <!-- 2,stay v-bind Use filters in one-way bound data  -->
    <h2 :attr="name | mySlice">v-bind One-way Binding Properties</h2>
</div>

// Global filters, which work on both global components and Vue instances
Vue.filter('mySlice',function(value){
  return value.slice(0,4)
})

new Vue({
  data:{
    time:1621561377603, // time stamp
  },
  // Local filter, works only on the current vue instance
  filters:{
    timeFromter(value,str="YYYY-MM-DD HH:mm:ss"){
      return dayjs(value).format(str)
    }
  }
})

vue directive

• v-bind: A one-way binding parsing expression, which can be abbreviated as: xxx

• v-model: two-way data binding

• v-for: traverse arrays, objects, strings

• v-on: Bind event listeners, which can be abbreviated as @event name

• v-if: conditional rendering (dynamic control whether a node exists)

• v-else: conditional rendering (dynamic control whether a node exists)

• v-show: conditional rendering (dynamic control whether the node is displayed)

• v-text:

    1,Role: Render text content to its node
  
    2,Differences from interpolation syntax: v-text Will replace the contents of the node, and{{xxx}}No other content of the node will be replaced
  

• v-html:

    1,Role: Renders containment to specified nodes html The content of the structure.
  
    2,Differences from interpolation syntax:
  
    		(1),v-html Replaces everything in the node,{{xxx}}Not at all
  
    		(2),v-html Recognizable html Structure.
  
    3,Serious attention: v-html There is a security problem!!!
  
    		(1),Dynamically arbitrary on the website HTML It is very dangerous and easy to cause XSS attack
  
    		(2),Be sure to use on trusted content v-html，Never use content submitted by users!
  

• v-cloak: no value, a special property

    1,Essentially, it is a special property. Vue When the instance is created and the container is taken over, it is deleted v-cloak attribute
  
    2,Use css Coordination v-cloak Can solve page display when network speed is slow{{xxx}}Questions
  

<style>
  [v-cloak]{
    display:none;
  }
</style>

<body>
  <div id="root">
    <h2 v-cloak>{{name}}</h2>
  </div>
</body>

data:{
  name:'test'
}

• v-once: no value

    1,v-once The node is treated as static content after the first dynamic rendering.
  
    2,Future data changes will not cause v-once Updates to the structure can be used to optimize performance.
  

<div id="root">
    <h2 v-noce>Initialized value{{num}}</h2> // 1, does not change again with the click of the button
    <h2 >Value after auto-increment calculation{{num}}</h2> // Increase as button clicks
    <button @click="num++">Click on me num+1</button>
</div>

data:{
  num:1
}

• v-pre:

    1,Skip the compilation of its node
  
    2,It can be used to skip: nodes that do not use instruction syntax or interpolation syntax will speed up compilation.
  

vue custom instruction

Exercise 1. Define a v-big command, similar to the v-text function, but will magnify the bound value 10 times.

Exercise 2. Define a v-fbind directive, similar to the v-bind function, but allows the input elements it binds to get focus by default

<div id="root">
    <h2 >Current value:<span v-text="num"></span></h2> 
    <h2 >Value after auto-increment calculation:<span v-big="num"></span></h2> 
    <button @click="num++">Click on me num+1</button>
    <input type="text" v-fbind:value="n" />
</div>

data:{
  num:1
},
directives:{
  // When will the big function be called? 1. When an instruction is successfully bound to an element (initial). 2. When the template on which the instruction is located is resolved.
  big(element,binding){
    console.log('big')
    element.innerText = binding.value * 10
  },
  // When an instruction is written directly as a function, it is equivalent to the method functions of bind and update
  fbind:{
    // When an instruction is successfully bound to an element
    bind(element,binding){
      element.innerText = binding.value
    },
    //When the element containing the instruction is inserted into the page
    inserted(element,binding){
      element.focus()
    },
    // When the template on which the instruction resides is resolved
    update(element,binding){
      element.innerText = binding.value
    }
  }
}

// Global directives
Vue.directive('fbind',{
    // When an instruction is successfully bound to an element
    bind(element,binding){
      element.innerText = binding.value
    },
    //When the element containing the instruction is inserted into the page
    inserted(element,binding){
      element.focus()
    },
    // When the template on which the instruction resides is resolved
    update(element,binding){
      element.innerText = binding.value
    }
  })
  
  Vue.directive('big',function(element,binding){
    console.log('big')
    element.innerText = binding.value * 10
  })

Summary of Custom Directives:

1. Definition grammar

1,Local directives:

	new Vue({ directives:{Instruction name: Configuration object} }) or  new Vue({ directives:{Instruction name: Callback function} })

2,Global directives:

	Vue.directive(Instruction name, configuration object) or Vue.directive(Instruction name, callback function)

2. Three callbacks commonly used in configuration objects:

1,bind: Called when an instruction is successfully bound to an element

2,inserted: Called when the element containing the instruction is inserted into the page.

3,update: Called when the template structure in which the instruction resides is resolved.

3. Remarks:

1,Instruction definition without v- ，But add v-；

2,If the instruction name is more than one word, use kebab-case Naming style, do not use camelCase Name.

3,The callback function in the instruction points to this time window，No vm