vue学习-v-if,v-show

1：v-moel.trim 去掉数据首尾空格

2：es6解构赋值

let {type,title} = this.input

this.menu.push({

     type,title,link:'http:google.com'

})

3：回车监听事件 @keyup.enter 

4:v-if

条件渲染：如果v-if取值是true就渲染元素，如果不是就不渲染元素

特点：如果条件不满足根本就不会创建这个元素（重点）

注意：v-if可以从模型中获取数据

v-if也可以直接赋值一个表达式

v-show

条件渲染：

特点：哪怕取值为false也会创建元素，如果不满足条件 style为display：none

应用场景：由于取值为false时，v-if不会创建元素，所以如果需要切换元素的显示和隐藏，每次v-if都会创建和删除元素 由于取值为false时v-show会创建元素并设置display为none，所以如果需要切换元素的显示和隐藏。不会反复创建和删除，只是修改display的值。

所以：如果企业开发中需要频繁切换元素显示隐藏，那么推荐使用v-show,否则使用v-if

v-bind 

给元素绑定数据，{{}}，v-text,v-html

给元素的属性绑定数据 必须用v-bind

虽然通过v-model可以将数据绑定到input标签的value属性上，但是v-model是有局限性的mv-model只能用于input/textarea/select标签上。所以在企业开发中，我们需要用v-bind给其他属性绑定数据。

用v-bind绑定类名，

如果想让v-bind去style中查找类名，那么就必须把类名放到数组中 但是放到数组中之后默认还是回去Model中查找。

将类名放到数组中之后，还需要利用引号将类名扩起来才会去style中查找。

可以在绑定的时候通过对象来决定是否需要绑定。格式{'需要绑定的类名'：是否绑定}

<p :class="['size','color',{'active'}:true]"></p>

绑定样式

如果model中保存了多个样式的对象，想将多个对象都绑定给style,那么可以将多个对象放到数组中赋值给style即可。

<p :style="[obj1,obj2]"></p>

data:{
    obj1:{
        "color":"blue",
    },
    obj2:{
        "font-size":"100px"
    }

}

v-on修饰符

如果想让回调只有当前元素触发事件的时候才调用，用.self修饰符。

默认情况下是事件冒泡，如果想变成事件捕获用.capture修饰符。

按键修饰符