Please enable JavaScript.
Coggle requires JavaScript to display documents.
VUE.js (Syntax ({{variable}} : only allowed as inner data, not as…
VUE.js
Syntax
{{variable}} : only allowed as inner data, not as attribute
one-way binding for attribute, we can write a directive, v-bind:attrib_name=variable
or shorthand is :attribute_name=variable
To handle events, v-on:event_name="method", and when we create instance of Vue() we create variable methods: {method_name: function(event){} }
we can call event.preventDefault(); to stop default behaviour
shorthand for this is v-on:click.prevent="method_name"v-on:event_name="method_name" can be shortened to
**@event_name="method_name" so @ ==> v-on:**
two-way data binding instead of v-bind we use v-model directive for two-way binding
two way binding, we can get the data if it is modified :check:
-
IF v-if is a directive to select and then render the content
witch expect Boolean and v-else if negation condition; element is not added in the dom
v-show is similar directive which expect Boolean input but doesn't have v-else to accompany; as well as element is hidden unlike v-if
v-show can be helpful if obj is big and need resources which can save time
-
**FOR, v-for="a in asteroids"
v-cloak, user created attribute where we can set
style to None. used to hide the element until not processed
by Vue
Intro
-
-
We create a div with an id field (typically named app)
and in javascript tag we create an instance of VUE(), and
pass el :'#app', data: {}
data contains all variables
MISC
-
Vue.js devtools
-
after installing in the developer tools
Vue tab appreas where we can see vue elements which is much easier way to develop
-
-
Hooks
Vue instance have life cycle and there are hooks
for each stage, which can be triggered by defining
pre-defined function name like "created : function(){}"
defined while creating Vue() object and at the same level at "data", "methods"