使用漸進式框架的代價很小，從而使現有專案（使用其他技術建構的專案）更容易採用並遷移到新框架。 Vue.js 是一個漸進式框架，因為你可以逐步將其引入現有應用，而不必從頭開始重寫整個程式。
Vue 的最基本和核心的部分涉及「視圖」層，因此可以透過逐步將 Vue 引入程式並取代「視圖」實作來開始你的旅程。
由於其不斷發展的性質，Vue 與其他函式庫配合使用非常好，並且非常容易上手。這與 Angular.js 之類的框架相反，後者要求將現有程式完全重構並在該框架中實作。
Vue.js 讓渲染資料變得容易，並隱藏了內部實作。例如下面的程式碼：
HTML
<p id=”app”></p>
JavaScript
const greeting = “Hello there!”; const appp = document.getElementById(“app”); appp.innerText = greeting;
上面的程式碼片段將在ID 為“app”的p 中顯示短語“Hello there！”。程式碼包含實現結果所需的所有步驟。首先選擇 ID 為 “app” 的 DOM 元素，然後用 innerText 屬性手動設定 p 的內容。
現在，讓我們看看在 Vue 中是怎麼做的。
Template
<p id=”app”>{{ greeting }}</p>App
new Vue({
data: {
greeting: ‘Hello There!’
},
el: ‘#app’
});我們在Vue 程式中建立了一個名為「greeting」 的資料屬性，但是只需要在p 中用mustache 語法輸入「greeting」 即可，而不必關心內部實作。我們聲明了 “greeting” 變量，其餘的由 Vue 完成。這就是聲明式渲染的樣子。 Vue 隱藏並管理內部資訊。
要遍歷物件或陣列，可以使用 v-for 指令。以下是一個例子：
Template
<p id="app">
<ul>
<li v-for="(value, key) in card">{{ key }} - {{ value }}</li> </ul>
</p>#App
new Vue({
el: '#app',
data: {
card: {
name: 'John Doe',
age: 25,
city: 'New York',
country: 'US'
}
}
});輸出
country - US##4. 給出模板，描述Vue 程式的輸出。
{{title}}new Vue({
el: '#app',
data: {
title: 'Vue.js'
}
})5. 如何在輸入框和資料屬性之間實現雙向資料綁定？
<input type="text" :value="nameInput" @keyup="nameInput = $event.target.value">
<input type="text" v-model="nameInput">
6. 你如何捕捉元素上的點擊事件？
可以使用v-on:click
指令來擷取 Click 事件。這個指令也可以用縮寫符號 ###@click### 表示。這是一個例子：#########v-on:click 符號######<a v-on:click=”clickHandler”>Launch!</a>
<a @click=”clickHandler”>Launch!</a>
<TweetBox :tweet=”tweetText”>
<SignUpButton v-on:click=”doSignup” />
<SignUpButton @click=”doSignup” />
<SignUpButton v-if=”showButton” />
v-show 指令允许有条件地显示元素。在下面的代码中，仅当 isDisplayed 数据属性为 true 时，才会显示该元素。
<TweetBox v-show=”isDisplayed”>
使用 v-show 指令时，可使用 CSS 的 display 属性切换元素的可见性。
v-show 和 v-if 都用于有条件地显示元素，而后者提供了条件渲染的真正实现。 v-show 只需切换 CSS 的 display 属性即可显示或隐藏元素，而 v-if 指令可创建或销毁组件。每次显示状态更改时，代价通常会更大。
另一方面，v-show 成本较低，因为它仅切换元素的CSS显示属性。所以如果必须经常切换元素，则 v-show 会提供比 v-if 更好，更优化的结果。
就加载元素的初始渲染成本而言，v-if 不会渲染最初隐藏的元素的节点，而 v-show 会渲染其 CSS display 属性被设置为 none 的元素。
可以在任何元素上使用 v-on 指令来实现事件侦听器。此外，v-on 还允许我们将按键修饰符用于 “enter”，“tab”，“esc”，“space” 等常见按键。这是一个例子：
模板
<textarea @keyup.enter="storeComment"></textarea>
App
new Vue({
el: '#app',
methods: {
storeComment(event) {
//access the value of the textarea box using event.target.value or
// use v-model to bind to a data property
}
}
});可以通过官方的 vue-router 库在用 Vue 构建的 SPA 中进行路由。该库提供了全面的功能集，其中包括嵌套路线、路线参数和通配符、过渡、HTML5 历史与哈希模式和自定义滚动行为等功能。 Vue 还支持某些第三方路由器包。
在事件侦听器上调用 event.preventDefault() 的最佳方式是将 .prevent 修饰符与 v-on 指令一起使用。这是一个例子：
<a @click.prevent=”doSomethingWhenClicked”>Do Something</a>
过滤器是在 Vue 程序中实现自定义文本格式的一种非常简单的方法。它们就像可以在表达式中通过管道传递（使用管道字符）以取得结果的运算符。下面是一个可以反转文本字符串的过滤器示例：
模板
<p id="app">{{ title | reverseText }}</p>
App
new Vue({
el: '#app',
data: {
title: 'This is a title'
},
filters: {
reverseText(text) {
return text.split('').reverse().join('');
}
}
});输出
eltit a si sihT
在上面的例子中，我们创建了一个名为 reverseText 的过滤器，该过滤器反转文本字符串并返回。这是一个简单的函数，接受输入并返回处理后的输出。通过在过滤器下声明，它就可以成为可以在模板中使用的过滤器。
在模板中，我们只是将 reverseText 过滤器通过管道传递到了想要在 mustache 标签中显示的数据变量。这样可以将多个过滤器管道连接在一起。因此过滤器提供了一种非常优雅的方式来处理文本。
Vue 允许我们绑定到 class 属性。在下面的例子中，我们将 class 属性绑定到一个对象，该对象允许使用 data 属性切换类。
模板
<p :class=”{ pStyle : showp }”></p>App
new Vue({
el: '#app',
data: {
showp: true
}
});在上面的代码中，只要数据属性 showp 为 true，类名 pStyle 将应用于 p。
这可以在绑定类时用 Array 来实现。以下是实现方法：
模板
<Button :class=”[‘btn’, ‘btnRed’, { btnActive : isActive }]”>Process</button>App
new Vue({
el: '#app',
data: {
isActive: true
}
});在上面的代码段中，将串联各个类的数组，并基于 isActive 数据属性的值对对象中的表达式进行响应式评估。
计算属性是一类特殊函数的结果，当从属属性发生变化时，这些函数会自动进行计算。用它们代替内联表达式可以更好地表达复杂的逻辑，在模板中不能作为内联表达式合并。
每个计算方法都可以在模板部分作为属性使用。当从属属性更改时，计算方法将自动计算并缓存结果，这样比使用普通方法更好。方法在访问时将始终会重新计算，而如果自上一次计算和缓存阶段以来该方法内使用的属性未发生更改，则计算的属性将不会重新计算。
需要注意的是，仅当方法中使用的属性是响应性的（例如数据属性）时，才考虑依赖关系的更改。
这是一个演示计算属性的简单例子：
模板
<p id="app">
<input type="text" v-model="email" :class="{ invalid : isInvalid }">
</p>App
const emailRegEx = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@
((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
new Vue({
el: '#app',
data: {
email: ''
},
computed: {
isInvalid() {
return !emailRegEx.test(this.email);
}
}
});在上面的代码示例中，如果正则表达式测试针对电子邮件输入框失败，则 isValid 计算属性将返回 true。如果电子邮件验证程序认为输入的值无效，就会看到文本框便为红色（你必须创建一个名为 .invalid 的类，并将背景颜色属性设置为红色）。当用户键入内容时，将重新执行计算的方法，并且在验证格式之后，动态删除无效的类。
这可以通过样式标签上的 scoped 属性来实现。在内部 Vue 使用 PostCSS 插件为所有样式元素分配唯一的数据属性，然后使样式针对这些唯一的元素。举个例子：
<template>
<p class=”title”>This is a title</p>
</template>
<style scoped>
.title {
font-family: sans-serif;
font-size: 20px;
</style>可以用作为组件中单向入口的 prop 把数据向下传递到子组件。这是一个例子：
<template>
<p>
<contact-list-item v-for=”contact in contacts” :contact=”contact” />
</p>
</template>
<script>
import ContactListItem from ‘./ContactListItem’;
export default {
name: ‘address-book’,
data: function() {
return {
contacts: [.....]
}
},
components: {
ContactListItem
}
}
</script>contact-list-item 上绑定的 prop “contact” 是一个入口，用于从用作子项的父组件接收数据。在 contact-list-item 组件中：
<template>
<p>
<span>{{ contact.name }}</span>
<span>{{ contact.email }}</span>
</p>
</template>
<script>
export default {
name: ‘contact-list-item’,
props: [‘contact’]
}
</script>在这里声明了一个名为 “contact” 的 prop 引入数据，然后可以直接在模板部分中显示。
组件本质上是 Vue 实例，它们封装模板、逻辑和可选的本地响应性数据属性，能够提供可重新使用的自定义构建元素。可重用性是构建组件的核心。
使用单文件组件构建应用程序时，组件在扩展名为 .vue 的文件中定义。单文件组件包含三个部分：模板部分定义了该组件的 HTML 布局；脚本部分定义了数据、属性和逻辑单元（如方法）并将内容导出为 Vue 组件；还有一个样式部分，用于定义组件的样式表。单文件组件使用 Webpack 等模块捆绑器进行编译。
Vue 实例（组件）从其初始化到销毁和删除都经历生命周期。在整个过程中，Vue 允许开发人员运行自定义函数的几个阶段。这些函数称为生命周期 hook。以下是一些生命周期 hook 的列表：
插槽允许你定义可以封装和接受子 DOM 元素的元素。组件模板中的 <slot> </ slot> 元素作为通过组件标签捕获的所有DOM元素的出口。这是一个例子：
Post.vue |实现插槽的组件
<template>
<p class="hello">
<h3 class="title">{{title}}</h3>
<p class="content">
<slot></slot>
</p>
</p>
</template>App.vue | 使用Post组件的App组件
<template> <p id="app"> <Post title="Hello from Vue!"> Vue 是用于构建用户界面的渐进框架。与其他框架不同，Vue从头开始设计以逐渐采用。 核心库仅集中在视图层，并且很容易与其他库或现有项目集成。另一方面，当与现代工具和支持库结合使用时， Vue也完全能够为复杂的单页应用程序提供支持。 </Post> </p> </template>
在上面的示例中，斜体文本显示在 Post 组件中标有 <slot> 元素的区域内。
观察者允许我们观察更改的特定属性，并执行定义为函数的自定义操作。尽管它们的用例与计算的属性相交叉，但是当某些数据属性发生改变时，有时需要观察者执行自定义操作或运行代价昂贵的操作。
可以用 $emit('event-name', eventPayload)发出自定义事件。然后可以像其他事件一样，用 v-on 指令在父组件上拦截。
虽然这不是约定，但是开发人员经常使用变量名称 'vm' 来命名根 Vue 实例，该变量名称代表 'ViewModel'，因为 Vue 本质上负责视图层，并且部分受到了 MVVM 模式的启发（Model-View-View-Model）。但是，根本没有必要将根实例命名为 “vm”。
相关推荐：
更多编程相关知识，请访问：编程入门！！
以上是25道初級Vue.js面試問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！
