day41 vue基础二

2022-07-27 23:04:14 阅读：129 来源： 互联网

标签：vue console log color app 基础 Vue day41

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

day41 vue基础二