VUE学习总结

最新推荐文章于 2024-10-27 11:25:22 发布

123456wym

最新推荐文章于 2024-10-27 11:25:22 发布

阅读量573

点赞数

文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/qq_54478931/article/details/122309409

版权

组件父传子 props: [''],，子传父总结 $emit

阻止跳转 .prevent

<a href="https://www.xxx.com" @click.prevent="注：这个方法名" >点击不跳转</a>

用户只能执行一次点击一次 .once

<button @click.once="onSubmit" @keyup.enter.once="onSubmit">注册测试回车并且只能点一次</button></button>

删除一个数组 数组名.splice

转换为数组类型 .number parseInt(a)

html随机从数组里取数

var sj= ["小红","小黄","小兰"]；
var a= Math.floor((Math.random()*sj.length));
console.log(sj[a]);

// alert(sj[a)

组件-----

组件父类向子类传值示例

props:{

sz:Array,

name:name

数组用这个接收：Array

  <template id="zl" >
        <div style="border: solid 3px red;width: 1300px;height: 300px;">
            我的爸爸是:{{name}}
    </div>
    </template>
  <div id="fl" style="border: solid 3px blue; width: 1700;height: 900px;">
        <zl></zl>
    </div>
<script>
        var zl={
            template:'#zl',
            data() {
                return { 
                }
            },
            props: ['name'],
        }
    new Vue({
        
        el:'#app'
        ,methods: {
           
        },
        components: {
            'zl':zl
            
        },
        data() {
            return {
                ,name:'WYM',
            }
        },
    })

    </script>

组件子类向父类传值示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/vue.js"> </script>
    <script src="/axios-0.18.0.js"> </script>
</head>
<body>
    <template id="zl">
        <!-- $emit('aaa',ziti)      $emit 把数据传向父类用的     aaa是一个别名    ziti 是一个参数   $event可以传子类的全部参数，用不到可不写 -->
        <button @click="$emit('aaa',ziti,$event)">我是子类,我要让上面的字变大</button>
    </template>
    
    <div id="fl">
        <span id="yjh" style="font-size: 1px;" >我是一句话</span><br>

        <zilei @aaa="siz"></zilei> <!-- @aaa="siz"       @aaa是上面的一个别名    siz 是下面方法里的一个方法   -->
    </div>
    <script>
            var zl={
                methods: {
                 
                },
                data() {
                    return {
                        ziti:6
                    }
                },  
               template:'#zl'   //这个是上面的子类的id   比较容易忘 template  不要忘记  id记得这里加#  
            }                   


        new Vue({
            el:'#fl'
            ,data() {
                return {
                    si:0
                }
            },methods: {
                siz:function(a,event){    //a 是上面传的ziti参数的别名       event接收上面的全部参数，用不到可不写
                    console.log(event) 
                    this.si = this.si+5+a
                    document.getElementById("yjh").style="font-size:"+this.si+"px;"    //这个是上面的子类的id
                }
            }
            ,components: {
                'zilei':zl         //components使用多个组件可以（子类）  'zilei':zl       'zilei'单引号里的是上面div 使用的标签别名       zl 是上面var的组件(子类)的功能参数
            }


        })


    </script>
</body>
</html

One journey ends, another begins.
凡是过往，皆为序章。