Yesterday, I saw a question like Kwai Fu's face, and I tried to achieve it today.

vue component encapsulation, write the logical part, and css ignores it. Probably: select all radio, just like the select all button in the shopping cart, five items, five buttons and one select all button. Click Select all to select all items. On the contrary, if all items are selected, the select all button is on.

1. html part

<template id="check">
        <div>
        // Represents the select all box and defines the click event of select all
            <input type="checkbox" class="all_check" value="Select all" @click='allCheck' ref="all">
        // Use v-for to render five radio boxes and define radio click events
            <input type="checkbox" class="one_check" @click='click1' v-for='value in times' ref="one" :key='value'>
        </div>
    </template>

1. css part (random layout...)

input {
            display: block;
            margin-top: 10px;
        }

1. js logic part code
   See note for details

     data() {
                        return {
                            times: 5,
                            isAll: false,
                            num: 0,
                            ischeck: false
                        }
                    },
                    methods: {
                        allCheck(e) {
                            // isAll stands for whether to select all
                            this.isAll = !this.isAll
                            let list = this.$refs.one
                            if (this.isAll) {
                                // If you select all, set the checked attribute of each child element to true
                                for (let i = 0; i < list.length; i++) {
                                    list[i].checked = true
                                }
                                // num is used to count, indicating how many current child elements are selected
                                this.num = this.times
                            } else {
                                // If not, set the checked attribute of each child element to false
                                for (let i = 0; i < list.length; i++) {
                                    list[i].checked = false
                                }
                                this.num = 0
                            }
                        },
                        click1(e) {
                            if (e.target.checked) {
                                // If the current element is selected, then num++
                                this.num++
                            } else {
                                // If one is not selected, it means that not all are selected. Set this Isall is false
                                this.num--
                                this.isAll = false
                            }
                            if (this.num == this.times) {
                                this.isAll = true
                            }
                        }
                    },
                    watch: {
                        isAll(newValue) {
                            if (newValue) {
                                this.$refs.all.checked = true
                            } else {
                                this.$refs.all.checked = false
                            }
                        }
                    }

4. Self summary

I thought it was just a simple small component function, but there were really various problems when I wrote it myself. Here's a record:
(1) The problem of creating components when introducing vue into mdn

Usually, vue cli is basically used to create components, just in XX The components defined in vue can be directly exposed and imported for use. But now, I need to use vue's template template to create components, then register components and reference components. I basically forgot all of them

1. Create global component

//1. Create component template
<template id='info'>
    <div>
      <img src='./images/fm.jpg'>
      <p>I'm describing information</p>
    </div>
  </template>
// 2. Register components
  Vue.component('abc', {
      template: "#info"
    });
// 3. Use components
<abc></abc>

1. Create local components

//1. Create component template (same as above)
//2. Register components in the components attribute of vue instance 
et vue = new Vue({
            el: '#app1',
            data: {
                name: 'Wang Yuxin'
            },
            components: {
                'abc': {
                    template: '#info'
                }
            }
        });
// 3. Use components

(2) Naming of components

At the beginning, I named the checkBox hump for the all checkBox component, but when I used it, it was also used to name the hump. As a result, such an error was reported: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the “name” option

The naming convention of vue is as follows (component name, data, method name):

1.1 if "Hump naming" is used when registering components, it needs to be converted into "dash separated naming". The officially recommended component name is Pascal case or kebab case. When it is used in DOM, it is changed to all lowercase, and the words are connected with -.
For example: when registering: myfather - > when using: my father

1.2 if you want to use "Hump name" when passing parameters, you must write "dash separated naming"
For example: when delivering: parent name = "name" - > when receiving: props: ["parent name"]

1.3 "Hump naming" cannot be used in the transmission method, but "short horizontal line separated naming" can be used
@parent-say="say" -> this.$emit("parent-say");

(3) Rendering problems with v-for:

v-for can traverse arrays, characters, numbers and objects to render the interface
You can get all dom objects rendered by v-for through ref, and an array will be returned

(4) Review of < input type = checkbox >

1. Radio is a radio box (the same name attribute must be specified for the options of a topic), and checkbox is a check box. The check box options of the same topic are not mutually exclusive, and the name can be different

// There is also the value attribute: specify the value of input. If omitted, the result of obtaining the value of the element is the string "on".
<form action="http://vip.biancheng.net/register.php" method="post" name="formName">
     Hobbies:<input type="checkbox" name="running" checked>run
     <input type="checkbox" name="reading" checked>read
     <input type="checkbox" name="shopping" checked>shopping
</form>

(5) e.target.check
How to set whether the check box element is selected only needs to be set
e.target.check=true/false
To obtain the attributes of an element, you can directly regard the element as an object, and the attributes of the element as the attributes of the object
eg:

 let input = document.getElementById('read')
    console.log(input.name); //reading
     console.log(input.checkd); //false