zoukankan      html  css  js  c++  java
  • Vue-组件

    组件

    组件概念:

    ​ html、css与js的集合,为该集合体命名,用该名字复用html、css与js组成的集合体构成复用性。

    组件分类:

    ​ 根组件:new Vue()生成的组件

    ​ 局部组件:组件名={},{}内部采用的是部Vue语法

    ​ 全局组件:Vue.component(‘组件名’,{}),{}内部采用的是Vue语法

    组件的特点:

    ​ 1、组件都有管理组件HTML页面结果的template实例成员,template中有且只有一个根标签;

    ​ 2、根组件都是作为最顶级层的父组件,局部与全局组件作为子组件,也可以成为其他局部与全局父组件;

    ​ 3、子组件的数据需要隔离(数据组件化,每一个组件拥有自己的数据独立名称空间);

    ​ 4、局部组件必须注册后才能使用,全局组件不需要注册,提倡使用局部组件

    下面看一个小例子

    <div id="app">
        {{msg}}
    </div>
    
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'信息组件 '
            },
            template:'<p>{{msg}}</p>>'
        })
    </script>
    

    上面的{{msg}}被下面的template内的p标签替换了

    局部组件与全局组件

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body,h2{
                margin: 0;
            }
            .warp{
                 800px;
                margin: 0 auto;
            }
            .warp:after{
                content: '';
                display: block;
                clear: both;
            }
            .box{
                 200px;
                border-radius: 10px;
                overflow: hidden;
                background-color: peachpuff;
                float: left;
                margin: 10px;
            }
            .box img{
                 100%;
            }
            .box h2{
                text-align: center;
                font-weight: normal;
                font-size: 20px;
            }
        </style>
    </head>
    <body>
    <div id="app">
        <div class="warp">
            <!--渲染组件-->
            <local-tag></local-tag>
            <local-tag></local-tag>
            <local-tag></local-tag>
      
            <global-tag></global-tag>
            <global-tag></global-tag>
            <global-tag></global-tag>
    
        </div>
    </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        //声明局部组件:局部组件要在其父组件中注册才能使用
        //1、声明组件,2、注册组件,3、渲染组件,全局组件不需注册
    
        //声明局部组件
        let localTag={
            template:`
            <div class="box" @click="fn">
                <img src="img/001.jpg" alt="">
                <h2>焰灵姬</h2>
             </div>>
    
            `,
        };
        //声明全局组件
        Vue.component('global-tag',{
            template:`
            <div class="box">
            <img src="img/002.jpg" alt="">
            <h2>紫女</h2>
            </div>
            `,
        });
        new Vue({
            el:'#app',
            data:{},
            components:{  //注册组件
                localTag,
            }
        })
    </script>
    </html>
    

    其效果为:

    组件传值(父传子):

    父传子:

    ​ 1、子组件可以通过props自定义组件属性(采用反射机制,需要填写的字符串,但是使用时可以直接作为变量)。

    ​ 2、子组件会在父组件中渲染,渲染时,将父组件的变量绑定给子组件的自定义属性,将可以将变量值传递给子组件。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body, h2 {
                margin: 0;
            }
            .wrap {
                 880px;
                margin: 0 auto;
            }
            .wrap:after {
                content: '';
                display: block;
                clear: both;
            }
            .box {
                 200px;
                border-radius: 10px;
                overflow: hidden;
                background-color: #eee;
                float: left;
                margin: 10px;
            }
            .box img {
                 200px;
                height: 240px;
            }
            .box h2 {
                text-align: center;
                font-weight: normal;
                font-size: 20px;
            }
        </style>
    </head>
    <body>
    <div id="app">
        <div class="warp">
        <local-tag v-for="dog in dogs" :dog="dog" def="父传子的对象..." :xyz="dog.name"></local-tag>
        </div>
    </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        let dogs=[
            {
                name:'二哈一号',
                img:'img/100.jpg',
            },         {
                name:'二哈二号',
                img:'img/200.jpg',
            },         {
                name:'二哈三号',
                img:'img/300.jpg',
            },         {
                name:'二哈四号',
                img:'img/400.jpg',
            },
        ];
        let localTag={// 1)子组件可以通过props自定义组件属性(采用反射机制,需要填写字符串,但是使用时可以直接作为变量)
            // 2)子组件会在父组件中渲染,渲染时,将父组件的变量绑定给子组件的自定义属性,将可以将变量值传递给子组件
            props:['dog','def','xyz'],
    
            template:`
            <div class="box" @click="fn">
            <img :src="dog.img" alt="">
            <h2>打了{{dog.name}}{{count}}下</h2>
            </div>
            `,
            data(){
                return{
                    count:0,
                }
            },
            methods:{
                fn(){
                    console.log(this.dog);
                    this.count++;
                }
            }
        };
        new Vue({
            el:'#app',
            data:{
                dogs,
            },
            components:{
                localTag,
            }
        });
    </script>
    </html>
    

    组件传值(子传父)

    自定义事件是属于子组件的,子组件在父组件中渲染并绑定事件方法,所以事件方法由父组件实现;子组件如何触发自定义事件:this。$emit(‘自定义事件名’,触发事件回调的参数们)。

    子组件触发自定义事件,携带出子组件的内容,在父组件中实现自定义事件的方法,拿到组件传递给父组件的消息。

    下面看下代码,更好理解:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
    </head>
    <body>
    <div id="app">
        <h1>{{h1}}</h1>
        <h3>{{h3}}</h3>
        <tag @action="actionFn"></tag>
        <hr>
        <tag2 @h1a="aFn1" @h3a="aFn3"></tag2>
    
    </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
    
    
        let tag={
            template:`
            <div>
            <input type="text" v-model="t1">
            <input type="text" v-model="t2">
            <button @click="changeTitle">修改标题</button>
            </div>
            `,
            data(){
                return{
                    t1:'',
                    t2:'',
                }
            },
            methods:{
                changeTitle(){
                    if (this.t1 && this.t2) {
                        //这里对父传值会使用一个非常重要的$emit,
                        this.$emit('action',this.t1,this.t2);
                        //传完值后将输入框中的值设置被空
                        this.t1='';
                        this.t2='';
                    }
                },
            }
        };
        let tag2 = {
            template: `
            <div>
                主标题内容:<input type="text" v-model="t1" @input="t1Fn">
                子标题内容:<input type="text" v-model="t2">
            </div>
            `,
            data() {
                return {
                    t1: '',
                    t2: '',
                }
            },
            methods: {
                t1Fn() {  //这里是在input的框中绑定oninput来时时监听传值,与watch监听事件有异曲同工之效。
                    this.$emit('h1a', this.t1);
                }
            },
            watch: {  //这里使用的时时监听来时时传值,,watch是监听事件
                t2 () {
                    this.$emit('h3a', this.t2);
                }
            }
        };
        new Vue({
            el:'#app',
            data:{
                h1:'主标题',
                h3:'子标题',
            },
            components:{
                tag,
                tag2
            },
            methods:{
                actionFn(a,b,c){
                    this.h1 = a;
                    this.h3 = b;
                },
                 aFn1(a) {
                    if (!a) {
                        this.h1 = '主标题';
                        return;
                    }
                    this.h1 = a;
                },
                aFn3(a) {
                    if (!a) {
                        this.h3 = '子标题';
                        return;
                    }
                    this.h3 = a;
                },
            }
        })
    </script>
    </html>
    
  • 相关阅读:
    SSRF——和远程文件包含的区别在于远程文件包含多是包含攻击者的主机文件,SSRF是内网主机的文件
    SSRF中的绕过手段——字节总结得比较好,如何绕过SSRF的保护机制,DNS欺骗,使用IPV6地址,十六进制编码、八进制编码、双字编码、URL编码和混合编码等
    SSRF——服务端请求伪造,根因是file_get_contents,fsockopen,curl_exec函数调用,类似远程文件包含,不过是内网机器
    文件包含——本地文件包含和远程文件包含
    文件包含和目录遍历区别——目标都是信息泄露,但手段一个是利用函数来包含web目录以外的文件,另外一个是对web路径访问权限设置不严格导致
    DFS——单词分割,原来还是要使用cached dp才能避免不超时
    模块module间引用和使用本地maven库的jar包
    机器学习西瓜书白话解读笔记---0401-0404、信息和熵的度量
    机器学习实战笔记---0、读大纲
    心得体悟帖---201129(【社会规律】)
  • 原文地址:https://www.cnblogs.com/mqhpy/p/12063992.html
Copyright © 2011-2022 走看看