zoukankan      html  css  js  c++  java
  • 页面组件渲染小组件(重点)

    页面组件渲染小组件(重点)

    页面组件作为父组件:views/*.vue

    <template>
        <div class="home">
            <!-- vue项目下的html是支持大小写,且区分大小写 -->
            <Nav />
        </div>
    </template>
    
    <script>
        // 父组件加载子组件:父组件通常是页面组件,是被一个个小组件这些子组件组装成的页面
        // 1)导入语法要在 export default{} 之上完成
        // 2)@符合表示 项目src文件夹 绝对路径
        // 3)要在export default{} 的括号中用 components 注册
        // 4)在该组件的模板中就可以渲染子组件了(html代码中是区别大小写的)
        // 5)步骤:i)导入子组件 ii)注册子组件 iii)使用子组件
        import Nav from '@/components/Nav'
    
        export default {
            components: {
                Nav,
            }
        }
    </script>
    
    <style scoped>
        .home {
            width: 100vw;
            height: 100vh;
            background-color: orange;
        }
    </style>

    导航栏小组件(封装路由跳转):components/*.vue

    <template>
        <div class="nav">
            <img src="" />
            <ul>
                <li>
                    <!-- router控制的路由,不是用a标签完成跳转:
                        1)a标签会刷新页面,错误的
                        2)router-link标签也能完成跳转,且不会刷新页面,就是router提供的a标签(最终会被解析为a标签,还是用a来控制样式)
                        3)router-link标签的to属性控制跳转路径,由两种方式
                            i) to="路径字符串"
                            ii :to="{name: '路由名'}"
                    -->
                    <a href="/">主页</a>
                </li>
                <li>
                    <router-link to="/about">关于页</router-link>
                </li>
                <li>
                    <!-- to="字符串",v-bind:to="变量",可以简写为 :to="变量" -->
                    <router-link :to="{name: 'First'}">第一页</router-link>
                </li>
            </ul>
        </div>
    </template>
    
    <style scoped>
        .nav {
            width: 100%;
            height: 80px;
            background: rgba(0, 0, 0, 0.3);
        }
        img {
            width: 200px;
            height: 80px;
            background: tan;
            float: left;
        }
        ul {
            float: left;
            list-style: none;
            margin: 0;
            padding: 0;
            height: 80px;
            background: pink;
        }
        ul li {
            float: left;
            height: 80px;
            padding: 30px 20px 0;
        }
        a {
            color: black;
        }
    </style>
  • 相关阅读:
    迁移模型问题,提示admin已存在
    centos 部署的时候安装不上Mariadb,缺少依赖文件
    collections
    List里面添加子list,子list clear之后竟然会影响主List里面的内容
    Jackson用法详解
    Ouath2.0在SpringCloud下验证获取授权码
    zookeeper原理之Leader选举的getView 的解析流程和ZkServer服务启动的逻辑
    zookeeper原理之Leader选举源码分析
    Spring Integration sftp 专栏详解
    SpringMVC常用注解标签详解
  • 原文地址:https://www.cnblogs.com/baohanblog/p/12305736.html
Copyright © 2011-2022 走看看