Detailed explanation of several common options for object parameter options of Vue instance

1. There are two ways to create a new Vue instance:

An example

var app= new Vue({
 el:'#todo-app', // Mount elements data:{ // In the .vue component data is a function, and it should be written as data () {}  items:['item 1','item 2','item 3'],
  todo:''
 },
 methods:{ // Method member  rm:function(i){
   (i,1)
  }
 }
})
// Then
export default app // Default output, can be referenced in other components

2. Direct

export default {
 name: '',
 components: {},
 data: () {}, // data function member watch: {}, // watch monitors members computed: {}， // computed compute member created: function () {},
 methods: {}, // methods object members actions: {}
}

2. Vue instance, my parameters options. It is an object. You can choose the following options:

Data function members

methods object members

Template template

Mount element el

Life cycle hook

Props property declaration

computed compute members

Watch monitors members

Options: watch monitoring

Watch monitoring is an object, the key is the expression that needs to be observed, and the value can be

1. Callback function,

2. The value can also be the method name.

3. Or an object containing options.

ps:Expression can be temporarily understood as an expression that can obtain values

Ⅰ Callback function to monitor the change of a value (monitoring the variables of the data function body)

like:

 data () {
  return {
   replaceList: []
  }
 },
 watch: {
  replaceList: function (val, oldVal) {
   ('replaceList changed')
  }
 }

ⅡThe second form: "The value can also be the method name", and the watch function can be moved into methods.

Then the above form can be changed to:

 data () {
  return {
   replaceList: []
  }
 },
 watch: {
  replaceList: 'changed'
 }，
 methods: {
  changed: function (val, oldVal) {
   ('replaceList changed')
  }
 }

Ⅲ Object containing options

For example: the above two are equivalent to

 data () {
  rerurn {
   replaceList: 1
  }
 },
 mounted: function () {
  this.$watch('replaceList',function(val, oldVal){
    ('replaceList changed')
  })
 },
 methods: {
 
 }

Option: computed compute member

Although expressions can be used within Mustache syntax, i.e. {{}}. For example, if you add a ￥ symbol to a number, you can use an expression:

{{‘￥'+money}}

Yes, but not recommended. In this case, try to use the calculation members:

In the .vue component of vue-cli scaffolding

Add the dollar sign before realizing RMB

<template>
 <input v-model="money"> // Responsive <span>{{RMB}}</span> // {{}} can be variables or method names</template>
 
<script>
 data () {
  rerurn {}
 },
 computed: {
  RMB: function () {
   return '￥'+ 
  }
 }
</script>

A calculation member RMB is introduced to calculate long expressions, and keep clear field references in HTML. This still enjoys the benefits of responsive programming: when the money value changes, the tag value that references RMB will also be automatically updated.

The detailed explanation of several commonly used options for the object parameter options of the Vue example above is all the content I have shared with you. I hope you can give you a reference and I hope you can support me more.