Vue是一个MVVM（Model / View / ViewModel）的前端框架，相对于Angular来说简单、易学上手快，近两年也也别流行，发展速度较快，已经超越Angular了。比较适用于移动端，轻量级的框架，文件小，运行速度快。
指令
v-model 多用于表单元素实现双向数据绑定（同angular中的ng-model）
v-for 格式： v-for="字段名 in(of) 数组json" 循环数组或json(同angular中的ng-repeat),需要注意从vue2开始取消了$index
v-show 显示内容 （同angular中的ng-show）
v-hide 隐藏内容（同angular中的ng-hide）
v-if 显示与隐藏 （dom元素的删除添加 同angular中的ng-if 默认值为false）
v-else-if 必须和v-if连用
v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误
v-bind 动态绑定 作用： 及时对页面的数据进行更改
v-on:click 给标签绑定函数，可以缩写为@，例如绑定一个点击函数 函数必须写在methods里面
v-text 解析文本
v-html 解析html标签
v-bind:class 三种绑定方法 1、对象型 '{red:isred}' 2、三元型 'isred?"red":"blue"' 3、数组型 '[{red:"isred"},{blue:"isblue"}]'
v-once 进入页面时 只渲染一次 不在进行渲染
v-cloak 防止闪烁
v-pre 把标签内部的元素原位输出
基本组件属性
三、基础使用
1.html
2.js
这样js中msg的内容就会在p标签内显示出来。
生命周期
Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
路由与组件传值
在Vue里router-link与router-view是成对出现的，并且在同一个页面之中，它们之间原本是谁也不理谁，没有交互的，正因为路由配置，所以它们俩就变得亲密无比。
来看一个这个路由配置：
Vue里需要配置一个路由数组，数组里面的数据由对象构成，那好我们来看看这路由对象都有什么属性：
Path:访问的路由路径相对地址；
Name:给路由设置一个名字，有了名字就可以不用使用path路由路径值
Component:路由上组件值，当用户点击某个地址后，查询到的组件值。
按照我个人的理解path和name属性都是提供给router-link用的，比如：
Router-link有一个to属性，表示用户点击某个按钮后要去的地方，可以是配置路由里面的path值，如果取path值的话可以省略表明to是绑定操作(:to=’’),并且可以省略path=’’中的path字样，最终可写成to=’/home’，之前不是介绍Name是路由的名字吗，可以代表要去的路由，如果采用Name值的话就需要显式绑定to值，并且表明取自Name值，最终写法是这样:to=”{name:’xxx’}”，两种写法都可以：
to=’/home’ <==> :to=”{name:’homelink’}”
上面说了一下router-link的操作，接下来说说这个router-view，因为它们是成对出现，所有router-link点击去往的路由会在router-view里面呈现，组件的一个价值就是可以复用，我们可以通过给router-view一个name属性达到复用组件的效果，例如：我们在根路径页面下复用一些组件，需要在路由配置里做些修改：
注意标红部分，如果只显示一个组件就要写成component不加s的。
在默认显示下我们需要挂载多个组件有：orderingGuide,delivery,history当然它们所对应的值都是导入显示组件的路由地址。
在router-view里面加一个name属性
父类向子类传值
子类定义一个属性，比如：title属性，指明它的类型
接下来在父类调用子类的地方，让子类绑定此属性
父类直接给这个绑定的title属性传值即可
子类向父类传值
这个稍微稍微绕一点，之所以绕是因为子类需要“第三方”去向父类传值，例如：子类触发点击事件，然后给自身注册一个事件，注册事件是目的（跟父类向子类传值，子类定义一个属性是一个意思）
在父类调用子类的地方，子类绑定这个注册好的事件，在父类写实现方法
最后，我通过大一统的图总结一下上面的知识，涉及到组件复用，父子传值。
组件复用
父类向子类传值
子类向父类传值
一、关于请求头的问题
post请求常见的数据格式（content-type）
1.Content-Type: application/json ： 请求体中的数据会以json字符串的形式发送到后端
2.Content-Type: application/x-www-form-urlencoded：请求体中的数据会以普通表单形式（键值对）发送到后端
3.Content-Type: multipart/form-data： 它会将请求体的数据处理为一条消息，以标签为单元，用分隔符分开。既可以上传键值对，也可以上传文件。
二、关于router-link传参和数据传输的问题
1、因为是根据每个li的不同id进行不同的传参，所以需要使用v-bind动态绑定to，然后将要传递的work_task.id重新命名为id存入query中一起传给目标组件里。
在目标组件里接收id，只需要在created()钩子中接收即可，实现如下：
有时候，我们要传递一个数组，数组都是带着多个参数的，我们可以使用上面的写法，但是呢，当数组参数过多的时候，用上面的写法会显得太过于麻烦和累赘，就需要使用下面的方法。
上面整体写法看起来是没区别的，但本质就差很多了，实际传的arry就是work_task这一整个数组的参数了，在下一个目标组件中接收基本也是一样的写法。
Axios的应用场景
Axios 是一个基于 promise 的 HTTP 库，简单的讲就是可以发送get、post请求。说到get、post，大家应该第一时间想到的就是Jquery吧，毕竟前几年Jquery比较火的时候，大家都在用他。但是由于Vue、React等框架的出现，Jquery也不是那么吃香了。也正是Vue、React等框架的出现，促使了Axios轻量级库的出现，因为Vue等，不需要操作Dom，所以不需要引入Jquery.js了。
Axios特性
1、可以在浏览器中发送 XMLHttpRequests
2、可以在 node.js 发送 http 请求
3、支持 Promise API
4、拦截请求和响应
5、转换请求数据和响应数据
6、能够取消请求
7、自动转换 JSON 数据
8、客户端支持保护安全免受 XSRF 攻击
Axios用在什么场景？
在特性里面已经有提到，浏览器发送请求，或者Node.js发送请求都可以用到Axios。像Vue、React、Node等项目就可以使用Axios，如果你的项目里面用了Jquery，此时就不需要多此一举了，jquery里面本身就可以发送请求。
Axios如何使用？
三、关于then
.then(data => {})是将 axios 返回的值作为 then() 方法的回调函数的参数,类似于ajax的成功回调和错误回调，这里then方法应用到的知识点是ES6的Promise，古人云:“君子一诺千金”,这种“承诺将来会执行”的对象在JavaScript中称为Promise对象。
关于购物车
首先在data里面定义一个数组，然后利用for循环出来
然后再到data里面定义一个checkgroup的空数组。然后利用v-model='checkgroup'，然后利用计算属性来监听变化。
最后加入@click点击事件即可。
methods,watch和computed的关系
首先要说，methods,watch和computed都是以函数为基础的，但各自却都不同
而从作用机制和性质上看,methods和watch/computed不太一样，所以我接下来的介绍主要有两个对比：
1.methods和(watch/computed)的对比
2.watch和computed的对比
作用机制上
1.watch和computed都是以Vue的依赖追踪机制为基础的，它们都试图处理这样一件事情：当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动。
2.对methods:methods里面是用来定义函数的，很显然，它需要手动调用才能执行。而不像watch和computed那样，“自动执行”预先定义的函数
【总结】：methods里面定义的函数，是需要主动调用的，而和watch和computed相关的函数，会自动调用,完成我们希望完成的作用
从性质上看
1.methods里面定义的是函数，你显然需要像"fuc()"这样去调用它（假设函数为fuc）
2.computed是计算属性，事实上和和data对象里的数据属性是同一类的（使用上）,
你在取用的时候，用this.fullName去取用，就和取data一样（不要当成函数调用！！）
watch:类似于监听机制+事件机制：
firstName的改变是这个特殊“事件”被触发的条件，而firstName对应的函数就相当于监听到事件发生后执行的方法
watch和computed的对比
说了这么多，下面先对watch和computed
首先它们都是以Vue的依赖追踪机制为基础的，它们的共同点是：都是希望在依赖数据发生改变的时候，被依赖的数据根据预先定义好的函数，发生“自动”的变化
我们当然可以自己写代码完成这一切，但却很可能造成写法混乱，代码冗余的情况。Vue为我们提供了这样一个方便的接口，统一规则
但watch和computed也有明显不同的地方：
watch和computed各自处理的数据关系场景不同
1.watch擅长处理的场景：一个数据影响多个数据
2.computed擅长处理的场景：一个数据受多个数据影响
watch擅长处理的场景：一个数据影响多个数据
(具体的看上图就ok，这里不再赘述)
对于watch，我们先从一个场景说起
在《海贼王》里面，主角团队的名称叫做：“草帽海贼团”
所以我们把船员依次称为：
草帽海贼团索隆,草帽海贼团娜美,以此类推。。。
我们希望：当船团名称发生变更的时候，这艘船上所有船员的名字一起变更！！
例如：
有一天，船长路飞为了加强团队建设，弘扬海贼文化，决定“草帽海贼团”改名为“橡胶海贼团”（路飞是橡胶恶魔果实能力者）
我们代码如下：
var vm = new Vue({
el: '#app',
/*
data选项中的数据：
1.haiZeiTuan_Name --> 海贼团名称
2.船员的名称 = 海贼团名称（草帽海贼团） + 船员名称（例如索隆）
这些数据里存在这种关系：
（多个）船员名称数据 --> 依赖于 --> （1个)海贼团名称数据
一个数据变化 ---> 多个数据全部变化
/
data: {
haiZeiTuan_Name: '草帽海贼团',
suoLong: '草帽海贼团索隆',
naMei: '草帽海贼团娜美',
xiangJiShi: '草帽海贼团香吉士'
},
/
在watch中，一旦haiZeiTuan_Name（海贼团名称）发生改变
data选项中的船员名称全部会自动改变 （suoLong，naMei，xiangJiShi）
并把它们打印出来
*/
watch: {
haiZeiTuan_Name: function (newName) {
this.suoLong = newName + '索隆'
this.naMei = newName + '娜美'
this.xiangJiShi = newName + '香吉士'
console.log(this.suoLong)
console.log(this.naMei)
console.log(this.xiangJiShi)
}
}
})
// 更改watch选项中监控的主数据
vm.haiZeiTuan_Name = '橡胶海贼团'
demo:
于是船员们的称号前缀都被统一修改了！(原本是“草帽海贼团”)
但是我们的路飞船长又突发奇想：我这么喜欢吃肉，干脆我们叫做“肉肉海贼团”好了吧！
我们把最下面的代码改为：
// 更改watch选项中监控的主数据
vm.haiZeiTuan_Name = '肉肉海贼团'
demo:
computed擅长处理的场景：一个数据受多个数据影响
我们再从一个场景说起
路飞的全名叫做：蒙奇-D-路飞，他想成为海贼王，但路飞的爷爷卡普（海军英雄）因此感到非常恼怒，于是把“路飞”改成了叫“海军王”，希望他能改变志向
代码如下：
var vm = new Vue({
el: '#app',
/*
data选项中的数据：firstName，secName,thirdName
computed监控的数据：lufei_Name
两者关系： lufei_Name = firstName + secName + thirdName
所以等式右边三个数据任一改变，都会直接修改 lufei_Name
*/
data: {
// 路飞的全名：蒙奇·D·路飞
firstName: '蒙奇',
secName: 'D',
thirdName: '路飞'
},
computed: {
luFei_Name: function () {
return this.firstName + this.secName + this.thirdName
}
}
})
// 将“路飞”改为“海军王”
vm.thirdName = '海军王'
// 打印路飞的全名
console.log(vm.luFei_Name)
demo:
但是：
有一天，路飞的逗逼爷爷卡普，一不小心发现可能把族谱搞错了，实际上，他们不是“D”之一族，而是“H”一族，也就是说，“蒙奇-D-路飞”可能要叫做“蒙奇-H-路飞”了
将最后一段代码改为如下：
// 将“D”改为“H”
vm.secName = 'H'
// 打印路飞的全名
console.log(vm.luFei_Name)
demo：
methods不处理数据逻辑关系，只提供可调用的函数
相比于watch/computed，methods不处理数据逻辑关系，只提供可调用的函数
new Vue({
el: '#app',
template: '
',
methods: {
say: function () {
return '我要成为海贼王'
}
}
})
从功能的互补上看待methods,watch和computed的关系
在很多时候，computed是用来处理你使用watch和methods的时候无法处理，或者是处理起来并不太恰当的情况的
利用computed处理methods存在的重复计算情况
1.methods里面的函数就是一群“耿直Boy”，如果有其他父函数调用它，它会每一次都“乖乖”地执行并返回结果，即使这些结果很可能是相同的，是不需要的
2.而computed是一个“心机Boy”，它会以Vue提供的依赖追踪系统为基础，只要依赖数据没有发生变化,computed就不会再度进行计算
例子：
new Vue({
el: '#app',
// 设置两个button，点击分别调用getMethodsDate,getComputedDate方法
template: '
<button @click="getMethodsDate">methods<button @click="getComputedDate">computed
',
methods: {
getMethodsDate: function () {
alert(new Date())
},
// 返回computed选项中设置的计算属性——computedDate
getComputedDate: function () {
alert(this.computedDate)
}
},
computed: {
computedDate: function () {
return new Date()
}
}
第一次点击methods按钮：
第二次点击methods按钮：
注意两次点击methods返回的时间是不同的！！
第一次点击computed按钮：
第二次点击computed按钮：
注意两次点击computed返回的时间是相同的！！
1.两次点击methods返回的时间是不同的
2.注意两次点击computed返回的时间是相同的
【注意】为什么两次点击computed返回的时间是相同的呢？new Date()不是依赖型数据（不是放在data等对象下的实例数据），所以computed只提供了缓存的值，而没有重新计算
只有符合：1.存在依赖型数据 2.依赖型数据发生改变这两个条件,computed才会重新计算。
而methods下的数据，是每次都会进行计算的
利用computed处理watch在特定情况下代码冗余的现象，简化代码
new Vue({
el: '#app',
data: {
fullName: '彭湖湾',
firstName: '彭',
secName: '湖',
thirdName: '湾'
},
// watch中的代码显然是同类型，重复的，它并不简洁，也不优雅
watch: {
firstName: function (newValue) {
this.fullName = newValue + this.secName + this.thirdName
console.log(this.fullName)
},
secName: function (newValue) {
this.fullName = this.firstName + newValue + this.thirdName
console.log(this.fullName)
},
thirdName: function (newValue) {
this.fullName = this.firstName + this.secName + newValue
console.log(this.fullName)
}
}
})
watch中的代码显然是同类型，重复的，它并不简洁，也不优雅，所以我们可以把它变成这样
new Vue({
el: '#app',
data: {
fullName: '彭湖湾',
firstName: '彭',
secName: '湖',
thirdName: '湾'
},
// 对watch中的代码进行重构，实现同样效果
computed: function () {
this.fullName = this.firstName + this.secName + this.thirdName
console.log(this.fullName)
}
})
