Learning Note on Vue.js


(To be edited)

Official Documents: Vue.js (2.0)

CDN:https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.js


Event Listener :

in Html, put v-on directive to listen to DOM events.

in javascript, use the method new to create a Vue object, then use the key word “el” to assign the field id/name to be listened.

new Vue({
el: '#list',
data: {
items: [
{ text: 'one', done: true },
{ text: 'two', done: false }
]
},
methods: {
toggle: function (item) {
item.done = !item.done
}
}
})

Syntax:

  • to acquire a component in an array : use v-for = “variable in targeted list
  • HTML/CSS binding : v-bind: style=”‘background-color: ‘+color”
    ( here, color is an attribute)
  • Logic Expression: v-if
  • Create events: v-on
  • v-component : Vue.component(tagName, options)
Show your support

Clapping shows how much you appreciated Yuning Su’s story.