适合后端程序员的Vue教程_part3_Vue列表渲染和修饰符

v-for的使用

v-for:作用就是用来对对象进行遍历的（数组也是对象的一种）

<div id="app">
    <span>{{user.name}} {{user.age}}</span><br>
    <!--
        通过v-for遍历
    -->
    <span v-for="(value,key,index) in user">
        {{index}} : {{key}} : {{value}}
    </span>

    <!--
        通过v-for遍历数组
    -->
    <ul>
        <li v-for="a,index in arr">
            {{index}}:{{a}}
        </li>
    </ul>

    <!--
        通过v-for遍历数组中的对象
        :key 便于vue内部做重用和排序
    -->
    <ul>
        <li v-for="user,index in users" :key="user.id">
            {{index+1}} === {{user.name}} === {{user.age}} === {{user.content}}
        </li>
    </ul>

</div>

<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            user: {name:"小王",age:25},
            arr:[
                "炒面",
                "炒饭",
                "馄饨"
            ],
            users:[
                {id:"1",name:"小明", age:27,content:"吃饭时不喜欢说话"},
                {id:"2",name:"小红", age:25,content:"能吃五斤馄饨"},
                {id:"3",name:"小绿", age:25,content:"能吃八两饺子"}
            ]
        },
        methods: {},
        components: {}
    });
</script>

总结：
- 使用v-for时注意加入:key用来给vue内部提供重用和排序的唯一key(尤大推荐的做法)

v-model双向绑定

v-model:作用用来绑定标签元素的值与vue实例对象中data数据保持一致，从而实现双向的数据绑定机制

<div id="app">
    <input v-model="message" type="text"><br>
    <span>{{message}}</span>
    <hr>
    <input type="button" value="改变data中的值" @click="changeValue">
</div>

<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            message:""
        },
        methods: {
            changeValue() {
                this.message = '双向绑定针棒！';
            }
        },
        components: {}
    });
</script>

总结：

- 使用v-model指令可以实现数据的双向绑定
- 所谓双向绑定，表单中数据变化导致vue实例data数据变化&vue实例中data数据的变化导致表单中数据变化，称之为双向绑定

MVVM架构：双向绑定机制

- Model：数据	vue实例中绑定的数据
- VM：viewModel	监听器
- View：页面	页面展示的数据

事件修饰符

修饰符:用来和事件连用，用来决定事件触发条件或者是阻止事件的触发机制

常用的事件修饰符：

• .stop
• .prevent
• .capture
• .self
• .once
• .passive

stop事件修饰符

用来阻止事件冒泡

<div id="app">
    <div class="aa" @click="divClick">
        <!--.stop用来阻止事件冒泡-->
        <input type="button" value="按钮" @click.stop="btnClick">
    </div>
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {},
        methods: {
            btnClick() {
                alert("button被点击了");
            },
            divClick() {
                alert("div被点击了")
            },
            aClick() {
                alert("a被点击了");
            },
            btnClick1() {
                alert("btn1被点击了");
            }
        },
        components: {}
    });
</script>

总结：
.stop可以阻止事件冒泡，从而使div点击事件不触发

prevent事件修饰符

<!--.prevent用来阻止事件默认行为-->
<a href="http://www.prchen.com/" @click.prevent="aClick">发记现</a>

总结：
.prevent阻止事件默认行为，点击后不会跳转超链接url

self事件修饰符

用来针对于当前标签的事件触发=====>只触发自己标签上特定动作的事件，只关心自己标签上触发的事件，不监听冒泡

<!--.self只触发标签自身的事件-->
<div class="aa" @click.self="divClick">
    <!--.stop用来阻止事件冒泡-->
    <input type="button" value="按钮" @click.stop="btnClick">
    <input type="button" value="按钮1" @click="btnClick1">
</div>

once事件修饰符

让指定事件只触发一次

<!--
	.prevent：用来阻止事件默认行为
	.once   ：用来只执行一次特定事件
-->
<a href="http://www.prchen.com/" @click.prevent.once="aClick">发记现</a>

按键修饰符

用来与键盘中按键事件绑定在一起，用来修饰特定的按键事件的修饰符

• .enter
• .tab
• .delete (捕获“删除”和“退格”键)
• .esc
• .space
• .up
• .down
• .left
• .right

enter回车键

用来在触发回车按键之后触发的事件

<div id="app">
    <!--
        enter 按键修饰符 在回车之后触发的事件
    -->
    <input type="text" v-model="msg" @keyup.enter="keyUps">
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            msg:""
        },
        methods: {
            keyUps() {
                console.log(this.msg);
            }
        },
        components: {}
    });
</script>

tab 键

用来捕获到tab键执行到当前标签时才触发

<input type="text" @keyup.tab="keyTabs">