目录
4、案例(对象格式的侦听器):自动触发一次用immediate:true
六、vue-cli,简化了基于webpack创建工程化的vue项目的过程
5、el:'#app'属性与.$mount('#app')效果一样
八、组件中的props:自定义属性,为当前组件指定初始值,提高组件的复用性
6、数组中的props和对象中的props定义初始值和默认值的区别:
3、this.$nextTick(cd);//使cd延迟,直到页面渲染完成
7、为Goods组件封装price属性和state属性(与6、相似步骤)
一、vue2.0简介
1、vue的两个特性:
2、MVVM
3、初步使用vue的案例:
4、vue的指令
(1)内容渲染指令:
(2)属性绑定指令:给属性绑定值
注意:插值表达式{{ }}只能用在内容节点,不能用在属性节点。
①在vue中,可以使用v-bind :指令,为元素的属性动态绑定值;简写是 :
案例如下:
②
(3)事件绑定指令v-on:或@
a:案例(实现点击+1按钮,count的值是+1的):
完整写法示范:
推荐简写示范:
注意:不推荐vm.count +=1,推荐使用this.count +=1,因为this===vm。
b:绑定事件的传参,用():
c:v-on:指令可以简写为@
d:传参之$event:不加()默认有e;加()中有一个值eg:n,则没有e;()有n和$event,位置可互换,不会覆盖。注意:$event不常用。
e:事件修饰符:
案例1.(阻止默认行为)(点击a链接,但是不跳转,要提示出“点击了a链接”):
之前学的写法:
现在学的:
案例2(停止冒泡):
以前做法:
现在做法:
f:按键修饰符:
案例:按esc键,清空数据
(4)双向(数据)绑定指令 v-model,注意:表单元素用v-model才有意义
案例1(input的v-model):
案例2(<select>的v-model):注意:v-model要写在<select>中,不写在<option>中。
v-model的修饰符:
案例(v-model.number):
案例(v-model.trim):
(5)条件渲染指令:
a:v-if v-show
注意:在实际开发中,不用考虑性能问题,绝大多数直接用v-if,下面原理是面对面试官说的。
案例:
其中data数据有flag=true,
b:v-if v-else-if v-else
(6)列表渲染指令v-for
理论:
索引:
实操:
运行结果:
注意:
注意:
5、vue的指令的案例演示
(1)案例效果:
(2)代码:
总体大框架:
显示列表界面代码如下:
第①步:先把数据写死,把html界面写了
第②步:写vue部分
第③步:根据vue把html中的数据进行改写
第④步:
出现问题:点击2,3按钮,本身2,3按钮不改变,只改变1按钮
解决问题:id每一轮要不一样才行,所以一下操作:
删除品牌的代码如下:
第⑤步:(需要绑定事件)
添加品牌的代码如下:
第⑥步:
先写固定的html
里面写:
根据vue改写代码:
上面的清空指的是,添加完之后,输入框清空;
添加完效果如下:
二、过滤器(vue2.0适用,vue3.0去掉了)
1、过滤器概念:
2、过滤器知识点:
3、实操(过滤器):首字母大写输出字符串案例
4、私有过滤器和全局过滤器
注意:重点掌握全局过滤器,很少适用私有过滤器。
5、案例(过滤器):时间格式化
要求:把下图的时间进行格式化
代码实现:
实现效果:
6、过滤器的其他用法
①多个过滤器使用
②过滤器参数
三、watch侦听器
侦听器:监听数据变化所做的特定的操作
1、watch侦听器的基本用法:
2、案例(侦听器):判断用户名是否被占用
3、侦听器格式
4、案例(对象格式的侦听器):自动触发一次用immediate:true
要求:刚进去就判定用户名是否被占用(刚进去就触发),用immediate:true
5、案例:对象中的属性被监听
①种:watch节点中的写对象(){},用deep:true太麻烦
②种:watch节点里直接对象的属性(){},更简便
四、计算属性
1、案例(不用计算属性):实现颜色与数值自动随之改变
代码实现:
2、案例(用计算属性):实现颜色与数值自动随之改变
在1、案例的基础上进行改进,即在上一个案例中进行改进:
3、计算属性知识点:
五、axios专注于网络请求的库
1、axios发起的基本的请求:
简化:
2、GET请求,参数用params:{}
3、POST请求,参数用data:{}
①返回为promise类型,用.then
②简化:用await,就不用.then了
4、解构赋值 { }
案例1:
案例2:
5、在本文章中写的“真实数据”和“数据列表”的解释:
6、axios.get
7、axios.post
六、vue-cli,简化了基于webpack创建工程化的vue项目的过程
0、前提:单页面应用程序
注意:工程化创建的vue项目中只能有一个html页面,即在public文件夹中的index中写。
1、安装与使用,可查看vue cli官网
安装:npm install -g @vue/cli
安装完毕:用vue -V命令检测是否安装成功
2、基于vue-cli快速生成工程化的vue项目的步骤
第①步:首先在目录的地址栏了,全选,回车,进入该目录终端
第②步:在终端输入命令vue create 项目的名称(最后用英文,不要有空格)
第③步:出现界面,选择第三个选项,回车 arrow表示上下箭头的意思
第④步:进入界面,*为勾选,勾选即点击空格键blank,勾选如下结果
第⑤步:其中有省略步骤,跟随提示执行就可以
第⑥步:输入y即下次,不用继续以上操作了,然后存储名为预设名;输入n,下次得重新重头开始操作——看自己,y/n都行
第⑦步:在等待过程中,鼠标不要动,动就会冻结,冻结之后可以点击窗口再Ctrl C就可
第⑧步:项目成功创建,两个命令(先1,后2)让项目跑起来
第⑨步:显示界面,表示正在监听,并且在浏览器输入该地址
第⑩步:若不小心把监听页面关了,可以用npm run serve命令使项目跑起来
第十一步:注意,要装包,不装包,npm run serve是跑不起来的
补充:装包步骤如下
①npm i
②npm run serve
③根据终端上的提示网址,进入浏览器界面
3、vue项目中src目录的构成
4、vue项目的运行过程
理解:
5、el:'#app'属性与.$mount('#app')效果一样
案例1:在工程化的vue项目的main.js中的vue实例对象中
案例2:在普通的html文件中
6、vue的根组件:根组件就是页面显示的界面
七、vue组件
组件(.vue):是对UI结构的复用
1、组件的构成:
注意:在<template>里面只能有一个根节点
2、简单创建组件的使用:
3、组件的知识点:
.vue文件中的要写行为(数据、方法、函数)在<script>中写如下的内容:
4、关于less的使用:
5、组件之间的父子关系:
只有使用组件,才会有父子关系,兄弟关系
6、使用组件的三个步骤:
7、插件:在VScode中配置@路径提示的插件
做法:在code软件中:首先下载①;再点击②设置图标,点击“设置”;再点击③,就会出现settings.json文件;再头部的“{”之下填写④的内容;配置完成
效果:在VScode中配置@路径提示的插件
8、私有子组件和全局组件
(1)通过components注册的组件为私有子组件:
(2)注册全局组件:反复频繁使用的.vue可以注册为全局变量
9、插件:自动闭合标签的插件,敲一个<biaoqian>,自动出现</biaoqian>
此插件不用配置,安装完直接用
八、组件中的props:自定义属性,为当前组件指定初始值,提高组件的复用性
意义:提高组件的复用性
1、补充之前:
简便:方法中只有一行代码,可以如图:直接写在划线的位置
2、简单的props使用案例:
注意:不知道这里的@click=“count+=1”对不对,不用看这部分,就看画的部分理解如何用的就行
3、注意:结合v-bind使用props的自定义属性
<MyCount init=“6”>中的6为字符串.
v-bind的为js代码,即<MyCount :init=“6”>中的6为数字——实现了v-bind为属性init绑定了一个值.
注意补充:<MyCount :init=“'6'”>中的'6'才为字符串(因为有单引号).
4、关于props为只读,不能修改数据的解决办法:
把自定义属性的初始值传给data中:因为props为只读,不能修改,若修改虽然值也会改但是会报错;而data中的数据是可以修改的,可以把自定义属性的初始值(即接收到的值)弄到data中。
5、props的default默认值
6、数组中的props和对象中的props定义初始值和默认值的区别:
数组中的props只能定义初始值,不能定义默认值
对象中的props即可以定义初始值,又可以定义默认值
7、props的type值类型:
8、props的required必填项
注意:只校验使用者是否写了符合值类型的init的初始值,若没有则报错;若props中有默认值,但使用者没有写初始值,则也报错。
9、组件中的样式冲突问题
(1)组件中的样式冲突:
(2)组件中样式冲突的解决办法:
①正常思路的方法:在每一个.vue组件的标签中都加一个自定义属性data-v-xx..x,一个vue组件用相同的一个data-v-xx..x,不同组件不同data-v-xx..x。样式采用属性形式,eg:h3[data-v-001]{ color:red;}
注意:此自定义属性不为propos的自定义属性初始化,注意区分,这里的自定义属性data-v-xx..x表示多了一个样式用的属性。
√√√简便方法:在<style>中添加一个属性scoped,会自动生成data-v-xx..x,也不用h3[data-v-001]{ color:red;}了,scoped会自动添加,我们平常写就行eg:h3{ color:red;}
正常写样式,例如:
②若在父vue中实现子vue的样式,需要/deep/ h5{ color :red; }
父scoped
补充:
③总结:
九、组件的生命周期
0、组件的生命周期:
以下案例都写在Test.vue中:
1、beforeCreate和created生命周期函数:
①测试beforeCreate和created的功能:
②用Ajax来请求数据的案例:
③实现页面显示几本图书的案例:
提示:把Ajax请求到的数据,存到data里,页面才能访问到数据。
④测试created的时候是否能够操作dom案例:
因为created阶段模板结构还未生成,即还没有渲染页面,所以不能操作dom
⑤总结beforeCreate和created:
2、beforeMount和mounted生命周期函数:
①创建模板结构的图:
②测试beforeMount的案例:以下语句都没有实现
③测试mounted的案例:
④总结beforeMount和mounted:
3、组件运行阶段的生命周期函数:
十、组件之间的数据共享
1、父向子传值:自定义属性(子)
(另)补充:注意
2、子向父传值:自定义事件
3、兄弟组件数据共享
使用的步骤:
案例:点击按钮把left.vue数据传给right.vue,并打印到页面上
Left.vue中:
Right.vue中与data平级的created,
其中的this.msgFromLeft = val语句表示把数据转存到msgFromLeft字段中。
十一、ref引用
vue不建议使用JQuery,若需要操作DOM,即可用ref引用
1、使用ref引用DOM元素
2、使用ref引用组件实例
案例:
实现效果:
代码:
3、this.$nextTick(cd);//使cd延迟,直到页面渲染完成
案例:让文本框和按钮只一个出现,另一个隐藏,并且要求出现文本框时自动获取焦点
出现的问题:若this.$refs.intRef.focus(),则报错,
是因为console.log(this.$refs.intRef)=undefined,是因为自动获取焦点的时候页面文本框只是值变了,但是页面文本框还没渲染出来,现在是beforeUpdate节点。
解决办法:所以需要延迟this.$nextTick(cd)执行文本框,才能到达自动获取焦点。
4、复习:数组中的方法:
①forEach循环、some循环
②every循环
案例中表示被选中的字段为state:true,如果全选输出true,不是全选输出false
③reduce循环:相当于累加器
reduce循环的简写:
十二、购物车案例
1、案例效果:
2、首先
首先先装包node_modules;再跑项目npm run serve,再点击链接进入浏览器;
先导入组件、注册组件、使用组件标签;
先创建头部
3、用axios来请求列表数据(counter组件中的)
步骤:
4、请求回来的数据要转存data中
5、循环遍历数据列表(即Goods组件)
问题:布局都一样(因为Goods.vue中的html代码都写死了)
6、把Goods.vue中的值动态绑定
效果:
7、为Goods组件封装price属性和state属性(与6、相似步骤)
上图中的复选框中的check属性用的是v-bind,不能用v-model,是因为state为props只读的。
8、实现修改购物车勾选状态:
目标实现:子组件Goods.vue向父组件中传值用自定义事件,把子组件中的id和勾选状态state添加到父组件中。
①定义商品id,并把id渲染到商品列表中。
②如何修改购物车勾选状态的思路图:
③代码:
父组件监听子组件:
防止按钮出现错乱:
9、foot界面全选按钮的实现
①用计算属性来弄购物车“全选”勾选按钮
测试:动态计算的全选勾选按钮是否实现。
②父传子数据,自定义属性:把动态计算的全选勾选按钮的值传给foot.vue
③子传父数据,自定义事件,在子组件foot的界面中点击全选按钮,会实现商品全选;若取消全选,会实现商品不全选
监听事件改变的状态:
10、实现foot界面的合计按钮
①用计算属性动态计算父组件中价格的合计;②把父组件中的合计传给foot中的合计中,父传子数据,自定义属性
11、count组件
Count.vue中的数量在App.vue中,所以父向子传值,App.vue→Goods.vue→Count.vue
①父向子传值:App.vue→Goods.vue
②父向子传值:Goods.vue→Count.vue
12、实现已勾选的商品数量的更改之加法
采用EventBus,把数据从Count.vue组件中传送到App.vue中
13、实现结算按钮:用计算属性+父向子传值App.vue→Footer.vue
14、实现已勾选的商品数量的更改之减法
十三、总结
补充:查看错误提示