关于vue.js:Vue的回顾

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

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

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

<!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 包住，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>

<!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
返回值 = 数组.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
-->

$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().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/

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 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 中接管，props 放到
    - props:[‘自定义属性名‘]
  - 应用传递的数据
    - this.自定义属性名
- 留神点：props 传递过去的数据是单向数据流，不可批改。
子组件调用父组件办法
- 在子组件上定义一个办法
  - < 子组件 @自定义办法名 =“ 父组件办法”></ 子组件 >
- 在子组件里调用该办法
  - this.$emit(“自定义办法名 “, 参数)，这样就会触发 父组件办法

关于vue.js: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

Just My Socks（注册教程内含优惠码）

关于vue.js: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

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）