How to set up a static page in vue-Front-end Q&A-php.cn

How to set up a static page in vue

PHPz

Release： 2023-04-13 09:58:55

Original

2630 people have browsed it

Preface

Vue is a popular front-end framework. Through Vue, we can easily create dynamic pages. But sometimes, we need to create static pages. This article will introduce how to use Vue to create static pages.

Vue’s static page

In Vue, we can create static pages in the form of "Single File Component". Single-file components are files with the .vue suffix. Vue components can organize HTML, CSS and JavaScript code into an independent, reusable component.

The following is a simple Vue single file component:

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  name: 'StaticPage',
  data() {
    return {
      title: '这是一个静态页面',
      content: '欢迎使用Vue创建静态页面。'
    };
  }
};
</script>

<style>
h1 {
  font-size: 32px;
  color: #333333;
}
p {
  font-size: 24px;
  color: #666666;
}
</style>

Copy after login

The above code defines a Vue component named StaticPage, using two data attributes title and content in the template, and Bind to the page. Two selector styles h1 and p are defined in the style.

Using Vue to create static pages has the following advantages:

Data binding: Unlike static pages that require manual modification of the content in the tag, Vue binds data to the page. Automated updates;
Code organization: organize HTML, CSS, and JavaScript codes into an independent component to simplify the code;
Reusability: Vue components are independent and can be used on different pages Reuse in code to improve code reusability.

How to use static pages in Vue?

There are several steps to create a static page using Vue:

Install Vue
Create a single file component
Register in the Vue instance Components
Add components to the page

Next, we’ll walk through the steps step by step.

Installing Vue

Before using Vue, you need to install it first. We can install Vue through npm or CDN. In this article, we introduce it in CDN mode:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vue Static Page</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Copy after login

The above code introduces the Vue library and installs Vue globally.

Create a single-file component

Create a .vue file in the project directory. The following is an example of a simple single-file component for a static page:

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  name: 'StaticPage',
  data() {
    return {
      title: '这是一个静态页面',
      content: '欢迎使用Vue创建静态页面。'
    };
  }
};
</script>

<style>
h1 {
  font-size: 32px;
  color: #333333;
}
p {
  font-size: 24px;
  color: #666666;
}
</style>

Copy after login

Vue.component('static-page', staticPage);

Copy after login

Here the component is named "static-page".

Add the component to the page

Add the component to the page through the following code:

<div id="app">
  <static-page></static-page>
</div>

Copy after login

The above code adds the component to the page with the id In the div tag of "app".

Complete Vue static page example

The following is a complete Vue static page example:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vue Static Page</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
    <div id="app">
      <static-page></static-page>
    </div>
    
    <template id="static-page-template">
      <div>
        <h1>{{ title }}</h1>
        <p>{{ content }}</p>
      </div>
    </template>
    
    <script>
      var staticPage = {
        template: '#static-page-template',
        data() {
          return {
            title: '这是一个静态页面',
            content: '欢迎使用Vue创建静态页面。'
          };
        }
      };
    
      new Vue({
        el: '#app',
        components: {
          'static-page': staticPage
        }
      });
    </script>
    
    <style>
      h1 {
        font-size: 32px;
        color: #333333;
      }
      p {
        font-size: 24px;
        color: #666666;
      }
    </style>
  </body>
</html>

Copy after login

The above code defines a Vue instance and registers the staticPage component to the instance middle. The component uses the template with the id "static-page-template", uses two data attributes title and content in the template, and binds them to the page. Two selector styles h1 and p are defined in the style.

Conclusion

This article briefly introduces how to use Vue to create static pages. Vue's static pages have the advantages of data binding, code organization, and reusability, and are suitable for creating small and medium-sized static websites. Through the introduction of this article, I hope readers can better understand the use of Vue.

The above is the detailed content of How to set up a static page in vue. For more information, please follow other related articles on the PHP Chinese website!