What are the options of vue?

In vue, the options option refers to the "construction option", which is a parameter passed in when creating a Vue instance. It is an object, and the syntax is "const vm = new Vue(options)". Use "new Vue(options)" to create a Vue instance, also called a Vue object. This Vue instance encapsulates all operations for operating element views. You can easily operate the view of the corresponding area through the Vue instance.

The operating environment of this tutorial: windows7 system, vue3 version, DELL G3 computer.

The role of options in Vue

What are options

options
As the name suggests, it means "options", or construction options. It is a parameter passed in when creating a Vue instance and is an object.
const vm = new Vue(options)

• Whether it is jquery.js or Vue.js, the corresponding operations are encapsulated again on the basis of js. For example: Get a jQuery div element instance through $('div'), also called a jQuery object. The jQuery object contains various operation APIs for the div elements in the options, so the jQuery instance encapsulates the operations on the elements in the options. Various operations;
• And Vue.js goes one step further on this basis, encapsulating all operations on the view, including reading and writing data, monitoring data changes, updating DOM elements, etc., through new Vue (options) to create a Vue instance, also called a Vue object. This Vue instance encapsulates all operations for operating element views. You can easily operate the view of the corresponding area through the Vue instance;

Five types of attributes of options

• ##Data: data, props, propsData, computed, Watch;

• DOM: el, template, render, renderError;

• Lifecycle hook: beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, activated, deactivated, beforeDestroy, destroyed, errorCaptured;

• ##Resources:

  directives, filters, components;

• Combinations:

  parent, mixins, extends, provide, inject;

##Getting started attributes

el (hanging point)

new Vue({
    el："#app"
    template:`<div>我是小明</div>`
})
可以使用$mount代替
new Vue({
    template:`<div>我是小明</div>`
}).$mount("#app")

data (internal data) supports objects and functions, using functions first

Will be monitored by Vue
• Will be proxied by the Vue instance
  Every data read and write will be monitored by Vue
  Vue will update when the data changes UI

  对象
  new Vue({
      template:"<div>{{n}}</div>",
      data:{
          n:0
      }
  }).$mount(&#39;#app&#39;)
  函数
  vue非完整版只支持函数
  new Vue({
      template:"<div>{{n}}</div>",
      data(){
          return {
              m:5
          }
      }
  })$mount(&#39;#app&#39;)

methods (method) event handling function or ordinary function

new Vue({
    template:"<div>{{n}}{{ add()}} <button @click="add">按钮</button></div>",
    data:{
        n:0
    },
    methods:{
        add(){
    	console.log(&#39;我可以是事件处理函数也可以是普通函数&#39;)
}
        }
}).$mount(&#39;#app&#39;)

components (vue component: pay attention to the size Write) three ways

注册全局组件
Vue.component('Deon1', {
  template: "<h2>全局组件</h2>"
})
注册局部组件
const deon2 = {
  template: "<h2>局部组件 {{n}}</h2>",
   //在组建中data必须使用函数
  data() {
    return {
      n: "小明"
    }
  }
}
new Vue({
  components: {
    Deon2: deon2,
    Deon3:{
      template:"<h2>组件3</h3>"
  }
  },
  template: `
    <div>页面
    <Deon1></Deon1>
    <Deon2></Deon2>
 	<Deon3></Deon3>
    </div> 
  `
}).$mount(&#39;#app&#39;)

Add components using vue files

deon4.vue file

<template>
  <div>我是deon.vue文件{{ name }}</div>
</template>
<script>
export default {
  data() {
    name: "组件4";
  },
};
</script>
<style scoped>
div {
  border: 1px solid red;
}
</style>

main .js

import Deon4 from './deon4.vue'
Vue.component('Deon1', {
  template: "<h2>全局组件</h2>"
})
const deon2 = {
  template: "<h2>局部组件 {{n}}</h2>",
  //在组建中data必须使用函数
  data() {
    return {
      n: "小明"
    }
  }
}
new Vue({
  components: {
    Deon2: deon2,
    Deon3: {
      template: "<h2>组件3</h3>"
    },
    Deon4
  },
  template: `
    <div>页面
    <Deon1></Deon1>
    <Deon2></Deon2>
    <Deon3></Deon3>
    <Deon4><Deon4>
    </div> 
  `
}).$mount(&#39;#app&#39;)

Four commonly used life cycle hook functions

created: The instance appears in the memory
• mounted: The instance appears in the page and triggers
  updated: Triggered by changes in the instance
  destroyed: Triggered by the instance being destroyed

  new Vue({
      template:"<div>{{n}}</div>",
      data:{
          n:0
      }，
       created() {
      console.log("实例出现在内存中了触发");
    },
    mounted() {
      console.log("实例出现在页面中触发");
    },
    updated() {
      console.log("实例出现了变化触发");
    },
    destroyed() {
      console.log("实例被销毁了触发");
    }
  }).$mount(&#39;#app&#39;)

props (external data) parent component wants Subgroup passing value

name="n" (pass in string)
• :name="n" (pass in this.n data)
  :fn= "add": (pass in this.add function)

  new Vue({
    components: {
      Deon1: {
        props: ["m"],
        template: "<div>{{m}}</div>"
      }
    },
    template: `<div><Deon1 :m="m"></Deon1></div>`,
    data: {
      m: 666
    }
  }).$mount(&#39;#app&#39;)

  [Related recommendations: vuejs video tutorial,

  web front-end development】

  The above is the detailed content of What are the options of vue?. For more information, please follow other related articles on the PHP Chinese website!