Vue installation and use

Preface:

Vue (pronounced /vjuː/, similar to view) is a framework for building front-end and back-end separation. It was initially developed by the outstanding domestic player You Yuxi and is currently the "most" popular front-end framework in the world. Using vue to develop web pages is very simple, and the technical ecosystem is complete and the community is active. It is a must-have skill for finding a job in the front-end and back-end!

1. Vue installation

The installation of Vue is generally divided into three ways

Method 1: CDN introduction

<!--Development environment version, including helpful warning commands-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<!--Generated version, optimized for size and speed-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
 

Method 2: Direct download and import

Development environment: https://vuejs.org/js/vue.js

Production environment: https://vuejs.org/js/vue.min.js

Method 3: npm installation

It is recommended to use NPM installation when building large applications with Vue . NPM works well with module bundlers like webpack or Browserify . At the same time, Vue also provides supporting tools for developing single-file components.

# Latest stable version$ npm install vue
 

2. Basic use

To use Vue , you first need to create a Vue object and pass the el parameter in this object. The full name of the el parameter is element , which is used to find a root element for vue to render. And we can pass a data parameter, all values ​​in data can be used directly under the root element using {{}} .

The sample code is as follows:

<div id="app">
  {{message}}
</div>
</body>
<script>
    const app = new Vue({
      el: "#app",
      data: {
        message: "Beginner Vue"
      }
    })
</script>

The data in data can only be used under the root element of vue and cannot be recognized and rendered vue in other places.

for example:

<!--Cannot render here-->
<p>{{message}}</p>
</body>
<script>
    const app = new Vue({
      el: "#app",
      data: {
        message: "Beginner Vue"
      }
    })
</script>

You can also add methods to the vue object. This property is specifically used to store your own functions. The functions in methods can also be used in templates, and the functions in methods can access the values ​​in data by simply using this. name, without the need to add this.data. name to access it.

The sample code is as follows:

<div id="app">
    <p>{{greet()}}</p>
</div>
</body>
<script>
    const app = new Vue({
      el: "#app",
      data: {
        message: "Beginner Vue"
      },
      methods: {
        greet: function () {
          return "hello" + this.message
        }
      }
    })
</script>

This is the end of this article about Vue installation and usage. For more relevant Vue installation and usage content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!