How to develop Vue.js applications without Vue CLI

In recent years, Vue.js, as a very popular JavaScript library, has been widely used to develop single-page applications (SPA). The advantages of Vue.js are its simple API, ease of use, and flexible options. However, to build a SPA using Vue.js, Vue CLI seems to have become an indispensable choice. But in fact, we do not necessarily need to use Vue CLI for development. In this article, I will introduce how to develop Vue.js applications without Vue CLI.

1. Prerequisites

Before using Vue.js to build an application, you should be able to master the following:

1. HTML, CSS, JavaScript basics .
2. Vue.js basics.

2. Start developing

1. Reference Vue.js

In your application, you can use CDN to reference Vue.js , you can also download Vue.js and reference it in HTML:

<script src="https://unpkg.com/vue"></script>

2. Creating a Vue instance

To use Vue.js, you first need to create a Vue instance. In this example, we will create a demonstration "hello-world" application.

<div id="app">
  {{ message }}
</div>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      message: 'Hello, World!'
    }
  })
</script>

(1)el

The "el" option is required and is used to specify the HTML element that the Vue instance will mount.

(2)data

The "data" option is optional and is used to specify the initial data of the Vue instance.

3. Computed properties

In Vue.js, computed properties are a code solution for declaring results that are calculated based on other data. Attributes. The advantage of computed properties is that they automatically update when the data they depend on changes. Below is an example using computed properties.

<div id="app">
  <p>{{ fullName }}</p>
</div>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      firstName: 'John',
      lastName: 'Doe'
    },
    computed: {
      fullName: function () {
        return this.firstName + ' ' + this.lastName
      }
    }
  })
</script>

4. Listener

In Vue.js, you can use watchers to monitor a specific property and execute it when its value changes some tasks. Below is an example of using a listener.

<div id="app">
  <p>{{ count }}</p>
  <button @click="increment()">Increment</button>
</div>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      count: 0
    },
    methods: {
      increment: function () {
        this.count++
      }
    },
    watch: {
      count: function (value) {
        console.log(value)
      }
    }
  })
</script>

In this example, we create a counter and when its value changes, print it to the console through the watcher.

5. Component

Component is one of the most important concepts in Vue.js. It allows users to divide the page into smaller reusable parts and let the code Easier to organize and maintain. In Vue.js, components are created through the Vue.extend() method.

<div id="app">
  <todo-item></todo-item>
</div>

<script>
  var todoItem = Vue.extend({
    template: '<p>Learn Vue.js</p>'
  })

  new Vue({
    el: '#app',
    components: {
      'todo-item': todoItem
    }
  })
</script>

In this example, we create a component named "todo-item", then register it in the Vue instance and use it in the template.

3. Summary

In this article, we introduced how to use Vue.js to create a SPA without using Vue CLI. In order to achieve this goal, we need to have the following knowledge points: HTML, CSS, JavaScript basics and Vue.js basics. Next, we created a "hello-world" application, developed it using computed properties, listeners, and used components to divide the application into smaller reusable parts. Although Vue CLI is a very convenient tool, Vue.js itself is flexible and easy to use. We can develop SPA without using Vue CLI.

The above is the detailed content of How to develop Vue.js applications without Vue CLI. For more information, please follow other related articles on the PHP Chinese website!