Vueの例のオブジェクトパラメータoptionsのいくつかの一般的なオプションの詳細
2788 ワード
一.Vueの新しい例は、次の2つの方法があります。
1.newの一例
data関数のメンバー
methodsオブジェクトのメンバー
テンプレート
マウント要素el
ライフサイクルフック
props属性宣言
computted計算メンバー
ウォッチ監視メンバー
オプション:ウォッチ監視
ウォッチ監視は対象です。キーは観察が必要な表現です。値は
1.コールバック関数、
2.値は方法名であっても良いし、
3.オプションを含むオブジェクト。
ps:表現は一時的に値を得る式として理解できる。
Ⅰコールバック関数は、1つの値の変化を監視します(data関数の変数を監視します)。
例えば:
上の形を変えてもいいです。
上の二つは同じです。
Mustache構文では、表現、すなわち{}が使用されてもよい。たとえば数値の前に¥記号を入れると、式を使うことができます。
vue-cli足場の.vueセットにあります。
RMBを実現する前にドル記号を追加します。
以上のこのVueの例の対象パラメータoptionsのいくつかの共通のオプションの詳細は、小編集が皆さんに提供しているすべての内容です。
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のいくつかの共通のオプションの詳細は、小編集が皆さんに提供しているすべての内容です。