目录
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、实现已勾选的商品数量的更改之减法
十三、总结
补充：查看错误提示
335
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
