Font size
WorksheetsIntro to Vue
Total questions: 11
Worksheet time: 8mins
What is the difference between v-show and v-if?
Nothing. It's just syntactic sugar.
v-show uses styles to hide the element
v-if removes the element from the DOM
What types of objects can you iterate over using v-for?
Arrays
Objects
Numbers
In Vue, if you want to apply a class conditionally to a DOM element what would you do?
In the created lifecycle hook, use dollar-js to apply a class that is defined inside of a scoped style tag.
Use class="{{someComputedProperty}}" in the DOM element
Use :class="{ 'myClass': myBoolean }" in the DOM element
Use v-bind:class="{ 'myClass': myBoolean }" in the DOM element
What does the scoped attribute on the style tag do?
It's like an !important on all of our Vue styles. They'll always win.
It prevents our styles from affecting other styles. It does not protect us from publisher styles affecting our Vue markup.
It's required on the template so that we can add IM_ad_unit before it.
Can you have multiple style tags?
Yes
No
What are the different ways you can style a DOM node inside of a template?
Create a class in the style section of the Vue file.
Inline styles.
Use dollar-js to affect the styles.
From reading the following code, what assumptions can you make about the structure of the component?
The IM_fancy_pirate class is defined in the Pirate component's styles, and we will apply it.
The IM_fancy_pirate class is defined in the current component's style tag and we will apply it.
Inside the Pirate Component, there is a function called isFancyPirate.
Inside the current component's script, there is a function called isFancyPirate
There is an Object or Array containing pirates in the current component.
How can you import code in a Vue file?
You have to bind every module you want to share to a window global and use GlobalGetter
You can use the import statement
You can use the require statement
How do you define a new component?
Create a Vue file which exports an object literal.
Create a Vue file which exports a class.
Create a Vue file which exports a class decorated by @Component
What are the ways you can define a variable called {{amazingAds}} for use in the <template> of your Vue file?
get amazingAds() { return this.ads.amazing ? 'Amazing Ads' : 'Not very amazing'; }
amazingAds() { return this.ads.amazing ? 'Amazing Ads' : 'Not very amazing'; }
Define a data property in the class called amazingAds.
Take amazingAds in as a property.
What is the difference between properties and data?
Properties are passed in from the parent, via template attributes.
Data is passed in from the parent, via template attributes.
Data should be private to the component
Data is immutable from within the component
Properties should not be mutated from within the component.
