Vue的回顾

vue插件的推荐安装

vuetur 关键字高亮语法错误检测
vue 2snippets 语法提示
官网地址

v-on常用的修饰符

@事件名.stop 阻止冒泡
@事件名.prevent 阻止默认事件
@keyup.enter 回车触发针对input

v-if v-else-if v-else指令

v-if="一句话表达式（最后转换成boolean值，如果为真，则进行该语句所在标签渲染，如果为假则不渲染，该标签将不存在）"
v-else-if和v-if 是一样用法，它是v-if不成立情况下才会走到v-else-if这里来 v-else后面无须跟任何语句，当前面v-if和v-if-else\`都不成立时，它就会执行，当前面任何一个执行渲染，它就不执行

关于computed

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 计算属性
使用场景：依赖一个或者多个值产生一个新的值
1:放到computed:{}
2:本质是一个函数 return 一个值
3:它return的值就是该计算属性的值
4：它可当属性使用
-->
<!-- 计算属性传参 -->

<body>
    <div id='app'>
        <p>{{msg}}</p>
        <p>{{msg.split("").reverse().join("")}}</p>
        <!-- 这里的getMsg等效于"xxx" -->
        <p>{{getMsg("!")}}</p>
        <!-- <p>xxx</p>   -->
    </div>
    <script src='./vue.js'></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: "abcdefg",
                money: 10
            },
            computed: {
                getMsg() {
                    // return "xxx"
                    return function (info) {
                        return this.msg.split("").reverse().join("") + info
                    }
                }
            }
        })
    </script>
</body>

</html>

transition 单元素动画

动画体要用transition包住，name属性定义名称，该值就是后面css的一个前缀

   .xxx-enter-active  进入动画的执行体
   .xxx-leave-active  离开动画的执行体
   .xxx-enter  从什么状态到正常状态
   .xxx-leave-to  从正常状态到什么状态

  /* 进入动画的执行体 */
    .xxx-enter-active {
        transition: all 2s
    }

    /* 离开动画的执行体 */
    .xxx-leave-active {
        transition: all 2s;
    }

    /*进入前状态：希望从什么状态变到正常状态 */
    .xxx-enter {
        opacity: 0;
        transform: translateX(-400px);
    }

    /* 离开时的状态，希望从正常状态变到一个什么状态 */
    .xxx-leave-to {
        opacity: 0;
        transform: translateX(400px);
    }
   //用if show、 控制
        <button @click="bol=!bol">点我啊</button>
        <transition name="xxx">
            <div class="box" v-if="bol"></div>
        </transition>

单元素动画和animation结合

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 单元素动画与animation结合
条件:   v-if/v-show
方法:
1:transition包住
2:transition上定义一个name="xxx"  xxx就是后面css的前缀 
3:加入动画执行体
   .xxx-enter-active  进入动画的执行体
   .xxx-leave-active  离开动画的执行体
   .xxx-enter  从什么状态到正常状态
   .xxx-leave-to  从正常状态到什么状态
-->

<style>
    .box {
        width: 300px;
        height: 300px;
        background-color: #f00;
        margin: 0 auto;
    }

    .xxx-enter-active {
        animation: move 1.5s;
    }

    .xxx-leave-active {
        animation: move 1.5s linear reverse;
    }

    @keyframes move {
        0% {
            opacity: 0;
            transform: translateX(-400px);
        }

        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }
</style>

<body>
    <div id='app'>
        <button @click="bol=!bol">点我啊</button>
        <transition name="xxx">
            <div class="box" v-if="bol"></div>
        </transition>
    </div>
    <script src='./vue.js'></script>
    <script>
        new Vue({
            el: '#app',
            data: { bol: true }
        })
    </script>
</body>

</html>

多元素动画

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 多元素动画
使用场景：进入/离开    v-if/v-show
1:用transition-group包住
2:多元素动画的每一个子元素都要加一个key值
3：加一个name="xxx" xxx是后面css的前缀
  .xxx-enter-active 进入动画的执行体
  .xxx-leave-active离开动画的执行体
  .xxx-enter  进入前的状态：希望从什么状态变到正常状态
  .xxx-leave-to 离开时的状态：希望从正常状态变到什么状态

-->
<style>
    .box {
        width: 300px;
        height: 300px;
        background-color: #f00;
        margin: 0 auto;
    }



    .box2 {
        width: 300px;
        height: 300px;
        background-color: #0f0;
        margin: 0 auto;
    }

    .xxx-enter-active,
    .xxx-leave-active {
        transition: all 2s linear;
        /* transition；动画的元素 动画时长  动画曲线 延时*/
    }

    .xxx-enter-active:nth-child(1) {
        transition-delay: 0s;
    }

    .xxx-enter-active:nth-child(2) {
        transition-delay: 0.5s;
    }

    .xxx-enter {
        opacity: 0;
        transform: translateX(-300px);
    }

    .xxx-leave-to {
        opacity: 0;
        transform: translateX(300px);
    }
</style>

<body>
    <div id='app'>
        <button @click="bol=!bol">点我啊</button>
        <transition-group name="xxx">
            <div class="box " v-if="bol" key="1"></div>
            <div class="box2 " v-if="bol" key="2"></div>
        </transition-group>

    </div>
    <script src='./vue.js'></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                bol: true
            }
        })
    </script>
</body>

</html>

关于includes map filter findindex

<!-- includes
返回值=数组.includes(值)
返回值为boolean值
true表示该值在数组中存在
false表示该值在数组中不存在
-->
<!-- map
使用场景：对数组进行遍历 ，每一项进行一个操作，生成一个新的数组
返回值 =数组.map((item,index)=>{
    return 值
    return的值是什么，返回值.push(值)
})
-->
<!-- filter
使用场景：过滤出数组中符合条件的项，并返回一个新的数组
返回值 =数组.filter((item,index)=>{
    return boolean值
    如果 boolean为true   返回值.push(item)
    如果boolean为falsse  返回值不push它
})
-->
<!-- findIndex
使用场景：查找出数组中第一个符合条件的下标,如果没有符合条件的，返回-1
返回值=数组.findIndex((item,index)=>{
    return boolean值
    如果boolean值为true 返回值=index，中止循环
    如果boolean值为false 继续循环下去，直到结束
})
   找到了   返回值=相应的下标    找不到  返回值=-1
-->

关于vue 方法中的实参 $event

$event：事件对象，也就是事件驱动源，vue帮我们默认传递了实参$event，所以可以不写，方法声明时可以使用

过滤器的基本使用

有的时候，有些数据没法直接拿来用，就需要对这些数据进行过滤处理，过滤器就是用来做这个功能的

全局过滤器 （全局过滤器定义后，所有组件都可使用）
- 定义（在main.js中做全局定义）
  - //value是过滤器的要过滤的值，这里return的值就是最终过滤器的值
  Vue.filter("过滤器名字",function(value){
  return 返回值
  })
- 使用
  - //这里的value就是过滤器方法里面的参数，也就是要过滤的值
  {{value | 过滤器名字 }}
局部过滤器（只能应用于当前组件）

**作用：**平时项目中用的较多的，就是对一些字符串加工之类的，如：接口传了你一个时间戳，你需要转换成相应的正常时间格式等。

* 定义（在自己所在组件里面定义）
    * //上面的value是过滤器的要过滤的值，return的值就是过滤器定义的结果
    filters: {
    过滤器名字(value) {
    return 返回值
    }
    }
* //这里的value就是过滤器方法里面的参数，也就是要过滤的值
\{\{value \| 过滤器名字 \}\}

Demo

<template>
 <div>{{time | formatTime}}</div>
</template>
<script>
export default {
 data() {
 return {
 time: "1546275661000"
 };
 },
 filters: {
 formatTime(str) {
 let _date = new Date(+str);
 let _year = _date.getFullYear();
 let _month = ("0" + _date.getMonth() + 1).slice(-2);
 let _day = ("0" + _date.getDate()).slice(-2);
 let _h = ("0" + _date.getHours()).slice(-2);
 let _m = ("0" + _date.getMinutes()).slice(-2);
 let _s = ("0" + _date.getMinutes()).slice(-2);
 return (_year + "-" + _month + "-" + _day + "  " + _h + ":" + _m + ":" + _s
 );
 }
 }
};
</script>
<style>
</style>

路由传参

配置写法

this.$router.push({
path:'',
query:{
name(参数名)：参数
}
})

*拼接写法
this.$router.push("路径？name=xxx")

路由接参

this.$route.query.name

moment

基本使用：moment().format("YYYY年MM月DD日 HH:mm:ss")

取当前时间并按某格式输出： moment().format("时间格式")

给出一个毫秒时间，并按某格式输出

moment(毫秒时间).format("时间格式")

Y年 M月 D日
H小时，以24小时计 h以12小时计
m分钟 s 秒

官方文档： http://momentjs.cn/docs/#/parsing/string/

es6对象方法

Object.keys(对象) :将对象的key值转换成数组

Object.values(对象) :将对象的value值转换成数组

Object.entries(对象) :将对象的key值和value值转换成数组（一个二维数组）

for of进行一个循环处理

Object.assign(最终合并对象{},需要被合并的对象{},......)

用于多个对象的合并，并返回一个合并后的对象

组件的生命周期

beforeCreate:创建前，它不能访问访问data与methods

created:创建后，它可以访问data与methods,但是还不能访问vue渲染后的dom

beforeMount:渲染前，它还不能访问vue渲染后的dom

mounted:渲染后，它可以访问vue渲染后的dom

beforeUpdate:更新前，数据已修改，但是页面还没有完成渲染

updated:更新后，数据已修改，且页面已完成渲染

beforeDestroy:销毁前，啥都可以访问，但是准备要销毁了，一般用于善后工作

destroyed:销毁后，中止了渲染，但是还是可以访问data再来methods,但是不能访问vue渲染后的dom,还是可以做善后工作

export， export default， import的基本使用

export default 一个js里只能写一个

export default 它配套的import不用写import {}它是import 名字 from 路径

export 配套的import import {名字（export 中对应的名字）} from "路径"

但是export 可以写多个

使用exporrt default导出的值，在import 名字 from "路径",这个名字可以随便定义

但是使用export 导出的值，在import {名字} from "路径" 这里的名字必须和export的名字对应上

组件传值之props与emit

父组件通过 props 向下传递数据给子组件；子组件通过 emit 给父组件发送消息。

父组件传值子组件
- 在子组件标签上定义一个属性
  - <子组件 :自定义属性名=“值”></子组件>
- 在子组件中接收数据
  - 在props中接收，props放到
    - props:['自定义属性名']
  - 使用传递的数据
    - this.自定义属性名
- 注意点：props传递过来的数据是单向数据流，不可修改。
子组件调用父组件方法
- 在子组件上定义一个方法
  - <子组件 @自定义方法名=“父组件方法”></子组件>
- 在子组件里调用该方法
  - this.$emit("自定义方法名",参数)，这样就会触发父组件方法

Vue的回顾

vue插件的推荐安装

v-on常用的修饰符

v-if v-else-if v-else指令

关于computed

transition 单元素动画

单元素动画和animation结合

多元素动画

关于includes map filter findindex

关于vue 方法中的实参 $event

过滤器的基本使用

路由传参

路由接参

moment

es6对象方法

组件的生命周期

export， export default， import的基本使用

组件传值之props与emit

疯狂程序猿

引用和评论

正则

2024最全ECharts 实战大全（速记版+资源）

Vue使用mixins

startViewTransition的简单示例

从JavaScript中看设计模式(总结)

前端开发：立即执行函数(function(){}())与(function(){})()的区别

7天撸完KTV点歌系统,含后台管理系统(完整版)