zoukankan      html  css  js  c++  java
  • 内置组件 -slot讲解

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>实例方法</title>
        <meta name="flexible" content="initial-dpr=2,maximum-dpr=3" />
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta content="yes" name="apple-touch-fullscreen">
        <meta content="telephone=no,email=no" name="format-detection">
        <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
        <script src="../assets/js/flexible_css.js"></script>
        <script src="../assets/js/flexible.js"></script>
        <script src="../assets/js/jquery-3.2.1.js"></script>
        <script src="../assets/js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <caicai>
                <span slot="url">{{caiData.url}}</span>  <!--  在组件标签里传递值-->
                <span slot="netName">{{caiData.netName}}</span>
                <span slot="skill">{{caiData.skill}}</span>
            </caicai>
        </div>
        <template id="tep">
            <div>
                <p>地址:<slot name="url"></slot></p> <!--在模版里  用slot 标签接收值-->
                <p>网名:<slot name="netName"></slot></p>
                <p>技术类型:<slot name="skill"></slot></p>
            </div>
            
        </template>
    </body>
    <script type="text/javascript">
        var jinsuo={  //组件模版变量
            template:"#tep"  //模版  定义在 id为tep 的html的tempalte标签里 
        }
        var app=new Vue({
                el:"#app",
                data:{
                    caiData:{  //  数据对象
                        url:"http://baidu.com",
                        netName:"菜菜",
                        skill:"web前端"
                    }
                },
                components:{  //组件
                    "caicai":jinsuo  //caicai  组件名  jinsuo  是组件模版
                }
            })
    </script>
    </html>
  • 相关阅读:
    python生成试题库和界面 (python generate test database and layout)
    python生成数据库(python generate database)
    Go语言基础之流程控制
    Go语言基础之运算符
    Go语言基础之变量和常量
    VS Code配置Go语言开发环境
    Linux安装教程|详细
    安装Go语言及搭建Go语言开发环境
    Go语言
    Django2.0路由匹配path的用法
  • 原文地址:https://www.cnblogs.com/jinsuo/p/8486394.html
Copyright © 2011-2022 走看看