2017-03-04 10 views
0

私はVue.jsガイドを通過しており、this段落を訪れました。それは言う:私たちは単にDOMDOMに触れることなくアプリの状態を更新する - Vue.js

に触れることなく我々のアプリの状態を更新する方法で

注意基本的方法は、単純にボタンのクリックで文字列を反転させます。私が理解できないことは、DOMに触れることなくUpdating the state of appという概念です。ここで州の意味は何ですか?誰かがこれを説明することができますか?

答えて

1

Vue.jsの基礎の1つは、単純に実装された双方向データバインディングです。これは、状態またはデータ値がVueオブジェクト/インスタンス内で変更されたときに、その両方を手動で更新することなくDOM内で同期および変更され、逆も同様であることを意味します。純粋Javascript状況などで

:この中

function changeData() { 
 
    document.getElementById('data').innerHTML = "Second"; 
 
}
<div> 
 
    <span id="data">First</span> 
 
</div> 
 

 
<button onclick="changeData()">Change Value</button>

は、我々は直接Vue's二に、しかし、span要素のテキスト値を変更するためにDOMを操作しています両方向のデータバインディングでは、インスタンスの状態/データのみを更新して更新する必要があります。

1

私が実際に単純化すれば、アプリケーションにはのというデータがあります。これには、たとえば、あなたの逆の文字列が含まれます。

または、例えば:

State: { isSwitchedOn: false } 
UpdateStateFunc: (state, value) => state.isSwitchedOn = value; 

そこで、我々はUpdateStateFuncを使用してisSwitchedOnを更新することができますが、それは我々がDOMへのデータ(ユーザーに見える何。)ことをプッシュするという意味ではありません。ユーザーに見えるようにするには、おそらく別の機能でしょう。

関連する問題