3
Vue.js v1.0.28 cheatsheet
source link: https://devhints.io/[email protected]
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Deprecated: this guide targets an old version of Vuej.js (v1.0.28). See the updated Vue.js cheatsheet for new versions.
Lists
<li v-for="todo in todos">
{{ todo.text }}
{{ $index }}
</li>
Events
<button v-on:click='submit'>Go</button>
Components
new Vue({
components: { app: App }
})
#API
Vue.extend({ ... }) // creating components
Vue.nextTick(() => {...})
Vue.set(object, key, val) // reactive
Vue.delete(object, key)
Vue.directive('my-dir', { bind, update, unbind })
// <div v-my-dir='...'></div>
Vue.elementDirective('my-dir', { bind, update, unbind })
// <my-dir>...</my-dir>
Vue.component('my-component', Vue.extend({ .. }))
Vue.partial('my-partial', '<div>hi {{msg}}</div>')
// <partial name='my-partial'></partial>
new Vue({
data: { ... }
props: ['size'],
props: { size: Number },
computed: { fullname() { return this.name + ' ' + this.lastName } },
methods: { go() { ... } },
watch: { a (val, oldVal) { ... } },
el: '#foo',
template: '...',
replace: true, // replace element (default true)
// lifecycle
created () {},
beforeCompile () {},
compiled () {},
ready () {}, // $el is inserted for the first time
attached () {},
detached () {},
beforeDestroy () {},
destroyed () {},
// options
directives: {},
elementDirectives: {},
filters: {},
components: {},
transitions: {},
partials: {}
})
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK