Vue study notes (a) entry

EDITORIAL words

Vue learning a series of articles, mainly refer to the official documentation, combined with a little bit of their own feelings and experiences gathered from the

Inadequacies also please correct me, first attach the following documents Vue's official:

Tutorial: https://cn.vuejs.org/v2/guide
API：https://cn.vuejs.org/v2/api/
Style Guide: https://cn.vuejs.org/v2/style-guide/
Cookbook：https://cn.vuejs.org/v2/cookbook/

1, the installation

(1) by <script>introducing

In the learning process, you can use the latest version:

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

In a development environment, it is best to use explicit version (2.6.10 is the latest stable version):

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

In a production environment, we use a compressed version:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>

The difference between the development version and a production version that contains the full development version of the warning, but the production version has a faster speed

(2) NPMInstallation

When building large-scale applications, we recommended NPMinstallation (Prior to this, make sure your computer is configured for environment-related):

$ npm install vue

At the same time, Vue also offers an official cli, you can quickly build complex scaffolding

$ npm install vue-cli

However, due to the very beginners when not recommended cli, so here is not to introduce specific

2. Getting Started

Each application Vue is through Vuea function to create the instance of Vue beginning

var vm = new Vue({
  // 选项
})

A simple example is as follows:

<!DOCTYPE html>
<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>

First of all, we <head>are <script>introducing the tag Vue

Then, in <body>the <div>display method and message data reversedMessage () returns the result in the tag

Next, we mainly see <body>the <script>tab, where we declare a constructor Vue

In this simple Vue constructor has three parameters, respectively el, dataandmethods

(1) el - Vue certain instances mount

el may be a CSS selectors (string type), may be instances HTMLElement

In the example embodiment '#app'is a CSS selector, Vue show the instance id of the HTML elements bind app

All subsequent operations are all within the above specified HTML elements to HTML elements unaffected

(2) data - Vue data object instance

Object types can be either data, or may be of type Function

In general, data should only data, therefore, Object must be a pure object (containing zero or more key-value pairs)

Another is that when defining components, data must be declared to return an initial data object function

Because components may be used to create multiple instances, if the data is Object, then all will share the same instance of a data object

After the instance is created, you can instance property vm.$dataaccess to the original data object

At the same time, agents also examples of all properties on the data subject, that is, access vm.ais equivalent to visitvm.$data.a

(3) methods - Vue example of a method

In general, the method of this example will be automatically bound to Vue

However, when we use the arrow functions, this will not be binding for the Vue instance, because this binding context parent scope

methods will be incorporated into the Vue instance, that is to say, we can vm.functionName()access these methods

We have learned what? - Options

data

data √

methods √

computed

watch

props

propylene data

JUDGMENT

the √

template

render

renderError

Life hook function

Resources

combination

other