vueの使用を開始します.js2.0の基本チュートリアル

Vue紹介
Vue.jsって何?
Vue.js(読み方/vjuː/, viewと同様)は、ユーザーインタフェースを構築する漸進的なフレームワークです.他の重量級フレームワークとは異なり,Vueはボトムアップ増分開発の設計を採用している.Vueのコアライブラリは、ビューレイヤのみに注目し、学習が容易で、他のライブラリや既存のプロジェクトとの統合が容易です.一方,Vueは,単一ファイルコンポーネントとVueエコシステムがサポートするライブラリ開発を用いた複雑な単一ページアプリケーションを駆動する能力が完全にある.
Vue.jsの目標は,応答のデータバインドと組合せのビューコンポーネントを可能な限り簡単なAPIにより実現することである.
もしあなたが経験のある先端開発者であれば、Vueを知りたいです.jsと他のライブラリ/フレームワークの違いは、他のフレームワークとの比較を表示します.
初心者ならこちらをご覧ください.0初心者向け–環境構築からパブリケーションへ
スタート
試してみるjsの最も簡単な方法はJSPedble Hello Worldの例を使用することです.ブラウザの新しいラベルページで開き、基本的な例をいくつか見てください.パッケージマネージャでダウンロード/インストールが好きな場合は、インストールチュートリアルを表示します.
宣言レンダリング
Vue.jsの核心は、簡潔なテンプレート構文を使用してDOMにデータをレンダリングすることを宣言できるシステムです.

 
 {{ message }}
 
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

私たちはすでに私たちの最初のVueアプリケーションを生成しました!文字列テンプレートを1つだけレンダリングするのと似ているように見えますが、Vue.jsは背後で多くの仕事をした.データとDOMがバインドされ、すべての要素が応答式になっています.どうやって知った?ブラウザのコンソールを開き、app.messageを変更すると、上記の例が更新されます.
挿入されたテキストの内容をバインドするだけでなく、DOM要素のプロパティをバインドする方法もあります.

  
    Hover your mouse over me for a few seconds to see my dynamically bound title!
  

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'You loaded this page on ' + new Date()
  }
})

ここで私たちは新しいものに出会った.v-bindのプロパティをコマンドと呼びます.命令は、Vueであることを示す接頭辞v-を有する.jsが提供する特殊な属性.レンダリングされたDOMに特殊な応答動作が適用されると推測したかもしれません.この命令の簡単な意味は、この要素ノードのtitle属性とVueインスタンスのmessage属性とを結合することである.
ブラウザのコンソールを再度開いてapp2.message = 'some new message'と入力すると、titleのプロパティをバインドしたHTMLが更新されているのが再び見えます.
条件とループ
要素の表示を切り替える制御も簡単です.

  
Now you see me

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

コンソールにapp3.seen = falseを設定し続けると、「Now you see me」が消えていることがわかります.
この例では,DOMテキストをデータにバインドできるだけでなく,DOM構造をデータにバインドできることを示した.そして、Vue.jsはまた、Vueが要素を挿入/削除するときに遷移効果を自動的に適用できる強力な遷移効果システムを提供します.
他にもいくつかの命令があり、それぞれに特殊な機能があります.例えば、v-for命令は、リストをレンダリングするためにデータをデータにバインドすることができる.

  

    

      {{ todo.text }}
    
  

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
})

コンソールにapp4.todos.push({ text: 'New item' })と入力します.リストに新しい内容が1つ増えていることがわかります.
ユーザー入力の処理
ユーザーとあなたのアプリケーションを相互作用させるために、Vueインスタンスで定義されたメソッドを呼び出すために、v-on命令でリスニングイベントをバインドできます.

  
{{ message }}
  Reverse Message

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

reverseMessageメソッドでは、DOMに接触せずにアプリケーションの状態を更新しました.すべてのDOM操作はVueで処理され、あなたが書いたコードは基本論理に注目する必要があります.
Vueはまた、フォーム入力およびアプリケーション状態における双方向データバインドを非常に容易にするためのv-model命令を提供する.

  
{{ message }}
  

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

コンポーネントで構築(適用)
コンポーネントシステムはVueである.jsのもう一つの重要な概念は、独立して多重化可能な小さなコンポーネントで大規模なアプリケーションを構築できる抽象を提供するためです.この点を考慮すると、ほとんどのアプリケーションのインタフェースは、コンポーネントツリーとして抽象化できます.
Vueでは、コンポーネントは実質的に事前定義されたオプションを持つVueインスタンスです.

// Define a new component called todo-item
Vue.component('todo-item', {
  template: '
This is a todo
'
})

別のコンポーネントテンプレートに書き込むことができます.

しかし、todoごとに同じテキストがレンダリングされ、クールではないように見えます.親ドメインからサブコンポーネントにデータを転送する必要があります.コンポーネントの定義を変更して、propフィールドを受け入れることができます.

 
   
 
    
Vue.component('todo-item', {
  // The todo-item component now accepts a
  // "prop", which is like a custom attribute.
  // This prop is called todo.
  props: ['todo'],
  template: '
{{ todo.text }}
'
})
  
  v-bind命令を使用して、todoを各重複コンポーネントに渡すことができます.

  

    
    
  

Vue.component('todo-item', {
  props: ['todo'],
  template: '
{{ todo.text }}
'
})
var app7 = new Vue({
  el: '#app-7',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
})
  
これは仮定の例にすぎないが,応用をpropsインタフェースを介して親要素と良好なデカップリングを実現する2つのより小さなユニットに分割した.親アプリケーションに影響を及ぼさずに、todoコンポーネントの複雑なテンプレートと論理をさらに改善することができます.
1つの大規模なアプリケーションでは,開発プロセスを制御できるように,アプリケーション全体を1つのコンポーネントに分割する必要がある.後述のチュートリアルでは、コンポーネントについて詳しく説明しますが、コンポーネントを使用したアプリケーションテンプレートがどのようなものかを見てみましょう.

  
  
    
    
  
  
カスタム要素との関係
Vueに気づいたかもしれないjsコンポーネントは、Webコンポーネント仕様の一部であるカスタム要素によく似ています.実はjsのコンポーネント構文はこの仕様を参照している.例えば、Vueコンポーネントは、Slot APIおよびisの特性を実現する.しかし、いくつかの重要な違いがあります.
 Webコンポーネント仕様はまだ完了しておらず、ブラウザ実装はありません.それに比べてVue.jsコンポーネントはパッチを必要とせず、サポートされているすべてのブラウザ(IE 9以降)で一貫性があります.必要に応じてVue.jsコンポーネントは、オリジナルのカスタム要素にも配置できます.
  
 Vue.jsコンポーネントは、コンポーネント間のデータストリーム、カスタムイベントシステム、動的で特効のあるコンポーネント置換など、オリジナルのカスタム要素にはない重要な機能を提供します.