How to use Vue to build a basic system

With the rapid development of front-end technology, Vue.js has become a widely used Javascript framework in the industry. It can be used to build complex single-page web applications. This article will introduce how to use Vue to build a basic system.

1. Getting started

First, we need to install Vue locally. You can directly download the official Vue.js library, or use npm to install it as follows:

npm install vue

Introduce the Vue.js library into the HTML page:

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

You can use the Vue CLI (command line interface) Let’s quickly build a new project. Here we use Vue CLI 3 to create a new project.

npm install -g @vue/cli
vue create my-project

There will be a series of configuration options that you need to fill in. After selecting, you can create a new Vue project.

2. Create components

Vue adopts the MVVM mode, that is, the view layer and data layer are separated. Through Vue.js, we can quickly create components, and a component is equivalent to a container of data.

Creating a component is very simple. You only need to register a component in the Vue instance and declare its required data and methods. The following is a simple example of creating a component:

<div id="app">
  <my-component></my-component>
</div>

Vue.component('my-component', {
  data: function () {
    return {
      message: 'Hello Vue!'
    }
  },
  template: '<div>{{ message }}</div>'
})

new Vue({ el: '#app' })

In the above code, we registered a component named "my-component" in the Vue instance through the Vue.component method . Its data comes from the message attribute in the data method.

Finally, mount the my-component component to the specified HTML element in the Vue instance.

3. Component communication

In Vue, communication between components is a relatively common requirement. The following explains the communication methods between components.

3.1 Props

Props are a way to pass data to child components. It allows parent components to pass data to child components through property binding.

In the parent component template:

<template>
  <child-component :message="messageFromParent"></child-component>
</template>
<script>
export default {
  data() {
    return {
      messageFromParent: 'parent message'
    }
  }
}
</script>

In the child component template:

<template>
  <div>{{ message }}</div>
</template>
<script>
export default {
  props: {
    message: String
  }
}
</script>

In the above code, we created the parent component in the template tag A child component named "child-component" and passed a string named messageFromParent using the :message attribute.

The props of a subcomponent is an object used to define the properties and types that the current component can receive. In this example, the child component uses only one message attribute, and its type is String.

3.2 Event

Event is a way to allow child components to communicate with parent components. It allows child components to notify parent components that something has happened through events.

In the child component template:

<template>
  <div @click="onChildClick">click me</div>
</template>
<script>
export default {
  methods: {
    onChildClick() {
      this.$emit('child-click')
    }
  }
}
</script>

In the parent component template:

<template>
  <child-component @child-click="onChildClick"></child-component>
</template>
<script>
export default {
  methods: {
    onChildClick() {
      console.log('child clicked')
    }
  }
}
</script>

In the above code, @click in the child component is monitored A click event, and an event named "child-click" is emitted to the parent component through the $emit method.

<child-component> in the parent component uses @child-click to listen to the event, and when the "onChildClick" method is triggered, control The station will output "child clicked".

4. Routing

In Vue, routing is an important concept. It allows us to jump to different pages based on different URLs. The Vue framework uses Vue Router to implement routing functions.

First you need to install Vue Router in the project:

npm install vue-router --save

Create a routing component in the router.js file:

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

Use Vue.use To install Vue Router, and then define two routes, namely the homepage and about page, and specify the component corresponding to each route through the component attribute.

Finally, you need to introduce the routing component into the Vue instance:

import Vue from 'vue'
import router from './router'
import App from './App.vue'

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

5. Summary

In this article, we briefly introduced how to use Vue to build a basic system. From getting started to component communication and routing, we have only touched on a small part of Vue. Vue has many powerful features and capabilities. I hope this article can be of some help to beginners.

The above is the detailed content of How to use Vue to build a basic system. For more information, please follow other related articles on the PHP Chinese website!