Vue学习（第三天）
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);
补充：filter不会改变原数据，但sort会改变原数据，如下面这样
let arr = [1, 6, 5, 2, 7, 8, 9, 10];
arr.sort((a, b) => {return a - b;//重小到大//return b - a;//重大到小
})
二、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>
回顾
- Vue学习（第三天）
- 一、高阶函数的使用
- 1.1 filter
- 1.2 map
- 1.3 reduce
- 1.4 实例
- 1.4.1 写法一
- 1.4.2 写法二
- 二、v-model的使用
- 2.1 快速入门
- 2.2 实现原理
- 2.3 结合radio
- 2.4 结合checkbox
- 2.5 结合select
- 2.6 input中的值绑定
- 2.7 v-model的修饰符
- 2.7.1 懒加载lazy
- 2.7.2 数字类型number
- 2.7.3 截取两端字符串trim
- 三、组件化开发
- 3.1组件化的基本使用
- 3.2 全局组件和局部组件
- 3.3 父组件与子组件
- 3.4 组件的语法糖写法
- 3.5 组件模板的分离写法
- 3.6 组件中的数据为何要函数返回
- 3.7 组件通信-父组件向子组件传递数组
- 3.8 html中驼峰标识的坑
- 3.9 组件通信-子向父传递信息
Vue学习（第三天）
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);
补充：filter不会改变原数据，但sort会改变原数据，如下面这样
let arr = [1, 6, 5, 2, 7, 8, 9, 10];
arr.sort((a, b) => {return a - b;//重小到大//return b - a;//重大到小
})
二、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>
回顾
- Vue学习（第三天）
- 一、高阶函数的使用
- 1.1 filter
- 1.2 map
- 1.3 reduce
- 1.4 实例
- 1.4.1 写法一
- 1.4.2 写法二
- 二、v-model的使用
- 2.1 快速入门
- 2.2 实现原理
- 2.3 结合radio
- 2.4 结合checkbox
- 2.5 结合select
- 2.6 input中的值绑定
- 2.7 v-model的修饰符
- 2.7.1 懒加载lazy
- 2.7.2 数字类型number
- 2.7.3 截取两端字符串trim
- 三、组件化开发
- 3.1组件化的基本使用
- 3.2 全局组件和局部组件
- 3.3 父组件与子组件
- 3.4 组件的语法糖写法
- 3.5 组件模板的分离写法
- 3.6 组件中的数据为何要函数返回
- 3.7 组件通信-父组件向子组件传递数组
- 3.8 html中驼峰标识的坑
- 3.9 组件通信-子向父传递信息
发布评论