Question 1

1<div id="app">
2    <card-component>
3        <template #title>
4            Welcome Message
5        </template>
6        <p>Main card content here</p>
7        <template #default>
8            Default slot content
9        </template>
10        <template #actions>
11            <button>Click Me</button>
12        </template>
13    </card-component>
14</div>
15<script src="app.js"></script>

1Vue.component("cardComponent", {
2    template: `<div class="card">
3                    <h2>
4                        <slot name="title"></slot>
5                    </h2>
6                    <div class="content">
7                        <slot></slot>
8                    </div>
9                    <div class="footer">
10                        <slot name="footer"></slot>
11                    </div>
12                </div>`,
13})
14
15const app = new Vue({
16    el: "#app",
17})

Consider the following Vue application with markup "index.html" and JavaScript file "app.js". index.html: <div id="app"> <card-component> <template #title> Welcome Message </template> <p>Main card content here</p> <template #default> Default slot content </template> <template #actions> <button>Click Me</button> </template> </card-component> </div> <script src="app.js"></script> app.js: Vue.component("cardComponent", { template: `<div class="card"> <h2> <slot name="title"></slot> </h2> <div class="content"> <slot></slot> </div> <div class="footer"> <slot name="footer"></slot> </div> </div>`, }) const app = new Vue({ el: "#app", }) Suppose you open the "index.html" file in a browser. What will be rendered by the browser? Consider the below JavaScript program. new Promise((resolve, reject) => { if (10 > 5) reject(15) else resolve(25) }) .then(d => { console.log("Success handler", d); return d * 2; }, d => { console.log("Error handler", d); throw new Error(30); }) .catch(e => { console.log("Catch block", e.message); return e.message / 2; }) .then(d => { console.log("Next then", d); return d + 10; }) .finally(d => { console.log("Finally block", d); return d * 100; }) .then(d => { console.log("Final then", d); return d * 3; }) What will be the output of the above program? Consider the below Vue component. <template> <div> <p>{{ counter }}</p> <button @click="incrementCounter">Increment</button> </div> </template> <script> export default { data() { return { counter: 0 }; }, methods: { incrementCounter() { this.counter = this.counter + 2; this.counter = this.counter * 2; this.counter = this.counter - 5; } } }; </script> What will be displayed in the `<p>` element after the button with text "Increment" is clicked twice?