vue 了解循环和双向绑定

一、示例

// v-for="item of list"和 v-for="item in list"都可以
 Vue.createApp({ 
        data(){
            return{
                list:['hello', 'world', 'dell', 'lee', 'test']

            }
        },
        methods:{},
        template:
        // <li v-for="item of list">{{item}}</li>
            `<ul>
                <li v-for="(item,index) in list">{{item}}  {{index}}</li>
                
            </ul>`
    }).mount('#root')

二、逐行解析

1. v-for将数据循环展示在页面上
2. 以前面向dom编程,现在我们面对数据编程
3. Vue.createApp 创建一个vue实例意思就是我要使用vue了
4. template 顾名思义它是模板的意思,在此的意思是root要展示模板中的内容、
5. mount('#root')的意思是我要在div的id='root'上使用vue了,可以看到,它是不会在root1上生效的
6. mounted这个函数会在页面加载完成之后,自动加载
7. item是list这个数组里的数据
8. index是list数组中的下标

三、示例

Vue.createApp({ 
        data(){
            return{
                // list:['hello', 'world', 'dell', 'lee', 'test']
                inputValue:'',
                list:[]

            }
        },
        methods:{
            handelAddItem(){
                this.list.push(this.inputValue);
                this.inputValue = "";
            }
        },
        template:
        // <li v-for="item of list">{{item}}</li>
        
            `
            <div>
                <input v-model="inputValue"/>
                <button v-on:click="handelAddItem">增加</button>
            </div>
            <ul>
                <li v-for="(item,index) in list">{{item}}  {{index}}</li>
                
            </ul>`
    }).mount('#root')

四、双向绑定初识

v-model:数据和视图进行双向绑定，此处绑定的是input绑定了data中的inputValue