vue复习（二）

1.事件对象属性

项目	Value
dblclick	双击鼠标左键时发生，如果右键也按下则不会发生
click	单击鼠标左键时发生，如果右键也按下则不会发生。当用户的焦点在按钮上并按了 Enter 键时，同样会触发这个事件
mousedown	单击任意一个鼠标按钮时发生
mouseout	鼠标指针位于某个元素上且将要移出元素的边界时发生
mouseover	鼠标指针移出某个元素到另一个元素上时发生

  <div id="app">
        <input type="text" placeholder="请输入内容" @focus="focus" v-bind:placeholder="placeholder" @blur="blur" @click="click" @dblclick="dblclick" @mousedown="mousedown" @keyup.enter="search" >
        <!-- 鼠标事件 -->
        <!-- <div class="box" :class="{'box-leave':isshow}">
        </div> -->
    </div>


 new Vue({
        el:'#app',
       data:{
         placeholder:'请输入你的内容'
       },
       methods:{
       focus(){
        this.placeholder="获得焦点事件"
       },
       blur(){
        this.placeholder="失去焦点事件"
       },
    //    单击
       click(){
    //     console.log('需要单击才能成功');
       },
    //    双击
    dblclick(){
        // console.log('需要双击才会出来');
    },
    mousedown(){
        // console.log('任意点击鼠标键都可以出现');
    },
    search(){
        // console.log('输入键盘事件');
    } 
    }
     })

2.事件修饰符

1.prevent：阻止默认事件

2.stop：阻止事件冒泡（常用）

3.once：事件只触发一次（常用）

4.capture：使用事件的捕获模式；

5.self：只有event.target是当前操作的元素时才触发事件

6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕

3.v-model修饰符 

.lazy:在我们文本框失去焦点的时候再帮我们将文本框的值同步给Model

.number:可以使两个数据进行相加减

.trim:去除空格的，但是他只会去除文本框两端的空格，中间的不会去除

 4.key属性的作用

key的含义

这里的key一般指的是key值，它主要用来管理可重复使用的元素，也就是可复用的元素。

 1. 提升v-for渲染的效率

 2. 提高渲染性能

3.避免数据混乱的情况出现 

5.v-if与v-show的区别 

v-show:本质就是 标签display设置为none，基于css进行切换

          有更高的初始渲染消耗

          适合频繁切换的情况

    v-if：动态的向DOM树内添加或者删除DOM元素

          有更高的切换消耗

          适合运行条件很少改变的情况

6.v-for与v-if一同使用的注意事项 

1. 永远不要把 v-if 和 v-for 同时用在同一个元素上，带来性能方面的浪费（每次渲染都会先循环再进行条件判断）

2. 如果避免出现这种情况，则在外层嵌套template（页面渲染不生成dom节点），在这一层进行v-if判断，然后在内部进行v-for循环（如图以）

3. 如果条件出现在循环内部，可通过计算属性computed提前过滤掉那些不需要显示的项（图二）

图一： 

<template v-if="isShow">
    <p v-for="item in items">
</template>

图二：

computed: {
    items: function() {
      return this.list.filter(function (item) {
        return item.isShow
      })
    }
}

 7.父子之间传值的方法

 父组件向子组件传值：props

可以通过基本方法在父组件进行更删改查等，都可以传递到子组件中

 

 

子组件向父组件传值：数组的方法 ，$emit ,$event 

 

 8.单页应用：

单页面应用指一个系统只加载一次资源，然后下面的操作交互、数据交互是通过router、ajax等来进行，页面并没有刷新，页面只在最开始前刷新一次。

优点:

单页应用则是一次性把web应用的所有代码（HTML，JavaScript和CSS）全部请求过来，有时候考虑到首屏加载太慢会按需加载。这样一来，以后用户的每一个动作都不会重新加载页面