Vue官網範例練習-新手村上路

Vue官網範例練習-新手村上路

本篇透過官網實例了解Vue的基礎操作及概念,以此做個練習紀錄。

01 - Hello Vue

第一課資料綁定插入 string，利用 Mustache 的語法：

  {{message}}


  

{{ message }}
{{FirstName}}
{{LastName}}
{{FirstName+LastName}}

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    FirstName: 'Eddie',
    LastName: 'Liu'
}
})

結果:

附上程式碼範例

02 - Bind Message

Vue 可透過 v-bind 綁定 HTML 的屬性。

  

  
   把滑鼠放在這段文字上!
  

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '現在時間' + new Date().toLocaleString()
  }
})

結果:

附上程式碼範例

03 - Conditional Rendering

透過 v-if 這個指令(directive)決定是否顯示p tag。
單純這樣有點無趣，先加入後面會介紹的v-on來綁定button，透過點擊可以改變seen的狀態。

  

你有看到我嗎?

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

結果:

未點button，此時seen預設為true，v-if成立，文字顯示。

點擊button後，因為seen變為false，v-if並未成立，綁定v-if的文字則消失了。

附上程式碼範例

04 - List Rendering

透過 v-for 這個指令(directive)顯示 todos list。

  


      {{ todo.text }}
    


    {{index +1}}.{{todo.text}}
  

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [{
        text: '每天練習Vue'
      },
      {
        text: '每天練習Js'
      },
      {
        text: '培養美感'
      }
    ]
  }
})

結果:

附上程式碼範例

05 - Event Handling

透過 v-on 綁定 click 事件，點擊button時執行reverseMessage，將message反轉。

  {{ message }}


  

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: '文字會反轉哦!'
  },
  methods: {
    reverseMessage: function() {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

結果:

附上程式碼範例

06 - Form Input Bindings

透過 v-model 可雙向綁定 input 和 vue instance 的 message。

  {{ message }}


  

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: '請修改文字!'
  }
})

結果:

附上程式碼範例

07 - Component

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

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [{
        id: 0,
        text: 'Vegetables'
      },
      {
        id: 1,
        text: 'Cheese'
      },
      {
        id: 2,
        text: 'Whatever else humans are supposed to eat'
      }
    ]
  }
})

結果:

附上程式碼範例