-4— theme: channing-cyan highlight: a11y-dark

Easy to ignore APIS

01. v-modelSyntactic sugar

(1) Use

  • The V-model is a syntax-sugar that can be split into props: value and events: input

    • The component must provide a prop named Value and a custom event named Input

      Props cannot be modified inside the component. It needs to be modified through the parent component

      Therefore, implementing v-Models will typically have an internal data property currentValue

      This property starts by getting a value from value once

      Then listen for value and update the property through watch when value changes

      The child component does not modify the value of value, but currentValue

      After modification, the modified value is sent to the parent component through the custom event Input

      The parent component listens for the event and, upon receipt, modifies the value

    <! -- Parent component -->
<son v-model="value"></son>
<! -- this is normally equivalent to (v-model default binding input event) -->
<son :value="value" @input="value = $event.target.value"></son>
Copy the code
    <! -- Subcomponent -->
<template>
    <span>{{ value }}</span>
    <button @click="handleInput">Language ~ method ~ sugar</button>
</template>
<script>
    export default {
        props: {
            value: {
                type: Number
            }
        },
        data () {
            return {
                // The value passed by the parent component cannot be modified directly within the component
                // An internal data property currentValue is required
                currentValue: this.value
            }
        },
        watch: {
            // Update currentValue by listening for value changes
            value (val) {
                this.currentValue = val; }},methods: {
            // Emit input events to the parent via emit
            handleInput (val) {
                this.currentValue += val;
                // The parent component uses the V-model syntax sugar to implement data updates
                this.$emit('input'.this.currentValue); }}}</script>
Copy the code

(2) Custom

  • Customize v-Model properties and events

    • For other elements, it is not necessary to listen for input events, nor is it necessary to listen for value attributes

      • So, inside the child component, you can passmodelCome to the rightv-modelCustomize
      <! -- Parent component -->
<son v-model="checked"></son>

<! -- Subcomponent -->
<template>
<input type="checkbox" >
</template>
<script>
    export default {
        // Still need to accept arguments passed by the parent component via props
        props: ['checked'].// Then customize the properties and events via model
        model: {
            prop: 'checked'.// Represents a binding attribute
            event: 'change' // Listens for change custom events}},</script>
Copy the code

(3) modifier

  • lazy: instead of input listens for the change event
  • number: The string is converted to a number
  • trim: Filter the beginning and end Spaces

02. .syncThe modifier

  • .sync is not a true bidirectional binding, but rather a syntactic sugar, where modifying data is done in the parent component, not in the child component

    / / the parent component<son :value.sync="value"></son>/ / equal to<son :value="value" @update:value="..."></son>/ / child component<script>
    handleInput(){
		this.$emit('update:value'.this.value)
    }
</script>
Copy the code

    Cannot be used with expressions

    Cannot be used on literal objects

03. $nextTick

  • In Vue, the DOM does not change immediately after the data changes. When the value of data is changed and then the DOM element value is immediately retrieved, the updated value cannot be immediately retrieved

  • You need to use the $nextTick callback to update the rendering of the modified data value to the DOM element before fetching it

    • $nextTickExecute after the end of the next DOM update loop
    • Using this method after modifying the data, you can immediately retrieve the updated DOM element
    this.$nextTick( () = > {
    // You can get the updated property values immediately
}) 
Copy the code

04. $setandvue.set()

  • Due to JavaScript limitations, VUE cannot detect additions or deletions of object attributes or arrays that are not array method changes

    • This is because vue.js converts the property to when the instance is initializedgetter/setter, so the attribute mustOn the data objectIn order for vue.js to convert it, in order for it to be responsive

  • You can add responsive attributes to an object via vm.$set() or vue.set ()

    Vue.set is defined on constructors, while vm.$set is defined on prototype objects

    Vue.set(target, key, value);
/ / or
vm.$set(target, key, value)
Copy the code
    export default {
    data () {
        return {
            arr: ['a'.'b'.'c'].obj: {
                a: 1}}},methods: {
        handleArr () {
            this.arr[1] = 'x';  // Change the value of the array directly by the array subscript, not reactive
          this.$set(this.arr, 1.'x');  // It is responsive
        },
        handleObj () {
            this.obj.b = 2;  // Object attributes are added, not reactive
            Vue.set(this.obj, 'b'.2);  // It is responsive}}}Copy the code

    Note:

    • The listener watch cannot listen for the passthis.$setObject changing

  • Other ways to change an array responsively:

    • The following methods of an array can trigger a view update, that is, reactive:

      • push(),pop(),shift(),unshift(),splice(),sort(),reverse()

    • Another trick is to copy an array, then modify it, and then replace the entire array with an assignment, for example:

      handler () {
    const data = [...this.arr];
    data[1] = 'x';
    this.arr = data;
}
Copy the code

I front-end side dish chicken, if there is wrong, please forgive