How toConstruct an instance of VUE:

const vm = new Vue(options)
// Vue instances are usually called VMS
// Sometimes const vm = can be left out
// Options are arguments to Vue, generally called options or constructor options (← options after constructor)
Copy the code

The constructor of a VM is Vue (the class to which the VM belongs is Vue).

The VM object encapsulates all operations on the view, including data reads and writes, event binding, and DOM updates (Ajax not included!). .

Recall the prototype:

  1. Object.__ proto __ === constructor. Prototype

  2. All functions are constructed by Function

So it can be concluded that:

  1. vm.__ proto __ === Vue.prototype
  2. Vue.__ proto __ === Function.prototype

What is in Options

A search for “options” in the document reveals five broad categories

You can see five broad categories, which are:

Data: Data (internal data), props (attributes), propsData (attribute values), computed (calculated), Methods, Watch (observation)

DOM: el, template, render, renderError

Lifecycle hooks: BeforeCreate (before creation), created (before creation), beforeMount (before mounting), mounted (before mounting), beforeUpdate (beforeUpdate), Updated, activated, deactivated, and befor EDestory, DeStoryed, errorCaptured

Resources: Directives, filters, components

Combination: parent, mixins, extends, provide, Inject

— — — — — — — — — — — — — — — — — — — –

Insert a little knowledge of the difference between functions and methods:

  1. Function is a mathematical concept, method is object-oriented concept
  2. Both refer to the same thing: function (parameter) {return a value}, which is called a function in mathematics and a method in object-oriented language
  3. In object orientation, methods must be attached to an object, usuallyObject.method, such as obj.sayhi (), which is both a function and a method

Getting started Attributes:

1. The el – mount point

El represents the mount point of this property or instance.

Write the node you want to mount to in el, and then the contents of the node will be replaced.

index.html

<div id="app">test</div> 
Copy the code

main.js

//vue.runtime.min.js
import Demo from './Demo.vue'
new Vue({
    el:'#app'.render:h= >h(Demo)
})
$mount() instead of el. The effect is the same. Written as:
new Vue({
    render:h= >h(Demo)
}).$mount('#app')
Copy the code

The above example replaces the content “test” of the DIV with the id app with the content of the component Demo

2. Data – Internal data

Data can be written as an object, or as a function. It is recommended to write data in functional form every time!

Because if you pass a data to multiple Vue components at the same time, they share the data, and if one component modifies the data, the data referenced by the other component changes at the same time. Writing it in functional form prevents this problem. Written in functional form, each time data is called, the functional data of this component will be called first, so as to obtain the real data of the component. The second call is the same, so each time data function is executed, a new object can be obtained, so as to avoid the problem of multiple components sharing data.

index.html

<div id="app">test</div> 
Copy the code

main.js

//vue.min.js
/ / * * * * function data writing:
new Vue({
    data() {
        return{
            n: 0}},template: ` 
      

        {{n}} 
        
      
 `.methods: {
        add(){
            this.n += 1
        }
    }
}).$mount('#app')

// Write data as an object:
new Vue({
    data: {n: 0
    },
    ……
}).$mount('#app')
Copy the code

In this way, you can click the “+1” button to display the number plus one function

3. The methods – method

Methods can be used in two ways:

  1. The first is written after an @click or @keypress or any event as an event handler (see the +1 example above).
  2. The second is for ordinary functions, such as methods instead of filters.
  3. Methods are executed once per render

main.js

//vue.min.js
new Vue({
    data() {
        return{
            n: 0.array: [1.2.3.4.5.6.7.8.9.10]}},template: ` <div class="red"> {{n}} <button @click="add"> +1 </button> <hr> {{filter(array)}} <! {{filter()}}--> </div> '.methods: {
        add(){
            this.n += 1
        }
        filter(array){
            console.log("Execute filter function once")
            return array.filter(i= >i%2= = =0)}// The second way:
        //filter(){
        // console.log(" Execute filter once ")
        // return this.array.filter(i=>i%2===0)
        / /}
    }
}).$mount('#app')
Copy the code

Methods has a feature that it will be executed once every render, so every time you press the +1 button, methods will be reexecuted, so pressing +1 multiple times will print “Filter once” multiple times.

4. Components – components

Everything that comes out of new that we’ve been talking about is actually a VM, an instance of Vue or an object of Vue. If we just create a Vue, we call it an instance. If we use Vue.com Ponent or other Vue files, we call the other Vue files components. Components can be written in three ways, the second is preferred.

// The first way to write components, without introducing other.vue files
Vue.component("Demo", {template:'
      

        first demo
      
'
})
// The Vue.componen function is declared globally, and the second argument receives exactly the same as the Vue instance
const vm = newVue({ data(){... } template:`... 
       ... `.methods: {... }})Copy the code
// The second way to write components introduces other.vue files
import Demo2 from "./demo2.vue"

const vm = new Vue({
    components: {Demo2:Demo2 
        // Call the Demo2 component Demo2
        {Demo2} components:{Demo2} data(){... } template:`... 
       ... `.methods: {... }})Copy the code
// The third way to write components is to combine the previous two methods
const vm = new Vue({
    components: {Demo3: {template:'
      

        third demo
      
'} }, data(){... } template:`... 
       ... `.methods: {... }})Copy the code

A few suggestions for Components:

  1. Component names start with a capital letter, such as Demo, Button, and so on
  2. File name should be all lowercase (win10)

5. Four hooks

  • Created – Instances appear in memory, not in the page
created() {}Copy the code
  • Mounted – The instance appears in the page
mounted() {}Copy the code
  • Updated – The instance is updated
updated() {}Copy the code
  • Destoryed – The instance died
destoryed() {}Copy the code

6. Props – External properties