HTML#7(Css3+Vue3+js)

2022.9.12  中秋摆了三天，今天继续，把主界面写出来，主要加深学习以下css效果

Css

1、border-radius：圆角属性，可以给任何物品加上圆形边角

2、background-image: linear-gradient(direction, color-stop1, color-stop2, ...);  从上到下渐变效果

direction是方向(默认为向下)，可以是默认的to+方向，也可以是angle角度(例45deg代表45度)，color是颜色，可以有多个颜色节点

        background-image: linear-gradient(to right, red , yellow);  这是指从左到右，从红变到黄

        background-image: linear-gradient(to bottom right, red, yellow);  从左上角到右下角

        background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));  rgba的第四个元素是渐变度，1就是完全消失

        background-image: repeating-linear-gradient(red, yellow 10%, green 20%);  代表重复的线性渐变

3、当一个页面的内容高度大于屏幕的高度就会出现滚轮条，所以为了适配可以用百分数

js添加css样式

方法一(添加style):ar sty=document.getElementById("mystyle"); sty.innerHTML+="#div1{width:200px;height:200px;background:red;border:solid 2px black}";

方法二(设置style):document.getElementById("login1").style.backgroundImage = "linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1))";

Vue3实现页面跳转

发现component并不能动态跳转页面，查资料发现可以通过改变路由来动态刷新部分页面

1、安装路由   在vue的路径下 npm install vue-router@4 (在哪里run serve的就在哪输这个)

2、创建路由文件，新建一个router目录，在底下创建index.js和 routes.js文件

index.js

import {createRouter, createWebHistory} from 'vue-router'
import routes from './routes'
 
const router = createRouter({
    history: createWebHistory(), 
    routes
})
 
export default router

routes.js(路由数组)

const routes = [
    {   path: "/",  设置默认路由
        component: () => import('@/components/myLogin.vue')
    },
    {
        name: 'a',
        path: '/a',
        component: () => import('@/目录')  @指src文件夹下，这里目录是一个vue文件
    },
    {
        name: 'b',
        path: '/b',
        component: () => import('@/目录') 
    },
    
];
 
export default routes

component: () => import(../components/home.vue') 这就是之前学的箭头函数，等同于

    const home = import("../components/home.vue")；

或是等同与 import home from "../components/home.vue";

然后再在路由数组里面component : home

    

router.vue(这是我自定的控制路由的vue)  

在控制路由的vue文件中使用 router.push(location)方法进行路由跳转

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div>
      <button @click="show('a')">A页面</button>
      <button @click="show('b')">B页面</button>
    </div>
  </div>
</template>
 
<script>
import router from "./index";  引入index.js文件
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  methods: {
    show(index) {
      if(index == 'a') {
        router.push('/a')    跳转/a
      }
      if(index == 'b') {
        router.push('/b')
      }
    }
  }
}
</script>

// 字符串
router.push('home')
 
// 对象
router.push({ path: 'home' })
 
// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})
 
// 带查询参数，变成 /register?userId=123
router.push({ path: 'register', query: { userId: '123' }})

main.js配置路由

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
 
//注意use要在mount之前
createApp(App).use(router).mount('#app')

3、添加route-view

<template>
  <router-view v-slot="{ Component }">
    <transition>
      <component class="z-child" :is="Component" />
    </transition>
  </router-view>
</template>
这是推荐用法

App.vue
<template>
  <routerControl msg='hello'/>
  <router-view></router-view>
</template>

<script>
import routerControl from "./router/router.vue";
export default{
  name: "App",
  components:{
      routerControl
    },
  }
</script>
这是我自己的App.vue文件，路由控制设置在router.vue文件里面

原生HTML div的隐藏

一.方式1：隐藏后仍占有页面空间，显示空白
    div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白
    style="visibility: none;"      //在Div中设置style属性
    document.getElementById("typediv1").style.visibility="hidden";//隐藏
    document.getElementById("typediv1").style.visibility="visible";//显示

二.方式2：隐藏后释放占用的页面空间
    通过设置display属性可以使div隐藏后释放占用的页面空间，如下
    style="display: none;"         //在Div中设置style属性

    document.getElementById("typediv1").style.display="none";//隐藏
    document.getElementById("typediv1").style.display="";//显示
 

今天出现了个问题，使用动态路由后刷新界面就变空白了，明天再看看怎么解决

睡了晚安