Fork me on GitHub

Vue.js 第2章 钩子函数&自定义指令&过滤器&计算属性&侦听器

 

目标

钩子函数

自定义指令

自定义过滤器

计算属性

监听属性

 

局部自定义指令

  • 为什么需要自定义指令

    • 为了复用，为了代码的灵活

  • 指令的分类：全局指令，局部指令

    • 在vm外面创建的指令

    • 通过Vue.directive来创建

  • 如何定义自定义指令(不用赋值)

    • Vue.directive(名称，{inserted(el,binding){}})

  • 如何使用自定义指令(不用赋值)

    • v-名称

  • 如何定义带值的指令

    • Vue.directive(名称，{inserted(el,binding){binding.value}})

  • 如何使用需要赋值的指令

    • v-名称='值'

需求：我们希望能够在页面加载完成的时候让id文本框获取焦点

  • 页面加载完毕就触发：window.onload

  • 获取焦点:dom.focus()

  • 在vue中有一套完整的生命周期的钩子函数

    • mounted钩子函数，它是一个独立的结构，不要写在methods属性中

    • 钩子函数：在某个场景会自动触发的函数

  • 不建议使用原生dom的方式去获取元素，因为vue就是希望能够将我们从繁琐的dom操作中解脱

  • vue中标记元素可以通过ref （reference）

    • ref='标记值'

    • 功能类似于之前的id设置

    • 获取值通过this.$refs

  • 上面的实现方式虽然可以，但是有一个重大 的缺点：如果需要获取焦点的元素发生变化，那和以意味着模板代码和mounted钩子函数中的代码也需要进行修改--不方便也不合理。我希望达到这样的效果：我做出一个能够让元素获取焦点的功能(函数)，如果元素需要获取焦点就进行调用，否则就当它不存在--这个玩意就是指令

  • 指令：可以实现某种功能，用户可以选择使用

    • 什么是全局自定义指令 ：在vue实例外创建的指令

    • 如何创建全局自定义指令

      • Vue.directive(名称，{inserted钩子函数})

      • inserted钩子函数：在添加指令的元素插入到父节点时触发--说白了就是生成dom树

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

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        #app {
            width: 600px;
            margin: 10px auto;
        }

        .tb {
            border-collapse: collapse;
            width: 100%;
        }

        .tb th {
            background-color: #0094ff;
            color: white;
        }

        .tb td,
        .tb th {
            padding: 5px;
            border: 1px solid black;
            text-align: center;
        }

        .add {
            padding: 5px;
            border: 1px solid black;
            margin-bottom: 10px;
        }
    </style>
    <!-- 1.引入js文件 -->
    <script src="./js/vue2.js"></script>
</head>

<body>
    <!-- 4.添加模板结构 -->
    <div id="app">
        <div class="add">
            编号:
            <input type="text" v-model='id' ref='bid'> 
            品牌名称:
            <input type="text" v-model='brandname' ref='bname'  v-focus>
            <input type="button" value="添加" @click='add'>
        </div>
        <div class="add">
            品牌名称:
            <input type="text" placeholder="请输入搜索条件" >
        </div>
        <div>
            <table class="tb">
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>品牌名称</th>
                        <th>创立时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 5.实现循环遍历生成动态结构 -->
                    <tr v-for="(value,index) in brandList">
                        <td>{{value.id}}</td>
                        <td>{{value.name}}</td>
                        <td>{{value.time}}</td>
                        <td>
                            <a href="#" @click='del(index)'>删除</a>
                        </td>
                    </tr>
                    <!-- 添加提示 -->
                    <!--通过v-show来实现提示信息的合理出现 -->
                    <tr v-show="brandList.length==0">
                        <td colspan="4">没有任何数据了，请先添加</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <script>
        // window.onload = function(){

        // }
        // 1.定义全局自定义指令：全局自定义是指在vm实例定义的指令
        // 2.通过Vue.directive来创建自定义指令
        // Vue.directive(指令名称,{配置})
        Vue.directive('focus',{
            inserted(el,binding,vNode){
                // 我们需要获取元素并设置聚焦
                console.log(el)
                el.focus()
            }
        })

        // 2.创建vm实例
        var vm = new Vue({
            // 3.添加配置
            el: '#app',
            data: {
                // id号
                id:'',
                // 品牌名称
                brandname:'',
                brandList: [
                    {
                        "id": 1,
                        name: 'AA',
                        time: new Date()
                    },
                    {
                        "id": 2,
                        name: 'BB',
                        time: new Date()
                    }
                ]
            },
            methods:{
                // 删除
                del(index){
                    this.brandList.splice(index,1)
                },
                // 添加
                add(){
                    // 生成对象
                    var newobj = {id:this.id,name:this.brandname,time:new Date()}
                    // 添加到数组
                    this.brandList.push(newobj)
                }
            },
            // 添加一个生命周期钩子函数
            mounted(){
                // 实现元素的自动获取焦点
                // document.querySelector('#bid').focus()
                // console.log(this)
                // this.$refs可以获取模板中所有拥有ref属性的元素，它是一个对象
                // this.$refs.bid.focus()
            }
        })
    </script>
</body>

</html>

使用 “v-名称” 来调用全局自定义指令

 

新的需求：我们需要根据用户的喜好来修改文本颜色

  • 通过指令来实现

  • 通过Vue.directive(名称,{inserted(el,binding){}})

  • 使用指令的时候：v-名称='值'

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

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        #app {
            width: 600px;
            margin: 10px auto;
        }

        .tb {
            border-collapse: collapse;
            width: 100%;
        }

        .tb th {
            background-color: #0094ff;
            color: white;
        }

        .tb td,
        .tb th {
            padding: 5px;
            border: 1px solid black;
            text-align: center;
        }

        .add {
            padding: 5px;
            border: 1px solid black;
            margin-bottom: 10px;
        }
    </style>
    <!-- 1.引入js文件 -->
    <script src="./js/vue2.js"></script>
</head>

<body>
    <!-- 4.添加模板结构 -->
    <div id="app">
        <div class="add">
            编号:
            <input type="text" v-model='id' ref='bid' v-setcolor="color"> 
            品牌名称:
            <input type="text" v-model='brandname' ref='bname'  v-focus >
            <input type="button" value="添加" @click='add'>
        </div>
        <div class="add">
            品牌名称:
            <input type="text" placeholder="请输入搜索条件" >
        </div>
        <div>
            <table class="tb">
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>品牌名称</th>
                        <th>创立时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 5.实现循环遍历生成动态结构 -->
                    <tr v-for="(value,index) in brandList">
                        <td>{{value.id}}</td>
                        <td>{{value.name}}</td>
                        <td>{{value.time}}</td>
                        <td>
                            <a href="#" @click='del(index)'>删除</a>
                        </td>
                    </tr>
                    <!-- 添加提示 -->
                    <!--通过v-show来实现提示信息的合理出现 -->
                    <tr v-show="brandList.length==0">
                        <td colspan="4">没有任何数据了，请先添加</td>
                    </tr>
                </tbody>
            </table>
            <button @click='color="red"'>红色</button>
            <button @click='color="green"'>绿色</button>
            <button @click='color="yellow"'>黄色</button>
        </div>
    </div>
    <script>
        // window.onload = function(){

        // }
        // 1.定义全局自定义指令：全局自定义是指在vm实例定义的指令
        // 2.通过Vue.directive来创建自定义指令
        // Vue.directive(指令名称,{配置})
        Vue.directive('focus',{
            inserted(el,binding,vNode){
                // 我们需要获取元素并设置聚焦
                console.log(el)
                el.focus()
            }
        })
        // 设置颜色的自定义指令
        Vue.directive('setcolor',{
            // el:当前使用这个指令的元素
            // binding:它是一个对象，里面有一个属性value,就是当前指令所绑定的值
            inserted(el,binding){
                console.log(binding)
                el.style.color = binding.value
            },
            // 添加update,监听指令的值的变化，以便页面进行刷新
            update(el,binding){
                console.log(el)
                console.log(binding)
                el.style.color = binding.value
            }
        })

        // 2.创建vm实例
        var vm = new Vue({
            // 3.添加配置
            el: '#app',
            data: {
                color:'yellow',
                // id号
                id:'',
                // 品牌名称
                brandname:'',
                brandList: [
                    {
                        "id": 1,
                        name: 'AA',
                        time: new Date()
                    },
                    {
                        "id": 2,
                        name: 'BB',
                        time: new Date()
                    }
                ]
            },
            methods:{
                // 删除
                del(index){
                    this.brandList.splice(index,1)
                },
                // 添加
                add(){
                    // 生成对象
                    var newobj = {id:this.id,name:this.brandname,time:new Date()}
                    // 添加到数组
                    this.brandList.push(newobj)
                }
            },
            // 添加一个生命周期钩子函数
            mounted(){
                // 实现元素的自动获取焦点
                // document.querySelector('#bid').focus()
                // console.log(this)
                // this.$refs可以获取模板中所有拥有ref属性的元素，它是一个对象
                // this.$refs.bid.focus()
            }
        })
    </script>
</body>

</html>

命名细节：如果你使用cemal命名法，那么在使用指令的时候就需要将多个单词拆分开，使用-连接。所以建议定义指令的时候命名都是小写

update钩子函数可处理当数据或者模板内容发生变化的时候就自动的触发

// 添加update,监听指令的值的变化，以便页面进行刷新
update(el,binding){
    console.log(el)
    console.log(binding)
    el.style.color = binding.value
}

 

局部过滤器

  • 作用：对传入的数据进行处理，返回合理的结果

  • 种类：

    • 全局过滤器：在vm实例之前(外面)创建的过滤器

    • 局部过滤器：在组件内部创建的过滤器

  • 如何定义

    • Vue.filter(名称，函数)

    • 细节

      • 过滤器会默认接收一个参数，这个参数就是当前调用过滤器的数据对象

      • 如果你手动传递了参数，也不会影响默认参数的传递，意味着过滤器中直接在默认参数后添加新的接收形参就可以了

      • 过滤器的函数“一定”要写return,因为过滤器一定要返回结果

  • 如何调用

    • 通过管道符|

    • 格式：需要调用过滤器的数据 | 过滤器名称

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

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        #app {
            width: 600px;
            margin: 10px auto;
        }

        .tb {
            border-collapse: collapse;
            width: 100%;
        }

        .tb th {
            background-color: #0094ff;
            color: white;
        }

        .tb td,
        .tb th {
            padding: 5px;
            border: 1px solid black;
            text-align: center;
        }

        .add {
            padding: 5px;
            border: 1px solid black;
            margin-bottom: 10px;
        }
    </style>
    <!-- 1.引入js文件 -->
    <script src="./js/vue2.js"></script>
</head>

<body>
    <!-- 4.添加模板结构 -->
    <div id="app">
        <div class="add">
            编号:
            <input type="text" v-model='id' ref='bid' v-setcolor="color">
            品牌名称:
            <input type="text" v-model='brandname' ref='bname' v-focus>
            <input type="button" value="添加" @click='add'>
        </div>
        <div class="add">
            品牌名称:
            <input type="text" placeholder="请输入搜索条件" @keyup='search'>
        </div>
        <div>
            <table class="tb">
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>品牌名称</th>
                        <th>创立时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 5.实现循环遍历生成动态结构 -->
                    <tr v-for="(value,index) in brandList">
                        <td>{{value.id}}</td>
                        <td>{{value.name}}</td>
                        <!-- <td>{{timeFormat(value.time)}}</td> -->
                        <td>{{value.time | timeForamt('~')}}</td>
                        <td>
                            <a href="#" @click='del(index)'>删除</a>
                        </td>
                    </tr>
                    <!-- 添加提示 -->
                    <!--通过v-show来实现提示信息的合理出现 -->
                    <tr v-show="brandList.length==0">
                        <td colspan="4">没有任何数据了，请先添加</td>
                    </tr>
                </tbody>
            </table>
            <button @click='color="red"'>红色</button>
            <button @click='color="green"'>绿色</button>
            <button @click='color="yellow"'>黄色</button>
        </div>
    </div>
    <script>
        // window.onload = function(){

        // }
        // 1.定义全局自定义指令：全局自定义是指在vm实例定义的指令
        // 2.通过Vue.directive来创建自定义指令
        // Vue.directive(指令名称,{配置})
        Vue.directive('focus', {
            inserted(el, binding, vNode) {
                // 我们需要获取元素并设置聚焦
                console.log(el)
                el.focus()
            }
        })
        // 设置颜色的自定义指令
        Vue.directive('setcolor', {
            // el:当前使用这个指令的元素
            // binding:它是一个对象，里面有一个属性value,就是当前指令所绑定的值
            inserted(el, binding) {
                console.log(binding)
                el.style.color = binding.value
            },
            // 添加update,监听指令的值的变化，以便页面进行刷新
            update(el, binding) {
                console.log(el)
                console.log(binding)
                el.style.color = binding.value
            }
        })

        // 添加全局的自定义过滤器
        Vue.filter('timeForamt', (date,seperator1) => {
            // var date = new Date();
            // var seperator1 = "/";
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            var currentdate = year + seperator1 + month + seperator1 + strDate;
            return currentdate;
        })


        // 2.创建vm实例
        var vm = new Vue({
            // 3.添加配置
            el: '#app',
            data: {
                color: 'yellow',
                // id号
                id: '',
                // 品牌名称
                brandname: '',
                brandList: [
                    {
                        "id": 1,
                        name: 'AA',
                        time: new Date()
                    },
                    {
                        "id": 2,
                        name: 'BB',
                        time: new Date()
                    }
                ]
            },
            methods: {
                // 格式化日期
                // timeFormat(time){
                //     return "2019-9-9 :9:9:9"
                // },
                // 删除
                del(index) {
                    this.brandList.splice(index, 1)
                },
                // 添加
                add() {
                    // 生成对象
                    var newobj = { id: this.id, name: this.brandname, time: new Date() }
                    // 添加到数组
                    this.brandList.push(newobj)
                }
            },
            // 添加一个生命周期钩子函数
            mounted() {
                // 实现元素的自动获取焦点
                // document.querySelector('#bid').focus()
                // console.log(this)
                // this.$refs可以获取模板中所有拥有ref属性的元素，它是一个对象
                // this.$refs.bid.focus()
            }
        })
    </script>
</body>

</html>

 

计算属性

什么是计算属性：它是一个属性对象，里面可以封装复杂的业务逻辑--方法

　　你在计算属性中定义是的函数，但是可以像使用普通属性一样来使用计算属性

　　里面的函数是一个属性，所以不能以函数的方式进行调用，否则报错

什么场景使用计算属性：当你的模板中的业务比较复杂的时候就可以使用计算属性进行封装

　　当计算属性中依赖的数据发生变化的时候，这个计算属性就会被触发

　　所谓依赖的数据就是指里面所依赖的this的成员

它与普通方法的区别:

普通方法没有缓存机制，只要你使用到了方法，就必须进行方法的调用执行

而计算属性是基本依赖进行缓存的，意味着只要依赖项的值没有变化，那么计算属性不会再重新的调用，而是使用上一次的计算结果--提高效率

 

使用计算属性实现搜索功能

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

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        #app {
            width: 600px;
            margin: 10px auto;
        }

        .tb {
            border-collapse: collapse;
            width: 100%;
        }

        .tb th {
            background-color: #0094ff;
            color: white;
        }

        .tb td,
        .tb th {
            padding: 5px;
            border: 1px solid black;
            text-align: center;
        }

        .add {
            padding: 5px;
            border: 1px solid black;
            margin-bottom: 10px;
        }
    </style>
    <!-- 1.引入js文件 -->
    <script src="./js/vue2.js"></script>
</head>

<body>
    <!-- 4.添加模板结构 -->
    <div id="app">
        <div class="add">
            编号:
            <input type="text" v-model='id' ref='bid' v-setcolor="color">
            品牌名称:
            <input type="text" v-model='brandname' ref='bname' v-focus>
            <input type="button" value="添加" @click='add'>
        </div>
        <div class="add">
            品牌名称:
            <!-- oninput -->
            <input type="text" placeholder="请输入搜索条件" v-model='userKey'>
        </div>
        <div>
            <table class="tb">
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>品牌名称</th>
                        <th>创立时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 5.实现循环遍历生成动态结构 -->
                    <tr v-for="(value,index) in search">
                        <td>{{value.id}}</td>
                        <td>{{value.name}}</td>
                        <!-- <td>{{timeFormat(value.time)}}</td> -->
                        <td>{{value.time | timeForamt('~')}}</td>
                        <td>
                            <a href="#" @click='del(index)'>删除</a>
                        </td>
                    </tr>
                    <!-- 添加提示 -->
                    <!--通过v-show来实现提示信息的合理出现 -->
                    <tr v-show="search.length==0">
                        <td colspan="4">没有任何数据了，请先添加</td>
                    </tr>
                </tbody>
            </table>
            <button @click='color="red"'>红色</button>
            <button @click='color="green"'>绿色</button>
            <button @click='color="yellow"'>黄色</button>
        </div>
    </div>
    <script>
        // window.onload = function(){

        // }
        // 1.定义全局自定义指令：全局自定义是指在vm实例定义的指令
        // 2.通过Vue.directive来创建自定义指令
        // Vue.directive(指令名称,{配置})
        Vue.directive('focus', {
            inserted(el, binding, vNode) {
                // 我们需要获取元素并设置聚焦
                // console.log(el)
                el.focus()
            }
        })
        // 设置颜色的自定义指令
        Vue.directive('setcolor', {
            // el:当前使用这个指令的元素
            // binding:它是一个对象，里面有一个属性value,就是当前指令所绑定的值
            inserted(el, binding) {
                // console.log(binding)
                el.style.color = binding.value
            },
            // 添加update,监听指令的值的变化，以便页面进行刷新
            update(el, binding) {
                // console.log(el)
                // console.log(binding)
                el.style.color = binding.value
            }
        })

        // 添加全局的自定义过滤器
        Vue.filter('timeForamt', (date,seperator1) => {
            // var date = new Date();
            // var seperator1 = "/";
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            var currentdate = year + seperator1 + month + seperator1 + strDate;
            return currentdate;
        })


        // 2.创建vm实例
        var vm = new Vue({
            // 3.添加配置
            el: '#app',
            data: {
                // 搜索关键字
                userKey:'',
                color: 'yellow',
                // id号
                id: '',
                // 品牌名称
                brandname: '',
                brandList: [
                    {
                        "id": 1,
                        name: 'AA',
                        time: new Date()
                    },
                    {
                        "id": 2,
                        name: 'BB',
                        time: new Date()
                    }
                ]
            },
            methods: {
                // 删除
                del(index) {
                    this.brandList.splice(index, 1)
                },
                // 添加
                add() {
                    // 生成对象
                    var newobj = { id: this.id, name: this.brandname, time: new Date() }
                    // 添加到数组
                    this.brandList.push(newobj)
                }
            },
            computed: {
                search(){
                    // 监听用户关键字的变化，只是用户输入有变化，就需要重新进行搜索
                    // 计算属性中的函数一般都会返回一个计算结果
                    // var result = []
                    // for(var i=0;i<this.brandList.length;i++){
                    //     // 说明这个对象的name值中包含关键字，这就是我要找的记录之一
                    //     // 如果没有输入任何的关键字，那么this.userKey默认就是""
                    //     if(this.brandList[i].name.indexOf(this.userKey) != -1){
                    //         result.push(this.brandList[i])
                    //     }
                    // }
                    // return result
                    // 每次都会从数组中取出一个值，传递给回调函数中的参数value
                    // 在回调函数中对Value进行检测判断如果满足条件，那么就会将value值存储到filter方法内部创建的临时数组arr中，最终将这个数组arr返回
                    // forEach  map  filter
                    return this.brandList.filter((value) => {
                        return value.name.indexOf(this.userKey) != -1
                    })
                }
            }
        })
    </script> 
</body>

</html>
使用计算属性实现搜索功能

 

侦听属性--监听器

计算属性有一个不足：不能响应异步操作的结果。如果需要监听异步操作时数据的变化，就需要使用到watch

watch监听器如何添加

　　侦听器是一个属性

　　里面的方法名称不能随意，必须和你需要侦听的属性名称完全一致

<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="./js/vue2.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model='first'>
            <input type="text" v-model='second'>
            <p>{{fullname}}</p>
        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    first:'',
                    second:'',
                    fullname:''
                },
                // 添加侦听器
                watch:{
                    // 方法的名称必须和你想要侦听的data中的成员名称一致
                    first(newvalue,oldvalue){
                        setTimeout(() => {
                            console.log(newvalue,oldvalue)
                            this.fullname = newvalue.trim().toUpperCase() +":"+this.second
                        }, 100);
                    },
                    second(newvalue,oldvalue){
                        console.log(newvalue,oldvalue)
                    }
                }
            })
        </script>
    </body>
</html>
watch侦听器

 

watch监听如何实现深度监听

什么是深度：不再是this的直接成员，面是this的成员的成员

两种实现方式：

　　1.handler +deep

　　2.'对象.属性'(){}

深度监听Demo

<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="./js/vue2.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model='obj.name'>
            <input type="text" v-model='obj.age'>
            <p>{{obj.name+":"+obj.age}}</p>
        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    msg:'',
                    obj:{
                        name:'',
                        age:''
                    }
                },
                // 添加侦听属性
                watch:{
                    msg(){},
                    // 深度侦听：
                    // 为什么直接侦听obj，在修改数据的时候没有响应，是因为obj一个对象，你修改对象的属性值，并没有修改对象的的地址
                    // obj(){
                        
                    // }
                    // obj:{
                    //     // 通过handler函数进行侦听
                    //     handler(nv,ov){
                    //         console.log(nv.name,nv.age)
                    //     },
                    //     // 设置为深度侦听
                    //     deep:true
                    // }
                    // 侦听指定的成员值的变化
                    'obj.name' (nv){
                        console.log(nv)
                    }
                }
            })
        </script>
    </body>
</html>
深度监听

什么时候使用侦听器？

当数据操作涉及到异步方式的时候，就需要使用侦听器

 

Vue学习文档：https://cn.vuejs.org/v2/guide/

 

posted @ 2019-06-14 18:23  replaceroot  阅读(400)  评论(0)  编辑  收藏  举报