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





    
    
    Document





    
        {{msg}}
        {{msg.split("").reverse().join("")}}
        
        {{getMsg("!")}}

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、 控制

单元素动画和animation结合





    
    
    Document

多元素动画





    
    
    Document

关于includes map filter findindex

关于vue 方法中的实参 $event

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

过滤器的基本使用

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

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

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

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

Demo

路由传参

配置写法

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("自定义方法名",参数)，这样就会触发父组件方法