搜尋

首頁 >web前端 >Vue.js >Vue基礎知識總結之vue組件化開發

Vue基礎知識總結之vue組件化開發

WBOY
WBOY轉載
2022-08-10 09:56:111887瀏覽

本篇文章給大家帶來了關於vue其中主要介紹了關於vue組件化開發的相關問題，組件化開發提供了一種抽象, 我們可以開發出一個獨立可復用的小組件來建構我們的應用元件，下面一起來看一下，希望對大家有幫助。

Vue基礎知識總結之vue組件化開發

【相關推薦：javascript影片教學、web前端】

##一、函數式程式設計

1、函數式程式設計簡介

函數式程式設計是種程式設計方式，它將電腦運算視為函數的計算。函數程式語言最重要的基礎是λ演算（lambda calculus），而且λ演算的函數可以接受函數當作輸入（參數）和輸出（回傳值）。

和指令式程式設計相比，函數式程式設計強調函數的計算比指令的執行重要。

和過程化程式設計相比，函數式程式設計裡函數的計算可隨時呼叫。

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>

二、v-model

vue中經常使用到和