乐趣区

关于vue.js:Vue的回顾

作者：

jiezi

在

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

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理。

更多文章