1, install,

(1) introduced via

  • In the learning process, you can use the latest version:
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
Copy the code
  • In a development environment, it is best to use an explicit version (2.6.10 is the latest stable release) :
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
Copy the code
  • In a production environment, it is recommended to use the compressed version:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
Copy the code

The difference between the development version and the production version is that the development version contains the full warning, while the production version is much faster

(2) Install through NPM

When building large applications, it is recommended to use NPM installation (before doing so, make sure your computer has the environment configured) :

> npm install vue
Copy the code

Vue also provides an official CLI that allows you to quickly set up complex scaffolding

> npm install vue-cli
Copy the code

However, since the CLI is not recommended for beginners, I will not introduce it here

2, an introduction to

Each Vue application starts with a Vue instance created by new Vue()

var vm = new Vue({
  / / options
})
Copy the code

A simple example is as follows:

Without any instructions, if you can read the code below, this article probably won’t help you much

But if you’re confused about something in the code, take a look at the comments below to help you understand

<! DOCTYPEhtml>
<html>

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

<body>
    <div id="app">
        <p>{{ message }}</p>
        <p>{{ reversedMessage() }}</p>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app'.data: {
                message: "Hello Vue"
            },
            methods: {
                reversedMessage: function () {
                    return this.message.split(' ').reverse().join(' ')}}})</script>
</body>

</html>
Copy the code

Here is the code after adding the comment:

<! DOCTYPEhtml>
<html>

<head>
    <title>Demo</title>
    <! Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">
        <! Data binding with Mustache syntax -->
        <! -- Display message data -->
        <p>{{ message }}</p>
        <! The reversedMessage function returns the result.
        <p>{{ reversedMessage() }}</p>
    </div>
    <script type="text/javascript">
        // Create a Vue instance with three parameters: EL, data, and methods
        var vm = new Vue({
            // El is the mount target of a Vue instance, either a CSS selector or an HTMLElement instance
            // here '#app' is the CSS selector, indicating that the Vue instance is bound to the HTML element with the id app
            // All subsequent operations are within the specified HTML element
            el: '#app'.// Data is the data Object of the Vue instance. It can be either Object or Function
            // Data is an object, and in general data should be a pure object
            When defining a component, however, data must be declared as a function that returns an initial data object
            // Because components are used to create multiple instances, if data is Object, all instances will share the same data Object
            data: {
                message: "Hello Vue"
            },
            // methods are Vue instance methods, which can be an object, and each item in the object is a method
            // In general, this in a method is automatically bound to a Vue instance
            // But when using the arrow function, this is not bound to a Vue instance because this binds the context of the parent scope
            methods: {
                reversedMessage: function () {
                    // Since this is bound to a Vue instance, you can directly access the property Message in the data object
                    return this.message.split(' ').reverse().join(' ')}}})// Vue instance proxies all properties on the data object, that is, we can access them through 'vm.message'
        console.log(vm.message)
        // Methods are also incorporated into the Vue instance, which we can access via 'vm.reversedMessage()'
        console.log(vm.reversedMessage())
    </script>
</body>

</html>
Copy the code