VUE-好难X_X

最新推荐文章于 2024-07-20 23:54:17 发布

my威化饼干

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量72

点赞数

文章标签： vue javascript

本文链接：https://blog.csdn.net/wafer_biscuit/article/details/115632699

版权

这次做一个综合性上传

<!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>
</head>
<body>
    <div id="a1">
    <cpna :number='num' @numchange='n1c'></cpna>
    <!-- 绑定 子类数据 为 父传的值 ,格式为---》:子类数据(props中定义的)='父传的值(其实也是父类的数据)' -->
    <h1>father-data{{num}}</h1>
    </div>
    <template id="cpn">
        <div>
            <!-- <input type="text" v-model="dnum"> -->
            <!-- 上面是单纯的绑定修改父类传给子类的值在子类里面的值 -->
            <input type="text" @input='numinput' :value='dnum'>
            <h1>porps{{number}}</h1>
            <h1>child-data{{dnum}}</h1>
        </div>
    </template>
    <script src="vue.js"></script>
    <script>
        const app=new Vue({
            el:'#a1',
            data:{
                num:0,
            },
            methods: {      
                n1c(value){
                    this.num=parseFloat(value);
                },
            },
            components:{
                'cpna':{
                    template:'#cpn',
                    props:{
                        number:Number,//在porps中定义要传的值的名称和简单类型检查
                    },
                    data() {
                        return {
                            dnum:parseFloat(this.number),
                        };
                    },
                    methods: {
                        numinput(event){
                            this.dnum=parseFloat(event.target.value);//自定义修改，用于改变child-data为string，从而出现0123这样的数据
                            // console.log(event.target.value);
                            console.log(typeof this.dnum);
                            this.$emit('numchange',this.dnum);
                        }
                    },
                }
            },
        });
    </script>
</body>
</html>

这个是绝对的重点，子传父，父传子，绑定，事件。几乎概括了之前的全部内容，做一个上传.

<!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>
</head>
<body>
    <!-- 父组件模板 -->
    <div id="a1">
        <!-- v-on:itemclick     :itemclick其实是你自己在下面发射阶段自定义的事件 -->
        <cpn1 @itemclick='cpnclick'></cpn1>
        <!-- 这时候会默认把emit的参数对象给传过去 -->
    </div>

    <!-- 子组件模板 -->
    <template id='cpn1'>
        <div>
            <button v-for="(item, index) in lists" :key="index" @click="itemclick(item)">{{item.name}}</button>
        </div>
    </template>
    <script src="vue.js"></script>
    <script>
        //子组件
        const cpn={
            template:'#cpn1',
            data(){
                return {
                    lists:[
                        {id:'a1',name:'ump45'},
                        {id:'a2',name:'hk416'},
                        {id:'a3',name:'ak12'},
                    ],
                };
            },
            methods: {
                itemclick(item){//目的是要把点击的对象传给父组件
                    //emit的翻译是发射
                    console.log(item);
                    //发射事件部分
                    this.$emit('itemclick',item);//前为名字后为参数
                },
            },
        };

        //父组件
        const app=new Vue({
            el:'#a1',
            data:{
                lis:'12aa',
            },
            components:{
                cpn1:cpn,
            },
            methods: {
                cpnclick(item){
                    console.log('123',item);
                }
            },
        });
    </script>
</body>
</html>

子传父相关初见

<!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>
</head>
<body>
    <div id="a1">
        <cpn :clist='list' :cmess='mess'></cpn>
    </div>

    <template id="eee">
        <div>
            <h2>QAQ</h2>
            <h1>{{clist}}</h1>
            <p>{{cmess}}</p>
        </div>
    </template>
    <script src="vue.js"></script>
    <script>
        const cpn={
            template:'#eee',
            //父传子--->props
            // props:['clist'],//使用数组
            props:{
                clist:Array,//必须为数组类型(可以进行类型限制)
                cmess:{
                    type:String,
                    default:'没有值传递过来',//当没有数据传递过来时候默认值
                    required:true,//设置为必传值
                }
            },
        };
        const app=new Vue({
            el:'#a1',
            data:{
                mess:'123abc',
                list:[1,12,'ump45',true],
            },
            components:{//翻译为组件,成分
                cpn,//此处为增强写法简化,实际如下
                // cpn:'cpn',
            },
        });
    </script>
</body>
</html>

父传子

<!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>
</head>
<body>
    <div id="a1">
        <cpn1></cpn1>
    </div>
    <template id="cpnc1">
        <div>
            <h2>{{d1}}</h2>
        </div>
    </template>
    <script src="vue.js"></script>
    <script>

        // const obj={d1:0,};//是这里，返回指定对象，使得所有组件指向同一实例

        Vue.component('cpn1', {
            template:'#cpnc1',
            data() {//请注意,data必须是一个返回(对象类型)的函数,里面保存着数据
                return {//why函数?防止多个组件化共用一个数据(想象一下多个计数器)
                    //不用函数，每次创建新组件，指针永远指向最初始的地址，会导致数据混乱
                    //而使用函数，会确保每次都在返回值时候开辟新的内存空间,使得数据单独存储

                    //但是当你想要他们互相影响时候要怎么办呢?EASY
                    //看上面注释的代码，之后data函数返回obj就可以了
                    d1:'im came form far far away',
                }
            },
        });//这就相当于一个简单的封装

        const app=new Vue({
            el:'#a1',
            data:{
                mess:'im robot',//组件是不能访问Vue实例里面的数据的!!,为此，我们要在注册组件时候加以定义
            },
            components:{

            },
        });
    </script>
</body>
</html>

组件中使用数据WOW

<!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>
</head>
<body>
    <div id="a1">
        <cpn1></cpn1>
        <cpn2></cpn2>
        <cpn></cpn>
        <cpn3></cpn3>
    </div>

    <!-- 第一种写法，使用 type="text/x-template" -->
    <script type="text/x-template" id='cpnc'>
    <div>
        <h1>XAX</h1>
    </div>
    </script>

    <!-- 第二种写法，使用template标签 -->
    <template id="cpn3">
        <div>
            <h1>XOX</h1>
        </div>
    </template>

    <script src="vue.js"></script>
    <script>

        //接下来是全局组件注册的语法糖
        //构造注册全局组件一步到位
        Vue.component('cpn1', {//记住要加引号
            template:`<div><h1>QAQ</h1></div>`
        });
        
        //这里是分离之后的全局注册
        Vue.component('cpn', {
            template:'#cpnc',
        });//把内容单独放在一个script里

        Vue.component('cpn3', {
            template:'#cpn3',
        });//把内容单独放在一个tempate标签里

        //接下来是局部组件构造的语法糖
        const app=new Vue({
            el:'#a1',
            components:{
                'cpn2':{
                    template:`<div><h1>x-x</h1></div>`,
                }
            },
        })
    </script>
</body>
</html>

分离components相关

my威化饼干

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE-好难X_X

这次做一个综合性上传<!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"> <t
复制链接

扫一扫