VUE.js快速入门（vue本地应用③）

v-for:遍历所在集合，数组..内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="button" value="add" @click="addClick"/>
        <input type="button" value="remove" @click="removeClick"/>
        <ul>
            <li v-for="city in cities">
                {{city}}
            </li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                cities:["西安","北京","上海","杭州"]
            },
            methods:{
                addClick:function(){
                    this.cities.push("深圳");
                },
                removeClick:function(){
                    this.cities.pop();
                }
            }
        })
    </script>
</body>
</html>

v-for是根据数据生成列表结构

数组和v-for经常联合使用

语法是（item，index）in 数据

数组长度跟新会同步到页面，是响应式的

on的事件修饰符keyup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" @keyup.enter="enter"/>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            methods:{
                enter:function(){
                    alert("nihao")
                }
            }
        })

    </script>
</body>
</html>

事件后面跟修饰符可以限制

.enter可以触发限制

修饰符有很多种

v-model

获取和设置表单元素（双向数据绑定）

双向的意思是修改表单data里的值就会变，修改data，表单里的值会变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="message"/>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                message:"欢迎学习vue"
            }
        })
    </script>
</body>
</html>

在文本框里修改，内存中的值会同时改变

v-model指令作用是便捷的获取和设置表单元素，

绑定数据会和表单元素的值相关联

绑定数据是双向的