Vue.js(三)

一code当先

已于 2023-03-24 15:45:25 修改

阅读量170

点赞数

分类专栏：前端文章标签： vue vuejs vue.js 前端前端框架

于 2019-06-29 23:10:45 首次发布

本文链接：https://blog.csdn.net/xp_xpxp/article/details/94222978

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

过滤器–filter

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue 过滤器</title>

    <style type="text/css">
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>

<div id="app">
    <!--过滤器,只能用于插值表达式及v-bind属性中-->
    <!--过滤器格式:{{属性 | 过滤器}}-->
    <p v-cloak>{{msg | msgFormat('疯狂','邪恶')}}</p>
</div>

<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
<script type="text/javascript" charset="UTF-8">
    //过滤器定义语法:
    //注意:data就是调用过滤器时,'|'符号前面的属性值
    // Vue.filter('过滤器名称',function (data) {
    //     return data+"123";
    // })

    Vue.filter('msgFormat',function (msg,arg,arg1) {
        //注意:字符串的replace方法,第一个参数除了可以写一个字符串之外,还可以定义一个正则表达式
        return msg.replace(/单纯/g,arg+arg1);
    });
    
    var vm = new Vue({
        el: '#app',
        data: {
            msg:'曾经我也是一个单纯的少年,单纯的我,傻傻的问,谁是世界上最单纯的人'
        },
        methods: {}
    });
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue 过滤器</title>

    <style type="text/css">
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>

<div id="app">
    <p v-cloak>{{time | dateFormat('')}}</p>
</div>

<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
<script type="text/javascript" charset="UTF-8">
    var vm = new Vue({
        el: '#app',
        data: {
            time:new Date()
        },
        methods: {},
        //过滤器
        filters:{
            //定义私有的过滤器,只能在vue实例控制的区域内使用
            //过滤器的优先级别: 私有过滤器>全局过滤器
            //调用规则:就近原则
            dateFormat:function (data,pattern) {
                //根据给定的时间字符串,得到一个特定的时间
                var dt=new Date(data);
                var y=dt.getFullYear();
                var m=dt.getMonth()+1;
                var d=dt.getDate();

                if (pattern.toLowerCase()==='yyyy-mm-dd'){
                    return `${y}-${m}-${d}`;
                }else{
                    var hh=dt.getHours();
                    var mm=dt.getMinutes();
                    var ss=dt.getSeconds();

                    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
                }
            }
        }
    });
</script>
</body>
</html>

字符串的padStart方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue 过滤器</title>

    <style type="text/css">
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>


<div id="app">
    <p v-cloak>{{time | dateFormat('')}}</p>
</div>

<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
<script type="text/javascript" charset="UTF-8">
    var vm = new Vue({
        el: '#app',
        data: {
            time:new Date()
        },
        methods: {},
        //过滤器
        filters:{
            //定义私有的过滤器,只能在vue实例控制的区域内使用
            //过滤器的优先级别: 私有过滤器>全局过滤器
            //调用规则:就近原则
            dateFormat:function (data,pattern) {
                //根据给定的时间字符串,得到一个特定的时间
                var dt=new Date(data);
                var y=dt.getFullYear();
                //padStart(length,'new')对字符串进行填充,以'new'来填充,填充后的长度为length位
                var m=(dt.getMonth()+1).toString().padStart(2,'0');
                var d=dt.getDate();

                if (pattern.toLowerCase()==='yyyy-mm-dd'){
                    return `${y}-${m}-${d}`;
                }else{
                    var hh=(dt.getHours()).toString().padStart(2,"0");
                    var mm=dt.getMinutes();
                    var ss=dt.getSeconds();

                    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
                }
            }
        }
    });
</script>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>template</title>
</head>
<body>

<div id="app">

    <!--调用vue指令(包括自定义的指令)时,需要加上"v-"前缀-->
    <input type="text"  placeholder="name" v-focus/>
</div>

<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
<script type="text/javascript" charset="UTF-8">
    //自定义全局指令
    //参数一:指令名称,注意:调用的时候需要加上"v-"为前缀,定义的时候不需要
    //参数二:对象,这个对象身上,有一些指令相关的函数,这些函数可以在特定的阶段,执行相关的操作
    Vue.directive('focus',{
        //当指令绑定到元素上的时候会立即执行该函数,且只执行一次
        //参数el表示当前绑定的元素
        bind:function (el) {
            //当元素绑定了该指令的时候,该元素还没有插入到dom中去,这时候调用focus方法没有作用
            console.log("bind");
            //el.focus();
        },
        //当元素插入到dom中的时候会立即执行该函数
        inserted:function (el) {
            console.log("inserted");
            el.focus();
        },
        //当vnode更新的时候会立即执行该函数,可能会触发多次
        updated:function(el){
            console.log("updated");
        }
    });

    var vm=new Vue({
        el:'#app',
        data:{

        },
        methods:{

        }
    })

</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>template</title>
</head>
<body>

<div id="app">
    <!--调用vue指令(包括自定义的指令)时,需要加上"v-"前缀-->
    <input type="text" placeholder="name" v-color="'blue'"/>
</div>

<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
<script type="text/javascript" charset="UTF-8">
    //自定义全局指令
    Vue.directive("color",{
        //第一个参数el是该指令所绑定的元素
        //第二个参数binding是一个对象,表示该指令相关属性
        bind:function (el,binding) {
            //注意:style样式不同于js事件,不需要关心该元素是否已经添加到dom中
            //当该指令绑定到元素中,该元素就会有一个内联的样式,该元素之后被添加到dom中就会起作用
            //和style样式相关的操作建议都放在bind函数中
            el.style.color=binding.value;

            console.log(binding.name); //color
            console.log(binding.value); //blue
        },
        inserted:function () {
            //和js行为(/事件)有关的操作,建议都放在inserted函数中
        }
    });

    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {}
    })
</script>
</body>
</html>

自定义私有的指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义私有指令</title>
</head>
<body>

<div id="app">

    <p v-fontweight="500">hello vue</p>

</div>


<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
<script type="text/javascript" charset="UTF-8">
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        filters:{},
        //自定义私有的指令
        directives:{
            'fontweight':{
                bind:function (el,binding) {
                    el.style.fontWeight=binding.value;
                },
                inserted:function (el) {

                },
                updated:function (el) {
                    
                }
            }
        }
    })
</script>
</body>
</html>

指令函数的简写形式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义私有指令</title>
</head>
<body>

<div id="app">

    <p v-fontweight="500" v-fontsize="30">hello vue</p>

</div>


<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
<script type="text/javascript" charset="UTF-8">
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        filters:{},
        //自定义私有的指令
        directives:{
            'fontweight':{
                bind:function (el,binding) {
                    el.style.fontWeight=binding.value;
                },
                inserted:function (el) {

                },
                updated:function (el) {
                    
                }
            },
            //如果一个私有的指令的相关操作只是写在bind和update函数中,那么可以简写
            //该指令的function就等同于把代码写到了bind和update函数中
            'fontsize':function (el,binding) {
                el.style.fontSize=parseInt(binding.value)+"px";
            }
        }
    })
</script>
</body>
</html>

一code当先

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue.js(三)

过滤器–filter<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue 过滤器</title> <style type="text/css"> [v-cloak]{ ...
复制链接

扫一扫

专栏目录