Update vue.md

This commit is contained in:
bourhaouta 2019-12-26 15:44:39 +01:00
parent b78de6b210
commit 2211c7f3ec
2 changed files with 445 additions and 82 deletions

410
vue.md
View File

@ -2,116 +2,362 @@
title: Vue.js
category: JavaScript
layout: 2017/sheet
updated: 2019-11-22
# updated: 2019-12-26
weight: -10
intro: |
[Vue.js](https://vuejs.org/) is an open-source Modelviewviewmodel JavaScript framework for building user interfaces and single-page applications.
---
{% raw %}
{%raw%}
### Lists
Expressions
----------
{: .-three-column}
### Expressions
```html
<li v-for="todo in todos">
{{ todo.text }}
{{ $index }}
<div id="app">
<p>I have a {{ product }}</p>
<p>{{ product + 's' }}</p>
<p>{{ isWorking ? 'YES' : 'NO' }}</p>
<p>{{ product.getSalePrice() }}</p>
</div>
```
See: [Delimiters](https://vuejs.org/v2/api/#delimiters)
### Binding
```html
<a v-bind:href="url">...</a>
```
#### Shorthand syntax
```html
<a :href="url">...</a>
```
{: data-line="1"}
#### True or false will add or remove attribute
```html
<button :disabled="isButtonDisabled">...
```
#### If isActive is truthy, the class active will appear
```html
<div :class="{ active: isActive }">...
```
#### Style color set to value of activeColor
```html
<div :style="{ color: activeColor }">
```
See: [v-bind](https://vuejs.org/v2/api/#v-bind)
### Directives
#### Element inserted/removed based on truthiness
```html
<p v-if="inStock">{{ product }}</p>
```
```html
<p v-else-if="onSale">...</p>
<p v-else>...</p>
```
#### Toggles the display: none CSS property
```html
<p v-show="showProductDetails">...</p>
```
#### Two-way data binding
```html
<input v-model="firstName" >
```
| Method | Description |
| --- | --- |
| `v-model.lazy="..."` | Syncs input after change event |
| `v-model.number="..."` | Always returns a number |
| `v-model.trim="..."` | Strips whitespace |
See: [Directives](https://vuejs.org/v2/api/#Directives)
### Actions/Events
#### Calls addToCart method on component
```html
<button v-on:click="addToCart">...
```
#### Shorthand syntax
```html
<button @click="addToCart">...
```
{: data-line="1"}
#### Arguments can be passed
```html
<button @click="addToCart(product)">...
}
```
#### To prevent default behavior (e.g. page reload)
```html
<form @submit.prevent="addProduct">...
```
#### Only trigger once
```html
<img @mouseover.once="showImage">...
```
| Method | Description |
| --- | --- |
| `.stop` | Stop all event propagation |
| `.self ` | Only trigger if event.target is element itself |
#### Keyboard entry example
```html
<input @keyup.enter="submit">
```
#### Call onCopy when control-c is pressed
```html
<input @keyup.ctrl.c="onCopy">
```
See: [Events](https://vuejs.org/v2/guide/events.html)
### List rendering
#### The `:key` is always recommended
```html
<li v-for="item in items"
:key="item.id">
{{ item }}
</li>
```
{: data-line="2"}
### Events
#### To access the position in the array
```html
<button v-on:click='submit'>Go</button>
<li v-for="(item, index) in items">...
```
### Components
```js
new Vue({
components: { app: App }
})
#### To iterate through objects
```html
<li v-for="(value, key) in object">...
```
## API
```js
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>
#### Using `v-for` with a component
```html
<cart-product v-for="item in products"
:product="item"
:key="item.id">
```
```js
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)
See: [List Rendering](https://vuejs.org/v2/guide/list.html)
// lifecycle
created () {},
beforeCompile () {},
compiled () {},
ready () {}, // $el is inserted for the first time
attached () {},
detached () {},
beforeDestroy () {},
destroyed () {},
// options
directives: {},
elementDirectives: {},
filters: {},
components: {},
transitions: {},
partials: {}
})
```
Component
--------
## Vue templates
Via [vueify](https://www.npmjs.com/package/vueify)
### Component anatomy
```js
// app.vue
<template>
<h1 class="red">{{msg}}</h1>
</template>
<script>
module.exports = {
data () {
return {
msg: 'Hello world!'
Vue.component('my-component', {
components: {
// Components that can be used in the template
ProductComponent,
ReviewComponent
},
props: {
// The parameters the component accepts
message: String,
product: Object,
email: {
type: String,
required: true,
default: "none"
validator: function (value) {
// Should return true if value is valid
}
}
}
</script>
},
data: function() {
// `data` must be a function
return {
firstName: 'Vue',
lastName: 'Mastery'
}
},
computed: {
// Return cached values until dependencies change
fullName: function () {
return this.firstName + ' ' + this.lastName
}
},
watch: {
// Called when firstName changes value
firstName: function (value, oldValue) { ... }
},
methods: { ... },
template: '<span>{{ message }}</span>',
// Can also use backticks in `template` for multi-line
})
```
{: data-line="3, 8, 16, 21, 28, 34, 39"}
Also
See: [Components Basics](https://vuejs.org/v2/guide/components.html)
### Lifecycle hooks
| Method | Description |
| --- | --- |
| `beforeCreate` | After the instance has been initialized [#](https://vuejs.org/v2/api/#beforeCreate) |
| `created` | After the instance is created [#](https://vuejs.org/v2/api/#created) |
| `beforeMount` | Before the first render [#](https://vuejs.org/v2/api/#beforeMount) |
| `mounted` | After the instance has been mounted [#](https://vuejs.org/v2/api/#mounted) |
| `beforeUpdate` | When data changes, before the DOM is patched [#](https://vuejs.org/v2/api/#beforeUpdate) |
| `updated` | After a data change [#](https://vuejs.org/v2/api/#updated) |
| `beforeDestroy` | Before the instance is destroyed [#](https://vuejs.org/v2/api/#beforeDestroy) |
| `destroyed` | After a Vue instance has been destroyed [#](https://vuejs.org/v2/api/#destroyed) |
See: [Lifecycle Hooks](https://vuejs.org/v2/api/#Options-Lifecycle-Hooks)
### Custom events
#### Set listener on component, within its parent
```html
<template lang='jade'>
h1(class='red') {{msg}}
</template>
<button-counter v-on:incrementBy="incWithVal">
```
{% endraw %}
#### Inside parent component
```js
methods: {
incWithVal: function (toAdd) { ... }
}
```
#### Inside button-counter template
```js
this.$emit(
'incrementBy', // Custom event name
5 // Data sent up to parent
)
```
Use props to pass data into child components,
custom events to pass data to parent elements.
See: [Custom Events](https://vuejs.org/v2/guide/components-custom-events.html)
Single file components
--------
### Single file
```html
<template>
<p>{{ greeting }} World!</p>
</template>
<script>
module.exports = {
data: function () {
return {
greeting: 'Hello'
}
}
}
</script>
<style scoped>
p {
font-size: 2em;
text-align: center;
}
</style>
```
See: [Single File Components](https://vuejs.org/v2/guide/single-file-components.html)
### Separation
```html
<template>
<div>This will be pre-compiled</div>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>
```
See: [What About Separation of Concerns?](https://vuejs.org/v2/guide/single-file-components.html#What-About-Separation-of-Concerns)
Slots
--------
### Using a single slot
#### Component template
```html
<div>
<h2>I'm a title</h2>
<slot>
Only displayed if no slot content
</slot>
</div>
```
{: data-line="3,4,5"}
#### Use of component with data for slot
```html
<my-component>
<p>This will go in the slot</p>
</my-component>
```
{: data-line="2"}
See: [Slots](https://vuejs.org/v2/guide/components-slots.html)
### Multiple slots
#### Component template
```html
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot>Default content</slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
```
{: data-line="3,6,9"}
#### Use of component with data for slots
```html
<app-layout>
<h1 slot="header">Page title</h1>
<p>the main content.</p>
<p slot="footer">Contact info</p>
</app-layout>
```
{: data-line="2,3,4"}
See: [Slots](https://vuejs.org/v2/guide/components-slots.html)
Also see
--------
* [Vue CLI](https://cli.vuejs.org/) _(cli.vuejs.org)_
* [Vue Router](https://router.vuejs.org/) _(router.vuejs.org)_
* [Vue DevTools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en) _(chrome.google.com)_
* [Nuxt.js](https://nuxtjs.org/) _(nuxtjs.org)_
* [Vue.js v1.0.28 cheatsheet](vue@1.0.28/) _Legacy version_
{%endraw%}

117
vue@1.0.28.md Normal file
View File

@ -0,0 +1,117 @@
---
title: Vue.js v1.0.28
category: JavaScript
layout: 2017/sheet
deprecated: true
weight: -10
intro: |
**Deprecated:** this guide targets an old version of Vuej.js (v1.0.28). See the [updated Vue.js cheatsheet](vue) for new versions.
---
{% raw %}
### Lists
```html
<li v-for="todo in todos">
{{ todo.text }}
{{ $index }}
</li>
```
### Events
```html
<button v-on:click='submit'>Go</button>
```
### Components
```js
new Vue({
components: { app: App }
})
```
## API
```js
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>
```
```js
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: {}
})
```
## Vue templates
Via [vueify](https://www.npmjs.com/package/vueify)
```js
// app.vue
<template>
<h1 class="red">{{msg}}</h1>
</template>
<script>
module.exports = {
data () {
return {
msg: 'Hello world!'
}
}
}
</script>
```
Also
```html
<template lang='jade'>
h1(class='red') {{msg}}
</template>
```
{% endraw %}