vue 實例

時間 2019-12-16

標籤 vue 實例简体版

原文原文鏈接

一、站點添加實例javascript

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

    <script type="text/javascript" src="../js/vue.min.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.css">

</head>
<body>

<div id="app">


    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">添加站點</h3>
        </div>
        <div class="panel-body form-inline">
            <label>Id:<input type="text" class="form-control" v-model="id"></label>
            <!--按enter觸發add-->
            <label>Name:<input type="text" class="form-control" v-model="name" @keyup.enter="add"></label>
            <input type="button" value="添加" class="btn btn-primary" @click="add">
            <label>搜索名稱關鍵字:
                <input type="text" class="form-control" v-model="keywords" id="search" v-focus v-color="'blue'">
            </label>
        </div>
    </div>

    <table class="table table-bordered table-hover table-striped">
        <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Ctime</th>
            <th>Operation</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in search(keywords)">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.ctime | dateFormat()}}</td>
            <td><a href="#" @click.prevent="del(item.id)">刪除</a></td>
        </tr>
        </tbody>
    </table>

</div>

<div id="app1">
    <p v-fontweight="900" v-fontsize="50">{{dt | dateFormat}}</p>
</div>
<script>
    //過濾器Vue
    Vue.filter('dateFormat',function (dateStr,pattern="") {
        //將字符串獲取當前時間
        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')//填充後兩個長度
       /* return y + '-' + m + '-'+ d
        return '${y}-${m}-${d}'*/
       //if(pattern && pattern.toLowerCase() === 'yyyy-mm-dd'){
       if(pattern && pattern.toLowerCase() === 'yyyy-mm-dd'){
           //return '${y}-${m}-${d}'
           return y + '-' + m + '-'+ d
       }else {
           var hh = dt.getHours().toString().padStart(2,'0')
           var mm = dt.getMinutes().toString().padStart(2,'0')
           var ss = dt.getSeconds().toString().padStart(2,'0')

           return y + '-' + m + '-'+ d +' '+hh+':'+mm+':'+ss
       }
    })


    //自定義按鍵修飾符
    Vue.config.keyCodes.f2 = 113

    //自定義指令 v-focus,
    //param1 名稱
    //param2 inserted  update bind
    Vue.directive('focus',{
        bind:function (el) {//首先執行 執行一次,el dom對象，觸發的dom
            //在元素剛綁定，含沒有插入到dom
        },
        inserted:function (el) {//插入到dom
            el.focus()//行爲
        },
        updated:function (el) {

        }//觸發一次
    })

    Vue.directive('color',{
        //樣式
        bind:function (el,binding) {
            el.style.color = 'red'
            //console.log(binding.name)
            // console.log(binding.expression)
            // console.log(binding.value)
            el.style.color = binding.value
        }
    })

    var vm = new Vue({
        el:'#app',
        data:{
            id:'',
            name:'',
            keywords:'',
            websites:[
                {id:1,name:'百度',ctime:new Date()},
                {id:2,name:'京東',ctime:new Date()},
                {id:3,name:'淘寶',ctime:new Date()}
            ]
        },
        methods:{
            add(){//添加
                //1獲取id和name,直接從data獲取
                //2.組織出一個對象
                //3.把這個對象，調用數組的相關方法，添加到當前的data上的websites
                if(this.id!='' && this.name!= ''){
                    var website = {id:this.id,name:this.name,ctime:new Date()}

                    this.websites.push(website)

                    this.id = this.name = ''
                }else {
                    alert('id和name不能爲空')
                }

            },

            del(id){//根據id刪除數據
                var index = this.websites.findIndex(item =>{
                    if (item.id == id){
                        return true;
                    }
                })
                this.websites.splice(index,1)

            },

            //經過關鍵字過濾全部符合條件的website
            search(keywords){
                // 注意：forEarch some filter findIndex這些都是屬於數組的新方法，都是進行遍歷
                return this.websites.filter(item => {
                    // if(item.name.indexOf(keywords) != -1){
                    //es6 提供的一個新方法 string.prototype.includes
                    if(item.name.includes(keywords)){

                        return item
                    }
                })
            }

        }
    })

    var vm1 = new Vue({
        el: '#app1',
        data: {
            dt: new Date()
        },
        methods: {},
        filters: {
            dateFormat: function (dateStr, pattern = '') {
                //將字符串獲取當前時間
                var dt = new Date(dateStr);

                var y = dt.getFullYear()
                var m = dt.getMonth() + 1
                var d = dt.getDate()

                if (pattern && pattern.toLowerCase() === 'yyyy-mm-dd') {
                    return y + '-' + m + '-' + d
                } else {
                    var hh = dt.getHours().toString().padStart(2,'0')
                    var mm = dt.getMinutes().toString().padStart(2,'0')
                    var ss = dt.getSeconds().toString().padStart(2,'0')
                    return y + '-' + m + '-' + d + ' ' + hh + ':' + mm + ':' + ss + '~~~~'
                }

            }
        },
        directives:{//自定義私有指令
            'fontweight':{
                bind:function (el,binding) {
                    el.style.fontweight = binding.value
                }
            },
            'fontsize':function (el,binding) {
                console.log(binding.value)
                el.style.fontsize = parseInt(binding.value) + 'px'
            }

        }
    })

    //document.getElementById('search').focus()

</script>

</body>
</html>

實際效果css

二、列表添加與刪除動畫html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.min.js"></script>
    <style>
        li{
            border: 1px dashed #999;
            margin: 5px;
            line-height: 35px;
            padding-left: 5px;
            font-size: 14px;
            width: 100%;
        }

        li:hover{
            background-color: pink;
            transition: all 0.4s ease;
        }
        .v-enter,.v-leave-to{
            opacity: 0;
            transform: translateY(80px);
        }
        .v-enter-active,.v-leave-active{
            transition: all 0.6s ease;
        }

        /*實現列表刪除元素的後續列表漸漸的飄上來*/
        .v-move{
            transition: all 0.6s ease;
        }
        .v-leave-active{
            position: absolute;
        }
    </style>
</head>
<body>
<div id="app">
    <div>
        <label>
            Id:
            <input type="text" v-model="id">
        </label>

        <label>
            Name:
            <input type="text" v-model="name">
        </label>

        <input type="button" value="添加" @click="add">
    </div>
<!--    <ul>-->
        <!--實現列表動畫不能使用transition包裹
        要使用transition-group-->
        <transition-group appear tag="ul">
            <li v-for="(item,i) in list" :key="item.id" @click="del(i)">
                {{item.id}} ----- {{item.name}}
            </li>
        </transition-group>
<!--    </ul>-->
</div>

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            id:'',
            name:'',
            list:[
                {id:1,name:'趙高'},
                {id:2,name:'秦檜'},
                {id:3,name:'嚴嵩'},
                {id:4,name:'魏忠賢'}
            ]
        },
        methods:{
            add(){
                if(this.id!="" && this.name != ""){
                    this.list.push({id:this.id,name:this.name})
                }

            },
            del(i){
                this.list.splice(i,1)
            }
        }
    })

</script>

</body>
</html>

實際效果vue

3.實例java

相關標籤/搜索

每日一句

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