Summary of Vue basic knowledge: Vue component development
This article brings you about vue It mainly introduces issues related to vue component development. Component development provides an abstraction. We can develop an independent and reusable We use small components to construct our application components. Let’s take a look at them. I hope it will be helpful to everyone.
[Related recommendations: javascript video tutorial, web front-end】
1. Functional programming
1. Introduction to functional programming
Functional programming is a programming method that treats computer operations as calculations of functions. The most important foundation of functional programming language is lambda calculus, and lambda calculus functions can accept functions as input (parameters) and output (return values).
Compared with imperative programming, functional programming emphasizes that the calculation of functions is more important than the execution of instructions.
Compared with procedural programming, function calculations in functional programming can be called at any time.
The filter function automatically filters all elements of the object, and returns true before it is stored in the specified object;
The Reduce function summarizes all elements inside the array;
2. Code examples
<!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
Form elements such as and