day41 vue基础二

v-model 双向绑定基础原理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input v-model='msg2' type="text" > 
        <button @click='showdata'>点击查看数据</button>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    //  欢迎进入vue元编程的世界
    var app = new Vue({
        el: '#app',
        data: {
          msg2: '我是msg2'
        },
        methods:{
            showdata(){
                console.log(this.msg2)
            }
        } 

    })

</script>

</html>

总结 V-model 就是基础1写法的语法糖！！！

01 vue 冒泡以及解决以及捕获

事件冒泡及其解决方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #big {
            width: 300px;
            height: 300px;
            background-color: red;
        }

        #erwa {
            width: 200px;
            height: 200px;
            background-color: blue;
        }

        #sanwa {
            width: 100px;
            height:100px ;
            background-color: white;
        }
    </style>
</head>
<body>
     
    <div id="app">
        <div id='big' @click.stop= "say('大娃',$event)">
            <div id="erwa"  @click.stop= "say('二娃',$event)">
                <div id="sanwa" @click.stop="say('三娃',$event)">
                      <a @click.stop.prevent ='aaa' href="https://www.baidu.com/">baidu</a>
                </div>
            </div>
        </div>
    </div>
     
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script  >

    //  欢迎进入vue元编程的世界
    var app = new Vue({
        el:'#app',
        data:{
            msg:'hello world'
        },
        methods:{
            say(name,dfdfdfefef){
                console.log('进入了say方法' + name)
                console.log(dfdfdfefef)
                
            },
            aaa(){
                console.log('进入aaa里面了')
            }
        }
    })

    
</script>
</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>Document</title>
    <style>
        .a1 {
            width: 300px;
            height: 300px;
            background-color: red;
        }
        .a2 {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
        .a3 {
           
            width: 100px;
            height:100px ;
            background-color: white;
    
        }
    </style>
</head>
<body>
    <div>
        <div id="app">
            <div class="a1" @click.capture="click1">
                <div @click.capture="click2" class="a2">
                    <div @click.capture="click3" class="a3">
                        click3
                    </div>
                </div>
            </div>
        </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'hellowolrd',
                msg2:'你好世界'
            },
            methods: {
            click1() {
                console.log("click1")
            },
            click2() {
                console.log("click2")
            },
            click3(){
                console.log('click3')
            }
        }
        })
 
     
    

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

vue键盘事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     
    <div id="app">
         <input @keyup.enter='submit' type="text">
        <input @keyup.delete='d' type="text">

        <input @keyup.esc='esc' type="text">
        <p>空格</p>
        <input @keyup.space='space' type="text">
        <input @keyup.up='up' type="text">
        <input @keyup.down='down' type="text">
        <input @keyup.left='left' type="text">
        <input @keyup.right='right' type="text">

        <p>f1</p>
        <input @keyup.f1='f1' type="text">
        <p>A</p>
        <input @keyup.A='a' type="text">
    </div>
     
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script  >
    Vue.config.keyCodes.f1 = 112
    Vue.config.keyCodes.A = 65

    //  欢迎进入vue元编程的世界
    var app = new Vue({
        el:'#app',
        data:{
            msg:'hello world'
        },
        methods:{
            submit(){
                console.log('我按下了回车键盘')
            },
            d(){
                console.log('进入d里面了')
            },
            esc(){
                console.log('进入了tab键盘')
            },
            space(){
                console.log('进入空格里面了')
            },
            up(){
                console.log('up')
            },
            down() {
                console.log('down')
            },
            left(){
                console.log('left')
            },
            right(){
                console.log('right')
            },
            f1(){
                console.log('f1')
            },
            a(){
                console.log('aaaaa')
            }

        }
    })

    console.log(app)
</script>
</html>

v-for的用法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <ul>
             <li :key='index' v-for='(item,index) in fruits'>
                {{item}}----{{index}}
            </li>  
        </ul>
    </div>

</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    //  欢迎进入vue元编程的世界
    var app = new Vue({
        el: '#app',
        data: {
            fruits: ['apple', 'pear', 'banana', 'orange']
        }
    })


</script>

</html>

v-for key绑定的坑（拓展代码理解底层index什么时候可以绑定什么时候注意）

三胞胎站立成一排，你怎么知道谁是老大？

如果老大皮了一下子，和老三换了一下位置，你又如何区分出来？

给他们挂个牌牌，写上老大、老二、老三。

这样就不会认错了。key就是这个作用。

当绑定index时,不能随意进行队列的插入,当改变index下标时,对应绑定的内容也会改变

06 v-for 对象和数组的比较学习

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <ul>
            <!-- 数组循环 -->
            <li v-for="(item,index) in fruits">
                {{item}} -------- {{index}}
            </li>
            <!-- 对象循环 多了一个key 选项  形参可以随意命名 -->
            <li v-for="(item,key,index) in user">
                {{item}} ------ {{key}} ------- {{index}}
            </li>
        </ul>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  //  欢迎进入vue元编程的世界
    var app = new Vue({
        el: '#app',
        data: {
            fruits: ['apple', 'pear', 'banana', 'orange'],
            user: {
                username: 'zs',
                gender: '男',
                age: 22
            }
        },
    })
</script>

</html>

总结V-for

1 v-for支持嵌套遍历非常强大

2 v-for 不是for in for of 是一个vue提供的二合一既可以遍历对象也可以遍历数组的一个遍历指令

遇到对象就是对象的参数 (item,key,index) in user

遇到数组就是数组的参数 v-for="(item,index) in fruits"

3 都需要用key值去绑定 !!

07 v-if v-show 区别以及v-if 高级用法

（1）手段：

v-if 是动态的向DOM树内添加或者删除DOM元素；

v-show 是通过设置DOM元素的display样式属性控制显隐；

（2）编译过程：

v-if 切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；

v-show只是简单的基于css切换；

（3）性能消耗：

v-if 有更高的切换消耗；

v-show 有更高的初始渲染消耗；

（4）使用场景：

v-if 适合运营条件不大可能改变；

v-show 适合频繁切换。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="app">
        <div v-if='flag'>
            我在这里
        </div>

        <div v-show='flag2'>
            show在这里
        </div>
        <div v-if="score >=90">
            <h1>优秀</h1>
        </div>
        <div v-else-if="score >=80 && score <90">
            <h1>良好</h1>
        </div>
        <div v-else-if="score >=60 && score <80">
            <h1>中等</h1>
        </div>
        <div v-else>
            <h1>不及格</h1>
        </div>
        <div v-if="score >=90">
            <h1>优秀</h1>
        </div>

        <div v-if="score >=80 && score <90">
            <h1>良好</h1>
        </div>

        <div v-if="score >=60 && score <80">
            <h1>中等</h1>
        </div>
        <div v-if="score < 60">
            <h1>不及格</h1>
        </div>
    </div>
</body>
<script src="./vue.js"></script>
<script>

    //  欢迎进入vue元编程的世界
    var app = new Vue({
        el: '#app',
        data: {
            score: 99,
            flag: 1,
            flag2: 1,
            obj: {
                age: 26,
                name: '段誉'
            }
        }
    })


</script>

</html>

08 vue v-bind 动态绑定样式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active {
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <div :class ="{active:isActive}">
            class样式
        </div>
        <button @click='aaa'>变</button>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    //  欢迎进入vue元编程的世界
    var app = new Vue({
        el: '#app',
        data: {
           isActive:true
        },  
        methods:{
            aaa(){
                console.log('进入aaa里面了')
                this.isActive = !this.isActive
            }
        }
    })
</script>

</html>

09 v-bind动态绑定样式之数组用法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active {
            color: red;
        }
        .fff{
            background-color: blueviolet;
            width: 500px;
            height: 500px;
        }
        .aaaaa{
            background-color: rgb(216, 21, 102);
            width: 500px;
            height: 500px;
        }
    </style>
</head>

<body>

    <div id="app">
        <div :class ="[activeClass,a2]">
            class样式
        </div>
        <button @click='aaa'>改变</button>
    </div>

</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    //  欢迎进入vue元编程的世界
    var app = new Vue({
        el: '#app',
        data: {
           a2:'fff',
           activeClass:"active"
        },

        methods:{
            aaa(){
                console.log('aaa')
                // this.a2 = 'fffffff'
                this.a2 = 'aaaaa'
            }
        }
       
    })


</script>

</html>

宏任务和微任务的复习:

异步任务分为:宏任务和微任务

简单来说:先微后宏

posted on 2022-07-27 22:39 hmkyj 阅读(22) 评论(0) 编辑收藏举报

刷新页面返回顶部

he-maoke

导航

公告

day41 vue基础二