Summarize the problems encountered in the process of using VUE

Setting the background image

  • Set up thestaticbackground

html:

<template>
  <section class="login-container">
  <p1>Here is the content</p1>
  </section>
</template>
Copy the code

css:

.login-container {
  background: url(. /.. /assets/img/login/login_bg0.jpg) 50% 0 no-repeat fixed;
  background-size: cover;
  width: 100%;
  height: 100%;
  }
Copy the code

Note: The format of the background value is URL (static photo resource path), for example URL (.. /.. / assets/img/login/login_bg0. JPG).

  • The bindingdynamicbackground

html:

<template>
  <section class="login-container" :style="backgroundObject">
  <p1>Here is the content</p1>
  </section>
</template>
Copy the code

Js code:

  1. Define binding properties in databackgroundObject
// Define the binding property backgroundObject in data
data() {
    return {
      backgroundObject: {backgroundImage: "url(" + require(".. /.. /assets/img/login/login_bg0.jpg") + ")",}}Copy the code

Note: The background image is the backgroundImage property, not the background property.

BackgroundImage value Static resource format: “URL (” + require(” static photo resource path “) + “)”

BackgroundImage Value Dynamic resource format: “URL (” + path of resources obtained from the background through HTTP + “)”.

  1. Js code toDynamic accessPhotographs ofTo deal with.
 // Get the background image
   backgroundImgFun() {
     this.$request.fetchBackgroundImage().then((res) = > {
       if (res.code === 200) {
         if (res.data) {
           //this.$getPath(res.data) is the HTTP path of the photo
           this.backgroundObject.backgroundImage="url(" + this.$getPath(res.data) + ")";
         } else {
           this.loginImg = require(".. /.. /assets/img/login-bg.jpg"); }}}); },Copy the code

Dynamic binding of audio and photos

html:

/ / audio<audio ref="audio" controls hidden="true">
        <source :src="audioSrc" type="audio/mpeg" />
  </audio>
Copy the code

Data binding:

data() {
    return {
    // Static default resource writing
     audioSrc: require(`@/assets/audio/black_alerm.mp3`),}Copy the code

AudioSrc can be assigned a dynamic audio HTTP resource path, like photo and audio.

Document flow and exit document flow

CSS provides three basic positioning mechanisms: normal flow, positioning, and floating for page layout

The document flow,Normal flow)

There are three main types of HTML elements: block elements, inline elements and inline block elements

Block elements: Exclusive line, top to bottom in the text stream, can set width and height.

Common elements: div, P, H1-H6, ul, li, DL, DT, DD, form, table

Inline elements: Lines are arranged side by side in a row. The edges of parent elements continue to be arranged in a new line. Width and height cannot be set.

Common elements: A, SPAN, strong, u, em

Inline block elements: Can be arranged side by side in a row or set width and height

Common elements: img, input, textarea

Positon locate

The common attributes of positon are absolute,relative, and fixed

  • absolute

The parent element is positioned relative to the parent element, which is removed from the file stream and does not occupy the original position of the document. Positon: relative is best used to locate the parent element.

html

  <div class="div">
    <div class="div1">Three thousand people were drunk in the house</div>
    <div class="div2">One sword light cold fourteen states</div>
    <div class="div3">Full bed clear dream pressure star river</div>
  </div>
Copy the code

css

.div{
  width: 200px;
  height: 600px;
  position: relative;
  border:1px solid;
}
.div1{
  width: 200px;
  height: 200px;
  background:blue;
}
.div2{
  width: 200px;
  height: 200px;
  background:red;
  position: absolute;
  left: 0px;
  top: 0px;
}
.div3{
  width: 200px;
  height: 200px;
  background:green;
}
Copy the code

Summary: After leaving the document flow, the following elements fill in the empty bits

  • relative

Offset from the original position of the element, but still occupy a position in the document that subsequent elements cannot fill. But later elements can also be stacked in this position by leaving the document flow.

html

   <div class="div">
      <div class="div1">Three thousand people were drunk in the house</div>
      <div class="div2">One sword light cold fourteen states</div>
      <div class="div3">Full bed clear dream pressure star river</div>
    </div>
Copy the code

css

    .div{
      width: 100px;
      height: 300px;
      position: relative;
      border:1px solid;
    }
    .div1{
      width: 100px;
      height: 100px;
      background:blue;
    }
    .div2{
      width: 100px;
      height: 100px;
      background:red;
      position: relative;
      left: 0px;
      bottom:100px;
    }
    .div3{
      width: 100px;
      height: 100px;
      background:green;
    }
Copy the code

Summary: Semi-detached from the document flow, the element’s original position is still occupied, but the element itself has floated to other locations, overlapping with other elements.

  • fixed

Relative to the browser (body) location, out of the document flow

html

   <div class="div">
      <div class="div1">Three thousand people were drunk in the house</div>
      <div class="div2">One sword light cold fourteen states</div>
      <div class="div3">Full bed clear dream pressure star river</div>
    </div>
Copy the code

css

    .div {
      width: 100px;
      height: 300px;
      position: relative;
      border: 1px solid;
    }
    .div1 {
      width: 100px;
      height: 100px;
      background: blue;
    }
    .div2 {
      width: 100px;
      height: 100px;
      background: red;
      position: fixed;
      left: 0px;
      top: 0px;
    }
    .div3 {
      width: 100px;
      height: 100px;
      background: green;
    }
Copy the code

Summary: Leaving the document stream, other elements can fill in the original position

Float positioning

Semi-detached from the flow allows block elements to form a column (similar to inline elements), but other elements cannot fill the position previously occupied by the element, except when other elements are also detached or semi-detached from the flow.

html

   <div class="div">
      <div class="div1">Three thousand people were drunk in the house</div>
      <div class="div2">One sword light cold fourteen states</div>
      <div class="div3">Full bed clear dream pressure star river</div>
    </div>
Copy the code

css

    .div {
      width: 600px;
      height: 300px;
      position: relative;
      border: 1px solid;
    }
    .div1 {
      width: 100px;
      height: 100px;
      background: blue;
      float: left;
      margin-left: 20px;
      margin-top: 20px;
    }
    .div2 {
      width: 100px;
      height: 100px;
      background: red;
      float: left;
      margin-left: 20px;
      margin-top: 20px;
    }
    .div3 {
      width: 100px;
      height: 100px;
      background: green;
      float: left;
      margin-left: 20px;
      margin-top: 20px;
    }
Copy the code

This section describes the Z-index attribute

Class 7 fold

  • Z – the index USES

Sets the stack order of elements: This property sets the position of an element along the Z-axis. The more it is away from the user, the closer it is to the user, and the greater it is to the user