20201031-vue技术总结

1.v-clock

防止页面闪烁

2.class与style

可以是数组的形式,也可以是对象的形式.

<!-- 数组的写法  -->
<h1 :class="['bg','color']">{{msg}}</h1>
<!-- 数组三元 -->
<h1 :class="['bg',flag?'color':'']">{{msg}}</h1>
<!-- 数组对象 对象里面的属性 可以不添加 引号 ,属性都是样式名称  推荐写法-->
<h1 :class="['bg',{color:flag}]">{{msg}}</h1>
<!-- 普通对象 -->
<h1 :class="{bg:true,color:flag}">{{msg}}</h1>

3.v-model

vue的数据流   

    单向数据绑定: model改变，view跟着改变，不能反过来
    双向数据绑定: model改变，view跟着改变，反之亦然

4.跑马灯效果

<div id="app">
    <button @click="start">浪</button>
    <button @click="stop">别浪</button>
    <h1>{{msg}}</h1>
</div>
<script>
    new Vue({
      el: "#app",
      data: {
        msg: '猥琐发育别浪，我们能赢！',
        timer: null
      },
      methods: {
        start() {
          // 节流， 判断是否已经存在定时器，如果已经存在阻止执行  
          if (this.timer !== null) return
          this.timer = setInterval(() => {
            let start = this.msg.substring(0, 1)
            let end = this.msg.substring(1)
            this.msg = end + start
          }, 200)
          // console.log(this.timer)
        },
        stop() {
          clearInterval(this.timer)
          // 重新设置timer 为null 方便下次使用 
          this.timer = null
        }
      }
    })
</script>

5.数组遍历 v-for

value 属性值,key 属性名, index 属性下标

<p v-for="(value,key,index) in obj">
  {{value}} --- {{key}} --- {{index}}
</p>

6.key属性 一定要添加

<!-- key 值只能是唯一的 string/number -->
<p v-for="(item,index) in arrObj" :key="item.id">
      <input type="checkbox"> {{item.id}} --- {{item.name}} --- {{item.age}}
</p>

7.v-if与v-show

<div id="app">
  <!-- <button @click="toggle">toggle</button> -->
  <!--    通过点击改变flag的Boolean值-->
  <button @click="flag=!flag">toggle</button>
  <div v-if="flag">
      显示隐藏
    </div>
    <div v-show="flag">
      显示隐藏
    </div>

    <!-- 

      v-if 和 v-show的区别  

      v-if  通过js操作DOM元素的添加和删除  

      v-show 通过css操作元素的显示和隐藏 

      使用场景:  

        频繁点击操作的时候使用 v-show   

        流程控制的时候 使用v-if   
     -->

    <input type="text" v-model="scope">
    <div v-if="scope >= 90"> 优秀</div>
    <div v-else-if="scope >= 80 && scope < 90"> 良好</div>
    <div v-else> 你懂的</div>
  </div>

8.百度换肤

源码路径:E:\20200703_千峰培训\20200919-v3\day02\code\百度换肤

9.axios请求

methods: {
  async getShishen() {
    try {
      const res = await axios.get('http://localhost:8888/shishen?_page=1,_limit=10')
        console.log(res)
      } catch (error) {
    }
  }
}

10.生命周期

//创建,挂载,更新,销毁
beforeCreate: function () {}
created:function () {}
//使用较多
created(){}

beforeMount:function () {}
mounted:function () {}
beforeUpdate:function () {}
updated:function () {}
beforeDestroy:function () {}
destroyed:function () {}