其他分享
首页 > 其他分享> > day41 vue基础二

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>

 

宏任务和微任务的复习:

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

简单来说:先微后宏

 

 

标签:vue,console,log,color,app,基础,Vue,day41
来源: https://www.cnblogs.com/he-maoke/p/16526844.html