Vue基礎知識總結之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-modelvue中經常使用到和<!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>登入後複製