devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

python笔记(Vue组件 基础语法)_python vue语法

作者：IT小白 | 2024-02-07 17:28:35

赞

踩

python vue语法

Vue学习指南

  1. Vue是啥？
    它是构建用户界面的JavaScript框架（让它自动生成js,css，html等）

  2. 引入Vue
    在这里插入图片描述

  3. let和const
    let 先声明后使用，不存在变量提升
    let 不能重复定义,但是可以修改
    var 既可以先声明后使用，也可以先使用后声明，这样不会报错，会打印undified,而let必须是先 声明后使用，如果没有声明就会报错
    const a =‘hello’ //const就是定义一个常量//常量是不能修改的

  4. 模板字符串
    '${变量名}'(是esc下变的引号)

  5. 箭头函数

    funcion(){} == ()=>{}
存在问题：
    1.this的指向问题
    2.arguments不能用

    • 1
    • 2
    • 3
    • 4

  6. 通过定义对象取值

    <div id="app">
    <p>{{msg}}</p>
    <p>{{ 80+2 }}</p>
    <p>{{ 20>30 }}</p>
    <h1 v-text="msg"></h1>
    <h1 v-html="hd"></h1>
    <h1 v-html="str"></h1>
</div>

<script>
    new Vue({
        el:"#app",  //表示当前这个元素开始使用vue
        data:{
            msg:"你好啊",
            hd:"<input type='button' value='啦啦'>",
            str:"你妹的"
        }
    })
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

  7. 可以插入标签

    <!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">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
        <div v-html="htmlstr" v-show="test"></div>
</div>
<script>
    new Vue({
        el:"#app",  //表示当前这个元素开始使用vue
        data:{
            htmlstr:'<textarea></textarea>',
            test:false  //默认是隐藏的
        },
        methods:{
            qita:function () {
                this.test = !this.test  //当一点击其他的时候让显示
            }
        }

    });

</script>

</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32

  8. 对象单体模式

    var person = {
         name:'丫丫',
         age:12,
         fav(){
             console.log(this.name,this.age);
         }
       }
  person.fav();

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

  9. 构造函数的方式创建对象

        function Animal(name,age) {
         this.name = name;
         this.age = name;
     }
     Animal.prototype.showName = function () {
       console.log(this.name);
     };
     var dog = new Animal('小黑',11)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

  10. 面向对象

        class Animal{
        constructor(name,age){
            this.name = name;
            this.age = age;
        }
        showName(){
            console.log(this.name)
        }
    }
   
    var d = new Animal('小黑',11);
    d.showName();

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

  11. 指令系统：V-*
    （1）v-if

        <div v-if="type === 'A'">
        A
      </div>
      <div v-else-if="type === 'B'">
        B
      </div>
      <div v-else-if="type === 'C'">
        C
      </div>
      <div v-else>
        Not A/B/C
     </div>	

...
 data:{
           type:'A',
	}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    在这里插入图片描述
    (2)v-for

        <div>
        <img :src="currentSrc" alt="">
        <ul>
            <li v-for = "(item,i) in imageArr">{{i+1}}</li>
        </ul>
    </div>

 data:{
            imageArr:[ 
                {id:1,src:'images/img1.jpg'},
                {id:2,src:'images/img2.jpg'},
                {id:3,src:'images/img3.jpg'}
            ],
        },

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    在这里插入图片描述
    (3)v-bind 等于 : （绑定属性）

     <h3 v-show = 'isshow' v-bind:title="title">哈哈哈</h3>
 data:{
            isshow:true,
        },

    • 1
    • 2
    • 3
    • 4

    在这里插入图片描述
    （4）v-on 等于 @（绑定事件）

    <button v-on:click = "clickhander" >切换</button>
		 <div v-if = 'show'>嘻嘻</div>
 data:{
            show:true,
        },
methods:{
        clickhander:function(){
            this.show = !this.show;
        },
    }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    在这里插入图片描述
    (5)v-model

    <input type="text" v-model='msg'>
<h3>{{msg}}</h3>

    • 1
    • 2

    在这里插入图片描述

  12. 计算属性

<!DOCTYPE html>
	<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	    <title>Document</title>
	</head>
	<body>
	<div id="app">
	  <form action="">
	    <input type="text" v-model='msg'>
	    <h3>{{msg}}</h3>
	  </form>
	  <div>
	    {{reverseStr}}
	  </div>
	  <button @click = "changetext">修改</button>
	</div>
	
	
	<script type="text/javascript" src="vue.js"></script>
	<script>
	    var app = new Vue(
	        {
	            el:"#app",
	        //所有的数据都放在数据属性中
	            data:{
	                msg:'123',
	                text:'hello word'
	            },
	            methods:{
	                changetext(){
	                    this.text = 'hello long';
	                }
	            },
	        // 计算属性(返回的相关数据都会被监听起来)
	        computed:{
	            reverseStr(){
	                return this.text.split('').reverse().join('');
	            }
	        }
	    }
	    )
	
	
	</script>
	</body>
	</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49

在这里插入图片描述

  1. 轮播图示类
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        img{
            width: 600px;
            height: 600px;
        }
    </style>
</head>
<body>
    <div id="app">
            <!-- mouseenter：鼠标箭头进入事件 mouseleave： 鼠标箭头离开事件-->
        <div class="img" @mouseenter = "closeTimer" @mouseleave = 'openTimer'>
            <img :src="currentSrc" alt="">
            <ul>
                <li v-for = "(item,i) in imageArr" @click= "currentHandler(item)">{{i+1}}</li>
            </ul>
        </div>
        <button @click = "nextImage">下一张</button>
    </div>

    <script type="text/javascript" src="vue.js"></script>

    <script>
        var app = new Vue(
            {
                el:"#app",
            //所有的数据都放在数据属性中
                data:{
                    imageArr:[ 
                        {id:1,src:'images/img1.jpg'},
                        {id:2,src:'images/img2.jpg'},
                        {id:3,src:'images/img3.jpg'}
                    ],
                    currentSrc:'images/img1.jpg',
                    currentindex:0,
                    timer:null
                },
            //事件
            methods:{
                currentHandler(item){
                    this.currentSrc = item.src;
                },
                nextImage(){
                    
                    if(this.currentindex == this.imageArr.length-1)
                    {
                       this.currentindex = -1; 
                    }
                    this.currentindex++;
                    this.currentSrc = this.imageArr[this.currentindex].src;
                },
                // 关闭定时器
                closeTimer(){
                    clearInterval(this.timer);
                },
                // 打开定时器
                openTimer(){
                    this.timer = setInterval(this.nextImage,2000);
                }
                
                
            },
            //定时任务
            created(){
                    this.timer = setInterval(this.nextImage,2000);
                }
            }
        )


</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  1. 音乐播放器示类
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="music">
    <audio :src="currensong" autoplay = "" controls = "" @ended = "nextsong"></audio>
    <ul>
        <li v-for = "(item,index) in audios" @click = "clickhandle(index)">
            <h3>
                歌名:{{item.name}}
            </h3>
            <p>
                歌手:{{item.author}}
            </p>
        </li>
    </ul>
    <button @click = "addsong">添加歌曲</button>
</div>

<script type="text/javascript" src="vue.js"></script>
<script>
    var songs = [
        {id:1,name:"陪着你走",author:"龙飞",src:"music/Gibb-Z ICE - 陪着你走.mp3"},
        {id:2,name:"陪着你走",author:"龙飞",src:"music/浮光 - 斑马，斑马.mp3"}
    ]
var music = new Vue({
    el:"#music",
    data:{
        audios:songs,
        currenindex:0,
    },
    methods:{
        clickhandle(index){
            this.currenindex = index;
        },
        nextsong(){
            this.currenindex++;
        },
        addsong(){
            this.audios.push({id:2,name:"陪着你走",author:"龙飞",src:"music/浮光 - 斑马，斑马.mp3"});
        }
    },
    computed:{
        currensong(){
            // 计算的是计算数据属性
             return this.audios[this.currenindex].src;
        }
    },
    created:{

    }


})
</script>

</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/66581
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号