DIRECTIVES | METHODS | EXAMPLES | EVENTS | TWO WAY BINDING | COMPUTED PROPERTIES | npm | Zurb foundation | Shapes & Colors | Publishing | Vue Press | Vue Press Tutorial | CH 8
https://vuejs.org/v2/examples/
https://vuejs.org/v2/examples/commits.htmlhttps://vuejs.org/v2/examples/svg.html https://vuejs.org/v2/examples/todomvc.html https://vuejs.org/v2/examples/hackernews.html)
https://012.vuejs.org/guide/directives.html
https://012.vuejs.org/api/directives.html
A directive is a special token in the markup, the prefix v-, that tells the library to do something to a DOM element.
<element prefix-directiveId="[argument:] expression [| filters...]"> </element>
<div v-text="message"></div>The prefix is v which is the default.
The directive ID is text
he expression is message.
This directive instructs Vue.js to update the div’s textContent whenever the message property on the Vue instance changes.
<div v-text="'hello ' + user.firstName + ' ' + user.lastName"></div>
These directives can bind themselves to a property on the Vue instance, or to an expression which is evaluated in the context of the instance. When the value of the underlying property or expression changes, the update() function of these directives will be called asynchronously on next tick.
- v-text
- v-html
- show
- class
- v-attr
- v-style
- v-on
- v-model
- v-repeat
Literal directives treat their attribute value as a plain string; they do not attempt to bind themselves to anything. All they do is executing the bind() function once. Literal directives can also accept mustache expressions inside their value - please refer to Dynamic Literal for more details.
- v-transition
- v-ref Mustache expressions in other literal directives, e.g. are evaluated only once. After the directive has been compiled, it will no longer react to value changes.
- v-el Mustache expressions in other literal directives, e.g. are evaluated only once. After the directive has been compiled, it will no longer react to value changes.
Empty directives do not require and will ignore their attribute value.
-
v-pre
-
v-cloak
-
v-once This directive ensures that an element is only rendered once, and when Vue.js re-renders the page, the element and all of its children will be considered as static content and thereby skipped.
<h1 v-once>{{ title }}</h1> -
v-if
-
v-show
-
v-else
-
v-for
-
v-bind
-
v-model
-
v-on
-
v-transition You can use the mustache syntax to make a literal directive reactive:is the only directive that has this feature.
<div v-show="showMsg" v-transition="{{dynamicTransitionId}}"></div>
https://www.youtube.com/watch?v=2MAoq2-2nnE
- https://codeburst.io/create-a-quiz-with-vue-js-ed1e8e0e8294
- https://vuejs.org/v2/examples/
- https://vuejs.org/v2/examples/commits.htmlhttps://vuejs.org/v2/examples/svg.html
- https://vuejs.org/v2/examples/todomvc.html
- https://vuejs.org/v2/examples/hackernews.html
HTML DOM events allow JavaScript to register different event handlers on elements in an HTML document.
Events are normally used in combination with functions, and the function will not be executed before the event occurs (such as when a user clicks a button).
When an event occur in HTML, the event belongs to a certain event object, like a mouse click event belongs to the MouseEvent object.
The default event object we can listen to on the click event
it holds the coordinates of where the click event happened
List: https://www.w3schools.com/jsref/dom_obj_event.asp
AnimationEvent - For CSS animations
ClipboardEvent - For modification of the clipboard
DragEvent - For drag and drop interaction
FocusEvent - For focus-related events
HashChangeEvent - For changes in the anchor part of the URL
InputEvent - For user input
KeyboardEvent - For keyboard interaction
MouseEvent - For mouse interaction
PageTransitionEvent - For navigating to, and away from, web pages
PopStateEvent - For changes in the history entry
ProgressEvent - For the progress of loading external resources
StorageEvent - For changes in the window's storage area.
TouchEvent - For touch interaction
TransitionEvent - For CSS transitions
UiEvent - For user interface interaction
WheelEvent - For mousewheel interaction
Event Modifiers help keep the methods purely about data logic rather than having to deal with DOM event details or often needing to call event.preventDefault() or event.stopPropagation()
+ .stop
+ .prevent
+ .capture
+ .self
+ .once
<!-- the click event's propagation will be stopped -->
<a v-on:click.stop="doThis"></a>
<!-- the submit event will no longer reload the page -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- modifiers can be chained -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- just the modifier -->
<form v-on:submit.prevent></form>
<!-- use capture mode when adding the event listener -->
<!-- i.e. an event targeting an inner element is handled here before being handled by that element -->
<div v-on:click.capture="doThis">...</div>
<!-- only trigger handler if event.target is the element itself -->
<!-- i.e. not from a child element -->
<div v-on:click.self="doThat">...</div>Order matters when using modifiers
because the relevant code is generated in the same order.
Therefore using v-on:click.prevent.self will prevent all clicks
while v-on:click.self.prevent will only prevent clicks on the element itself.
Vue has key modifiers for v-on
When listening for key events, we can check for common key codes.
<!-- only call `vm.submit()` when the `keyCode` is 13 -->
<input v-on:keyup.13="submit">Remembering all the keyCodes is a hassle, so Vue provides aliases for the most commonly used keys:
<!-- same as above -->
<input v-on:keyup.enter="submit">
<!-- also works for shorthand -->
<input @keyup.enter="submit">
Here’s the full list of key modifier aliases:
.enter
.tab
.delete (captures both “Delete” and “Backspace” keys)
.esc
.space
.up
.down
.left
.rightYou can also define custom key modifier aliases via the global config.keyCodes object:
// enable `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112v-model sets up 2-way binding
v-on && v-bind === v-model
Computed properties can be used to do quick calculations of properties that are displayed in the view. These calculations will be cached and will only update when needed.
There are multiple ways in Vue to set values for the view. This includes directly binding data value to the view, using simple expressions or using filters to do simple transformations on the content. In addition to this, we can use computed properties to calculate display value based on a value or a set of values in the data model.
dependent properties
use it like a property
everything stored in computed can be used just like you use a property in the data object
is always a String
only updates when it observes changes in the data
- https://www.google.com/search?client=ubuntu&channel=fs&q=vue+computed+property&ie=utf-8&oe=utf-8
- https://vuejs.org/v2/guide/computed.html
- https://v1.vuejs.org/guide/computed.html
- https://stackoverflow.com/questions/43277705/vuejs-difference-between-computed-property-and-watcher?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa
- https://alligator.io/vuejs/computed-properties/
new Vue({
el: '#app',
data: {
counter: 0;
},
computed: {
output: function(){
return this.counter > 5 ? 'Greater than 5' : 'Smaller than 5';
}
},
methods: {
}
});new Vue({
el: '#app',
data: {
counter: 0;
},
computed: {
output: function(){
return this.counter > 5 ? 'Greater than 5' : 'Smaller than 5';
}
},
watch: {
},
methods: {
}
});v-on:click === @click
v-bind:href === :href
https://developer.mozilla.org/en-US/docs/Web/Events/keydown
So you can either write 'background-color' on a string or backgroundColor
keydown - The keydown event is fired when a key is pressed down. Unlike the keypress event, the keydown event is fired for keys that produce a character value and for keys that do not produce a character value.
keyup keypress input
https://developer.mozilla.org/en-US/docs/Web/Events/click
updateCoordinates: function(event) {
this.x = event.clientX;
this.y = event.clientY;
}, updateCoordinates: function(whatever) {
this.x = whatever.screenX;
this.y = whatever.screenY;
},Assumes event obj when NO ()
when () assumes we're going to pass argument and doesm't pass the event
JSFiddle Links:
Further Links: