基础使用

循环对象和数组

 const app = Vue.createApp({
    data() {
        return {
         listArray: ['feng','wang','singer'],
         listObject:{
            firstName: 'feng',
            lastName: 'wang',
            job: 'singer'
         }
        }
    },
    template: `
        <div>
            <div v-for="(item,index) in listArray">{{item}} -- {{index}}</div>
            <div v-for="(value,key,index) in listObject">{{value}} -- {{key}} -- {{index}}</div>
        </div>
        `
    })
const vm = app.mount('#root')

：key 提升列表渲染的性能

如果往数组中新增数据，那么改变数据页面就会重新渲染。如果重新渲染的时候，把之前旧的DOM再重新渲染一次，比较损耗性能，新增内容后，只需要保留旧的DOM，更新新的DOM即可

vue为了提高性能，采取了尽量复用旧的DOM的策略，但是为了辅助vue知道哪些DOM该复用，哪些DOM不该复用，我们在使用v-for:指令的时候，给循环的每一项给一个唯一的key值，作为标记，vue更新DOM前会比较2次的key值，如果key值一样就去分析是否可以复用，如果可以复用就复用

const app = Vue.createApp({
    data() {
        return {
         listArray: ['feng','wang','singer'],
        }
    },
    methods:{
        handleAddBtnClick() {
            this.listArray.push('hello world')
        }
    },
    template: `
        <div>
            <div v-for="(item,index) in listArray" :key="index">{{item}} -- {{index}}</div>
            <button @click="handleAddBtnClick">新增</button>
        </div>
    `
})
const vm = app.mount('#root')

更新数组中数据

1. 使用数组的变更函数

• push
• pop
• shift
• unshift
• splice
• sot
• reverse

 const app = Vue.createApp({
    data() {
        return {
         listArray: ['feng','wang','singer'],
        }
    },
    methods:{
        handleAddBtnClick() {
            // this.listArray.push('hello world')
            // this.listArray.pop()
            // this.listArray.shift()
            this.listArray.unshift('hello')
        }
    },
    template: `
        <div>
            <div v-for="(item,index) in listArray" :key="index">{{item}} -- {{index}}</div>
            <button @click="handleAddBtnClick">新增</button>
        </div>
    `
})
const vm = app.mount('#root')

2. 直接替换数组

我们可以用全新的数组替换旧数组，或者使用数组的相关方法，利用其返回新数组的特点来更新数组

const app = Vue.createApp({
    data() {
        return {
         listArray: ['feng','wang','singer'],
        }
    },
    methods:{
        handleAddBtnClick() {
            // this.listArray = ['bye','world']
            // this.listArray = ['bye','world'].concat(['666'])
            this.listArray = ['bye','world'].filter(item => item === 'bye')
        }
    },
    template: `
        <div>
            <div v-for="(item,index) in listArray" :key="index">{{item}} -- {{index}}</div>
            <button @click="handleAddBtnClick">新增</button>
        </div>
    `
})
const vm = app.mount('#root')

3. 直接更新数组中的内容

 const app = Vue.createApp({
    data() {
        return {
         listArray: ['feng','wang','singer'],
        }
    },
    methods:{
        handleAddBtnClick() {
            this.listArray[1] = 'li'
        }
    },
    template: `
        <div>
            <div v-for="(item,index) in listArray" :key="index">{{item}} -- {{index}}</div>
            <button @click="handleAddBtnClick">新增</button>
        </div>
    `
})
const vm = app.mount('#root')

更新对象中的数据

直接添加对象内容,这个功能是vue新版本才被允许的操作,旧版本的vue中直接往对象或者数组中添加内容是不被允许的

const app = Vue.createApp({
    data() {
        return {
            listObject: {
                firstName: 'feng',
                lastName: 'wang',
                job: 'singer'
            }
        }
    },
    methods: {
        handleAddBtnClick() {
            this.listObject.gender= '男'
            this.listObject.age= 18
        }
    },
    template: `
    <div>
        <div v-for="(value,key,index) in listObject" :key="index">{{value}} -- {{key}}</div>
        <button @click="handleAddBtnClick">新增</button>
    </div>
`
})
const vm = app.mount('#root')

v-for也可以循环数据

 const app = Vue.createApp({
    data() {
        return {
            listObject: {
                firstName: 'feng',
                lastName: 'wang',
                job: 'singer'
            }
        }
    },
    methods: {
        handleAddBtnClick() {
            this.listObject.gender= '男'
            this.listObject.age= 18
        }
    },
    template: `
    <div>
        <div v-for="(value,key,index) in listObject" :key="index">{{value}} -- {{key}}</div>
        <div v-for="item in 10" >{{item}}</div>
        <button @click="handleAddBtnClick">新增</button>
    </div>
`
})
const vm = app.mount('#root')

v-for 优先级 > v-if

如果不想展示listObject中的lastName属性该怎么办？

const app = Vue.createApp({
    data() {
        return {
            listObject: {
                firstName: 'feng',
                lastName: 'wang',
                job: 'singer'
            }
        }
    },
    template: `
    <div>
        <div 
          v-for="(value,key,index) in listObject" 
          :key="index"
          v-if="key !== 'lastName'"
        >
          {{value}} -- {{key}}
        </div>
    </div>
`
})
const vm = app.mount('#root')

运行结果发现，v-if没有生效，为什么？

当既做v-for循环又做v-if循环的时候，v-for的优先级高于v-if，因此v-if不生效

那么应该怎么解决这个问题呢？

==> 把 v-if 和 v-for 摘开

const app = Vue.createApp({
    data() {
        return {
            listObject: {
                firstName: 'feng',
                lastName: 'wang',
                job: 'singer'
            }
        }
    },
    template: `
    <div>
        <div 
          v-for="(value,key,index) in listObject" 
          :key="index"
        >
        <div  v-if="key !== 'lastName'">  
          {{value}} -- {{key}}
        </div>
        </div>
    </div>
`
})
const vm = app.mount('#root')

我们发现v-if起作用了

但是我们这样就引入了非必要的div标签

    const app = Vue.createApp({
        data() {
            return {
                listObject: {
                    firstName: 'feng',
                    lastName: 'wang',
                    job: 'singer'
                }
            }
        },
        template: `
        <div>
            <div 
              v-for="(value,key,index) in listObject" 
              :key="index"
            >
            <div  v-if="key !== 'lastName'">  
              {{value}} -- {{key}}
            </div>
            </div>
        </div>
    `
    })
    const vm = app.mount('#root')

template 占位符

const app = Vue.createApp({
    data() {
        return {
            listObject: {
                firstName: 'feng',
                lastName: 'wang',
                job: 'singer'
            }
        }
    },
    template: `
    <div>
        <template
          v-for="(value,key,index) in listObject" 
          :key="index"
        >
        <div  v-if="key !== 'lastName'">  
          {{value}} -- {{key}}
        </div>
        </template>
    </div>
`
})
const vm = app.mount('#root')