Vue学习（第三天）
一、高阶函数的使用
1.1 filter
filter中的回调函数有一个要求，必须返回boolean类型的值，当返回true时，将当前的值加入到结果中
nums: [1, 2, 3, 4, 5, 6, 7, 8, 9];
//返回nums中数值大于5的元素集合
let result = this.nums.filter(function(n) {
return n > 5;
});
1.2 map
对数组中的每个值都进行操作
对result数组中的每个元素值乘以2
let newResult = result.map(function(n) {
return n * 2
})
1.3 reduce
可做求和等运算
//求和运算
//function(preValue, currentValue) 回调函数 preValue:前一个结果 currentValue当前值
//初始结果
//对result数组中的元素进行求和运算
let sum = result.reduce(function(preValue, currentValue) {
return preValue + currentValue;
}, 0);
1.4 实例
从array数组中筛选中大于5的元素，并且对这些元素值扩大2倍，计算出他们的和
1.4.1 写法一
return this.array.filter(function(n) {
return n >= 5;
}).map(function(n) {
return n * 2;
}).reduce(function(preValue, currentValue) {
return preValue + currentValue;
}, 0);
1.4.2 写法二
this.nums.filter(n => n >= 5).map(n => n * 2).reduce((preValue, currentValue) => preValue + currentValue,1);
二、v-model的使用
2.1 快速入门
v-model可以实现双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{
{message}}</h2>
<input type="text" v-model="message">
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好呀！'
}
})
</script>
</body>
</html>
2.2 实现原理
<div id="app">
<input type="text" v-text="message">
<h2 v-text="message"></h2>
<!-- <input type="text" :value="message" @input="valueChange"> -->
<input type="text" :value="message" @input="message = $event.target.value">
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好呀！'
},
methods: {
valueChange(event){
this.message = event.target.value;
}
}
})
</script>
2.3 结合radio
<div id="app">
<!-- <label for="male">
<input type="radio" id="male" name="gender" value="男" v-model="gender">男
</label>
<label for="female">
<input type="radio" id="female" name="gender" value="女" v-model="gender">女
</label> -->
<!-- v-model绑定后的元素可省略name属性 -->
<label for="male">
<input type="radio" id="male" value="male" v-model="gender">男
</label>
<label for="female">
<input type="radio" id="female" value="female" v-model="gender">女
</label>
<hr>
<h2>{
{gender}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
gender: 'male',
}
})
</script>
2.4 结合checkbox
<div id="app">
<!-- 单选复选框 -->
<div>
<input type="checkbox" v-model='licences'>同意协议
<button :disabled="!licences">下一步</button>
<h2>{
{licences}}</h2>
</div>
<hr>
<!-- 多选复选框 -->
<div>
<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'>足球
<input type="checkbox" value="街舞" v-model='hobbies'>街舞
</div>
<h2>{
{hobbies}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好呀！',
hobbies: [],
licences: false,
}
})
</script>
2.5 结合select
<div id="app">
<div>
<select v-model='fruit'>
<option value="apple">苹果</option>
<option value="pear">梨</option>
<option value="grape">葡萄</option>
<option value="banana">香蕉</option>
</select>
<h2>{
{fruit}}</h2>
</div>
<hr>
<div>
<!-- 多选框 -->
<select v-model='fruit' multiple>
<option value="apple">苹果</option>
<option value="pear">梨</option>
<option value="grape">葡萄</option>
<option value="banana">香蕉</option>
</select>
<h2>{
{fruit}}</h2>
</div>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好呀！',
fruit: 'banana',
}
})
</script>
2.6 input中的值绑定
<div id="app">
<!-- <input type="checkbox" v-for='hobby in hobbies'>{
{hobby}} -->
<label v-for='hobby in hobbies' :for="hobby">
<input type="checkbox" :id="hobby" :value="hobby" v-model='result'>{
{hobby}}
</label>
<h2>{
{result}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
hobbies: ['篮球', '乒乓球', '羽毛球', '足球', '街舞','高尔夫球'],
result: [],
}
})
</script>
2.7 v-model的修饰符
2.7.1 懒加载lazy
输入后当鼠标离焦后或按回车后才更新变量信息
<div>
<input type="text" v-model.lazy='message'>
<h3>{
{message}}</h3>
</div>
2.7.2 数字类型number
不必进行类型的转化
<div>
<input type="number" v-model.number='number'>
<h2>{
{number}} - {
{typeof number}}</h2>
</div>
2.7.3 截取两端字符串trim
截取字符串两端的空白字符
<div>
<input type="text" v-model.trim='name'>
<h2>{
{name}}</h2>
</div>
三、组件化开发
3.1组件化的基本使用
<!-- 组件必须挂载在某个Vue实例下，否则它不会生效 -->
<my-cpn></my-cpn>
<hr>
<div id="app">
<my-cpn></my-cpn>
</div>
<script src="../js/vue.js"></script>
<script>
//创建组件构造器对象
const component = Vue.extend({
//自定义组件的模板
template: `
<div>
<h2>我是标题</h2>
<p>我是内容，哈哈哈</p>
<p>我是内容，呵呵呵</p>
</div>`
});
//2.注册组件
Vue.component('my-cpn', component);
const app = new Vue({
el: '#app',
data: {
message: '你好呀！'
}
})
</script>
3.2 全局组件和局部组件
<div id="app">
<!-- html不区分大小写 -->
<my-Component></my-Component>
</div>
<hr>
<div id="other">
<my-component></my-component>
<!-- 等价于 -->
<!-- <my-component></my-component> -->
</div>
<script src="../js/vue.js"></script>
<script>
// 创建组件构造器
const component = Vue.extend({
template: `
<div>
<h2>这是一个标题</h2>
<p>这是内容</p>
</div>
`
});
//全局组件
// Vue.component('my-component', component);
const app = new Vue({
el: '#app',
components: {
myComponent: component,//true
// my-Component: component,//false
}
})
const other = new Vue({
el: '#other',
components: {
myComponent: component
}
});
</script>
3.3 父组件与子组件
const component1 = Vue.extend({
template: `
<div>
<h1>这是标题1</h1>
<p>这是内容，呵呵呵</p>
</div>
`
});
const component2 = Vue.extend({
template: `
<div>
<h1>这是标题2</h1>
<my-component></my-component>
<p>这是内容，呵呵呵</p>
</div>
`,
components: {
myComponent: component1
}
});
const app = new Vue({
el: '#app',
data: {
message: '你好呀！'
},
components: {
myComponent: component2,
}
})
</script>
3.4 组件的语法糖写法
<div id="app">
<my-component></my-component>
</div>
<script src="../js/vue.js"></script>
<script>
//全局组件的注册
Vue.component('my-component',{
template: `
<div>
<h1>this is a title</h1>
<p>this is a passage</p>
</div>
`
});
const app = new Vue({
el: '#app',
data: {
message: '你好呀！'
},
components: {
myComponent: {
template: `
<div>
<h1>this is a Title</h1>
<p>this is a Passage</p>
</div>
`
}
}
})
</script>
3.5 组件模板的分离写法
<div id="app">
<my-component></my-component>
</div>
<script src="../js/vue.js"></script>
<!-- 方式一： -->
<!-- <script type="text/x-template" id="myTemplate">
<div>
<h1>this is a title</h1>
<p>this is a passgae</p>
</div>
</script> -->
<!-- 方式二： -->
<template id="myTemplate">
<div>
<h1>This is a title</h1>
<p>This is a passgae</p>
</div>
</template>
<script>
Vue.component('myComponent', {
template:'#myTemplate'
});
const app = new Vue({
el: '#app',
data: {
message: '你好呀！'
}
})
</script>
3.6 组件中的数据为何要函数返回
<div id="app">
<my-component></my-component>
<hr>
<my-component></my-component>
<hr>
<my-component></my-component>
</div>
<template id="myTemplate">
<div>
<h1>当前计数：{
{counter}}</h1>
<button @click='add'>+</button>
<button @click='sub'>-</button>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
// 组件内部是不能访问Vue实例中的数据的
Vue.component(
'myComponent', {
template: '#myTemplate',
data() {
// 变量不共享
return {
counter: 0,
}
},
methods: {
add() {
this.counter++;
},
sub() {
this.counter--;
}
}
}
);
const app = new Vue({
el: '#app',
data: {
message: '你好呀！'
}
})
</script>
3.7 组件通信-父组件向子组件传递数组
<div id="app">
<my-component :cmovies='movies'></my-component>
</div>
<template id="myTemplate">
<!-- template中：必须包含在一个div内 -->
<div>
<h1>{
{message}}</h1>
<h1>{
{cmovies}}</h1>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
movies: ['海王', '胖子行动队', '小兵张嘎', '生化危机', '速度与激情']
},
components: {
myComponent: {
template: '#myTemplate',
data() {
return {
message: '你好！~'
}
},
//数组
// props: ['cmovies']
//对象
props: {
//1.类型限制
// cmovies:Array,
//2.提供一些默认值
cmovies: {
type: Array,
//类型是对象或者数组时，默认值必须是一个函数
// default: ['a', 'b', 'c'],、
default () {
return []
},
// 必须传该值
required: true
}
}
}
}
})
</script>
3.8 html中驼峰标识的坑
<div id="app">
<my-component :my-first-message='message'></my-component>
</div>
<template id="myTemplate">
<div>
<h1>{
{myFirstMessage}}</h1>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好呀！'
},
components: {
myComponent: {
template: '#myTemplate',
data() {
return {
};
},
props: {
myFirstMessage: {
type: String,
default () {
return;
},
required: true
}
}
}
}
})
</script>
3.9 组件通信-子向父传递信息
<div id="app">
<my-component v-on:item-click='insBtnClick'></my-component>
</div>
<template id="myTemplate">
<div>
<button v-for='item in categories' v-on:click='tmpBtnClick(item)'>{
{item.value}}</button>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好呀！'
},
components: {
myComponent: {
template: '#myTemplate',
data: function() {
return {
categories: [
{ name: 'a', value: '数码相机' },
{ name: 'b', value: '家用电器' },
{ name: 'c', value: '电脑办公' },
{ name: 'd', value: '热门推荐' }
]
}
},
methods: {
tmpBtnClick: function(item) {
this.$emit('item-click', item);
}
}
}
},methods:{
insBtnClick(item){
console.log(item);
}
}
})
</script>