Vue.jsチュートリアル_1

2268 ワード

Vueコア:簡潔なテンプレート構文を使用してDOMのシステムにデータを宣言的にレンダリングできます.

Vueインスタンスでバインドするデータは、ブラウザのConsoleでappを変更する応答式である.Message=「hello world」で、Webページの内容がリアルタイムで変わります.

Vueテキスト補間:


    {{ message }}


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

命令は、Vueが提供する特殊な特性であることを示すために、プレフィックスv−を有する.レンダリングされたDOMには、特殊な応答動作が適用されます. ! 命令は、「この要素ノードのtitle特性とVueインスタンスのmessage属性を一致させる」ことを意味する.ブラウザのConsoleでidとして作成するVueインスタンスを変更する.Message=「hello hello」で、Webページの内容がリアルタイムで変わります.

条件v-if例えば


          

var app3 = new Vue({
 el: "#app-3",
 data:{
     seen: true
  }
})
app3.seen=false; //             。

サイクルv-for:使用例


      
      {{ todo.text }}
      

var app4 = new Vue({
  el: "#app-4",
  data:{
      todos:[
          {text: "learning JavaScript"},
          {text: "learning Vue"},
          {text: "do some project"}
      ]
  }
})

要素の追加または削除:1):app4.todos.push({text:"new project"});2): app4.todos.pop()

処理ユーザ入力:v-on命令イベントリスナー


    {{ message }}
    

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

を追加する.

フォーム入力とアプリケーション状態との間の双方向バインディングv-model


    {{ message }}
    

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

コンポーネントシステム:コンポーネント:コンポーネント:小型、多重化可能、コンポーネントを使用する前に定義および登録します.

//      todo-item     
Vue.component('todo-item', {
  template: '      '
})
var app = new Vue(...)

Vueデータの双方向バインドの原理と実現

ぼくのかんがえたrails new