Options Usage Instructions for Vue

el: Mount point

Substitution relationship with $mount

new Vue({
 el: "#app"
});

new Vue({}).$mount('#app')

Note: The element that you chose as the mount point, if there is already content in the element in index. html, will disappear during rendering (you can see it at a slow network speed) and be overwritten by the corresponding content of this vue instance.

data: Internal data

Support objects and functions, and give priority to functions

new Vue({
 // Priority function 
 data() {
  return {
   n: 0,
  }
 }
}).$mount("#app");

Note: If you can write functions, try to write functions, otherwise there may be BUG;;

methods: Method

Event handler

new Vue({
   data (){
    return{
      n:0
    }
   },
  template:`
    <div class="red">
      {{n}}
      <button @click="add">+1</button>
    </div>
  `,
 //add Must be written methods Inside 
  methods:{
     add(){
       this.n+=1
     }
  }
}).$mount('#app')

Common function: methods instead of filter

import Vue from "vue";
Vue.config.productionTip = false;

new Vue({
 data() {
  return {
   n: 0,
   array: [1, 2, 3, 4, 5, 6, 7, 8]
  };
 },
 template: `
 <div class=red>
 {{n}}
 <button @click="add">+1</button> // Event handler 
 <hr>
 {{filter()}}  // Ordinary function (JS Adj. filter Called directly in the view, every 1 The rendering is called for the next update 1 Times )
 </div>
 `,// Active call in the template 
 methods: {
  add() {
   this.n += 1; // Event handler 
  },
  filter() {
   return this.array.filter(i => i % 2 === 0); // Ordinary function 
  }
 }
}).$mount("#app");

components: Method

Use Vue component, pay attention to case

(Recommended Usage) Modularization:

Create a new vue file Demo. vue. This vue file is a component

Introduce this vue file in main. js

Declare in components of the vue instance that this is the component I want to use and name it Demo

So you can use this component directly in template of this Vue instance < Demo/ >

import Vue from "vue";
import Demo from "./Demo.vue"; // Introduce this vue Documents   --- Filename preferably lowercase   The component name is preferably uppercase 
Vue.config.productionTip = false;

new Vue({
 components: {
  Demo // In vue Instance of the components This is the component I want to use, and it is named Demo
  // If the component name is called Demo Namely Demo : Demo , then write Demo --ES6 Abbreviations 
  //components: {Demo},
 },
 data() {
  return {
   n: 0
  };
 },
 template: `
 <div class=red>
 {{n}}
 <button @click="add">+1</button>
 <Demo/>  // So in this Vue Instance of the template You can use this component directly in `<Demo/>`
 </div>
 `,
 methods: {
  add() {
   this.n += 1;
  },
 }
}).$mount("#app");

4 hooks

created --  Triggered when the instance appears in memory 
created(){
     debugger
     console.log(' This thing appears in memory ')
  },

mounted--Triggered when the instance appears in the page (mounted)

 mounted(){
  debugger
     console.log(' This thing already appears on the page ')
  },

updated--Triggered after instance updates

updated(){
     console.log(' Updated ')
    console.log(this.n) 
  },
 // When you +1 Can prove that he triggered when updating , You can also get the latest n

destroyed--Triggered after an instance dies out of page and memory

props: External Properties

External incoming value

message = "n" passed in string

:message = "n" this. n data passed into vue instance

:fn="add" this. add function passed into vue instance

Example

Additional knowledge: vue $options initialization

Initialize $options when vue is instantiated

vue/src/core/instance/init.js

 Vue.prototype._init = function (options?: Object) {
  const vm: Component = this
  // a uid
  vm._uid = uid++

  let startTag, endTag
  /* istanbul ignore if */
  if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
   startTag = `vue-perf-start:${vm._uid}`
   endTag = `vue-perf-end:${vm._uid}`
   mark(startTag)
  }

  // a flag to avoid this being observed
  vm._isVue = true
  // merge options
  if (options && options._isComponent) {
   // optimize internal component instantiation
   // since dynamic options merging is pretty slow, and none of the
   // internal component options needs special treatment.
   initInternalComponent(vm, options)
  } else {
  // Initialization $options
   vm.$options = mergeOptions(
    resolveConstructorOptions(vm.constructor),
    options || {},
    vm
   )
  }
  /* istanbul ignore else */
  if (process.env.NODE_ENV !== 'production') {
   initProxy(vm)
  } else {
   vm._renderProxy = vm
  }
 }
}