プログレッシブ フレームワークの使用コストは小さいため、既存のプロジェクト (他のテクノロジを使用して構築されたプロジェクト) が新しいフレームワークを採用して移行することが容易になります。 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.1 に「こんにちは！」と表示されます。コードには、結果を達成するために必要なすべての手順が含まれています。まず ID が「app」の DOM 要素を選択し、次に innerText プロパティを使用して p の内容を手動で設定します。
それでは、Vue でそれを行う方法を見てみましょう。
テンプレート
<p id=”app”>{{ greeting }}</p>アプリ
new Vue({
data: {
greeting: ‘Hello There!’
},
el: ‘#app’
});Vue プログラムで「greeting」という名前のデータ属性を作成しましたが、内部実装を気にせずに、mustache 構文を使用して p に「greeting」と入力するだけで済みます。 「greeting」変数を宣言すると、残りは Vue が行います。宣言的レンダリングは次のようになります。 Vue は内部情報を非表示にして管理します。
オブジェクトまたは配列を反復するには、v-for ディレクティブを使用できます。以下に例を示します。
テンプレート
<p id="app">
<ul>
<li v-for="(value, key) in card">{{ key }} - {{ value }}</li> </ul>
</p>アプリ
new Vue({
el: '#app',
data: {
card: {
name: 'John Doe',
age: 25,
city: 'New York',
country: 'US'
}
}
});出力
Template:
{{title}}App:
new Vue({
el: '#app',
data: {
title: 'Vue.js'
}
})上記のコードは、p<h1 style="color: green;"> Vue で文字列を出力します。 .js</h1>。タグ全体が文字列としてレンダリングされる理由は、Mustache テンプレート タグ {{title}} が受信データを文字列として扱い、それを実行可能コードに解析しないためです。これは、悪意のあるコードがページに挿入される XSS 関連の問題を軽減するのにも役立ちます。これは、JavaScript で elementSelector.innerText = text ステートメントを使用するのと似ています。
双方向データ バインディングを実装するには、v-model ディレクティブを使用できます。 v-model ディレクティブは主に糖衣構文です。
<input type="text" :value="nameInput" @keyup="nameInput = $event.target.value">
上記のステートメントでは、「keyup」イベントが観察されるたびに、「nameInput」という名前のデータ属性が入力ボックスの値に設定されます。同時に、入力ボックスの value 属性を「nameInput」データ属性にバインドします。これにより、フォーム フィールドとデータ属性の間に双方向のデータ関係が確立されます。
v-model は、手動で設定するよりも効率的にこれを行うことができます。 v-model を使用して上記の効果を再現するには、同じ入力ボックスに次のように再度入力します:
<input type="text" v-model="nameInput">
双方向データ バインディングを実装する場合、使用されるデータ属性は事実上のソースとみなされます。データ属性に対して行われた変更は、フォーム フィールドでのユーザー入力イベントよりも優先されます。
v-on:click ディレクティブを使用して、Click イベントをキャプチャできます。このコマンドは、省略記号 @click で表すこともできます。以下に例を示します:
v-on:clicksymbol
<a v-on:click=”clickHandler”>Launch!</a>
@clicksymbol
<a @click=”clickHandler”>Launch!</a>
v-bind ディレクティブを使用してプロパティにバインドされた関数としてプロパティに値を割り当てる場合、それは動的プロパティと呼ばれます。たとえば、次のコンポーネントの tweet プロパティは、tweetText という名前のデータ プロパティにバインドされています。これは、静的にハードコードされた値とは対照的です。このバインディングは常に一方向であり、データは親コンポーネントから子コンポーネントに流れることができ、その逆には流れないことを意味します。
<TweetBox :tweet=”tweetText”>
ディレクティブは、テンプレート HTML タグに追加して特別な応答性を与えることができる一連の特別な属性です。ディレクティブを使用すると、テンプレート内の要素が、データ プロパティ、メソッド、計算プロパティまたは監視プロパティ、インライン式を使用して定義されたロジックに基づいて変更に反応できるようになります。たとえば、次のコードは v-on ディレクティブを使用して、コンポーネントにクリック イベント リスナーを実装します。
<SignUpButton v-on:click=”doSignup” />
or
<SignUpButton @click=”doSignup” />
この例では、v-if ディレクティブを使用して、showButton というデータ属性に基づいて要素とコンポーネントを表示または削除します。 v- で始まるディレクティブは、Vue 固有のプロパティを示します。この規則の例外は、v-on および v-bind の短縮形です。
<SignUpButton v-if=”showButton” />
Vue では、独自のカスタム ディレクティブを定義することもできます。
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”。
相关推荐：
更多编程相关知识，请访问：编程入门！！
以上がVue.js の初心者向け面接の質問 25 選の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
