ホームページ > 記事 > ウェブフロントエンド > Vue の基礎知識のまとめ: Vue コンポーネント開発
Vue の基礎知識のまとめ: Vue コンポーネント開発
- WBOY転載
- 2022-08-10 09:56:111836ブラウズ
この記事では vue について紹介します vue コンポーネント開発に関連する問題を主に紹介します。コンポーネント開発は抽象化を提供します。独立した再利用可能なコンポーネントを開発できます。アプリケーション コンポーネントを構築するために小さなコンポーネントを使用します。見てみましょう。皆さんのお役に立てれば幸いです。
[関連する推奨事項: JavaScript ビデオ チュートリアル 、Web フロントエンド ]
1. 関数型プログラミング
1. 関数型プログラミングの概要
関数型プログラミングとは、コンピューターの操作を関数の計算として扱うプログラミング手法です。関数型プログラミング言語の最も重要な基礎はラムダ計算であり、ラムダ計算関数は入力 (パラメーター) および出力 (戻り値) として関数を受け入れることができます。
命令型プログラミングと比較して、関数型プログラミングでは、命令の実行よりも関数の計算が重要であることが強調されています。
手続き型プログラミングと比較して、関数型プログラミングの関数計算はいつでも呼び出すことができます。
filter 関数は、オブジェクトのすべての要素を自動的にフィルターし、指定されたオブジェクトに格納される前に true を返します。
Reduce 関数は、配列内のすべての要素を要約します。
2. コード例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{totalPrice()}}
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好'
},
methods :{
totalPrice(){
const nums = [10,9,21,16,7]
let total = nums.filter(x => x<10).map(x => x*2).reduce((pre,n)=>pre+n);
console.log(total)
return total
}
}
})
</script>
</body>
</html>
2. v-model
や