Home > Article > Web Front-end > How to create a responsive web interface using Vue and Element-UI
How to create a responsive web interface using Vue and Element-UI
In web development, responsive design is an essential technology. Vue.js and Element-UI are two very popular front-end frameworks. They both provide rich tools and components to build modern responsive web interfaces. This article will introduce how to use Vue and Element-UI to create a responsive web interface, and will present the specific implementation process through code examples.
First, we need to make sure that Vue.js and Element-UI are installed. These two libraries can be introduced through CDN or installed using npm. Before we start, we need to create a basic Vue project:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue and Element-UI</title> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> </head> <body> <div id="app"> <el-input v-model="message" placeholder="请输入内容"></el-input> <p>{{ message }}</p> </div> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script> new Vue({ el: '#app', data: { message: '' } }) </script> </body> </html>
In the above code, we introduced the library files of Vue.js and Element-UI. Then, in the Vue instance, we define a data attribute message
that will be bound to the v-model
directive of the el-input
component. In this way, when the user enters content, the value of the message
attribute will be synchronized with the entered value.
In addition, we also added a e388a4556c0f65e1904146cc1a846bee
tag to the page to display the value of the message
attribute. Through the {{ message }}
syntax, we bind the message
property of the Vue instance to the text content in the e388a4556c0f65e1904146cc1a846bee element. When the value of the message
attribute changes, the text content on the page will be updated accordingly.
In the above code, we just used a simple input box component of Element-UI. In fact, Element-UI provides a large number of available components and tools to help us build a responsive web interface. Let’s look at some commonly used component examples:
<template> <div> <el-input v-model="message" placeholder="请输入" ></el-input> <el-button @click="handleClick" >点击</el-button> <p>{{ message }}</p> <el-checkbox v-model="checked">选项1</el-checkbox> <el-checkbox v-model="checked">选项2</el-checkbox> <el-checkbox v-model="checked">选项3</el-checkbox> <el-select v-model="selectedOption" placeholder="请选择"> <el-option label="选项1" value="1"></el-option> <el-option label="选项2" value="2"></el-option> <el-option label="选项3" value="3"></el-option> </el-select> </div> </template> <script> export default { data() { return { message: '', checked: false, selectedOption: '' } }, methods: { handleClick() { console.log('按钮被点击') } } } </script> <style scoped> p { color: blue; } </style>
In the above code, we introduce more Element-UI components and use Vue’s v-model
directive to Bind data. For example, we use the 6afab29127e1844d4b8eed7d62b86189
component to create a button. Through the @click
event listener, when the button is clicked, handleClick## will be triggered. #method. We also used the
2f4c265921fe0a1d2c5cde3f24122b40 component to create the checkbox and bind the checked state to the
checked property. Similarly, we used the
f9696cb923e305a3b714cd062a404246 component to create a drop-down selection box and bind the selected option to the
selectedOption property.
The above is the detailed content of How to create a responsive web interface using Vue and Element-UI. For more information, please follow other related articles on the PHP Chinese website!