vue学习笔记-day03
day03
1.(掌握)JS高级函数
1.1 ES6循环
for(let i in this.books); i 表示books里面的索引
<div id='app'>
div>
<script>
new Vue({
el:'#app',
data:{
books:['java','C#','paython','springboot']
},
methods:{
}
})
script>
for(let book of this.books); book 是books里面的元素(或者是对象)
<div id='app'>
div>
<script>
new Vue({
el:'#app',
data:{
books:['java','C#','paython','springboot']
},
methods:{
}
})
script>
1.2 高级函数
Map / Filter / reduce
编程范式: 命令式编程 | 声明式编程
编程范式: 面向对象编程(第一公民:对象) | 函数式编程(第一公民:函数)
<script>
const nums=[10,111,20,30,40,222,50,78];
//取出小于100数字
let newNums=[];
for(let n of nums){
newNums.push(n);
}
let new2Nums=[];
//将取出小于100的数字进行转换:全部*2
for(let n of newNums){
new2Nums.push(n*2);
}
//将所有new2Num数字相加，得到最终
let totalNum = 0;
for(let n of new2Num){
totalNum +=n;
}
script>
- map / filter 函数
和jdk8 stream 流 和lambda表达式用法差不多
<body>
<script src="js/vue.js" type="text/javascript" charset="utf-8">script>
<script>
const nums=[10,111,20,30,40,222,50,78];
//使用filter函数进行过滤,
//function(n){} 回调函数必须返回一个boolen值
//当返回true，函数内部会自动将这次回调的n加入到新的数组中
//我们用newNums接收一下
let newNums = nums.filter(function(n){
//这里面写过滤的规则，如果满足规则返回true,
//同时把满足规则的n 放入到新的数组newNums中.反之就不放入
return n<100;
});
console.log(newNums);
let new2Nums = newNums.map(function(n){
return n*2;
})
console.log(new2Nums)
script>
body>
效果:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FxicKdzl-1604650784989)(http://note.youdao.com/yws/public/resource/3fe4af9b48fabe377813a832d097bb4d/xmlnote/D41ACFCBBFE446E8BDFECC6DDC40ECA9/18800)]
Webstrome可以查看到源码
- reduce函数
概述:reduce() 方法接收一个函数作为累加器,
reduce 为数组中的每一个元素依次执行回调函数，
不包括数组中被删除或从未被赋值的元素，
接受四个参数：初始值（上一次回调的返回值），当前元素值，当前索引，原数组
语法:array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VDzFrcdo-1604650784995)(http://note.youdao.com/yws/public/resource/3fe4af9b48fabe377813a832d097bb4d/xmlnote/99CFF7BD99204E048688EACEEA1F86FB/18805)]
<body>
<script src="js/vue.js" type="text/javascript" charset="utf-8">script>
<script>
const nums=[10,111,20,30,40,222,50,78];
let newNums = nums.filter(function(n){
return n<100;
});
console.log(newNums);
let new2Nums = newNums.map(function(n){
return n*2;
})
console.log(new2Nums)
//对数组的内容进行汇总
//传递参数：参数一： 前一个遍历元素的值
//参数二:初始值
//let num3Nums = new2Nums.reduce(function(pre,n){return pre+n;},0)
/*
=> 箭头函数
*/
let total = nums.filter(n=>n<100)
.map(n=>n*2)
.reduce((prevalue,n)=>prevalue+n);
console.log(total)
script>
body>
效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sOP1igL7-1604650784998)(http://note.youdao.com/yws/public/resource/3fe4af9b48fabe377813a832d097bb4d/xmlnote/BC02E9BA022E405DA9AB74229E54B36F/18803)]
<script>
const nums= [10,333,34,54,55];
let total =nums.reduce(function(pre,n){
return pre+n;
},0)
console.log("total:"+total)
//---------------------------------
let totalNum = 0;
for(let num of nums){
totalNum +=num;
}
console.log("totalNum:"+totalNum);
//---------------------------------
//计算小于55数总和
let total2Num = nums.filter(n=>n<55).
reduce(function(pre,n){return pre+n;},0);
console.log("total2Num:"+total2Num);
//---------------------------------
//计算小于100.并且把小于100的数*2，然后求出总数.
let total3Num = nums.filter(n=>n<100).map(m=>m*2)
.reduce(function(pre,n){return pre+n},0);
console.log("total3Num:"+total3Num);
script>
效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0Txf7g4y-1604650785002)(http://note.youdao.com/yws/public/resource/3fe4af9b48fabe377813a832d097bb4d/xmlnote/98A67CA5F518470BABD0F2D4EA73A070/18807)]
2.(掌握)v-model数据双向绑定
2.1 基本使用
<div id="app">
<input type="text" v-model='msg'/>
{{msg}}
div>
<script>
new Vue({
el:"#app",
data:{
msg:"hello vue"
}
})
script>
v-on:input 事件 、 v-bind:value 两个相结合去实现v-model
<input type="text" v-bind:value="msg" v-on:input="valueChange($event)"/> <input type="text" v-bind:value="msg" v-on:input="msg=$event.target.value"/> <script> new Vue({ el:'#app', data:{ msg:"hello " }, methods:{ valueChange(event){ console.log(event); this.msg = event.target.value; } } }) script>$event.target.value
2.2 v-model绑定单选按钮radio
radio 进行双向绑定的时候需要绑定value值：:value
<div id='app'>
<input type="radio" id="male" value="男" v-model='sex'>男
<input type="radio" id="female" value="女" v-model='sex'>女
<h1> 你选择的性别:{{sex}}h1>
div>
<script>
new Vue({
el:'#app',
data:{
sex:'男'
}
})
script>
radio 进行互斥(就是只能选择一个),如果v-model绑定同一个值是可以进行互斥，不用写name的。
在提交服务器的时候。name 作为key ，value 作为value提交给服务端然后进行保存
2.3 v-model绑定checkbox
- 绑定多个复选框
<div id='app'>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jacklabel>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">Johnlabel>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mikelabel>
<br>
<span>Checked names: {{ checkedNames }}span>
div>
<script>
new Vue({
el:'app',
data:{
checkedNames:[]
}
})
script>
- 选中单个复选框
<div id='app'>
<label for="agree">
<input type='checkbox' id="agree" v-model='agree'/>同意协议
<h2>
选择结果:{{agree}}
h2>
label>
<button :disabled='!agree'>
下一步
button>
div>
<script>
new Vue({
el:"#app",
data:{
agree:false
}
})
script>
checked是布尔类型的数据
2.4 v-model绑定下拉框
<div id="app">
<select name="city" v-model="selected">
<option disabled value="">请选择option>
<option value='001'>北京option>
<option value='002'>上海option>
<option value='003'>深圳option>
select> <span> 您选择的是: {{selected}}span>
div>
<script src="./vue.js">script>
<script>
var vm = new Vue({
el: '#app',
data: {
selected: ''
}
});
script>
下拉框数据绑定：
- select 的值来源于被选中的opetion的value值; 如果下拉框的
option标签中没有属性，被选中的值就是中的值- 显示默认的option 默认option的value和select初始值一致即可.
- disabled 不能选择
- 如果要选择多个:multiple 属性
<body> <div id='app'> <select name="city" v-model="citys" multiple> <option value='重庆'>重庆option> <option value='合川'>合川option> <option value='铜梁'>铜梁option> <option value='北京'>北京option> select> <h1>选择的结果：{{citys}}h1> <hr color="red" /> <div id='app'> <select name="city" v-model="city"> <option value='' disabled>--请选择--option> <option value='重庆'>重庆option> <option value='合川'>合川option> <option value='铜梁'>铜梁option> <option value='北京'>北京option> select> <h1>选择的结果：{{city}}h1> div> <script> new Vue({ el: '#app', data: { citys: [], city: '' } }) script> body>[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RwWOtCjL-1604650785005)(http://note.youdao.com/yws/public/resource/3fe4af9b48fabe377813a832d097bb4d/xmlnote/6A7D7B6D304442E38447E1AB38859BB9/18809)]
2.5 值绑定
<div id='app'>
<label v-for="(item,index) in citys" :for="item">
<input type="checkbox" :id="item" :value="item" v-model="city"/>{{item}}
label>
<h1>你选择的城市:{{city}}h1>
div>
<script>
new Vue({
el: '#app',
data: {
citys: ['重庆','合川','铜梁','旧县','十塘'],
city: []
}
})
script>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GR20KQEO-1604650785007)(http://note.youdao.com/yws/public/resource/3fe4af9b48fabe377813a832d097bb4d/xmlnote/5BD117641E6E4AD493AE57BC9557B1CC/18811)]
2.6 v-model修饰符
3 (掌握)组件Componet
我个人任务组件作为模块开发准备前提之一。因为还会涉及到route路由。在vue中组件可以分为局部组件和全局组件(过滤器也是一样).设计原则：单一职责原则。自己负责自己那点事情。组件还体现了复用性。
处理组件化，还有模块化 在实际项目中运用到的。
3.1 组件基本使用
创建组件构造器------>注册组件------->使用组件
- 全局组件
<div id='app'>
<spanx>spanx>
<hr />
<xxxx>xxxx>
div>
<script>
//全局组件:
//vue2.x写法:
const temp2 = Vue.extend({
template: "xxxyyyy
"
})
Vue.component("xxxx", temp2);
//====>另一种写法: 语法糖写法
const temp = {
template: 'xxxxxsssssxxxx
'
}
Vue.component("spanx", temp)
new Vue({
el: '#app',
data: {
},
methods: {
}
});
script>
- 局部组件
<div id='app'>
<xyz>xyz>
div>
<script>
const tempA = {
template:"xxxxxyyyyzzzzz
"
}
new Vue({
el: '#app',
data: {
},
components:{
//组件名称 : 对象
"xyz":tempA
},
methods: {
}
});
script>
<div id='app'>
div>
<script>
new Vue({
el:'#app',
data:{
},
methods:{
}
})
script>
3.2 父组件和子组件
<div id='app'>
<com-b>com-b>
div>
<script>
const comA = {
template:"comA我是子组件"
}
const comB = {
template:`
comB我是父组件
- 模板在命名的时候如果使用的是驼峰命名规则，在写标签的时候大写的字母小写然后使用"-"进行连接.比如：comB ——>
- 模板里面的标签需要一个根标签。
<body>
<div id='app'>
<my-span>my-span>
<hr/>
<my-apple>my-apple>
div>
<template id='myspan'>
<div>
<h1>
我是模板标题
h1>
<p>我是内容。xxxxxxp>
div>
template>
<script src="js/vue.js">script>
<script>
//-----------------start
// 个人觉得这种比较方便一点
const mytemp = {
template:`
标题
内容
`
}
Vue.component('myApple',mytemp);
//-----------------end
new Vue({
el: '#app',
data: {
},
components: {
'mySpan':{
template:'#myspan'
}
},
methods: {
}
});
script>
body>
组件的options:
- template 组件模板
- components；用于注册子组件
- data 存放组件的数据
- methods
- props:可以是数组类型 ,可当着组件的属性，组件标签中使用绑定该属性
:moves='vue实例中data中的数据',写对象。可以限定属性的类型.还可以提供一些默认值<body> <div id='app'> <com-b>com-b> div> <script src="js/vue.js">script> <script> const comA = { template:`我是模板cOMa` } const comB = { template:``, components:{ 'comA':comA }, data(){ return { count:0 } }, methods:{ add(){ this.count++; } } } Vue.component('comB',comB); new Vue({ el: '#app', data: { }, methods: { } }); script> body>我是模板cOMb
数量:{{count}}
3.3 父子组件通信
- 如何进行父子组件间的通信呢？Vue官方提到
- 通过props向子组件传递数据
- 通过事件向父组件发送消息
父组件向子组件传值
vue实例是我们的根组件root组件
- props 数组类型
<body>
<div id='app'>
<temp-a :cmoves='moves'>temp-a>
div>
<script src="js/vue.js">script>
<script>
const tempA = {
template:`
- {{item}}
`,
props:['cmoves']
}
new Vue({
el: '#app',
data: {
moves:['王者荣耀','庆余年','斗罗大陆','斗破苍穹']
},
components:{
tempA
},
methods: { }
});
script>
body>
- props 如果是对象类型，可以限定属性的类型
<body>
<div id='app'>
<temp-a :cmoves='moves'>temp-a>
div>
<script src="js/vue.js">script>
<script>
const tempA = {
template:`
- {{item}}
`,
//类型限制
props:{
cmoves:Array
}
}
new Vue({
el: '#app',
data: {
moves:['王者荣耀','庆余年','斗罗大陆','斗破苍穹']
},
components:{
tempA
},
methods: { }
});
script>
body>
- props 限定类型、给出默认值、要求必须传入参数
<body>
<div id='app'>
<temp-a :cmoves='moves' :cmsg='msg'>temp-a>
div>
<template id='mytemplate'>
<div>
<ul>
<li v-for='item in cmoves'>{{item}}li>
ul>
<h1>{{cmsg}}h1>
div>
template>
<script src="js/vue.js">script>
<script>
const tempA = {
template:'#mytemplate',
//类型限制
// props:{
// cmoves:Array
// }
// 类型是对象或者数组时, 默认值必须是一个函数
props:{
cmsg:{
type:String,
default:"hello vue",
required:true
},
cmoves:{
type:Array,
default(){
return []
}
}
}
}
new Vue({
el: '#app',
data: {
moves:['王者荣耀','庆余年','斗罗大陆','斗破苍穹'],
msg:"学习vue"
},
components:{
tempA
},
methods: { }
});
script>
body>
- props驼峰命名规则: 如果props里面的属性是驼峰命名规则，那么在绑定属性的时候需要把大写字母变小写，同时用’-'进行连接.比如:（伪代码）
<temp-a :c-msg='msg'>temp-a> <script> props:{ cMsg:String } script>
- 需要注意:组件中的template中必须要有一个根组件
子组件向父组件传值
通过自定义事件。this.$emit(自定义事件名,参数)
<body>
<div id='app'>
<temp @get-project-info='getInfo'>temp>
div>
<template id='mytemp'>
<div>
<button v-for="item in categories" @click="getInfo(item.id)">{{item.name}}button>
div>
template>
<script src="js/vue.js">script>
<script>
const temp = {
template:'#mytemp',
data(){
return {
categories:[
{id:'001',name:'手机数码'},
{id:'002',name:"流行服装"}
]
}
},
methods:{
getInfo(value){
//$emit事件传递
//事件的名称自定义, value就是我们要传递给父组件的值
this.$emit('get-project-info',value);
}
}
}
new Vue({
el: '#app',
data: {
moves:['王者荣耀','庆余年','斗罗大陆','斗破苍穹'],
msg:"学习vue"
},
components:{
temp
},
methods: {
getInfo(value){
console.log("子组件传递的值："+value)
}
}
});
script>
body>
