vuejs Flashcards
vue: a directive is an
expression you write in the template starting with v-
vue: To interpolate a variable just once (so it wont be reactive)
add v-once tag attribute and put {{varName}} into middle of tag
vue: The directive for showing or hiding an element based on the boolean value of a variable
v-if=”boolVar”
Note:
v-else for opposite
vue: To render text or html using a directive
v-text or v-html
vue: To make a for loop directive
v-for=”item in myArray” and to get attribue {{item.name}}
vue: To make a class conditional on a context variable
v-bind:class=”{class-name: boolVar}”
note: the varName should return true or false
vue: To make the value of css in the style attribute be the value of a variable
v-bind:style=”{color: varName}”
vue: To register a component, type
Vue.component(“component-name”, {template: “string”})
of
Vue.component(“component-name”, {template: “#id-name”})
and the template would look like -template id=”id-name”>…-/template>
vue: To render a component in the template
-component-name> -/component-name>
vue: To make a vue widget on your page, type
new Vue({
el: '#element',
data: {key: 'value'}
methods: {funcName: function() {}, funcName: function() {}}
})
note: You can have multiple widgets in one page and each would need their own intependant vue instance.
vue: To get data from the data object of the vue instance from inside the methods
just use this.keyName
ie
new Vue {
el: '#element',
data: {key: 'value'}
methods: {funcName: function() { return this.keyName }}
}
vue: To render a link string inside an href tag
type v-bind:href=’varName’
vue: a shorthand for v-bind: is
just “:”
vue: The easiest way to include vue in your html is
use a script tag to the cdn and then a script tag to your app.js
vue: To bind any html attribute to a variable from your vue data, type
v-bind:attribute-name=”varName”
vue: to attach a js event listener to an html attribute, type
v-on:click=”methodName”
note: shorthand for v-on is @
i. e @mouseover=”methodName”
vue: You cannot not use
arrow functions in vue instances because they mess with the content of “this”
confirmed!
vue: To access the index in a for loop
v-for=”(item, index) in arrayName”
to enumerate just use
{{index + 1}}
vue: When looping through an array, to pass the current array item into a click event function, type
v-for=”item in arrayName” v-on:click=”functionName(item)”
note: pass in the alias name
vue: The difference between v-show and v-if is that
v-show uses css to hide and show stuff, and v-if injects html
vue: The js “event” object is
automatically passed into event functions, without needing to pass it in.
v-on:change=”functionName”
methods: {
functionName: function() {
return event.target.value
}
}
note: Unlike vanilla js or jquery
vue: To use a computed property (where the you receive the return of a function instead of a data element), type
computed: {
functionName: function() {
return "string"
}
}js: The best way to filter out particular values from an array is
resultVar = arrayName.filter(item => item < 5)
js: To use a list comprehension in JS, you can basically
use a .filter and then a .map
vue: Computed properties are different than methods because
they automatically update when their variables change, while methods need to be called.
Computed properties are cached, and dont run again unless their variables change, so it is more performant.
vue: To use a conditional class and a variable as a class at the same time, type
v-bind:class=”[ {class-name: boolVar}, classVar]”
vue: To tie an inputs value to a variable, type
v-model=”varName”
vue: To use a style with a dash like border-radius in the template, you must
camelcase it
v-bind:style=”{borderRadius:’15px’}”
vue: computed properties do not allow you to
pass in an argument in the template
vue: The proper way mentally to make a vuejs interface is
first make the html and css in every state so you can think just about style
then split up the elements into components
then build the vue logic
vue: To send a request after the vue loads, put the fetch inside
mounted: function () {
fetch()…
}
note: this goes outside the methods objects, not inside.
to easily serialize a qs to json, type
from django.core import serializers
from django.http import HttpResponse
qs = Noot.objects.all()
qs_json = serializers.serialize('json', qs)
return HttpResponse(qs_json, content_type='application/json')
make sure not to
put semi colons inside inline styles values.
Json data should always be sent as the method
POST, because sometimes the body is ignored on get requests.
in a v-for, to render the items data into an html attribute i.e. data-target = “” you must
v-bind:data-target=”item.value”
mouseover is better than mouseenter because
mouseover has more predictable behavior on mobile.
to hide an element until page loads so it doesnt flicker use
[v-cloak] {
display: none;
}
and add v-cloak to the element as an attribute
to stop a click event from bubbling up to parent, type
v-on:click.stop
Inside the vue target element, you cannot
use regular event listeners, like element.onchange =
must use vue version @change
to do a for of loop and get the index as well as the item, type
for (let [index, item] of myArray.entries()) {
to check is a list includes a value, type
myArray.includes(‘string’)
.splice() runs
inplace
