Home > Article > Web Front-end > How to set up a static page in vue
How to set up a static page in vue
- PHPzOriginal
- 2023-04-13 09:11:162565browse
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>
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>
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> - Register the component in the Vue instance
Register the component just created in the Vue instance:
Vue.component('static-page', staticPage);
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>
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>
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!