vuejs

Question 1

vue: a directive is an

Answer 1

expression you write in the template starting with v-

Question 2

vue: To interpolate a variable just once (so it wont be reactive)

Answer 2

add v-once tag attribute and put {{varName}} into middle of tag

Question 3

vue: The directive for showing or hiding an element based on the boolean value of a variable

Answer 3

v-if=”boolVar”

Note:
v-else for opposite

Question 4

vue: To render text or html using a directive

Answer 4

v-text or v-html

Question 5

vue: To make a for loop directive

Answer 5

v-for=”item in myArray” and to get attribue {{item.name}}

Question 6

vue: To make a class conditional on a context variable

Answer 6

v-bind:class=”{class-name: boolVar}”

note: the varName should return true or false

Question 7

vue: To make the value of css in the style attribute be the value of a variable

Answer 7

v-bind:style=”{color: varName}”

Question 8

vue: To register a component, type

Answer 8

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>

Question 9

vue: To render a component in the template

Answer 9

-component-name> -/component-name>

Question 10

vue: To make a vue widget on your page, type

Answer 10

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.

Question 11

vue: To get data from the data object of the vue instance from inside the methods

Answer 11

just use this.keyName

ie

new Vue {
  el: '#element',
  data: {key: 'value'}
  methods: {funcName: function() { return this.keyName }}
}

Question 12

vue: To render a link string inside an href tag

Answer 12

type v-bind:href=’varName’

Question 13

vue: a shorthand for v-bind: is

Answer 13

just “:”

Question 14

vue: The easiest way to include vue in your html is

Answer 14

use a script tag to the cdn and then a script tag to your app.js

Question 15

vue: To bind any html attribute to a variable from your vue data, type

Answer 15

v-bind:attribute-name=”varName”

Question 16

vue: to attach a js event listener to an html attribute, type

Answer 16

v-on:click=”methodName”

note: shorthand for v-on is @
i. e @mouseover=”methodName”

Question 17

vue: You cannot not use

Answer 17

arrow functions in vue instances because they mess with the content of “this”

confirmed!

Question 18

vue: To access the index in a for loop

Answer 18

v-for=”(item, index) in arrayName”

to enumerate just use
{{index + 1}}

Question 19

vue: When looping through an array, to pass the current array item into a click event function, type

Answer 19

v-for=”item in arrayName” v-on:click=”functionName(item)”

note: pass in the alias name

Question 20

vue: The difference between v-show and v-if is that

Answer 20

v-show uses css to hide and show stuff, and v-if injects html

Question 21

vue: The js “event” object is

Answer 21

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

Question 22

vue: To use a computed property (where the you receive the return of a function instead of a data element), type

Answer 22

computed: {
  functionName: function() {
    return "string"
  }
}

Question 23

js: The best way to filter out particular values from an array is

Answer 23

resultVar = arrayName.filter(item => item < 5)

Question 24

js: To use a list comprehension in JS, you can basically

Answer 24

use a .filter and then a .map

Question 25

vue: Computed properties are different than methods because

Answer 25

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.

Question 26

vue: To use a conditional class and a variable as a class at the same time, type

Answer 26

v-bind:class="[ {class-name: boolVar}, classVar]"

Question 27

vue: To tie an inputs value to a variable, type

Answer 27

v-model="varName"

Question 28

vue: To use a style with a dash like border-radius in the template, you must

Answer 28

camelcase it | v-bind:style="{borderRadius:'15px'}"

Question 29

vue: computed properties do not allow you to

Answer 29

pass in an argument in the template

Question 30

vue: The proper way mentally to make a vuejs interface is

Answer 30

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

Question 31

vue: To send a request after the vue loads, put the fetch inside

Answer 31

mounted: function () { fetch()... } note: this goes outside the methods objects, not inside.

Question 32

to easily serialize a qs to json, type

Answer 32

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') ```

Question 33

make sure not to

Answer 33

put semi colons inside inline styles values.

Question 34

Json data should always be sent as the method

Answer 34

POST, because sometimes the body is ignored on get requests.

Question 35

in a v-for, to render the items data into an html attribute i.e. data-target = "" you must

Answer 35

v-bind:data-target="item.value"

Question 36

mouseover is better than mouseenter because

Answer 36

mouseover has more predictable behavior on mobile.

Question 37

to hide an element until page loads so it doesnt flicker use

Answer 37

[v-cloak] { display: none; } and add v-cloak to the element as an attribute

Question 38

to stop a click event from bubbling up to parent, type

Answer 38

v-on:click.stop

Question 39

Inside the vue target element, you cannot

Answer 39

use regular event listeners, like element.onchange = must use vue version @change

Question 40

to do a for of loop and get the index as well as the item, type

Answer 40

for (let [index, item] of myArray.entries()) {

Question 41

to check is a list includes a value, type

Answer 41

myArray.includes('string')

Question 42

.splice() runs

Answer 42

inplace