前端VUE学习总结（一）
1.v-if和v-show的使用与区别
1.1 v-if
v-if用来控制是否显示包含该元素的块是否显示。接收一个布尔类型的值，为true的时候则显示，为false的时候就不显示。通常与v-else或者v-elseif配合使用。类似于代码中的if-else判断和if-elseif-else判断的使用。
这是if判断中的文本
这是else判断中的文本
如果不显示，在DOM结构中，vue会将该元素直接注释掉。在查看Elements结构的时候。将会看到有一行的内容为注释行“”
1.2 v-show
与v-if相同，都是控制使用的元素是否显示。同样也是接收一个布尔类型的值。与v-if不同，当为false的时候，vue只是将其display设置为了none值。并没有完全将其从DOM中移除。
1.3 两者的使用地方
v-if适合于那种决定性的显示。类似于某些权限下使用到某些功能模块，这个时候就适合使用v-if来控制是否显示。
v-show适合控制那些需要来回显示的内容。
1.4 衍生出的知识点
vue内部的虚拟DOM有一个复用。在切换显示内容的时候。如果两个的DOM结构一样，则vue的虚拟DOM则会优先复用。即替换其中某些值得参数，列如id、value等。这会导致，用户在界面A的input中输入的内容，在界面B输入的时候依然存在。如果希望vue的虚拟DOM不复用input，需要为两个界面的input添加一个key。使用不同的两个v-bind:key的值来标记，这样虚拟DOM就不会去复用有key标记过的元素。
2.v-for的循环遍历
2.1 v-for的基本使用
v-for用于遍历数组，也适合与对象数组。可以适用于需要输出同样的元素结构，但内容不同的界面。例如table中的列，ul或者ol列表中的内容，甚至是个性化定制的div元素界面。
假如我们有这样的一个数组，里面存储了一些水果的名字。那么，可以通过下面的方式使用ul来将其显示。因为我们需要显示多个li，所以我们需要在li元素中加入v-for。
- {{item}}
当我们需要同时显示出，这个数组的下标时，我们就不能只使用item了，需要使用括号。第一个参数依然是我们遍历出来的对象或内容，第二个值为下标。
- {{index}}--{{item}}
2.2 v-for的遍历对象数组
有时候数组可能是对象，此时代表的item就是对象，要像使用对象一样来使用item
这是名字：{{people.name}}
这是年龄：{{people.age}}
2.3 为v-for遍历的内容增加key
数组的内容可能会增加，如果没有为遍历的内容添加v-bind:key，虚拟DOM进行元素添加的时候会不太智能。此时衍生出了虚拟DOM的Diff算法。因此，可以为每一个遍历的内容添加一个不会重复的key。一般为遍历出来的item内容。
2.4 哪些操作数组的方法可以让vue刷新界面
数组的内容除了添加还有删除以及修改。某些对数组的操作会让vue进行响应，因为vue是响应式的。
- 数组的push方法，该方法向数组最后添加一个数组内容
- 数组的pop方法，该方法将删除数组最后一个内容
- 数组的shift方法，该方法将删除数组的第一个内容
- 数组的unshift(item)，该方法将item添加到数组的头部
- 数组的sort方法，该方法可以将数组进行排序
- 数组的reverse方法，该方法将数组内容进行翻转，从尾部排列到头部
- 数组的splice方法，该方法可以插入、修改或者删除数组内容
直接通过数组的下标来修改对应的内容，vue将不会刷新界面。可以使用splice来修改，或者使用vue自带的Vue.set(要修改的对象，索引值，替换的值)来修改。
3.一个案例，结合之前学过的vue知识点
书籍购物车，通过table表格来模拟一个购物车。统合了前期学习的vue知识点，模拟购物功能(增加数量/减少数量)/(按钮的点击功能)，移除功能(数组的操作)，当购物车为空时显示另外的界面(v-if、v-show的使用)，以及统计总价格(computed知识点的使用)
Document
索引
书籍名称
出版日期
价格
购买数量
操作
{{index+1}}
{{book.name}}
{{book.date}}
{{book.price | showPrice}}元
{{book.number}}
总价格：{{Allprice | showPrice}} 元
购物车为空
4.由一个案例所引出的知识点：函数式编程/链式编程
4.1 方法会改变调用对象的内容还是生成新的对象
4.1.1 Object调用的方法会改变自身
以数组为例子，一个数组调用了sort()方法进行了排序。此时不需要新建一个新的变量来接收返回值。sort()方法直接改变了数组的排序。
4.1.2 Object调用的方法不会改变自身
以字符串对象为例子，当使用substring()方法对字符串进行截取的时候，需要定义一个变量来接收新的字符串，此时原先的字符串不会有任何的改变。
4.2 链式编程，就是一连串的方法调用
数组调用方法之后会返回数组，字符串调用方法之后会返回字符串，如果需要对一个变量进行多个方法的调用。比如将一串文字，进行内容翻转。我们需要使用到split()方法对字符串进行分割，再使用reverse()方法进行翻转，再使用join()将其拼接。
我们不需要在每一步都定义一个新的变量来保存结果，我们可以直接使用一行代码。
var newString = "你好啊，陌生人".split('').reverse().join('')当我们使用log打印之后，就是显示这段文字翻转后的内容了。
4.2 高阶函数
现在有一个场景，有一个数组，里面存储了一些数值，没有按大小顺序来排列。现在有一个需求，需要你筛选出其中大于50的值，将这些值乘以2，再求和。
我们需要使用三个变量来存储，第一个变量A用来存储筛选大小后的数组，第二个变量B在变量A的基础上将值都乘以2，第三个变量C在变量B的基础将这些值相加求和。
如果我们使用高阶函数，可以不用定义如此多的变量来完成这个需求。
使用filter()高阶函数来进行特定的筛选，使用map函数来对数组的值进行操作，使用reduce()函数来进行求值。这时候，我们就可以有更容易阅读的方法来实现这个需求，当然，需要知道这三个函数的时候方法为前提。
// filter函数
const num = ['10', '20', '111', '222', '30', '40'];
const newnum1 = num.filter(function(n) {
return n < 100;
})
console.log(newnum1);
// map函数
const newnum2 = newnum1.map(function(n) {
return n * 2;
})
console.log(newnum2);
// reduce函数
const newnum3 = newnum2.reduce(function(previousValue, currentValue, currentIndex) {
console.log('当前操作的下标' + currentIndex, '之前的previousValue的值为：' + previousValue);
return previousValue + currentValue;
}, 0)
console.log(newnum3);
const result = num.filter(function(n) {
return n < 100
}).map(function(n) {
return n * 2
}).reduce(function(previousValue, currentValue) {
return previousValue + currentValue;
}, 0);
console.log(result);5.v-model的使用
5.1 v-model的基本使用和一些控件的交互
在元素中使用v-model来定义数据的双向交互。定义的内容改变会体现在界面上，同时用户更改界面的时候也会改变其内容。
例如使用v-model为一个input输入框对一个message变量进行双向绑定，用户输入的时候可以改变message的值。代码改变message的值时也会体现在输入框中。
5.2 v-model的原理
可以使用v-bind:value对输入框的值进行绑定，这样message的内容也是可以显示在内容中。监听输入事件，当输入框中的内容改变时，更改message的值。这样也相当于实现了双向绑定。
5.3 v-model与其他控件的交互
5.3.1与radio单项选择的交互
每当选中不同的单项内容时，对应绑定的sex都会改变。
您选择的性别是：{{sex}}
{{message}}
5.3.2与checkbox多选框的交互
checkbox的勾选框需要考虑单个与多个的情况，两个情况都不同
是否勾选中：{{isAgree}}
您选择的爱好是：{{hobbies}}
您选择的爱好是:{{newhobbies}}
5.3.3与select的交互
同样也需要考虑单选与多选的情况
您选择的是：{{fruit}}
您选择的是：{{fruits}}
5.3.4 v-model的修饰符的使用
修饰符用来处理一些特殊的情况，例如v-model.lazy修饰符的作用是延时同步。在输入框失去焦点或者使用回车键时，才会同步去更新v-model绑定的内容。
number修饰符可以确保用户输入的内容会被转为数值类型，可以很好的处理一些计算。如果没有使用该修饰符，则v-model绑定的内容会是string类型。
trim修饰符就像字符串中的trim一样，可以去除输入框中开头和结尾输入的空格。
6.vue的组件化开发
6.1vue的组件化思想和使用
组件化的思想，可以让一些经常使用得到，或者多个页面有同样样式的内容可以进行复用。将每一块每一个控件都视作组件。可以自定义控件名称，在挂载了vue的控件上直接使用。
vue自定义组件有三步，第一步：定义组件的构造，样式以及内容。第二步：声明控件的名称，以及所对应的组件构造器。第三步：在挂载了vue的控件中使用。
6.2vue的全局组件以及局部组件
没有在声明的vue中声明使用的组件为全局组件，类似于全局作用域和局部作用域。如果在一个挂载的vue中进行声明，那么该自定义控件只能在挂载了该vue的控件内使用。
6.3父组件和子组件
包含关系，在组件中可以包含组件。包含组件的叫父组件，被包含的叫子组件。
6.3.1 父组件与子组件的数据通信
当在父组件中定义了一个数据message，此时需要将该数据传给子组件。在子组件中使用props声明自己使用的数据，在子组件的template的html模板中使用该数据。在父组件中，通过v-bind的方式绑定子组件声明的props属性。
这是数组movies：{{cmovies}}
这是消息message：{{cmessage}}
props的设置，可以限制传输的类型以及默认值。设置了默认值之后，如果没有赋值，那么它将使用默认值。
除了父组件可以传值给子组件，子组件也可以通过方法的方式，向父组件传递信息。
6.3.2 子组件传给父组件
一个子组件中有一个按钮，点击该按钮后，向父组件传递一些信息。此时需要使用$emit来发送信息。$emit可以接受两个参数，至少要有一个参数。第一个参数为事件名称，第二个为参数。$emit第一个参数的事件名称，需要父组件在使用的时候去监听处理，类似于点击事件等。