vue第二天 ---案例+过滤器+自定义指令+生命周期+动画

Bertha 。 2021-09-19 10:16 228阅读 0赞

1：品牌管理案例

增加+删除+搜索

页面布局：

面板+列表

用到了panel panel-primary ，panel-heading,panel-body(label(id+输入框，)，button)

列表 table,table-hover,table-striped table-bordered (thead(tr,th),tbody(tr,td))

增加实现过程：

1:获取id，和name的值，直接从data里面获取(因为进行了数据绑定)

2：组织成一个对象，

3：这个对象调用数组的相关方法，把数据添加到data中的liste里面

删除：

1：获取要删除数据的id，获取索引

2：直接用splice进行删除

this.list.some((item,i)=>\{

if(item.id = id)\{

this.list.splice('i',1)

return true

\})

var index = this.list.findIndex(item=>\{

if(item.id ===id)\{

return true

\})

this.list.splice(index,1);

在这里需要注意，搜索的时候，是根据id所对应的索引值进行搜索，

id可以根据用户点击的id和本身的id进行比对，如果是，则删除，但是找到id以后，关键你是要用数组的方法，用数组的方法，你要找到索引，新增的数组新方法就很给力，forEach，some，filter，findIndex

都会对数组额每一项进行遍历，执行相关操作

过滤器

vue容许你有自定义过滤器，可以被用作一些常见的文本格式化。两处：插值表达式，事件绑定。过滤器应该被添加在js表达式的尾部，由管道符表示

过滤器分为私有过滤器和去全局过滤器

在引入vue的时候，浏览器内部就创建了Vue构造函数，我们可以通过.来用他的属性和方法

'过滤器名称'，'回调函数(原始)'

自定义键盘修饰符

在所选框添加键盘事件@key.f2="add"

在vue实例里面调用config

Vue.config.keyCodes.f2 = 113;

自定义全局指令，让文本框获取焦点

在原加指令v-f 即可

Vue.directive('f',\{

bind(el):\{

el.focus()

\},

inserted

update

\})

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <script src="../lib/vue-2.4.0.js"></script>
        <link rel="stylesheet" href="../lib/node_modules/bootstrap/dist/css/bootstrap.css"/>
    </head>
    <body>
    <div class="app">
        
        <div class="panel panel-primary">
            
            <div class="panel-heading">添加商品</div>
            <div class="panel-body form-inline">
                <label for="">
                    ID
                    <input type="text" v-model="id">
                </label>
                <label for="">
                    NAME
                    <input type="text" v-model="name" @keyup.f2="add">
                    
                </label>
                <input type="button" class="btn btn-primary" value="添加" @click="add">
                搜索关键字:
                <input type="text" v-model="keywords" v-f>
            </div>
        </div>
    
        
        <table class="table table-hover table-striped table-bordered">
            <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Ctime</th>
                <th v-fonts="'60px'">option</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="item in search(keywords)" :key="item.id">
                <td>{
       {item.id}}</td>
                <td>{
       {item.name}}</td>
                <td>{
       {item.time|dateFormat}}</td>
                <td><a href="" @click.prevent="remove(item.id)">删除</a></td>
            </tr>
            </tbody>
        </table>
    </div>
    
    </body>
    <script>
        // 自定义键盘修饰符
        Vue.config.keyCodes.f2 = 113;
    
        Vue.directive('f', {
            bind(el) {
                el.focus();
            },
            inserted(el) {
                el.focus();
            },
            update(el) {
                el.focus();
            }
        })
    
        // 所谓的全局过滤器就是，所有vm实例都是共享的
        Vue.filter('dateFormat', function (dateStr) {
    //根据给定时间字符串，得到特定的时间,这是精髓，因为具体时间是item.time.但是他又是在变化的，直接用一个变量来传入当前的时间，美哉
            var dt = new Date(dateStr);
            var y = dt.getFullYear();
            //填充  padSart(几位，要填充什么) --在头部补全
            var m = (dt.getMonth() + 1).toString().padStart(2, '0');
            var d = (dt.getDate()).toString().padStart(2, '0');
            var h = (dt.getHours()).toString().padStart(2, '0');
            var s = (dt.getSeconds()).toString().padStart(2, '0');
            var mm = (dt.getMinutes()).toString().padStart(2, '0');
    //        return '${y}-${m}-${d}';
            return y + '-' + m + '-' + d + ' ' + h + ':' + s + ':' + mm
        })
    
    
        var vm = new Vue({
            el: ".app",
            data: {
                id: "",
                name: "",
                keywords: "",
    
                list: [
                    {
                        id: 1,
                        name: "小明",
                        time: new Date()
                    },
    
                    {
                        id: 2,
                        name: "小红",
                        time: new Date()
                    },
                    {
                        id: 1,
                        name: "小蓝",
                        time: new Date()
                    }
                ]
            },
            methods: {
                add() {
                    // 每次修改data中的值，vue会自动监听数据的改动，会自动把最新的数据，应用到页面
                    this.list.push({id: this.id, name: this.name, time: new Date()})
                    this.name = this.id = ''
                },
                remove(id) {
    //                 // 根据id，找到要删除这一项的索引
    //                 // 如果索引找到了，直接调用splice方法
    //                 this.list.some((item, i) => {
    //                     if (item.id === id) {
    //                         this.list.splice(i, 1)
    // // 在some中，如过return true ，就会终止后面的循环
    //                         return true
    //
    //                     }
    //                 })
    //
    //                 快速找到索引
                    var index = this.list.findIndex(item => {
                        if (item.id === id) {
                            return true
                        }
    
                    })
                    // console.log(index);
                    this.list.splice(index, 1);
                },
                search(keywords) { //根据关键字，进行数据的搜索
                    //     var newList = [];
                    //     this.list.forEach(item => {
                    //         if (item.name.indexOf(keywords) != -1) {
                    //             newList.push(item)
                    //         }
                    //     })
                    //     return newList
                    //     筛选过滤
                    return this.list.filter(item => {
                        if (item.name.includes(keywords)) {
                            return item
                        }
    
                    })
                    // return newList;
                },
                // 注意:forEach ,some,filter,findIndex,这些都属于数组的新方法
                // 都会对数组的每一项进行遍历，执行相关操作
    // 私有过滤器
                filters: { //定义私有过滤器 ，名称和处理函数
                    DataFormate(dataStr) {
                        var dt = new Date(dateStr);
                        var y = dt.getFullYear();
                        var m = (dt.getMonth() + 1).toString().padStart(2, '0');
                        var d = (dt.getDate()).toString().padStart(2, '0');
                        var h = (dt.getHours()).toString().padStart(2, '0');
                        var s = (dt.getSeconds()).toString().padStart(2, '0');
                        var mm = (dt.getMinutes()).toString().padStart(2, '0');
    //        return '${y}-${m}-${d}';
                        return y + '-' + m + '-' + d + ' ' + h + ':' + s + ':' + mm
                    }
    
    
                }
            },
            directives: {
                'fonts': {
                    function(el, binding) {
                        el.style.fontSize = parseInt(binding.value())+'px';
                    }
                }
            }
    
        })
    
    </script>
    </html>

bind，inserted，update都是钩子函数，类似于回调函数，如果你满足我的条件，就会执行后面的相关操作

VUE生命周期

什么是生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！  
\+ \[生命周期钩子\](https://cn.vuejs.org/v2/api/\#选项-生命周期钩子)：就是生命周期事件的别名而已；  
\+ 生命周期钩子 = 生命周期函数 = 生命周期事件  
\+ 主要的生命周期函数分类：  
 - 创建期间的生命周期函数：  
      + beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性  
      + created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板  
      + beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中  
      + mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示  
 - 运行期间的生命周期函数：  
     + beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点  
     + updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！  
 - 销毁期间的生命周期函数：  
     + beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。  
     + destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

创建--运行---销毁流程图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>案例</title>
        <script src="./lib/vue-2.4.0.js"></script>
    </head>
    <body>
    <div class="app">
        <input type="button" value="点我" @click="msg='NO'">
        <h3 id="h">{
       {msg}}</h3>
    </div>
    </body>
    <script>
        var vm = new Vue({
            el: ".app",
            data: {
                msg: "ok"
            },
            methods: {
                show() {
                    console.log("我是受")
                }
            },
            beforeCreate() { //这是我们遇到的一个生命周期函数，表示实例在完全被创建出来之前，会执行他
    // console.log(this.msg);
    // this.show()
    //             注意：在beforeCreate生命周期执行的时候，data，methods中的数据都换没有被初始化
            },
            created() { //这是我们遇到的第二个生命周期函数
                console.log(this.msg);
                this.show()
            },
            beforeMount() { //第三个声明周期函数，表示魔板已经在内存中编辑完成，但是尚未把魔板渲染到页面
                console.log(document.getElementById("h").innerText);
                console.log(this.msg);
    // 在beforeMount执行的时候，页面中的元素换没有真正的被替换过来，只是之前写的一些魔板字符串
            },
            mounted() { //第四个生命周期函数，表示内存中的魔板，已经真实的挂载到页面中，用户已经可以真实的看到页面了
                console.log(document.getElementById("h").innerText);
                // mounted()是实例创造期间的最后一个生命函数，当执行完mounted，表示实例已经被创建好了。因此没有其他操作的话，这个实例就静静的躺在内存中，一动不动
            },
            // 接下来是运行中的两个事件
            beforeUpdate() { //表示界面换没有被跟新(数据肯定跟新了)
                console.log('界面内容' + document.getElementById("h").innerText);
                console.log("data中的msg数据" + this.msg)
                // 页面和data数据不一致
            },
            updated() { //表示界面换没有被跟新(数据肯定跟新了)
                console.log('界面内容' + document.getElementById("h").innerText);
    
                console.log("data中的msg数据" + this.msg)
                // 页面和data数据不致
    
            }
        })
    </script>
    </html>

在VUE怎么发起ajax请求

\[vue-resource 实现 get, post, jsonp请求\](https://github.com/pagekit/vue-resource)  
除了 vue-resource 之外，还可以使用 \`axios\` 的第三方包实现实现数据的请求  
1. 之前的学习中，如何发起数据请求？  
2. 常见的数据请求类型？  get  post jsonp  
3. 测试的URL请求资源地址：  
 + get请求地址： http://vue.studyit.io/api/getlunbo  
 + post请求地址：http://vue.studyit.io/api/post  
 + jsonp请求地址：http://vue.studyit.io/api/jsonp  
4. JSONP的实现原理  
 + 由于浏览器的安全性限制，不允许AJAX访问 协议不同、域名不同、端口号不同的 数据接口，浏览器认为这种访问不安全；  
 + 可以通过动态创建script标签的形式，把script标签的src属性，指向数据接口的地址，因为script标签不存在跨域限制，这种数据获取方式，称作JSONP（注意：根据JSONP的实现原理，知晓，JSONP只支持Get请求）；  
 + 具体实现过程：  
     - 先在客户端定义一个回调方法，预定义对数据的操作；  
     - 再把这个回调方法的名称，通过URL传参的形式，提交到服务器的数据接口；  
     - 服务器数据接口组织好要发送给客户端的数据，再拿着客户端传递过来的回调方法名称，拼接出一个调用这个方法的字符串，发送给客户端去解析执行；  
     - 客户端拿到服务器返回的字符串之后，当作Script脚本去解析执行，这样就能够拿到JSONP的数据了；

vue动画：

为什么要有动画：动画能够提高用户的体验，帮助用户更好的理解页面中的功能；

动画四个时间点，两个时间段

v-enter 和v-leave-to是一样的

v-enter-active 和v-leave-enter是一样的

但是要自定义动画属性，只需要在transition属性里面添加name="my"  上面用my-enter,之类的就可以

利用钩子函数，实现半程动画

before-enter   enter    after-enter

before一般是设置初始位置

enter是设置，小球动画的足迹，以及可以传参(done),来直接调用after-enter里面写的代码，比如让其再次回到初始位置的flag

列表动画

<!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="lib/vue-2.4.0.js"></script>
        <style>
            li {
                border: 1px dashed blue;
                padding: 5px;
                width: 100%;
                /*position: relative;*/
    
            }
    
            .v-enter,
            .v-leave-to {
                opacity: 0;
                transform: translateY(80px);
    
            }
    
            .v-enter-active,
            .v-leave-active {
                transition: all 1s ease;
            }
    
            li:hover {
                background-color: pink;
                transition: all 0.4s ease;
            }
    
            /*固定实现列表后续的列表渐渐的飘上来*/
            .v-move {
                transition: all 0.6s ease;
    
            }
    
            .v-leave-active {
                position: absolute;
            }
        </style>
    </head>
    <body>
    <div class="app">
        <div>
            <label for="">
                ID:
                <input type="text" v-model="id">
            </label>
            <label for="">
                Name:
                <input type="text" v-model="name">
            </label>
            <input type="button" value="add" @click="add">
            <a href="" @click.prevnt="remove(item.id)">删除</a>
        </div>
        
        <transition-group appear tag="ul">
            <li v-for="(item,i) in list" :key="item.id" @click="del(i)">
                {
       {item.id}} ---------{
       {item.name}} ----------{
       {item.time}}
            </li>
        </transition-group>
        
    </div>
    </body>
    <script>
        var vm = new Vue({
            el: ".app",
            data: {
                id: '',
                name: '',
                list: [
                    {
                        id: 12,
                        name: "小明",
                        time: new Date()
                    },
                    {
                        id: 13,
                        name: "小明",
                        time: new Date()
                    },
                    {
                        id: 14,
                        name: "小明",
                        time: new Date()
                    }
                ]
            },
            methods: {
                add() {
                    this.list.push({id: this.id, name: this.name, time: new Date()})
                    this.id = this.name = ''
                },
                del(i) {
                    this.list.splice(i, 1);
                }
                // remove(id) {
                //     this.list.some((item, i) => {
                //         if (item.id == id) {
                //             this.list.splice(i, 1);
                //             return true;
                //         }
                //     })
                // }
            }
    
        })
    </script>
    </html>

列表用transition-group包着

tag=“ul”，默认是span包li，这样不符合规范

appar ---列表以动画的形式展现

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70]: /images/20210812/7e7f6d85cae44be48358fdb33e447e39.png