Vue学习day03(vscode)

一、计算属性
1.1计算属性的本质
fulliname:{set(),get()}
1.2计算属性和methods对比
计算属性在多次使用时只会调用一次，
它是有缓存的

二、事件监听
2.1事件监听的基本使用
2.2参数问题
btnClick
btnClick(event)
btnClick(abc,event)->$event
2.3修饰符
.stop
.prevent
.enter
.once
.native

三、条件判断
3.1 v-if/v-else-if/v-else
3.2 登录小案例
3.3 v-show和v-if的区别

四、循环遍历
4.1遍历数组
4.2遍历对象
value
value，key
value，key，index
4.3数组那些方法是响应式的
4.4作业完成

五、书籍案例

六、v-model的使用
6.1v-model的基本使用
v-model => v-bind:value v-on:input
6.2v-model和radio和checkbox和select
6.3修饰符
lazy
number
trim

七、组合化开发
7.1认识组件化
7.2组件的基本使用
7.3全局组件和局部组件
7.4父组件和子组件
7.5组件注册的语法糖
7.6模板的分离写法
script
template
7.7数据的存放
子组件不能直接访问父组件
子组件中有自己的data而且必须是一个函数
为什么必须是一个函数
7.8父子组件的通信
父传子：props
子传父：$emit
7.9项目
npm install
npm run serve

1.JS高阶函数的使用(filter/map/reduce)

//函数式编程（第一公民：函数）
给出一个数组:
const nums = [10,20,111,222,444,30,50];
1.需求去除所有小于100的数字
2.将所有小于100的数字进行转化：全部*2
3.将所有new2nums里的数字相加，得到最终结果
普通写法:

//1.需求去除所有小于100的数字
let newnums = [];
for(let n of nums){if(n<100){newnums.push(n);}
}//2.将所有小于100的数字进行转化：全部*2
let new2nums = [];
for(let n of newnums){new2nums.push(n*2);
}//3.将所有new2nums里的数字相加，得到最终结果
let total = 0;
for(let n of new2nums){total += n;
}

运用高阶函数：

//filter函数：
//filter中的回调函数有一个要求：必须返回一个boolean值
//true:当返回true时，函数内部会自动将这次的回调的n加入到新的数组中
//false:当返回值为false时，函数内部会过滤掉这次的n
let newnums =  nums.filter(function(n){return n<100;
});//map函数：
let new2nums = newnums.map(function(n){return n*2;
});//newnums: 10 20 30 50
console.log(newnums);
//reduce函数:
//reduce作用对数组中所有的内容进行汇总
let total = newnums.reduce(function(prevalue,n){return prevalue+n;
},0);console.log(total);

将函数写的整洁一点,让人一目了然

let sum = nums.filter(function(n){return n<100;
}).map(function(n){return n*2;
}).reduce(function(prevalue,n){return prevalue+n;
},0)

箭头函数的写法

let total1 = nums.filter(n => n<100).map(n => n*2).reduce((pre,n) => pre+n);
console.log(total1)

2.v-model的基本使用和原理
基本使用：

<div id="app"><!-- 双向绑定，修改message值时input内容改变；改变input内容，message也改变 --><input type="text" v-model="message"><h2>{{message}}</h2>
</div>

v-model的原理：

<body>
<div id="app">//1.<input type="text" v-model="message"><h2>{{message}}</h2>//2.<input type="text" :value="message"  @input="valuechange">//3.<input type="text" :value="message" @input = "message = $event.target.value"></div>
</body>
<script>let app = new Vue({el:'#app',data:{message:'Hello World'},methods: {valuechange(event){this.message = event.target.value;}},})
</script>

1.使用v-bind绑定了value和message，当在控制台改变message的值时，输入框内的值也跟着改变
2.绑定了value和message，同时使用v-on添加input事件，绑定方法valuechange，在没有写()的情况下默认传入event事件，在valuechange内将message值更新为输入框内的值
3.直接在@input后跟上表达式，通过$获取event

3.v-model结合radio的使用


<body>
<div id="app"><label for="male"><!-- v-modle绑定同一个变量也可以让两个选择框只能同时选择一个值，代替了name="sex" --><!-- 且当给sex变量赋初值为radio中的某一个value值时，就会默认选中那个radio --><input type="radio" id="male"  value="男" v-model="sex">男</label><label for="female"><input type="radio" id="female"  value="女" v-model="sex">女</label><h2>您选择的性别是:{{sex}}</h2>
</div>
</body>
<script>let app = new Vue({el:'#app',data:{message:'Hello World',sex:'女',}})
</script>

v-modle绑定同一个变量也可以让两个选择框只能同时选择一个值，代替了name=“sex”
且当给sex变量赋初值为radio中的某一个value值时，就会默认选中那个radio

4.v-model结合checkbox的使用


<body>
<div id="app"><!-- 单选框 --><label for="license"><input type="checkbox" id="license" v-model="isAgree">同意协议</label><h2>您选择的是{{isAgree}}</h2><button :disale="!isAgree">下一步</button><!-- 多选框 --><label for=""><input type="checkbox" value="篮球"  v-model="habbit">篮球<input type="checkbox" value="足球"  v-model="habbit">足球<input type="checkbox" value="乒乓球" v-model="habbit">乒乓球<input type="checkbox" value="羽毛球" v-model="habbit">羽毛球<input type="checkbox" value="排球"  v-model="habbit">排球</label><h2>您的爱好是：{{habbit}}</h2>
</div>
</body>
<script>let app = new Vue({el:'#app',data:{message:'Hello World',isAgree:false, habbit:[],isCheck:false,}})
</script>

注意：单选框绑定boolean，多选框绑定数组

5.v-model与select的结合
选择一个：


<body>
<div id="app"><!-- 1.选择一个 --><select name="abc" id="" v-model="fruit"><option value="defalut" >/</option><option value="苹果" >苹果</option><option value="香蕉" >香蕉</option><option value="梨子" >梨子</option><option value="桃子" >桃子</option></select><h2>您选择的是：{{fruit}}</h2><!-- 2.选择多个 --><select name="abc" id="mutli" v-model="fruits" multiple><option value="defalut" >/</option><option value="苹果" >苹果</option><option value="香蕉" >香蕉</option><option value="梨子" >梨子</option><option value="桃子" >桃子</option></select><h2>您选择的是：{{fruits}}</h2>
</div>
</body>
<script>let app = new Vue({el:'#app',data:{message:'Hello World',fruit:"香蕉",fruits:[],}})
</script>

6.input中的值绑定

<body>
<div id="app"><h2>您的爱好是：{{habbit}}</h2><label v-for="item in originHobbies" :for="item"><input type="checkbox" :value="item" :id="item" v-model="habbit">{{item}}</label></div>
</body>
<script>let app = new Vue({el:'#app',data:{message:'Hello World',isAgree:false, habbit:[],isCheck:false,originHobbies:['篮球','足球','乒乓球','羽毛球','排球','高尔夫球'],}})
</script>

这样子可以动态的更改复选框的内容，更容易管理更新,代码更简洁。

7.v-model的修饰符(lazy,number,trim)

<body>
<div id="app"><!-- 1.修饰符：lazy --><!-- 不会用户敲一个就更新一下，或等用户输入完之后再更新，可以防止更新频率过高 --><input type="text"  v-model.lazy="message"><h2>{{message}}</h2><!-- 2.修饰符：number --><!-- 将输入框的内容绑定到age的同时，转换为number类型，如果不加的话，再输入值会变成string类型 --><input type="number" v-model.number="age"><h2>{{age}}-{{typeof age}}</h2><!-- 3.修饰符：trim --><!-- 去掉输入内容的前面和后面的空格 --><input type="text" v-model.trim="name"><h2>{{name}}</h2>
</div>
</body>
<script>let app = new Vue({el:'#app',data:{message:'Hello World',age:18,name:"",}})
</script>

1.修饰符：lazy -->
不会用户敲一个就更新一下，或等用户输入完之后再更新，可以防止更新频率过高
2.修饰符：number
将输入框的内容绑定到age的同时，转换为number类型，如果不加的话，再输入值会变成string类型
3.修饰符：trim
去掉输入内容的前面和后面的空格

8.组件化的基本使用


<div id="app"><my-cpn></my-cpn><my-cpn></my-cpn><my-cpn></my-cpn><my-cpn></my-cpn>
</div>
</body>
<script>//ES6`abc`//可以换行//1.创建组件构造器对象const cpnC = Vue.extend({template:`<div><h2>我是标题</h2><p>我是内容1</p><p>我是内容2</p></div>`});//2.注册组件  // Vue.component('组件标签名',组件)Vue.component('my-cpn',cpnC);//3.使用组件const app = new Vue({el:'#app',});</script>

9全局组件和局部组件
全局组件：

<body>
<div id="app"><h2>{{message}}</h2><cpn></cpn>
</div><div id="app2"><cpn></cpn>
</div>
</body>
<script>//1.创建组件构造器const cpnC = Vue.extend({template:`<div><h2>我是标题</h2><p>我是内容</p></div>`});//2.注册组件（全局组件,意味着可以在多个Vue的实例下面使用）Vue.component('cpn',cpnC);//疑问：怎么注册的组件才是局部组件？const app2 = new Vue({el:'#app',data:{message:'Hello World'},})const app = new Vue({el:'#app2',data:{message:'Hello World'}})
</script>

两个div内的标签都可以使用

局部变量：（在Vue实例里面写components:{}）

//疑问：怎么注册的组件才是局部组件？const app2 = new Vue({el:'#app',data:{message:'Hello World'},components:{//cpn使用组件时的标签名cpn:cpnC}   })

只有在app的div里才生效

10.父组件和子组件的区分


<body><div id="app"><cpn2></cpn2>
</div>
</body><script>
//子组件const cpnC1 = Vue.extend({template:`<div><h2>我是标题1</h2><p>我是内容1</p></div>`});//父组件const cpnC2 = Vue.extend({template:`<div><h2>我是标题2</h2><p>我是内容2</p><cpn1></cpn1></div>`,components:{cpn1:cpnC1,}});//root组件const app = new Vue({el:'#app',data:{message:'Hello World'},components:{cpn2:cpnC2,}})
</script>

如果不改变srcrpt标签里的内容，仅在div里加上

会报错:

为什么会报错呢？因为在解析过程中，会先去找Vue实例app中的comonents里面是否有注册cpn1，如果没有则去全局找有么有注册cpn1，所以在这里都没有找到，就会报错。
解析的时候，解首先去app里面找，找到后解析template里的内容，此时cpn2里cpn1的内容也都会解析完毕。

11.注册组件的语法糖写法
1.全局组件注册的语法糖：
省去了Vue.extend({})的步骤，直接注册，并将组件直接写在里面

//2.注册组件  // Vue.component('组件标签名',组件)Vue.component('cpn1',{template:`<div><h2>我是标题</h2><p>我是内容1</p><p>我是内容2</p></div>`});

2.注册局部组件的语法糖：

    const app = new Vue({el:'#app',components:{'cpn2':{template:`<div><h2>我是标题22</h2><p>我是内容</p><p>我是内容</p></div>`},},});

直接将组件写在里面。

12.组件模板抽离的写法
两个方法：
1.

<div id="app"><cpn1></cpn1><cpn2></cpn2>
</div>
</body><!-- 1.script标签：类型必须是text/x-template -->
<script type="text/x-template" id="cpn"><div><h2>我是标题</h2><p>我是内容1</p><p>我是内容2</p></div>
</script><!-- 2.template标签 -->
<template id="cpn2"><div><h2>我是标题</h2><p>我是内容1</p><p>我是内容2</p></div></template><script>//1.全局组件注册的语法糖//1.创建组件构造器const cpnC = Vue.extend({// template:'#cpn',template:'#cpn2',});const app = new Vue({el:'#app',components:{'cpn2':cpnC},});</script>

13.组件中的数据存放问题
组件不能访问Vue实例数据，而且即使可以访问，如果将所有的数据都放在Vue实例中，Vue实例就会变的非常臃肿。
结论：Vue组件应该有自己保存数据的地方。

组件自己的数据存放在哪里呢?
组件对象也有一个data属性(也可以有methods等属性)
只是这个data属性必须是一个函数
而且这个函数返回一个对象，对象内部保存着数据

<body>
<div id="app"><cpn2></cpn2>
</div>
</body><template id="cpn2"><div><h2>{{title}}</h2><p>我是内容1</p><p>我是内容2</p></div>
</template><script>Vue.component('cpn2',{template:'#cpn2',data() {return {title:'abc',}},})const app = new Vue({el:'#app',});
</script>

14(*)为什么组件中的data必须是函数？

首先，如果不是一个函数，Vue直接就会报错。
其次，原因是在于Vue让每个组件对象都返回一个新的对象，因为如果是同一个对象的，组件在多次使用后会相互影响。

15.父子组件的通信-父传子（props）

<body><div id="app"><cpn v-bind:cmovies="movies" :cmessage="message"></cpn></div>
</body> <template id="cpn"><div><ul><li v-for="item in cmovies">{{item}}</li></ul></div></template>
<script>const cpn = {template:'#cpn',//props:['cmovies','cmessage'],props:{// 1.在数据传入时进行数据类型约束//cmovies:Array,//2.提供一些默认值cmessage:{type:[String,Number],//多个可能的类型default:'aaa',requried:true,//在用这个组件的时候必须传入这个变量的值},//类型是对象或者是数组时，默认值必须是一个函数cmovies:{type:Array,cmovies:{return:[],}},//自定义类型author:Person,//自定义验证函数Selfdefine:{validator:function(value){//这个值必须匹配下列字符串中的一个return ['success','warning','danger'].indexOf(value) !== -1}}},methods: {},};const app = new Vue({el:'#app',data:{message:'你好啊',movies:['海王','海贼王','海尔兄弟']},components:{cpn:cpn,}});
</script>

不知道这个自定义验证函数怎么用（偷了个代码看看）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="../../vue.js"></script>
</head>
<body><div class="app"><!-- 父组件向子组件传递方法，使用的是事件绑定机制，v-on 当我们自定义一个事件属性之后，那么子组件就能够通过某些方法来调用，传递进去的这个方法了 --><log v-bind:dataflog="msg" @funcshow="show" ></log></div><template id="log"><div><h1>这是子组件界面----{{dataflog}}</h1><input type="button" @click="myclick" value="父组件传递过来的方法 子组件接收"></div></template><script>var vm=new Vue({el:'.app',data:{msg:'看到数据了嘛'},methods: {// 父方法接受参数show(a){console.log(a.name+'父组件方法');},},components:{log:{template:'#log',props:['dataflog'],data(){return {duwei:{name:'duwei',age:30}}},methods: {myclick(){// console.log('ok');// 当点击子组件按钮的时候，如何拿到父组件传递过来的func 方法，并调用呢？// emit英文愿意：是触发调用 发射的意思。// this.$emit('funcshow')// emit传递父组件中的方法，并且子组件向父组件传递消息// this.$emit('funcshow',123,345)this.$emit('funcshow',this.duwei);},},},}})</script>
</body>
</html>

16.组件通信-父传子（props）驼峰标识
在大写字母前小写单词-小写单词就对了，脚手架用驼峰写法就没有问题

17.组件通信-子传父（自定义事件）

<body><!-- 父组件模板 --><div id="app"><cpn @btnclick="cpnclick"></cpn></div>
</body> <!-- 子组件模板 -->
<template id="cpn"><div><button v-for="item in categories" @click="itemClick(item)">{{item.name}}</button></div>
</template>
<script>// 子组件const cpn ={template:'#cpn',data(){return {categories:[{id:'aaa',name:'热门推荐'},{id:'bbb',name:'手机数码'},{id:'ccc',name:'家勇家电'},{id:'ddd',name:'电脑办公'}]}},methods: {itemClick(item){//发射事件:自定义事件this.$emit('btnclick',item)},},  }
//父组件const app = new Vue({el:'#app',data:{message:"hello",},components:{cpn},methods:{cpnclick(item){console.log(item);}}});
</script>

Vue学习day03(vscode)相关推荐

Vue学习7-MinUI组件与项目托管到码云上
上一篇 Vue学习6-(webpack发布策略) 下一篇 Vue学习8-项目实战一:完成header.tabbar区域.路由组件切换与轮播图功能 MinUI组件与码云一.使用render函数渲染组件 ...
Vue学习笔记（三）Vue2三种slot插槽的概念与运用 | ES6 对象的解构赋值 | 基于Vue2使用axios发送请求实现GitHub案例 | 浏览器跨域问题与解决
文章目录一.参考资料二.运行环境三.Vue2插槽 3.1 默认插槽 3.2 具名插槽 3.3 作用域插槽 ES6解构赋值概念 & 作用域插槽的解构赋值 3.4 动态插槽名四.GitHu ...
[Vue]学习笔记目录【Vue2与Vue3完结】 (尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通)
文章目录前言遇见的问题及其解决方案之前笔记 Vue2 Vue3 前言本笔记根据如下笔记和视频进行整理老师的课件笔记,不含视频 https://www.aliyundrive.com/s/B8 ...
前端Vue学习之路(二)-Vue-router路由
Vue学习之路 (二) Vue-router(基础版) 一.增加静态路由二.动态路由+路由嵌套+404页面三. 编程式导航四.命名路由五.命名视图六.重定向和起别名 1.重定向 2.起别名 ...
前端Vue学习之路(一)-初识Vue
Vue学习之路 (一) 1.引言 2.更换npm国内镜像源 3.用npm下载Vue 4.Vue全家桶 5.使用命令创建项目 5.推荐插件 6.推荐网站 7.学习扩展 1.引言先安装node.js环境 ...
菜鸟Vue学习笔记（三）
菜鸟Vue学习笔记(三) 本周使用了Vue来操作表单,接下来说下Vue中双向绑定表单元素的用法. Vue中双向绑定是使用的v-model,所谓的双向绑定即改变变量的值,表单元素的值也会改变,同样的,改 ...
好程序员Web前端教程分享Vue学习心得
为什么80%的码农都做不了架构师?>>> 好程序员Web前端教程分享Vue学习心得,Vue是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向 ...
Vue学习(一)-邂逅Vuejs
Vue学习(一)- 邂逅Vuejs 零.视频链接一.邂逅Vuejs 1.认识Vuejs 1.1 为什么学习Vuejs 1.2 简单认识一下Vuejs 2.Vuejs安装方式 2.1 CDN引入 2. ...
Vue 学习第八天
Vue 学习第八天 1. 了解了回掉函数的使用,了解了文件的读取, 2.Promise 函数讲解 console.dir(Promise) //Promise 函数讲解 //1.其是一个构造函数,既 ...
Vue 学习第六天学习笔记
Vue 学习第六天学习笔记 1.webpack 使用复习第一步:先建立文件夹. 第二步,用webpack将其初始化,建立管理.npm 的包管理工具管理起来, npm init -y .注意{查 ...

Vue学习day03(vscode)

Vue学习day03(vscode)相关推荐

最新文章

热门文章