Vue簡易案例二(指令)

時間 2019-11-08

標籤 vue 簡易案例指令简体版

原文原文鏈接

前端寫特效的時候必需要保證DOM是加載完畢的，以前我用組件生命週期的update寫，多有不便，現發現自定義指令比較好，指令裏面也是有周期，能作到相對的分離，案例奉上javascript

<!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>
複製代碼

1. VUE簡易案例一
2. Vue2.0簡易案例
3. vue-cli+vue-router+vuex+iview書店案例（簡單易學）
4. 簡易 Ajax 入門案例
5. 簡易計算器案例
6. 簡易聊天室案例
7. vue簡單指令筆記
8. vue指令總結（二）
9. 0二、Vue-指令系統
10. vue系列之二指令
更多相關文章...
• XSD 簡易元素 - XML Schema 教程
• C# 預處理器指令 - C#教程
• Git可視化極簡易教程 — Git GUI使用方法
• Docker 清理命令

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。