Vue简易案例二(指令)

最新推荐文章于 2019-08-12 14:21:14 发布

weixin_34023982

最新推荐文章于 2019-08-12 14:21:14 发布

阅读量55

点赞数

文章标签：前端 javascript ViewUI

原文链接：https://juejin.im/post/5cf5d556f265da1b614fe393

版权

前端写特效的时候必须要保证DOM是加载完毕的，之前我用组件生命周期的update写，多有不便，现发现自定义指令比较好，指令里面也是有周期，能做到相对的分离，案例奉上

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <style type="text/css">
        *{padding: 0;margin:0;}
        ul,li{list-style: none}
        .sliderCon{
            width: 800px;
            height: 400px;
            margin: 50px auto;
            overflow: hidden;
            font-family: "微软雅黑";
            position: relative;
        }
        .sliderCon ul{
            position: absolute;
            left: 0;
            top: 0
        }
        .sliderCon ul li{
            width: 800px;
            height: 100%;
            line-height: 400px;
            text-align: center;
            font-size: 50px;
            color: #fff;
            float: left;
            /*font-weight: 700*/

        }
        .sliderCon ul li:nth-child(odd){
            background: green
        }
        .sliderCon ul li:nth-child(even){
            background: pink
        }
    </style>
</head>
<body>
    <div id="app">
        <div v-slider=lists class="sliderCon">
            <ul>
                <li v-for="(item,index) in lists">{{item.name}}</li>
            </ul>
        </div>
    </div>
</body>
</html>
<script type="text/javascript">
    var vm=new Vue({
        el:"#app",
        data:{
            lists:[
                {name:"第一条"},
                {name:"第二条"},
                {name:"第三条"},
                {name:"第四条"},
            ]
        },
        directives:{
            slider:{
                bind:function(el,obj){
                },
                update:function(el){
                    console.log("更新");

                },
                componentUpdate:function(){
                    console.log("组件更新");
                },
                inserted:function(el,obj){
                    // obj.value[0].name="4555656";
                    var ul=$(el).find("ul");
                    var li=ul.find("li");
                    ul.css("width",li.length*$(el).width());
                    var index=0;
                    setInterval(function(){
                        index>=li.length-1?index=0:index++;
                        ul.animate({"left":"-"+index*li.width()+"px"},300)
                    },1000)

                }
            }
        }
    })

</script>
复制代码