前端05-vue

司*琦

已于 2022-04-26 17:28:36 修改

阅读量1.5k

点赞数 1

文章标签：前端

于 2022-04-25 19:42:28 首次发布

本文链接：https://blog.csdn.net/qq_30774825/article/details/124412324

版权

json

在这里插入图片描述

vue-事件修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: aqua;
        }

        .minbox {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
    <script src="./jquery/vue.js"></script>
    <script>
        window.onload=function(){
            new Vue ({
                el:'#app',
                data:{

                },
                methods:{
                    firstClicked:function(){
                        alert('box')
                    },
                    secondClicked:function(){
                        alert('minbox')
                    }
                }
            })
        }
    </script>
</head>
<body>
    <div id="app">
        <div class="box" @click="firstClicked">
            <!-- 第一种:这时点击会将该点击事件传给父级 -->
            <!-- <div class="minbox" @click="secondClicked">    -->
                <!-- 阻止事件 -->
            <div class="minbox" @click.stop.prevent="secondClicked"> 
            </div>
        </div>
    </div>
</body>
</html>

练习题-弹窗

第一种–jquery:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./main.css">
    <script src="./jquery/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
           
            //第一种方法
            $('#btn01').click(function(){
                $('#pop').show()     
            })
            $('#shutoff').click(function(){
                $('#pop').hide()
            })
            $('.mask').click(function(){
                $('#pop').hide()
            })
            //第二种方法  
            /*$('#btn01').click(function(){
                $('#pop').show()
                return false   //阻止事件冒泡
            })
            $('#shutoff').click(function(){
                $('#pop').hide()
            })
            $('body').click(function(){
                $('.pop_con').hide()
            })
            $('.pop_con').click(function(){
                return false
            })*/
        })
    </script>
</head>
<body>
    <input type="button" value="弹出弹窗" id="btn01">
    <div class="pop_main" id="pop">
        <div class="pop_con">
            <div class="pop_title">
                <h3>系统提示</h3>
                <a href="#" id="shutoff">x</a>
            </div>
            <div class="pop_detail">
                <p class="pop_text">亲!请关注近期的优惠活动!</p>
            </div>
            <div class="pop_footer"></div>
        </div>
        <div class="mask"></div>
    </div>
</body>
</html>

第二种–vue:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聊天</title>  
    <style>
        .outBox {
            width: 322px;
            height: 360px;
            border: 1px solid black;
            /* padding: 50px; */
        }
        .box {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            margin: 10px;
            overflow:auto

        }
        select {
            margin-left: 10px;
        }
        .bTalk {
            text-align: left;
        }
        .aTalk span{
            background-color: blue;
            color: aliceblue;
        }
        .bTalk {
            text-align: right;
        }
        .bTalk span{
            background-color: gold;
            color: aliceblue;
            /* float: right; */
        }

    </style>
    <script src="../jquery/vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:"#app",
                data:{
                    inputValue:'',
                    sayValue:'0',
                    array:[ //之所以使用数组而不是字典,是因为字典中的键是唯一的
                        {who:"A",said:"还没吃吗?"},
                        {who:"B",said:"吃了,你呢?"}
                    ]
                },
                methods:{
                    clicked:function(){
                        if (this.inputValue==''){
                            alert('输入内容为空,请重新输入')
                            return
                        }
                   
                        this.array.push({who:(this.sayValue=='0'?'A':'B'),said:this.inputValue})
                        this.inputValue=''

                    }
                }

            })
        }
    </script>
</head>
<body>
    <div id="app">
        <div class="outBox">
            <div  class="box" id="words">  
                <!-- 小胡子语法 <>{{}}</>  而不可以直接使用在>里面 -->
                <div v-for="item in array" :class="[item.who=='A'?'aTalk':'bTalk']"><span>{{item.who}}说:{{item.said}}</span></div>
                <!-- <div class="bTalk"><span>B说:吃了,你呢?</span></div> -->
    
            </div>
            <div>
                <!-- v-model  双向绑定 -->
                <select name="" id="input02" v-model="sayValue">
                    <option value="0" id="aSay">A说</option>
                    <option value="1" id="bSay">B说</option>
                </select>
                <input type="text" id="input01" v-model="inputValue">
                <input @click="clicked" type="button" value="提交" id="btn">
            </div>         
        </div>
    </div>   
</body>
</html>

过滤器

内置过滤器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery/vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#app',
                data:{
                    msg:"hello word"
                },
                filters:{ //内置过滤器  可以写多个函数
                    reverse:function(value){
                        return value.split('').reverse().join('')
                    }
                }
            })
        }
    </script>
</head>
<body>
    <div id="app">
        {{msg}}
        <br> 
        {{msg | reverse}}
    </div>
</body>
</html>

外置过滤器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery/vue.js"></script>
    <script>
        window.onload =function(){
            //一个外置过滤器里面只能写一个函数
            Vue.filter('upper',function(value){
                return value.toUpperCase()
                })

            Vue.filter('lower',function(value){
            return value.toLowerCase()
            })
            new Vue({
                el:"#app",
                data:{
                    msg:"hello word"
                }

            })
        }
        
    </script>
</head>
<body>
    <div id="app">
        {{msg|upper}}
        <br>
        {{msg|upper|lower}}
    </div>
</body>
</html>

自定义指令

外部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery/vue.js"></script>
    <script>
        window.onload=function(){
            Vue.directive('style',{   //自定义指令名
                inserted:function(el){
                    el.style.width='300px',
                    el.style.height='300px',
                    el.style.background='blue'
                }
            }

            )

            new Vue({
                el:"#app",
            })
        }
    </script>
</head>
<body>
    <div id="app">
        <!-- 自定义指令:v-style -->
        <div v-style></div>
    </div>
</body>
</html>

内部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery/vue.js"></script>
    <script>
        window.onload=function(){
            Vue.directive('style',{   //自定义指令名
                inserted:function(el){
                    el.style.width='300px',
                    el.style.height='300px',
                    el.style.background='blue'
                }
            }

            )
            new Vue({
                el:"#app",
                directives:{
                    'focus':{
                        inserted:function(el){
                            el.focus()
                            el.style.background='pink'
                        }
                    }}
            })
        }
    </script>
</head>
<body>
    <div id="app">
        <input type="text" v-focus>
    </div>
</body>
</html>

定时器之箭头函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*定时器 1.调用的代码  2.定时的时间(只能以毫秒为单位)   定时器是异步执行的*/
        //setTimeout(func,3000)   //一次性定时器
        setInterval(()=>{
            alert('func')},3000)   //箭头函数
        // var timer = setInterval(func,3000)    //多次定时器
        // function func () {
        //     alert('func')
        //     clearInterval(timer)    //清除定时器,传一个参数,参数是定时器的名字
        // }
    </script>
</head>
<body>
    
</body>
</html>