Vueの例のオブジェクトパラメータoptionsのいくつかの一般的なオプションの詳細


一.Vueの新しい例は、次の2つの方法があります。
1.newの一例

var app= new Vue({
 el:'#todo-app', //     
 data:{ //  .vue   data     ,   data () {}    
  items:['item 1','item 2','item 3'],
  todo:''
 },
 methods:{ //     
  rm:function(i){
   this.items.splice(i,1)
  }
 }
})
//    

export default app //     ,        
2.直接

export default {
 name: '',
 components: {},
 data: () {}, // data    
 watch: {}, // watch    
 computed: {}, // computed    
 created: function () {},
 methods: {}, // methods    
 actions: {}
}
二.Vueの例、私のパラメータoptions。それはオブジェクトです。以下のオプションを選択できます。
data関数のメンバー
methodsオブジェクトのメンバー
テンプレート
マウント要素el
ライフサイクルフック
props属性宣言
computted計算メンバー
ウォッチ監視メンバー
オプション:ウォッチ監視
ウォッチ監視は対象です。キーは観察が必要な表現です。値は
1.コールバック関数、
2.値は方法名であっても良いし、
3.オプションを含むオブジェクト。
ps:表現は一時的に値を得る式として理解できる。
Ⅰコールバック関数は、1つの値の変化を監視します(data関数の変数を監視します)。
例えば:

 data () {
  return {
   replaceList: []
  }
 },
 watch: {
  replaceList: function (val, oldVal) {
   console.log('replaceList changed')
  }
 }
Ⅱ第2の形式:「値は方法名でもいい」、watchの関数をmethodsに移すことができます。
上の形を変えてもいいです。

 data () {
  return {
   replaceList: []
  }
 },
 watch: {
  replaceList: 'changed'
 },
 methods: {
  changed: function (val, oldVal) {
   console.log('replaceList changed')
  }
 }
Ⅲオプションを含むオブジェクト
上の二つは同じです。

 data () {
  rerurn {
   replaceList: 1
  }
 },
 mounted: function () {
  this.$watch('replaceList',function(val, oldVal){
    console.log('replaceList changed')
  })
 },
 methods: {
 
 }
オプション:computed計算メンバー
Mustache構文では、表現、すなわち{}が使用されてもよい。たとえば数値の前に¥記号を入れると、式を使うことができます。

{{‘¥'+money}}
いいですが、勧められません。このような状況はできるだけメンバーを計算するべきです。
vue-cli足場の.vueセットにあります。
RMBを実現する前にドル記号を追加します。

<template>
 <input v-model="money"> //     
 <span>{{RMB}}</span> // {{}}      ,       
</template>
 
<script>
 data () {
  rerurn {}
 },
 computed: {
  RMB: function () {
   return '¥'+ this.money
  }
 }
</script>
計算メンバーRMBを導入して長い表式の計算を行いますが、HTML内で明確なフィールド参照を維持すればいいです。このようにしても応答式プログラミングの利点があります。money値が変わると、RMBを参照するラベル値も自動的に更新されます。
以上のこのVueの例の対象パラメータoptionsのいくつかの共通のオプションの詳細は、小編集が皆さんに提供しているすべての内容です。