vue 精简教程（二）常用指令用法更新超长版本一次看个过瘾好吧

本文链接：https://blog.csdn.net/weixin_43815680/article/details/109089646

文章目录

前言
一、vue常用指令 + 事件+样式？
二、过渡效果和动画？
总结

前言

一、vue常用指令 + 事件+样式？

1、v-for

这个我们已经说过了，需要注意的是，需要加:key=“data.id”

2、v-if v-show

v-if 如果是false 会直接删除
v-show 不会删除只会隐藏

<html>

<head>
    <title>vue</title>
    <meta charset="utf-8">
</head>
<style>

</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<body>
    <!-- 这是一个容器  -->
    <div id="box">
        <h2 v-show="isShow">显示</h2>
        <button @click="isShow=!isShow">click</button>
    </div>
</body>

</html>
<script>
    var vm = new Vue({
        // 挂载到容器上
        el: "#box",
        // 这个地方使用 data函数  保护变量不污染其他组件
        data() {
            return {
                isShow: false,
            }
        },


    })
</script>

3、filter 筛选避开 v-if v-for 一起使用

因为v-if和v-for在同一个节点上使用，v-for具有更高的优先级，也就是循环一个元素就要进行一次判断

<html>

<head>
    <title>vue</title>
    <meta charset="utf-8">
</head>
<style>

</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<body>
    <!-- 这是一个容器  -->
    <div id="box">
        <h2 v-show="isShow">显示</h2>
        <button @click="isShow=!isShow">click</button>
        <ul>
            <li v-for="data in datalist" :key="data">
                {{data.name}}
            </li>
        </ul>
    </div>
</body>

</html>
<script>
    var vm = new Vue({
        // 挂载到容器上
        el: "#box",
        // 这个地方使用 data函数  保护变量不污染其他组件
        data() {
            return {
                isShow: false,
                datalist: [{
                        name: 'lili',
                        age: 20,
                        sex: 1
                    },
                    {
                        name: 'pp',
                        age: 19,
                        sex: 2
                    }
                    // 官方推荐在这个地方 使用 filter 先筛选一下  再使用 不建议v-if v-for 一起用
                ].filter(data => {
                    return data.sex === 2
                })
            }

        },



    })
</script>

4、v-bind v-model

先看一下 v-bind 简写 : 动态绑定

<!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>
<style>
    img {
        width: 100px;
        height: 100px;
    }
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<body>
    <div id="box">
        <ul>
            <!-- 循环列表 -->
            <li v-for="data in datalist">
                {{data.name}}
                <!-- 这个地方动态绑定图片   -->
                <img :src="data.photo" alt="">
            </li>
        </ul>
    </div>
</body>

</html>
<script>
    var vm = new Vue({
        el: "#box",
        // 下面这个是数据
        data() {
            return {
                // 列表数组 里面包含两个对象
                datalist: [{
                        name: 'fhj',
                        age: 18,
                        photo: './img/1.png',
                    },
                    {
                        name: "ppx",
                        age: 19,
                        photo: './img/2.png',
                    }
                ]
            }
        }

    })
</script>

可以绑定其他的东西再举一个例子默认勾选 checked
在这里插入图片描述

再来看一下 v-model 这个叫双向绑定
在这里插入图片描述

5、监听器 watch

1）我们做一个字体大小的进度理解一下

<!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>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<body>
    <div id="box">
   // 这个是进度条  type="range"
        <input type="range" v-model="fontSize">
    </div>
</body>

</html>
<script>
//     vue 实例
    var vm = new Vue({
        el: "#box",
     // 这个地方的data函数  需要加return {xxx}
        data() {
            return {
                fontSize: 24
            }
        },
     //   这个地方是监听机制
        watch: {
      //  有两个参数 新的值 和  老的值
            fontSize(newvalue, oldvalue) {
                console.log('我监听到了')
                console.log(newvalue, oldvalue)
            //    这里做一个限制
            // 字体大于 50 会弹窗提示 并且将 老的值赋给 fontSize
            // vue 中的this 指向的是实例化对象 可以访问到fontSize
                if (newvalue > 50) {
                    this.fontSize = oldvalue
                    alert('字体太大了')
                    return;
                }
            }
        }
    })
</script>

6、计算属性

1）举一个简单的实现相加的例子 两个输入框输入数字可以直接得到和

<!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>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<body>
    <div id="box">
        <input type="range" v-model="fontSize"> <br>
        <input type="text" v-model="count1.num"> <br>
        <input type="text" v-model="count2.num"> <br>
        和:{{sum}}
    </div>
</body>

</html>
<script>
    var vm = new Vue({
        el: "#box",
        data() {
            return {
                fontSize: 24,
                // 这里给定两个初始值 
                count1: {
                    num: 0,

                },
                count2: {
                    num: 0,

                }
            }
        },
        watch: {
            fontSize(newvalue, oldvalue) {
                console.log('我监听到了')
                console.log(newvalue, oldvalue)
                if (newvalue > 50) {
                    this.fontSize = oldvalue
                    alert('字体太大了')
                    return;
                }
            }
        },
        // 计算属性  
        computed: {
            sum() {
                // 利用  parseInt 将后面的东西 转成整数类型
                return parseInt(this.count1.num) + parseInt(this.count2.num);
            }
        }
    })
</script>

7.vue 事件

点击事件 v-on 简写 @ @click=“xxx”
这个实现的是没点击一次次数就会增加一次

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>
    <div id="box">
        <h2>{{count}}</h2>
        <button @click="count++">click</button>
    </div>
</body>
<script>
    var vm = new Vue({
        el: "#box",
        data() {
            return {
                count: 0,
            }
        }
    })
</script>

</html>

2、我现在将方法写在下面因为实际情况逻辑可能比较复杂 写在 methods里面
写两个方法并且调用

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>
    <div id="box">
        <h2>{{count}}</h2>
        <button @click="count++">click</button>
    </div>
</body>
<script>
    var vm = new Vue({
        el: "#box",
        data() {
            return {
                count: 0,
            }
        }
    })
</script>

</html>

实现的效果
在这里插入图片描述

8、按键事件

先说一点 vue生命周期 created 和 beforeCreate
一个按键事件

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        img {
            height: 100px;
            width: 100px;
        }
    </style>
</head>

<body>
    <div id="box">

        <ul>
            <li v-for="data in userlist">{{data.name}}
                <img :src="data.pic" alt="">
            </li>
        </ul>

        <form action="">
            <!-- 这个地方需要注意一件事情   @keyup.enter = "submit" 不知道为啥不起作用 -->
            <input type="text" v-model="user.pic" @keyup.down="submit">
            <!-- <button @click.prevent='submit'>提交</button>  -->
        </form>
    </div>
</body>
<script>
    var vm = new Vue({
        el: "#box",
        data() {
            return {
                count: 0,
                userlist: [],
                user: {
                    name: 'ppx',
                    pic: ''
                }
            }
        },
        methods: {
            loadDate() {
                // 初始化数据 假数据
                const res = [{
                        name: 'fhj',
                        age: 18,
                        pic: './img/1.png'
                    },
                    {
                        name: 'wu',
                        age: 19,
                        pic: './img/2.png'
                    }
                ]
                // 将模拟后台的数据 给这个空的userlist
                this.userlist = res;
            },
            submit() {
                // 这个函数将 user 内容 放进 userlist 存在问题
                this.userlist.push(this.user);
            }
        },
        created() {
            // 初始化 数据
            this.loadDate();
        },

    })
</script>

</html>

在这里插入图片描述

这个太丑了我们怎么解决这个问题？

9、样式处理

1）先比较一下普通写死和动态绑定的区别

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .color {
            color: red;
        }

        .font {
            font-size: 36px;
        }
    </style>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<body>
    <div id="box">
        <!-- 第一种   这是常规的表达 写死的情况  但是这样是不好的 -->
        <!-- <div class="color">展示一手</div> -->

        <!-- 第二种   这个是比较好的动态绑定的方式 -->
        <div :class="{color:isShow}">再来展示一下</div>
    </div>
</body>

</html>
<script>
    var vm = new Vue({
        el: "#box",
        data: {
            isShow: false
        }
    })
</script>

2）如何使用三木也是很重要的？
在这里插入图片描述
3)加一个 button 动态使得两种情况下切换

4) 我们可以 动态绑定一个东西在下面进行更改

5）另外一种表达

6) 我们来实现一个列表

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .color {
            color: red;
        }

        .font {
            font-size: 36px;
        }

        .active {
            color: skyblue;
            cursor: pointer;
        }
    </style>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<body>
    <div id="box">
        <ul>
            <!-- 前面绑定 0 1 2  后面点击之后对应的 0 1 2  就可以实现切换 -->
            <li :class="{active:showIndex==0}" @click="showIndex=0">回复我的</li>
            <li :class="{active:showIndex==1}" @click="showIndex=1">@我的</li>
            <li :class="{active:showIndex==2}" @click="showIndex=2">我的收藏</li>
        </ul>
    </div>
</body>

</html>
<script>
    var vm = new Vue({
        el: "#box",
        data: {
            // 这个地方 showIndex 默认我设置为0 从0开始
            showIndex: 0,
        }
    })
</script>

10、动态行内式

1）基本的行内写法
在这里插入图片描述
2)

3) 展示一个从小到大的过程

二、过渡效果和动画？

1、第一种方法 过渡效果代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 开始的样式 */
        .fhj-enter {
            /* 透明度 */
            opacity: 0;
        }

        .fhj-enter-active {
            /* 全部过度效果 1s 时间一秒 ease 缓慢  */
            transition: all 1s ease;
        }

        .fhj-enter-to {
            font-size: 64px;
        }

        /* 离开的样式 */
        .fhj-leave {
            opacity: 1;
        }

        .fhj-leave-active {
            transition: all 1s ease;
        }

        .fhj-leave-to {
            opacity: 0;
            font-size: 64px
        }
    </style>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<body>
    <div id="box">
        <button @click="isShow=!isShow">click</button>
        <!-- vue 用来包裹和执行过渡动画和效果  -->
        <!-- 需要注意的是这个里面可以写 name="fhj" 则上面的v 都需要换成fhj -->
        <transition name="fhj">
            <h2 v-show="isShow">我变化了</h2>
        </transition>
    </div>
</body>

</html>
<script>
    var vm = new Vue({
        el: '#box',
        data() {
            return {
                isShow: true,
            }
        }
    })
</script>

2、第二种方法 动画效果利用关键帧的写法

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 关键帧 动画的代码 */
        .big-enter-active {
            animation: anil 1s ease;
        }

        .big-leave-active {
            animation: anil 1s ease;
        }

        @keyframes anil {
            0% {
                font-size: 24px;
            }

            50% {
                font-size: 80px;
            }

            100% {
                font-size: 24px;
            }
        }
    </style>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<body>
    <div id="box">
        <button @click="isShow=!isShow">click</button>
        <!-- vue 用来包裹和执行过渡动画和效果  -->
        <!-- 需要注意的是这个里面可以写 name="fhj" 则上面的v 都需要换成fhj -->
        <transition name="big">
            <h2 v-show="isShow">我变化了</h2>
        </transition>
    </div>
</body>

</html>
<script>
    var vm = new Vue({
        el: '#box',
        data() {
            return {
                isShow: true,
            }
        }
    })
</script>

3、第三种方法引用 animate.css 动画库
1）引用这个 <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
2）使用 animate.css库里面的东西前面写 animated 后面写方法名字
在这里插入图片描述
4、第四种方法 javascript 钩子函数
需要注意的几点内容
1）:css='false'什么意思？
：css =’ false’-删除模板中包含的默认CSS

：js =’ false’-删除模板中r包含的默认JS

2） el.offsetWidth 啥意思？
HTMLElement.offsetWidth只读属性返回一个元件作为一个整数的布局宽度

3）el.style.transition = 'all 2s ease'什么意思？
控制动画速度的方法控制2s内完成

4)钩子函数上面的写法及下面的函数表达很重要

@before-enter
@enter
@after-enter

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
    <style>

    </style>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<body>
    <div id="box">
        <button @click="isShow=!isShow">click</button>
        <!-- vue 用来包裹和执行过渡动画和效果  -->
        <transition :css='false' @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
            <div v-if="isShow">我变化了</div>
        </transition>
    </div>
</body>

</html>
<script>
    var vm = new Vue({
        el: '#box',
        data() {
            return {
                isShow: true,
            }
        },
        methods: {
            beforeEnter(el, done) {
                el.style.opacity = 0
            },
            // 必须使用回调才能继续执行下面的代码
            enter(el, done) {
           // HTMLElement.offsetWidth只读属性返回一个元件作为一个整数的布局宽度
                el.offsetWidth;
                el.style.fontSize = "50px";
            // 控制动画速度的方法  控制2s内完成
                el.style.transition = 'all 2s ease';
                done();
            },
            afterEnter(el, done) {
                el.style.opacity = 1;
            }
        }
    })
</script>

5、列表渲染多个元素过渡
1)先弄一个transition-group 组件 展示一个列表然后点击一个删除一个
2) 删除用到点击事件和自定义的方法这个方法使用es6 filter筛选
3）加的动画使用animate

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
    <style>

    </style>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<body>
    <div id="box">
        <!-- 特别注意针对多个元素 需要使用transition-group         -->
        <!-- 这个地方使用 animated  效果是bounce -->
        <transition-group name="xxx" leave-active-class="animated bounce">
            <div v-for="data in datalist" :key="data" @click="del(data)">{{data}}</div>
        </transition-group group>
    </div>
</body>

</html>
<script>
    var vm = new Vue({
        el: '#box',
        data() {
            return {
                datalist: [1, 2, 3, 4]
            }
        },
        methods: {
            del(data) {
                // 使用es6 筛选方法  实现筛选出的东西不要 
                // 配合点击事件 点击之后 删除 
                this.datalist = this.datalist.filter(item => {
                    return item != data
                })
            }
        }
    })
</script>