vue2的基础使用

先导语

之前在工作中一直都在使用vue,但是对vue这个框架的使用却没有做过总结。今天主要是总结一下vue2的一些基本使用，加深自己的印象。

模板

模板分为两种：指令和插值,这两种就不用多讲了，直接看代码：

    <p>文本插值{{ msg }}</p>
    <p>表达式 {{count==0?'你好':'世界'}}</p>
    <p :id="idStr">动态指令</p>
    <p v-html="htmlStr"></p>

computed和watch

computed：computed有缓存，data如果不变的话，computed内容不会重新计算 template：

    <p>{{a}}</p>
    <input v-model="b" />

computed：

computed:{
  a(){
    return this.count+1;
  },
  b:{
    get(){
      return this.count+1;
    },
    set(val){
      this.count=val*2
    }

  }
}

这里还有一个值得注意的点是： 如果computed的内容用于v-model的话，必须要有set和get 函数，否则会报错！

watch

watch 如何做深度监听（使用deep）
watch 监听引用类型，拿不到oldValue 代码：

<template>
  <button @click="test">测试</button>
</template>

<script>
export default {
  data() {
    return {
      obj:{
        a:{
          b:1
        }
      }
    }
  },
  watch:{
    obj:{
      handler(olaVal,val){
        console.log(olaVal,val) //引用类型的值拿不到oldValue
      },
      deep:true //深度监听
    }
  },
  methods:{
    test(){
      this.obj.a.b++;
    }
  }
}
</script>

class和style

废话也不多说，还是直接上代码吧

<template>
  <p :class="{a:aStr,b:bStr}">动态class可以使用对象的形式来写</p>
  <p :class="[aStr,bStr]">动态class也可以使用数组的形式来写</p>
</template>

<script>
export default {
  data() {
    return {
      aStr:'a',
      bStr:'b'
    }
  },
}
</script>

条件渲染

条件渲染有两种方式，分别是：v-show和v-if 代码：

<template>
  <p v-if="flag==='test'">v-if flag为test</p>
  <p v-else-if="flag==='test2'">v-if flag为test2</p>
  <p v-else>v-if flag为test3</p>

  <p v-show="flag==='test'">v-show flag为test</p>
  <p v-show="flag==='test2'">v-show flag为test2</p>
</template>

<script>
export default {
  data() {
    return {
     flag:'test'
    }
  },
}
</script>

渲染结果：

从渲染结果上来看，可以看出v-if和v-show的区别：
v-if：值会在符合条件时才渲染
v-show：不管符不符合条件都会渲染，不符合条件的使用display：none 来隐藏
使用场景： 当需要频繁在显示和隐藏之间切换的时候，使用v-show会更好。当不需要频繁切换时，使用v-if会更好

v-for

v-for 既可以遍历数组也可以遍历对象，必须要有key
v-for和v-if不能一起使用，会报错代码：

<template>
<ul>
  <li v-for="(item,index) in arr" :key="'id'+index">
    {{item}}
  </li>
</ul>
  <ul v-if="flag">
<!--    不建议v-for和v-if一起使用-->
    <li v-for="(value,key,index) in arr" :key="'id'+index">
      {{value}}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      flag:true,
     arr:['test1','test2','test3','test4','test5'],
      obj:{
       a:{
         title:'test1',
       },
        b:{
         title: 'test2'
        },
        c:{
          title: 'test3'
        },
        d:{
          title: 'test4'
        },
        e:{
          title: 'test5'
        }
      }
    }
  },
}
</script>

event

vue事件中的event对象如何获取？事件又是被定义到那里的呢？

<template>
  {{num}}
  <button @click="add(2,$event)">+2</button>
  <button @click="add2">+1</button>
</template>

<script>
export default {
  data() {
    return {
      num:0
    }
  },
  methods:{
    add(param,event){
      this.num+=parseInt(param);
      console.log(event) //打印出来是原生的event对象
      console.log(event.target); //button元素
    },
    
    add2(event){
      this.num++;
      console.log(event) //打印出来是原生的event对象
      console.log(event.target); //button元素
    }
  }
}
</script>

从上面的代码中可以看到：

event对象获取有两种方式，第一种是没有自定义参数时，直接 add2(event),第二种是有自定义参数时,需要在参数之后传入$event,然后add(param,event).
event对象是原生的event对象，没有被包装过
vue事件是直接挂载在当前元素上的

事件修饰符

按键修饰符

表单

v-model
修饰符(trim，lazy,number) 代码：

<template>
  <input type="text" v-model.number="num">
  <input type="text" v-model.lazy="name">
  <input type="text" v-model.trim="name">
  <!--
    trim:自动过滤掉输入前后的空格
    number：自动转换为数字
    lazy:当输入完成之后再触发改变，类似防抖
  -->
</template>

<script>
export default {
  data() {
    return {
      num:0,
      name:''
    }
  },
  methods:{

  }
}
</script>

trim:自动过滤掉输入前后的空格
number：自动转换为数字
lazy:当输入完成之后再触发改变，类似防抖

结束语

关于vue2的基础使用就差不多是这些了。那么下次见，好好学习，天天向上！