第 3 节 JavaScript高阶函数的使用、v-model、组件化
第3节 JavaScript高阶函数的使用、v-model、组件化
- JavaScript 高阶函数的使用
- v-model
-
- v-model的使用和原理
- v-model 结合 radio 类型使用
- v-model：checkbox
- v-model：select
- input中的值绑定
- v-model修饰符的使用
- 组件化
-
- Vue组件化思想
- 注册组件的基本步骤
- 注册组件步骤解析
- 全局组件和局部组件
- 父组件和子组件的区分
- 组件的语法糖注册方式
- 模板的分离写法
- 组件不能访问Vue实例数据
- 组件中的data为什么是函数
- 父子组件通信
-
- 父传子（props）
-
- props中的驼峰标识
- 子传父（自定义事件）
- 父子组件通信——结合双向绑定案例（还没明白）
- 父访问子-children-refs
-
- 父子组件的访问方式：$children（很少使用）
- 父子组件的访问方式：`$refs`（经常使用）
- 子访问父-parent-root
-
- 父子组件的访问方式：$parent（很少使用）
- 父子组件的访问方式：$root（很少使用）
- 插槽（slot）
-
- 插槽的基本使用
- 具名插槽的使用
- 编译作用域
-
- 作用域插槽的使用
JavaScript 高阶函数的使用
1、 filter函数的使用
filter中的回调函数有一个要求：必须返回一个boolean值
（1）true：当返回true时，函数内部会自动将这次回调的n加入到新的数组中
（2）false：当返回false时，函数内部会过滤调这次的n
const nums = [10, 20, 111, 222, 333, 40, 50]
let newNums = nums.filter(function (n) {
return n < 100;
})
console.log(newNums);
2、 map函数的使用
将数组中所有的元素进行统一的改变
let new2Nums = newNums.map(function (n) {
return n * 2;
})
console.log(new2Nums);
3、reduce函数的使用
作用：对数组所有内容进行汇总，所有元素进行求和或者求积等等
（1）preValue: 表示函数function的上一次返回值；
（2）n：数组中的元素
（3）0：表示首次进入函数 function 的 preValue
let total = new2Nums.reduce(function (preValue, n) {
return preValue + n;
}, 0)
console.log(total);
用 . 将三个函数联合使用
const nums = [10, 20, 111, 222, 333, 40, 50]
let total = nums.filter(function (n) {
return n < 100;
}).map(function (n) {
return n * 2;
}).reduce(function (preValue, n) {
return preValue + n;
}, 0)
console.log(total);
结合箭头函数
let total = nums.filter(n => n < 100).map(n => n * 2).reduce((pre, n) => pre + n);
v-model
v-model的使用和原理
 |
|---|
v-model 结合 radio 类型使用
<div id="app">
<label for="male">
<input type="radio" id="male" value="男" v-model="gender">男
label>
<label for="female">
<input type="radio" id="female" value="女" v-model="gender">女
label>
<h2>你选择的性别是：{{gender}}h2>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
// gender: ''
// 默认选择 男
gender: '男'
}
})
script>
点击“男”按钮，就会把radio值为“男”赋给 gender
v-model：checkbox
单选框是 boolean值，多选框是 数组
<body>
<div id="app">
<input type="checkbox" value="篮球" v-model="hobbies">篮球
<input type="checkbox" value="足球" v-model="hobbies">足球
<input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
<input type="checkbox" value="排球" v-model="hobbies">排球
<h2>您的爱好是：{{hobbies}}h2>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好呀',
isAgree: false, //单选框是boolean值
hobbies: [] //多选框是数组
}
})
script>
body>
v-model：select
 |
|---|
1、checkbox 单选框
<body>
<div id="app">
<select name="abc" v-model="fruit">
<option value="苹果">苹果option>
<option value="香蕉">香蕉option>
<option value="西瓜">西瓜option>
<option value="橘子">橘子option>
select>
<h2>您选择的水果是：{{fruit}}h2>
2、checkbox 多选框
增加 multiple，按住ctrl，再进行选择，实现多个选中
<select name="abc" v-model="fruits" multiple>
<option value="苹果">苹果option>
<option value="香蕉">香蕉option>
<option value="西瓜">西瓜option>
<option value="橘子">橘子option>
select>
<h2>您选择的水果是：{{fruits}}h2>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
fruit: '苹果',
fruits: []
}
})
script>
body>
input中的值绑定
 |
|---|
:value="item"，value 值是从动态给定的
<div>
<label v-for="item in originFruits" :for="item">
<input type="checkbox" :value="item" :id="item" v-model="fruits">{{item}}
</label>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
fruit: '苹果',
fruits: [],
originFruits: ['苹果', '香蕉', '西瓜', '橘子']
}
})
</script>
v-model修饰符的使用
 |
|---|
<input type="text" v-model.lazy="message">
<h2>{{message}}h2>
<input type="number" v-model.number="age">
<h2>{{age}}-{{typeof age}}h2>
<input type="text" v-model.trim="name">
<h2>您输入的名字:{{name}}h2>
组件化
Vue组件化思想
 |
|---|
注册组件的基本步骤
 |
|---|
<body>
<div id="app">
<my-cpn>my-cpn>
<my-cpn>my-cpn>
div>
<script src="../js/vue.js">script>
<script>
// 1.创建组件构造器对象
const cpnC = Vue.extend({
template: `
我是标题
我是内容，哈哈哈哈哈哈
我是内容，哈哈哈哈哈哈
`
});
// 2.注册组件（全局组件）
Vue.component('my-cpn', cpnC)
const app = new Vue({
el: '#app',
data: {
message: ''
}
})
script>
body>
注册组件步骤解析
 |
|---|
| my-cpn必须要在Vue的实例里面，在这里即是 id名为app的div |
 |
全局组件和局部组件
1、全局组件
在多个Vue实例下面均可以使用
Vue.component('cpn', cpnC)
2、局部组件
利用 components 创建局部组件，如下程序创建了vue的app实例的组件
const app = new Vue({
el: '#app',
data: {
message: ''
},
components: {
// 2.注册局部组件，只能在vue的app实例中使用
// cpn使用组件时的标签名
cpn: cpnC
}
})
父组件和子组件的区分
<body>
<div id="app">
<cpn2>cpn2> // 在使用cpn2的时候，cpnC2在内部已经被编译完成。在解析template的过程中会用cpn1中的模板对<cpn1>cpn1>进行替换
<cpn1>cpn1> //会报错
div>
<script src="../js/vue.js">script>
<script>
// 创建第一个组件构造器(子组件)
const cpnC1 = Vue.extend({
template: `
我是标题1
我是内容，哈哈哈哈哈哈
`
})
// 创建第二个组件构造器(父组件)
const cpnC2 = Vue.extend({
// 模板(template)里面，只能有一个根元素，所以cpn1标签必须在div里面
template: `
我是标题2
我是内容，呵呵呵呵呵呵
组件的语法糖注册方式
<script>
// 注册全局组件的语法糖
Vue.component('cpn1', {
template: `
我是标题1
我是内容，哈哈哈哈哈哈哈
`
})
// 注册局部组件的语法糖
const app = new Vue({
el: '#app',
components: {
'cpn2': {
template: `
我是标题2
我是内容，呵呵呵呵呵呵
`
}
}
})
</script>
模板的分离写法
1、script 标签，注意：类型必须是 text/x-template
<script type="text/x-template" id="cpn">
<div>
<h2>我是标题</h2>
<p>我是内容，哈哈哈哈哈哈</p>
</div>
script>
2、template 标签
<template id="cpn">
<div>
<h2>我是标题h2>
<p>我是内容，呵呵呵呵呵呵呵p>
div>
template>
创建并注册全局组件
Vue.component('cpn', {
template: '#cpn'
})
组件不能访问Vue实例数据
Vue组件有自己保存数据的地方
 |
|---|
组件中的data为什么是函数
保证每次返回的都是不同的对象，避免出现连锁反应。
Vue.component('cpn', {
template: '#cpn',
// data必须是一个函数，且返回的是一个对象
data() {
return {
title: 'abc'
}
}
})
父子组件通信
 |
|---|
父传子（props）
 |
|---|
示例：这里，prop选项是使用一个数组
<body>
<div id="app">
<cpn :cmessage="message" :cbooks="books">cpn>
div>
<template id="cpn">
<div>
<h2>{{cmessage}}h2>
<ul>
<li v-for="item in cbooks">{{item}}li>
ul>
div>
template>
<script src="../js/vue.js">script>
<script>
//父传子：props
const cpn = {
template: '#cpn',
props: ['cbooks', 'cmessage']
}
const app = new Vue({
el: '#app',
data: {
message: '你好呀',
books: ['西游记', '红楼梦', '水浒传']
},
components: {
cpn
}
})
script>
body>
 |
|---|
props: {
// 1.类型限制
// cmovies: Array,
// cmessage: String
// 2.提供一些默认值,以及必传值
cmessage: {
type: String,
// 在没有绑定message时,cmessage的默认值
default: 'aaaaaaaa',
// 增加该条语句，表示message是必传的
required: true
},
// 3.类型是对象或者数组时，默认值必须是一个函数
cbooks: {
type: Array,
default() {
return []
}
}
}
props中的驼峰标识
在创建子组件时，如果使用了驼峰标识，则在调用该组件时，要将每一个单词用 - 连接。
cInfo --> c-info
<body>
<div id="app">
<cpn :c-info="info">cpn>
div>
<template id="cpn">
<h2>{{cInfo}}h2>
template>
<script src="../js/vue.js">script>
<script>
const cpn = {
template: '#cpn',
props: {
cInfo: {
type: Object,
default() {
return {}
}
}
}
}
const app = new Vue({
el: '#app',
data: {
info: {
name: 'Sunnie',
age: 18,
height: 1.88
}
},
components: {
cpn
}
})
script>
body>
子传父（自定义事件）
 |
|---|
<body>
<div id="app">
<cpn @item-click="cpnClick">cpn>
div>
<template id="cpn">
<div>
<button v-for="item in categories" @click="btnClick(item)">{{item.name}}button>
div>
template>
<script src="../js/vue.js">script>
<script>
// 1.子组件
const cpn = {
template: '#cpn',
data() {
return {
categories: [
{ id: 'aaa', name: '热门推荐' },
{ id: 'bbb', name: '手机数码' },
{ id: 'ccc', name: '家用家电' },
{ id: 'ddd', name: '电脑办公' },
]
}
},
methods: {
btnClick(item) {
//发射事件itemclick：自定义事件
this.$emit('item-click', item)
}
}
}
// 2.父组件
const app = new Vue({
el: '#app',
components: {
cpn
},
methods: {
cpnClick(item) {
console.log('cpnClick', item);
}
}
})
script>
body>
父子组件通信——结合双向绑定案例（还没明白）
 |
|---|
父访问子-children-refs
父子组件的访问方式：$children（很少使用）
 |
|---|
父子组件的访问方式：$refs（经常使用）
$refs => 对象类型，默认是一个空的对象。
<cpn ref="aaa">cpn>
console.log(this.$refs.aaa.name);
子访问父-parent-root
父子组件的访问方式：$parent（很少使用）
console.log(this.$parent.name);
父子组件的访问方式：$root（很少使用）
console.log(this.$root.message);
插槽（slot）
 |
|---|
 |
插槽的基本使用
1、插槽的基本使用：
2、插槽的默认值
例如，
3、如果有多个值，同时放入到组件进行替换时，一起作为替换元素被替换。
<div id="app">
<cpn>cpn>
<cpn><span>哈哈哈哈span>cpn>
<cpn>
<i>呵呵呵呵i>
<p>我是p元素p>
cpn>
div>
<template id="cpn">
<div>
<h2>我是组件h2>
<p>我是组件，哈哈哈哈p>
<slot><button>按钮button>slot>
div>
template>
具名插槽的使用
<div id="app">
<cpn><span slot="center">标题span>cpn>
<cpn><button slot="left">返回button>cpn>
div>
<template id="cpn">
<div>
<slot name="left"><span>左边span>slot>
<slot name="center"><span>中间span>slot>
<slot name="right"><span>右边span>slot>
div>
template>
编译作用域
在父组件模板中的变量，会在Vue实例里面查找是否有该变量；而子组件模板中的变量，则会优先在自身组件中查找是否有该变量。
 |
|---|
作用域插槽的使用
父组件替换插槽的标签，但是内容由子组件来提供。
<body>
<div id="app">
<cpn>cpn>
<cpn>
<template v-slot:default="slot">
<span>{{slot.data.join(' - ')}}span>
template>
cpn>
div>
<template id="cpn">
<div>
<slot :data="pLanguages">
<ul>
<li v-for="item in pLanguages">{{item}}li>
ul>
slot>
div>
template>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊！'
},
components: {
cpn: {
template: '#cpn',
data() {
return {
pLanguages: ['JavaScript', 'C++', 'Java', 'C#', 'Python']
}
}
}
}
})
script>
body>