Introduction to the basics of VUE3 development: implementing basic functions

In front-end development, VUE is undoubtedly a very popular framework. With the release of VUE3, more and more developers have begun to learn and use this new version of VUE. This article will introduce how to use VUE3 to develop a front-end application, and demonstrate how to implement some basic functions based on some simple examples.

1. Preparing the environment

Before you begin, please make sure you have installed Node.js and npm. Then you can enter the following command on the command line interface to install VUE CLI:

npm install -g @vue/cli

After the installation is complete, you can use VUE CLI to create a new project. Enter the following command in the command line interface:

vue create my-project

where "my-project" is the name of your own project. Afterwards, you will be asked to select configuration options for VUE. You can choose default options or configure them manually. After the project is created, you can start using VUE3 for your own development.

2. Create components

In VUE, components are an important concept. A typical component contains three parts: template, script and style. Template is the HTML content of the component, script is the logical code of the component, and style is the style sheet of the component. Next, let's create a simple component. First, create a file named "HelloWorld.vue" in the "src/components" directory. Add the following content to the file:

<template>
  <div>
    <h1>Hello World</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {}
  },
  methods: {},
  computed: {},
  created() {}
}
</script>

<style scoped>
h1 {
  font-size: 24px;
  color: #333;
}
</style>

Here, we define a component named "HelloWorld" and set an H1 tag as the content of the component. In addition, we also define some other options, including data, methods, computed and created.

3. Using components

After creating the component, we need to use it in the application. Add the following content in the "src/App.vue" file:

<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
}
</style>

Here, we reference the "HelloWorld" component in the component and register the component in "components". In the application, we only need to use the "" tag to reference the component. When we run the application, we will see the title "Hello World" displayed on the page.

4. Event handler

In applications, we usually need to respond to user operations, such as clicking buttons, entering text, etc. At this time, we need to use event handlers. In VUE, event handlers can be implemented through the "v-on" directive. Next, let's create a simple button component. When the user clicks the button, an event will be triggered and a pop-up window will be displayed.

First, create a file named "Button.vue" in the "src/components" directory. Add the following content to the file:

<template>
  <button @click="showAlert">Click me!</button>
</template>

<script>
export default {
  name: 'Button',
  methods: {
    showAlert() {
      window.alert('Hello World!')
    }
  },
}
</script>

<style scoped>
button {
  background-color: #333;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
}
</style>

Here, we have created a component called "Button" and defined a button. The "v-on:click" command is used on the button to bind a click event, and a "showAlert" method is called when clicked to display a pop-up window.

Finally, add the following content in the "src/App.vue" file:

<template>
  <div id="app">
    <Button />
  </div>
</template>

<script>
import Button from '@/components/Button.vue'

export default {
  components: {
    Button
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
}
</style>

Here, we reference the "Button" component in the application. When we run the application and click the button, we will see a pop-up window displayed.

5. Computed properties

In applications, we sometimes need to calculate a new value based on one or more states. At this time, we can use calculated properties to deal with this problem. In VUE, computed properties can be implemented through the "computed" option. Next, let's create a computed property to calculate the square of a number.

First, create a file named "Number.vue" in the "src/components" directory. Add the following content to the file:

<template>
  <div>
    <label>Number: </label>
    <input type="number" v-model="number" />
    <p>Number squared: {{ numberSquared }}</p>
  </div>
</template>

<script>
export default {
  name: 'Number',
  data() {
    return {
      number: 0
    }
  },
  computed: {
    numberSquared() {
      return this.number * this.number
    }
  }
}
</script>

<style scoped>
label {
  font-weight: bold;
  margin-right: 10px;
}
input {
  padding: 5px;
  border-radius: 4px;
  border: 1px solid #ccc;
  width 100px;
  margin-right: 10px;
}
p {
  margin-top: 10px;
}
</style>

Here, we create a component named "Number" and define an input box for entering numbers. We also define a computed property "numberSquared" that is used to calculate the square of a number. When the number changes, the calculated property automatically updates the square of the number and displays it on the page.

Finally, add the following content in the "src/App.vue" file:

<template>
  <div id="app">
    <Number />
  </div>
</template>

<script>
import Number from '@/components/Number.vue'

export default {
  components: {
    Number
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
}
</style>

Here, we reference the "Number" component in the application and display a number input box and the square of that number.

Summary

In this article, we introduced how to use VUE3 to develop a front-end application and demonstrated how to create components, use event handlers and calculated properties and other basic functions. Through these examples, I believe you already have some basic understanding and skills. Of course, VUE3 still has many powerful functions and features waiting for developers to explore. I hope you can continue to learn and use VUE3, and continue to make progress and innovation in practice.

The above is the detailed content of Introduction to the basics of VUE3 development: implementing basic functions. For more information, please follow other related articles on the PHP Chinese website!