Vue.js応答インターフェース
Vueはデータ動的応答インターフェースを追加することができます。
たとえば、以下の例では、データの待ち受けを実現するために、watchはVueインスタンス以外に追加しなければならない。
実例ではボタンをクリックすることでカウンタが1を加算します。setTimeoutは10秒後の計算機の値を20で設定します。
Vueは、作成されたインスタンスに新しいルートレベル応答属性を動的に追加することができません。
Vueはオブジェクト属性の追加または削除を検出できません。一番いい方法は初期化例の前にルートレベル応答属性を宣言することです。たとえ一つの空の値であっても。
もし私たちが運転中に属性の追加や削除を行う必要があるなら、グローバルVue、Vue.set、Vue.deleteの方法を使うことができます。
Vue.set
Vue.setメソッドはオブジェクトの属性を設定するために使用します。これはVueが属性の追加を検出できない制限を解決できます。文法形式は以下の通りです。
Vue.set（target，key，value）
パラメータの説明: target：オブジェクトまたは配列 とすることができます。 key：文字列または数字 であることができます。 value：どんなタイプでもいいです。
var vm=new Vue({el:'菗ap'、data:{products:myproduct}
私達がmyproduct配列に一つ以上の属性を追加したいなら、Vueインスタンスの作成後に以下のコードを使うことができます。
上の図で見たように、製品に数量属性qtyを追加しましたが、get/set方法はid、name、price属性だけでは使えますが、qty属性では使えません。
私たちはVueオブジェクトを追加することによって応答を実現することができません。Vueは主に開始時にすべての属性を作成します。この機能を実現するなら、Vue.setで実現できます。
コンソールから出力された結果から、get/set方法がqty属性に利用できることがわかった。
Vue.delete
Vue.deleteは、動的に追加された属性文法フォーマットを削除するために使用されます。
Vue.delete（targt，key）
パラメータの説明: target：オブジェクトまたは配列 とすることができます。 key：文字列または数字 であることができます。
上の図の出力結果から、price属性は削除されました。idとname属性だけが残っています。price属性のget/set方法も削除されました。
以上はVue.js応答インタフェースの詳細な内容を詳しく説明しました。Vue.js応答インタフェースに関する資料は他の関連記事に注目してください。
たとえば、以下の例では、データの待ち受けを実現するために、watchはVueインスタンス以外に追加しなければならない。
実例ではボタンをクリックすることでカウンタが1を加算します。setTimeoutは10秒後の計算機の値を20で設定します。
<div id = "app">
<p style = "font-size:25px;"> : {{ counter }}</p>
<button @click = "counter++" style = "font-size:25px;"> </button>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#app',
data: {
counter: 1
}
});
vm.$watch('counter', function(nval, oval) {
alert(' :' + oval + ' ' + nval + '!');
});
setTimeout(
function(){
vm.counter += 20;
},10000
);
</script>Vueは、作成されたインスタンスに新しいルートレベル応答属性を動的に追加することができません。
Vueはオブジェクト属性の追加または削除を検出できません。一番いい方法は初期化例の前にルートレベル応答属性を宣言することです。たとえ一つの空の値であっても。
もし私たちが運転中に属性の追加や削除を行う必要があるなら、グローバルVue、Vue.set、Vue.deleteの方法を使うことができます。
Vue.set
Vue.setメソッドはオブジェクトの属性を設定するために使用します。これはVueが属性の追加を検出できない制限を解決できます。文法形式は以下の通りです。
Vue.set（target，key，value）
パラメータの説明:
<div id = "app">
<p style = "font-size:25px;"> : {{ products.id }}</p>
<button @click = "products.id++" style = "font-size:25px;"> </button>
</div>
<script type = "text/javascript">
var myproduct = {"id":1, name:"book", "price":"20.00"};
var vm = new Vue({
el: '#app',
data: {
products: myproduct
}
});
vm.products.qty = "1";
console.log(vm);
vm.$watch('products.id', function(nval, oval) {
alert(' :' + oval + ' ' + nval + '!');
});
</script>
var myproduct = {"id":1, name:"book", "price":"20.00"};var vm=new Vue({el:'菗ap'、data:{products:myproduct}
私達がmyproduct配列に一つ以上の属性を追加したいなら、Vueインスタンスの作成後に以下のコードを使うことができます。
vm.products.qty = "1";上の図で見たように、製品に数量属性qtyを追加しましたが、get/set方法はid、name、price属性だけでは使えますが、qty属性では使えません。
私たちはVueオブジェクトを追加することによって応答を実現することができません。Vueは主に開始時にすべての属性を作成します。この機能を実現するなら、Vue.setで実現できます。
<div id = "app">
<p style = "font-size:25px;"> : {{ products.id }}</p>
<button @click = "products.id++" style = "font-size:25px;"> </button>
</div>
<script type = "text/javascript">
var myproduct = {"id":1, name:"book", "price":"20.00"};
var vm = new Vue({
el: '#app',
data: {
products: myproduct
}
});
Vue.set(myproduct, 'qty', 1);
console.log(vm);
vm.$watch('products.id', function(nval, oval) {
alert(' :' + oval + ' ' + nval + '!');
});
</script>コンソールから出力された結果から、get/set方法がqty属性に利用できることがわかった。
Vue.delete
Vue.deleteは、動的に追加された属性文法フォーマットを削除するために使用されます。
Vue.delete（targt，key）
パラメータの説明:
<div id = "app">
<p style = "font-size:25px;"> : {{ products.id }}</p>
<button @click = "products.id++" style = "font-size:25px;"> </button>
</div>
<script type = "text/javascript">
var myproduct = {"id":1, name:"book", "price":"20.00"};
var vm = new Vue({
el: '#app',
data: {
products: myproduct
}
});
Vue.delete(myproduct, 'price');
console.log(vm);
vm.$watch('products.id', function(nval, oval) {
alert(' :' + oval + ' ' + nval + '!');
});
</script>上の図の出力結果から、price属性は削除されました。idとname属性だけが残っています。price属性のget/set方法も削除されました。
以上はVue.js応答インタフェースの詳細な内容を詳しく説明しました。Vue.js応答インタフェースに関する資料は他の関連記事に注目してください。