Get started

昨天說到宣告事渲染跟條件迴圈，今天要來繼續把剩下兩個說完

1. Declarative Rendering 宣告式渲染

2. Conditionals and Loops 條件和迴圈

3. Handling User Input 處理使用者輸入

4. Composing with Components 元件的組成

Handling User Input 處理使用者輸入

從下面的 code 可以看得出來，可以綁定 onclick 事件，

當按下這個 button 的時候， 印出來的 Hello Vue.js! 字會反方向重新排列。

HTML

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>

JavaScript

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

Composing with Components 元件的組成

自定義元件

Vue 也提供了自定義元件的方法。

JS

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

可以在 HTML 內呼叫這個方法。

HTML

<ol>
  <!-- Create an instance of the todo-item component -->
  <todo-item></todo-item>
</ol>

接著可以利用 props 的方法來自定義屬性。

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

下面的 code ，我可以看到，我們可以利用 v-for 的迴圈方法來跑 groceryList 得 data，然後用 v-bind 動態傳入 todo 這個自定義屬性裡面。

<div id="app-7">
  <ol>
    <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
  </ol>
</div>
Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { text: 'Vegetables' },
      { text: 'Cheese' },
      { text: 'Whatever else humans are supposed to eat' }
    ]
  }
})

完賽心得，這件事不知道需不需要特別說，

最後三天真的很煎熬，因為不知道該寫些什麼

這 30 天，讓我知道自己不足的地方，

在學習中學習，這件事情讓我覺得很有趣。

還有確認了自己很喜歡學習到新的東西的感覺，

在寫程式的路上，會覺得很挫折，有時候會很煩躁，

但是也會很開心，也覺得很有趣。