vue公式サイト学習ノート(一)紹介

vue.jsはユーザインタフェースを構築する漸進的なフレームワークであり,ボトムアップ増分開発の設計を採用している.Vueのコアライブラリはレイヤーのみに注目します.
宣言レンダリング
簡潔なテンプレート構文を使用して、DOMシステムにデータを宣言的にレンダリングします.

    {
    {message}}


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

効果を表示

Hello Vue!

ツールバーの
v-bind命令バインド属性
たとえば、v-bind:classは、指定したスタイルを判断するために使用できます.
           v-bind:title
条件とループ
v-if制御切替要素の表示

    
Now you see me


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

効果を表示:

Now you see me

v-forコマンドは、データをデータにバインドしてリストをレンダリングできます.

    

        

            {
    { todo.text }}
        
    


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

効果を表示:

1.Learn JavaScript
2.Learn Vue
3.Build something awesome

app4.todos.push({ text: 'New item' })
リストに新しい内容を追加できます
ユーザー入力の処理
v-on命令バインディングリスニングイベントVueインスタンスで定義されたメソッドを呼び出すには:

    
{
    { 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('')
        }
    }
})

v-model双方向データバインド★★★★

    
{
    { message }}
    


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

Inputの値を変更すると、p要素の値も変更されます.
コンポーネントで構築★★★★★
グローバルコンポーネント:

    


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

以上、todoごとに同じテキストがレンダリングされます.親ドメインからサブコンポーネントにデータを転送する必要があります.propフィールドを使用して、v-bindコマンドを使用してtodoを各重複コンポーネントに転送できます.

  

    
  


Vue.component('todo-item', {
  props: ['todo'],
  template: '
{
    { todo.text }}
'
})
var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { text: 'Vegetables' },
      { text: 'Cheese' },
      { text: 'Whatever else humans are supposed to eat' }
    ]
  }
})

効果を表示:

Vegetables
Cheese
Whatever else humans are supposed to eat