VUE 学习第二天

一、V-for和key属性

遍历数组，参数(item,index) in list

遍历对象，参数(value,key,index) in list

遍历数字，num in 10 (1~10)

key在使用v-for的时候都需要去设置key

key：

让界面元素和数组里的每个记录进行绑定

key只能是字符串或者数字

key必须是唯一的

二、v-if与v-show

区别：v-if删除dom元素；v-show设置display:none

应用场景：v-if只修改一次的时候可以使用v-if；v-show频繁切换的时候可以使用v-show

三、Vue中样式的使用

使用class样式:

数组

三目表达式

数组内置对象（对象的键是样式的名字，值是Boolean类型）

直接通过对象

<style>
 
        .first {
 
            color: red;
 
        }
 
        .second {
 
            font-size: 25px
 
        }
 
    </style>
<div id='app'>
        <p class="first second">这是一段文字...</p>
        <!-- 使用vue设置多个样式的时候可以使用数组 -->
        <p :class="[pClass,flag?'second':'']">这是一段文字...</p>
        <!-- 当我们根据某个条件显示某个样式的时候可以使用对象的方式 -->
        <!-- 对象里的键就是我们显示的样式，值是个bool类型，就是我们是否显示这个样式 -->
        <p :class="[pClass,{'second':flag}]">这是一段文字...</p>
        <!-- 直接使用对象，对象里的键就是我们显示的样式，值是个bool类型，就是我们是否显示这个样式 -->
        <p :class="{'first':false,'second':true}">这是一段文字...</p>
    </div>
var vm = new Vue({
            // vue控制的区域
            el: '#app',
            // data参数存放我们的数据，这一层就是mvvm里的model层
            data: {
                message: 'Hello Vue!',
                pClass: 'first',
                flag: true
            }
        })
使用内联样式

直接在元素上通过 :style 的形式，书写样式对象

将样式对象，定义到 data 中，并直接引用到 :style 中

在data上定义样式

在元素中，通过属性绑定的形式，将样式对象应用到元素中

在 :style 中通过数组，引用多个 data 上的样式对象

在data上定义样式

在元素中，通过属性绑定的形式，将样式对象应用到元素中

<div id="app">
        <!-- 插值表达式，可以读取我们的变量 -->
        <!-- !!!键如果包含-的话，我们必须要加上引号 -->
        <div :style="{'font-size':'32px'}">{{message}}</div>
        <div :style="textStyle">{{message}}</div>
        <div :style="[textStyle,textStyle2]">{{message}}</div>
        <div :style="getStyle(2)">{{message}}</div>
    </div>
 // 调度层
        var vm = new Vue({
            // vue控制的区域
            el: '#app',
            // data参数存放我们的数据，这一层就是mvvm里的model层
            data: {
                message: 'Hello Vue!',
                textStyle: {
                    color: 'red',
                    'font-size': '50px'
                },
                textStyle2: {
                    'font-weight': '600'
                }
            },
            methods: {
                getStyle(num) {
                    let obj = {
                        color: 'red',
                        'font-size': '50px'
                    };
                    if (num == 1) {
                        obj.color = 'red'
                    } else {
                        obj.color = 'green'
                    }
                    return obj
                }
            },
        })
 四、实现过滤的功能

用法就是在变量后面加上竖线 加上过滤器的名称

<td>{{item.ctime}}</td>

{{变量 | 过滤器名}}

{{变量 | 过滤器 | 另一个过滤器}} 可以同时使用多个过滤器，后面过滤器的data就是前面表达式传过来的值

 全局定义：

通过Vue提供的filter方法定义：Vue.filter()

参数：过滤器的名字和过滤器执行函数

 私有定义：

filters这个是实例化Vue的一个参数，和data,methods平级的，里面放的就是我们这个实例的私有过滤器。

过滤器函数的返回值就是最终显示的值

 <div id='app'>
        圆的半径是{{num}} 圆的面积是{{num | getSize()}}
    </div>
    <div id='app2'>
        圆的半径是{{num}} 圆的面积是{{num | getSize2()}}
    </div>
 
    <script>
        Vue.filter("getSize", function(data, format) {
            // console.log(data);
            // console.log(format);
            return (Math.PI * data * data);
        })
        const vm = new Vue({
                el: '#app',
                data: {
                    num: 10
                },
                methods: {
 
                }
            })
            // 局部定义
        const vm2 = new Vue({
            el: '#app2',
            data: {
                num: 100
            },
            methods: {
 
            },
            filters: {
                getSize2(data, format) {
                    return Math.PI * data * data
                }
            }
        })
    </script>
五、键盘修饰符

注册一个监听按键事件

监听所有按键：v-on:keyup
监听指定按键：v-on:keyup.按键码  每个键盘按键都会对应一个键盘码
使用按键别名

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

自定义按键别名 

 Vue.config.keyCodes.f1 = 112