1. Principle of Vue monitoring data:

1. Vue monitors all levels of data in data

2. How to monitor data in objects?

Monitoring is implemented through setters and the data to be monitored is passed in at new Vue

(1) By default, Vue does not respond to the attributes appended to the object

(2) If you need to respond to the attributes added later, please use the following API:

Vue. Set (target, propertyName/index, value) or

                vm.$set(target,propertyName/index,value)

3. How do I monitor data in arrays?

By wrapping the array update element, we essentially do two things:

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

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

4. Use the following method to modify an element in Vue array:

Use these apis: Push () pop() shift() unshift() splice() sort() reverse()

2. Vue. The set () or vm. $set ()

Note: Vue.set() and vm.$set() cannot add attribute examples to the VM or the root data object of the VM

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>Student information</h1>
        <button @click="student.age++">Age + 1</button>
        <button @click="addSex">Add a gender attribute. Default: male</button>
        <button @click=Student. Sex = 'unknown'">Modify the gender</button>
        <button @click="addFriend">Add a friend to the top of your list</button>
        <button @click="updateFristFriendName">Change the first friend's name to Xiao Ming</button>
        <button @click="addHobby">Add a hobby</button>
        <button @click="updateHobby">Change the first hobby to driving</button>
        <button @click="removeMusic">Filter out listening to music as a hobby</button>
        <h3>Name: {{student. The name}}</h3>
        <h3>Age: {{student. Age}}</h3>
        <h3 v-if="student.sex">Gender: {{student. Sex}}</h3>
        <h3>Hobbies:</h3>
        <ul>
            <li v-for="(h,index) in student.hobby" :key="index">
                {{h}}
            </li>
        </ul>
        <h3>friends</h3>
        <ul>
            <li v-for="(f,index) in student.friends" :key="index">
                {{f.name}}--{{f.age}}
            </li>
        </ul>
    </div>
    <script>
        Vue.config.productionTip = false
        const vm = new Vue({
            el:'#root'.data: {student: {name:'zhangsan'.age:12.hobby: ['Play games'.'music'.'Play basketball'].friends:[
                    {
                        name:'lisi'.age:13
                    },
                    {
                        name:'tom'.age:15}}},methods: {addSex(){
                    Vue.set(this.student,'sex'.'male')
                    / / the Vue. Set (this student, 'sex', 'male')
                },
                addFriend(){
                    this.student.friends.unshift({name:'little red'.age:11})},updateFristFriendName(){
                    this.student.friends[0].name = 'Ming'
                },
                addHobby(){
                    this.student.hobby.push('learning')},updateHobby(){
                    this.student.hobby.splice(0.1.'drive')
                    // vue.set (this.student.hobby,0,' drive ') // Vue.set(this.student.hobby,0,' drive ')
                    // This.$set(this.student.hobby,0,' Hobby ')
                },
                removeMusic(){
                    this.student.hobby = this.student.hobby.filter((h) = >{
                        returnh ! ='music'}}}})</script>
</body>
</html>
Copy the code