这是我参与「第四届青训营 」笔记创作活动的的第6天
1、js数组操作的高阶函数 filter/map/reduce
1.1 filter函数的使用
filter中的回调函数有一个要求：必须返回一个boolean
- true：当返回true时，函数内部会自动将这次回调的n加入到新的数组中
- false：当返回false时，函数内部会过滤掉这次的n
const nums = [10, 20, 111, 222, 8];
//过滤掉大于100的值
let newNums = nums.filter(function(n){
return n<100;
})
1.2 map函数的使用
map函数的回调函数的返回值可以直接替换原数组中的元素
let new2Nums = newNums.map(function(n){
//将原数组中所值的2倍存进来
return n*2;
})
//[20, 40, 16]
1.3 reduce函数的使用
reduce作用：对数组中所有内容进行汇总（全部相乘、全部相加等）
reduce需要传递两个参数，一个为回调函数，另一个为
let total = new2Nums.reduce(function(prevalue,n){
return 1；
//return prevalue + n ==>求和
},0)
//第一次prevalue的值与函数传递的第二个参数有关系
//第一次 prevalue=0 n=20
//第二次以后prevalue的值与return的值有关系
//第二次 prevalue=1 n=40
//第三次 prevalue=1 n=16
2、表单绑定v-model
- Vue中使用v-model指令来实现表单元素和数据的双向绑定
2.1 v-model的基本使用
<body>
<div id="app">
<input type="text" v-model="msg" />
</div>
<script>
const App = new Vue({
el:'#app',
data: {
msg:'zwx'
}
})
</script>
</body>
v-model其实是一个语法糖，他本质上包含两个操作
- v-bind绑定value属性
- v-on指令给当前元素绑定input事件
3.1 全局组件和局部组件
全局组件：
Vue.component('cnp',myComponent);
局部组件：在挂载这个实例的里面去注册，只有挂在的这个页面可以使用
const App = new Vue({
el:'#app',
data: {
msg:'zwx'
},
components:{
cpn:cpnC;
}
})
3.2 父组件和子组件
在一个组件里去注册另一个组件
<body>
<div id="app">
<cpn2></cpn2>
</div>
<script>
//子组件
const cpnC1 = Vue.extend({
template:`
<div>
<h2>我是标题1</h2>
<p>哈哈哈哈哈哈哈</p>
</div>
`
})
//父组件
const cpnC2 = Vue.extend({
template:`
<div>
<h2>我是标题2</h2>
<p>嘻嘻嘻嘻嘻嘻</p>
<cpn1></cpn1>
</div>
`,
components:{
cpn1:cpnC1
}
})
//root组件
const App = new Vue({
el:'#app',
data: {
msg:'zwx'
},
components:{
cpn2:cpnC2
}
})
</script>
</body>
3.3 模版的分离方法
方法一：使用
<script type="text/x-template" id="cpn1">
<div>
<h2>我是标题1</h2>
<p>哈哈哈哈哈哈哈</p>
</div>
</script>
const cpnC1 = Vue.extend({
template:'#cpn1'
})
方法二：template标签
<template id="cpn1">
<div>
<h2>我是标题1</h2>
<p>哈哈哈哈哈哈哈</p>
</div>
</template>
const cpnC1 = Vue.extend({
template:'#cpn1'
})
