初学vuejs——学習ノート1

仕事の余暇に勉強を忘れないで、勉強が遅くなることを恐れないで、堅持しないことを恐れます.がんばって!
1、vue.js-双方向バインド(v-model:Pとinputコンテンツの同期更新)
html:
id="app">    {{message}}    v-model="message">
js:

new Vue({
  el:'#app',
  data:{
    message:'hello vue.js!'
  }
});

el:インスタンスにマウント要素を提供します.値はCSSセレクタ、または実際のHTML要素、またはHTML要素を返す関数です.
2、vue.js-レンダリングリスト(v-for:ループループフィルタ)
2.1、v-for命令は一つの配列に基づいて一つのリストをレンダリングする
html:

id="app2">
   

      
v-for="todo in todos">
         {{ todo.text }}
      
   

js:

new Vue({
  el:'#app2',
  data:{
    todos:[
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue.js' },
      { text: 'Build Something Awesome' }
    ]
  }
});

v-forブロック内では、親コンポーネントの役割ドメイン内のプロパティに完全にアクセスできます.また、現在の配列要素のインデックスである特殊な変数$indexもあります.
html:

id="example">
   
v-for="item in items">
      {{ parentMessage }} - {{ $index }} - {{ item.message }}
   

js:

var example = new Vue({
  el: '#example',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
});

結果:

Parent - 0 - Foo

Parent - 1 - Bar

1.0.17からof区切り文字を使用できます.JavaScript遍歴構文に近いです.

v-for="item of items">

2.2、v-forを使用してオブジェクトを巡回することもできます.$indexに加えて、役割ドメイン内で別の特殊な変数$keyにアクセスすることもできます.
html:

id="repeat-object" class="demo">
   
v-for="value in object">
      {{ $key }} : {{ value }}
   

js:

new Vue({
  el: '#repeat-object',
  data: {
    object: {
      FirstName: 'John',
      LastName: 'Doe',
      Age: 30
    }
  }
});

結果:

FirstName : John

LastName : Doe

Age : 30

3、vue.js——ユーザー入力の処理
DOMイベントはv-on命令で傍受できます.クリックイベントプロセッサをメソッドreverseMessageにバインドしました.
split()メソッドは、1つの文字列を文字列配列に分割するために使用されます.reverse()メソッドは、配列内の要素の順序を逆転させるために使用されます.join()メソッドは、配列内のすべての要素を文字列に入れるために使用されます.
html:

id="app3">
   {{ message }}
   v-on:click="reverseMessage">Reverse Message

js:

new Vue({
  el: '#app3',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
});

4.vue.js——小例
html:

id="app">
   v-model="newTodo" v-on:keyup.enter="addTodo">
   

      
v-for="todo in todos">
         {{ todo.text }}
         v-on:click="removeTodo($index)">X
      
   

js:

new Vue({
  el: '#app',
  data: {
    newTodo: '',
    todos: [
      { text: 'Add some todos' }
    ]
  },
  methods: {
    addTodo: function () {
      var text = this.newTodo.trim()
      if (text) {
        this.todos.push({ text: text })
        this.newTodo = ''
      }
    },
    removeTodo: function (index) {
      this.todos.splice(index, 1)
    }
  }
});