All quizzesEasy
Vue Fundamentals — Series 3
Preview — 3 of 10 questions
What is the difference between these two, given message = 'Hi <b>there</b>'?
javascript
<template>
<p>{{ message }}</p>
<p v-text="message"></p>
</template>A{{ message }} escapes HTML and renders the literal text; v-text does the exact same thing — it's just an alternative syntax that sets textContent
Bv-text renders the HTML tags as real elements; interpolation renders them as text
CThey are opposites: interpolation renders raw HTML, v-text escapes it
Dv-text is deprecated in Vue 3 and throws a warning
What happens to id="submit-btn" here if MyButton has a single root element and does not declare id as a prop?
javascript
<!-- Usage -->
<MyButton id="submit-btn" @click="save">Save</MyButton>
<!-- MyButton.vue -->
<template>
<button>Save</button>
</template>Aid is silently dropped because it isn't a declared prop
BVue throws a compile error: unknown attribute id
Cid and the click listener automatically "fall through" and land on MyButton's single root <button> element
Did is available inside MyButton as props.id, but is not applied to the DOM
What does this render?
javascript
<script setup>
const linkProps = { href: 'https://vuejs.org', target: '_blank', rel: 'noopener' }
</script>
<template>
<a v-bind="linkProps">Vue docs</a>
</template>AA compile error — v-bind requires an argument like v-bind:href
B<a>Vue docs</a> — object values are ignored, only strings work with v-bind
COnly the first key of the object (href) is bound; the rest are ignored
DAn anchor tag with href, target, and rel all set from the object's keys and values in one binding
Sign up free to play
Answer all 10 questions (7 more), see explanations for every answer, and track your score.