如何使用VUE：

初始准备：

首先是开发环境的配置：

1. 下载一个Vue.js devtools插件
2. 在运行程序前添加上下面的这句话，可去掉那个生产提示

    Vue.config.productionTip = false//阻止vue在启动是产生生产提示

引入vue模版

需要引入vue的开发环境：这个可以直接使用官网下载文件，也可以直接引用绝对地址的vue开发环境，这个可以直接去官网查看
下面的这一行就是我们使用vue前必须要先引入的绝对地址文件

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

初始化一个实例，并添加相应的属性

例子如下：

讲解一下上面的代码的一些知识：

1. {{message}}是一个插值表达式，可以将我们在vue中同名的属性在html中显示出来

2. el：挂载点的作用：1.vue会管理el选项命中的元素，及其内部的后代元素，也可已使用其他的选择器来选择需要管理的标签，但推荐使用id选择器，那么还有一个问题就是el可以管理那些标签？el不能用来管理单标签以及HTML和BODY元素
   例子如下：
   
   el挂载的两种方法：
   （1）直接使用el:"#xxx"
   （2）使用vue的方法$mount来为它本身添加控制的元素
   例子如下：
   
   两种方法都可以使用

3. 在当面的代码中data其实是一个对象，数据就作为data的属性被保存了起来，所以他里面的语法是符合js语法的，其次它还可以是函数，变量目前不深究

4. data的作用：用来保存我们所需要使用的一些数据，这些数据可以基本的数据类型，也可以是数组，对象这些类型，使用这些复杂类型的语法，按照js语法使用

例子如下：

data的两种写法
（1）对象式：直接就是将data当作一个对象，然后把需要保存的对象作为它的属性
（2）函数式：将data作为一个函数，但必须让函数返回一个对象
使用哪种方法：不涉及组件，哪种方法都行一旦使用了组件必须要使用函数式
例子如下：

data会被vue实例自动调用，前提是函数必须式普通函数，不能式箭头函数，因为箭头函数没有自己的this,它会向外找而导致，this不再指向vue实例

5. vue与所挂载的标签是一一对应的，也就是所一个vue只能管理一个标签，一个标签也只能被一个vue所管理，不存在一对多，和多对一的关系

6. 对插值表达式{{}}的深入理解，并不是说{{}}里面的变量只能是data里面的属性，他还可以是js表达式
   例子：Date.now()并不是data里面的属性，打他是一个表达式所以可以在页面上显示一个时间撮
   
   

js表达式与js代码的区别：

学会使用Vue.辅助工具

Vue模板语法

插值语法{{}}

插值语法一般用于控制标签体内的内容，当然v-test指令也有相应的作用可是v-test不够灵活

指令语法v-xx

代码讲解：就拿上面图片的代码讲解一下，因为前面加上了指令语法，所以“”里面会被当成一个表达式而不是，一个字符串，它会先去url对应的字符串，转化为大写后再输出

语法应用

知识带你讲解：上面的代码主要是为了解决name冲突的问题，所以使用两个作用域区分开两个变量，其实就是利用了上面两个语法的特性，{{}}里面是表达式，其次指令语法后面“”的内容会被当成表达式运行

理解MVVM模型

简单来说：mvvm模型值得就是使用vue将我们的前端页面与一些数据关联了起来

数据代理

理解object.defineProprty

object.defineProprty的作用可以通过该方法将一些数据关联起来，起到一个同时改变的作用，例子如下

对上面代码的讲解：首先使用defineProperty的作用是为了给person添加一个属性并且该属性的只与number相关联，也就是说number变了，age也改变，使用简单的age=number是不行的因为该代码，只解析一次，此后number的值改变了，是不影响age，所以我们可以通过代理的get 和 set方法来完成上述功能

什么是数据代理：

定义：
例子如下：

数据代理在vue中的应用

首先我先提出一个疑问？因为这个疑问是我害每由学习这个知识点之前就一直存在的：data作为一个对象在vue实例里面，它到第在哪？你可能觉得在vue.data里面，其实如果你这样访问的话会得到一个undine的数据，其实思路是没错的，但他将data的数据放到了_data里面，所以如果我们想要访问data里面的数据应该访问vue._data
好了，上面的问题解决了，我们再来聊聊代理的问题，确实我们可以直接通过vue._data来访问，data里面的数据可每次访问属性都要加上vue._data是不是太麻烦了，如果每次{{}}的使用都要加上vue._data确实太麻烦了，可是我们现在直接就可以通过name来使用数据为什么？因为Vue使用了代理，将data的数据直接绑定到了vue上所以我们可以直接使用
例子如下：

原理图：

事件处理：methods

一些重要的知识点：

有关函数传递参数的问题：
例子如下：

对上面代码的一些知识点的讲解：当为标签绑定函数时，标签内的函数名可以传递参数，也可以不传递参数，不传递参数时，会传过去一个默认参数event，如showInfo1,可如果传递了参数如showInfo2(66)，那么就不会在默认传递event了，可如果还想使用event作为参数怎么办？使用($event),函数就会将event作为对象传递过去

事件修饰符

只要会用前三个即可，其他的理解即可
例子如下：

注意事件的修饰符时可以连着书写的例如：@click.prevent.stop=""

键盘事件修饰符：

VUE命令：

v-text指令：设置标签的文本值

对上面所涉及的一些知识点的讲解：首先是v-test的使用位置是标签的内部，使用v-test的缺点就是它会将你标签里面原有的值也都替换掉，解决方法使用插值表达式{{}}，如上图所示

例子如下：

v-html指令：设置元素的inHTML语句

对上面代码的讲解：如果v-html要添加的内容为文本，哪它的作用和v-test是一样的，但它还可以插入html语法，内容中的html结构会被解析为标签

例子如下：

v-on指令：为元素绑定事件

对上面图片的一些知识点的讲解：v-on是用来为标签绑定事件的，v-on的位置同样是位于标签的内部，其次就是v-on可以使用@符号来代替，还有一点就是我们需要使用的事件主要是放置在vue实例的methods里面
例子如下：

v-on补充

1. 为v-on所绑定的事件传递参数，也就是传递自定义参数：
   
   知识点讲解：位于doIt里面的参数可以传递，methods中相应的方法中，该方法可以hi使用该参数，参数的与js的一样

2. 为事件添加修饰符，也就是为事件的触发添加限制条件：

知识带你讲解：上面的代码中为keyup事件的促发添加了，限制条件只有"enter"键触发的keyup
事件才会导致事件的发生

查看修饰符的网址

例子如下：

v-show指令

对上面代码的讲解：首先v-show指令的作用是控制元素的显示或者隐藏，它的本质使切换标签的display属性，其次就是v-show的属性值可以为boolean值，可以是函数，甚至还能使逻辑表达式，不过最终都会解析为boolean
例子如下：

v-if指令

知识点：首先v-if的作用和v-show的作用是差不多的都是控制元素的显示和隐藏但他和v-show的区别在哪里？v-show是通过控制display：none的方式来控制节点的，但v-if是通过DOM直接删除或者添加该节点，什么情况使用哪种方式：频繁的操作使用v-show反之使用v-if
例子如下：


对上面代码的解析：他们的情况就跟他们在js中一样，每一次都只会有一个表达式生效，注意这三种类型的表达式不能被打断，即要放在一起

v-bind属性

作用：设置我们的标签属性，但注意是标签属性，不是css属性

对上面代码的讲解：使用v-bink可以为标签设置属性，而且可以简写为：属性="" 的形式

补充：使用v-bind后它会把双引号里面的字符串当作一个表达式

注意：上面两幅图都是错误的，都无法取得url对饮的值，只有使用了指令才会把“”里面的字符串当成表达式去执行

v-model指令

先从需求讲一讲吧：也就是有时候我们需要获取输入框的内容，或者动态的设置某个输入框的内容，如果我们使用js的话可能就需要获取该节点对象然后使用getattibue等方法来获取相应的value值，设置的话就更麻烦了，甚至还要设置监听事件，可如果使用v-modle就简单多了

作用：双向绑定属性，也就是说v-model所绑定的标签，与我们vue实例中对应的属性的值是一致的无论更改那一边，另一边的值也会相应的改变，所以使用了这个指令后无论是设置还是获取我们表单元素里面的内容都会十分的快捷

v-model的限制：v-modle只能应用到表单类元素（输入类元素，具有value的元素）上，因为他就是控制的value

v-model的简写：v-model：value="“可以简写为v-model=”"

例子如下：

利用v-model收集表单数据

总结一下v-bind和v-modle的区别：

v-for指令

作用根据数据生成列表结构

知识点：首先v-for会根据arr里面的元素的个数而去生成相应个数的li,其中arr就是我们要遍历的数组，in是关键子，而item就是我们数组里面的元素，记住v-for循环生成的元素是v-for所控制的元素及其子元素，其次我们可以利用item来控制标签中生成不同的内容，如果v-for增加或减少了元素，那他所需要生成的元素也会对应的增加或减少

如果想要获取index的值我们直接通过index进行占位即可：


例子如下：

v-clock

作用：可以防止未经解析的html模版跑到页面上去

例子如下：

首先要理解：v-clock的特性：一旦vue接管含有v-clock的模版就会将含有该属性删除，所以就可以利用这个特点结合css结局页面加载慢的问题

v-once

自定义指令

什么是自定义指令： 自己写一个类似于：v-on这样的指令同样可以通过v-直接使用该指令
怎么创建一个自定义指令： 使用一个新的配置项目：driectives:{}
指令的书写形式 1.对象式 2.函数式
指令的调用时机： 1.指令与元素绑定成功时 2.指令所在的模版被重新解析

例子如下：

函数式： 里面的每个指令可以获取两个参数：第1个参数：使用该指令的节点对象 第2个参数：一个对象：里面包含了节点对象所需要使用的一些信息
对象式：

计算属性与监视

计算属性

什么是计算属性：通过data中已有的属性去得出一个新的属性，该属性由已有的属性组合而来
如何使用：需要引入一个全新的配置computed:{},具体的使用看下面的代码
计算属性的强大之处： 如果计算属性所依赖的属性发生了变化，get都会自动去调用然后更新计算属性

例子如下：

总结一下上面代码的知识：首先最重要的一点就是computed里面的get和set已经被默认指向vue了所以可以在get或者set中使用this来获取data属性

计算属性的简写

当我们只需要使用get而不需要，即不打算修改数据了我们可以将数据简写，就是直接将fullName写成一个对象
例子如下：

监视属性

什么是监视属性：顾名思义，就是监视data或computed中某个属性的变化
如何使用：
方法1：需要引入一个全新的配置watch:{},具体的使用看下面的代码
方法2：通过vue实例来使用$watch方法
例子如下：

对上面代码的讲解：首先是watch，里面的为你要监视的属性，例如isHot：{},isHot可以通过设置handler函数来监视该属性，同时hander函数里面由两个参数第一个为新修改的值，第二个为未修改的值，每次hander被调用都会获取这两个参数

对上面代码的讲解：通过vue实例使用$watch来监视属性，第一个参数为你要监视的属性，第二个参数为配置项，里面的代码和watch一样

深度监视

一个重要的知识点：下面所提及的方法中的this都指向vue

有一个需求：只监测上面代码中的a如何实现：

对上面代码的讲解：通过多层结构来获取number里面的a然后对它进行监视，不过需要注意的是应该写成字符串的模式：“number.a”为什么？因为在对象中键值的key，必须是字符串形式

例子如下：

对上面代码的讲解：

要求：我们要检测numer中的所有属性

//可直接使用对watch进行监视是没用的他只会判断number所指向的地址有没有改变
watch：{
   number:{
       //这样是无法检测到a,b里面的属性的，因为watch默认时不监测深层属性的
   }
}

如何实现？加上一个配置项deep=true
就如上面图片中的代码所示

深度监视简写

讲解：首先我们如果想要使用简写形式的话，就只能使用hander配置项，然后可以直接以函数的形式来代替对象

vue监测数据的原理

计算属性与监听属性的对比

绑定class样式

v-bind命令的应用

其实绑定class就是v-bind指令的一个应用罢了，大致思路就是将我们需要使用的样式添加到data里面，将其作为vue实例的属性，然后使用v-bind命令来使用该属性即可
例子如下：

对上面代码的讲解：

1. 直接 :class="某个属性" 这种写法很方便元素切换属性
2. ：class="array"  array是一个数组，这种写法可以方便同时应用多个样式,可以对数组进行增删操作来控制使用的类的个数
3. ：class="obj"   可以通过动态的设置class的应用

绑定style样式

1.对象式：

2.数组式：

列表渲染

v-for指令的应用

列表渲染其实就是利用v-for指令将我们所需要的标签请安指定的内容生成元素，首先v-for指令的关键字，可以是in也可以是of，其次它遍历的内容可以是数组也可以是对象还能使字符串

1. 数组语法：v-for="(item,index) in xxx" :key=" "其中第一个参数指的是数组元素本身，第二个参数值得是数组元素的索引
2. 对象语法：v-for="(value,key) in xxx" :key=" "其中第一个参数指的是对象的值，第2参数指的是对象的键
3. 字符串语法： v-for="(char,index) in xxx" :key=" "其中第一个参数指的是字符串中的每个字符，第二个参数指的是每个字符对应的索引

例子如下：

：key的作用

这里来讨论一下v-for语法中，key有什么作用：老实说这里有点难用口头将清楚，我尽量：首先key是不会在生成页面中显示的，它的作用是在生成虚拟的DOM节点的时候，为虚拟的DOM对比算法提供对比的依据，也就是key相同的节点会进行对比，然后方便它对相同的部分进行复用，如果不相同的部分将新的数据覆盖原来的数据

所以说为什么要使用key就是避免他进行复用的时候出现错误，上面图示中出现错伦的原因是，使用了index作为key并且选择在数组的前面加入新元素，这就导致了复用错乱，其次还会导致效率低，因为错乱导致复用效率低，从而影响效率

上面是以id作为key产生的对比过程，推荐以后以id为key，如果想要使用index作为key就需要再数组的后面添加数据，不影响原来数据的index

如果不写key系统会默认以遍历时的index作为key

列表排序

这个直接上例子吧，好像就是监视属性和计算属性的应用

方法1：使用监视属性的方法实现：

对上面代码的解释：上面的代码主要时使用了watch监视了输入文本框中的内容变化，一旦文本框的内容发生变化就利用handler函数来对数组进行过滤并将，合适的数组放到一个新的数组中保存了起来

方法2：使用计算属性的方法解决：

对上面代码的解释：因为filPerons是依赖于keyWord的，所以computed中每当keyWord发生改变，computed都会调用get方法来更新filPerons，并且直接使用filPersons来保存get的返回值

列表过滤

在列表排序的前提下，再增加一个过滤效果， 使用计算属性的方法方便一些：

生命周期函数

什么是生命周期函数： vue在某些关键的时间点为我们调用的函数

mounted()挂载函数

mounted()挂载函数 ：在vue完成模版的解析并把初始的真实DOM元素放进页面后调用mounted（）函数，也就是说随后更新的模版不会再调用
例子如下：

知识点，上面代码的主要作用是在html节点初次放进文档后，为其添加一个定时器函数

Vue组件化编程

什么是组件化编程：

什么是组件化编程： 将页面中不同区域的js html css封装在一起，形成的东西就叫做组件，简单来说就是实现应用中局部功能代码和资源的集合，形成组件后利于我们进行复用和维护


并且组件之间可以形成嵌套，之间之下还能在形成组件

组件化的编写

非单文件租金按的编写

例子如下：

对上面代码的解析：

1. 首先编写一个组件需要创建一个 组件，如何创建使用let xx=Vue.extend({}),extend函数需要传入一个配置项，里面同样可以有data,不过data必须使用函数式，返回一个对象，这可以避免引用类型带来的麻烦，其次组件案例需要封装好html代码，怎么封装使用template:配合js中的插值语法使用，Vue.component(“注册时的组件名”，那个组件)
   

2. 组件创建完后，需要在vue里面进行注册，如何注册，分为局部注册：使用一个新的属性components:{},注册时可以使用简写形式，全局注册

3. 组件的使用：将组件名当作标签名，然后将组件当作标签使用

4. name的作用控制显示在vue中的名字：但是使用的话还是以你组件注册的名字为准，如果没写name开发者工具会以注册时的名字显示
   

组件的几个注意点

组件的简写：直接但对象的形式来书写，vue会自动帮我们调用extends函数

组件的嵌套

**核心思想：**先要在那个组件下嵌套，就在那个组件下组测组件，并在给组件的template下添加相应的html代码

例子如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件的嵌套</title>
</head>
<body>
    <div id="root">
        <app> </app>
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
     Vue.config.productionTip = false//阻止vue在启动是产生生产提示

         // 创建一个学生组件
    let student={
        template:`<div>
        <h2>{{name}}</h2>
        <h2>{{studentname}}</h2>
                  </div>`,
        data() {
            return {
                name:"莞工杰仔",
                studentname:"杰仔"
            }
        },
    }
    //   先创建一个学校组件
    let school={
        template:`<div>
        <h2>{{name}}</h2>
        <h2>{{schoolname}}</h2>
        <student> </student>
                  </div>`,
        data() {
            return {
                name:"幼儿园大学",
                schoolname:"北京"
            }
        },
        components:{
            student
        }
    }

    // 创建一个app组件统领所有的组件
    let app={
        template:`
              <school></school>
        `,
        components:{
            school
        }
    }
    

    //  创建一个vue实例
    new Vue({
        el:"#root",
        components:{
            app
        }
    })
</script>
</body>
</html>

VueComponent

1. 首先这些组件的底层到底是什么？是什么数据类型？
   
   谈谈我堆组件的理解：
   其实我们在定义组件是获取的是一个组件的构造函数VueComponent例如：

const person=Vue.extend({});//是是这句代码的作用是调取了Vue的底层函数，然后他给我们返回了一个函数其实就是Person构造函数

我们或取了构造函数以后如何创建该函数的实例？其实我们直接使用标签语法就能获取该实例，至于怎么实现的目前先不管，底层代码会自动帮我们转换,生成出来的实例我们成为vc
例子如下：<person> </person>//相等于帮你调用了new person()
最后其实在vue中组测的组件都被vue实例管理者

2. VueComponent和Vue的内置关系
   
   

单文件组件的编写

如何创建一个脚手架

1. 首先我们要创建一个脚手架：到指定的目录下打开运行npm run serve,系统就会为我们开辟一个项目，同时为我们开辟一个本地的服务器，如何停止该服务器：直接打开命令行按两次 Ctrl+c 即可

脚手架的运行流程

执行完serve =>main.js=>App.vue=>index.html

脚手架中各文件的功能

1.main.js

对render配置项的详细解释：

首先我们得思路是使用上面的代码来使用App可是我们引入的vue其实是残缺版的vue，没有模版解析器，所以我们要项使用上面的代码就必须引入完整版的vue，如果不想要引入完整版的vue就必须使用render配置项


对上面代码的解析：其实reader函数接受了一个函数createElement（）可以用来生成html元素并返回，相应的组件，注意如果是要创建html里面的元素的化就要加上引号，如果组件无需加上”“，它会把它当成变量然后读取该变量

2. App.vue
   首先对于App.vue的理解，它是所有组件的老大只有他有资格与main.js对话，其他的组件都收到它的管理，在App.vue中应该要完成的事情：引入其他的组件并使用其他的组件
   
   

3. html.html
   

ref属性

作用：相当于使用document.getElementById或取该节点，不过vc会帮我们收集所有加上ref的节点然后我们可以通过不同的ref属性值来获取相应的节点
使用原生的js操作获取节点：

使用$refs.属性值

使用ref与getElementById的区别：使用ref获取的是一整个组件，而使用js操作获取的是最外层的div

props配置

作用：实现父子组件间的数据传送，使用props来接受传过来的属性
例子如下：

1. 使用数组接受参数
   
   
2. 使用 数组接受参数
   
   
   注意如果接受的数据与原有的数据重名了，props接受的数据的优先级别更高，不过程序会警告，解决方法：
   
   重点： 一般不要更改所接收到的数据，因为会发出警告，但如果确实要解搜的数据，我们可以在data中新建一个变量来保存，然后使用data中所保存的数据，如果要修改的化也尽量修改该数据
   
   如果传送的数据为引用数据类型：
   

组件的自定义事件

首先理解一下什么是组件的自定义事件，首先例如js中的点击click，keyup事件都是js内置的事件，这些都是给html元素使用的。我们可以自己写一些事件来给组件使用，注意这个自定义事件是给组件使用的

首先是如何为一个组件添加一个自定义事件的问题：
方法1：其实自定义事件的添加就跟电脑内置事件的添加时一样的，想象点击事件绑定给元素：v-on:click=""或者是@click="" 同样我们添加自定义事件也可以这样添加v-on:自定义="" 或者 @自定义事件="" 如果只想让事件触发一次：使用once替换on即可
方法2：获取要添加的vc实例对象后使用$on("自定义事件"，绑定的回调方法)，如果只想让该方法触发一次怎么办？$once("自定义事件"，绑定的回调方法)

其次就是如何触发这个自定义事件的问题了：
同样我们可以联想一下click事件，click事件的触发时只要鼠标点击了后它就会触发，可是我们的自定义事件的触发条件好像时没有？怎么办？其实我们可以使用一个函数来作为它的触发条件，只要该函数被调用了，那么就触发我们的指定事件，如此一来我们就可以通过控制该函数被调用的时间来空值该函数的触发时机，那么这个函数什么？$emit("自定义事件",要传递的参数，多个参数)，当需要传递多个参数时可以使用点语法

例子如下：
通过传递函数的方法以及绑定自定义事件的方法来实现子组件给父组件传递数据

上面的代码时通过v-on来绑定自定义事件，下面通过$on来绑定事件，结合了mounted以及ref属性，这种方法更加的灵活，毕竟他处与mounted中可以添加一些函数来限制它

为组件绑定原生事件：
组件可以绑定自定义事件，那么它能不能绑定click这些事件？答案是可以的，不过我们要在绑定的原生事件后面添加一个修饰符.native,例如：@click.native="",这个点击事件会绑定到组件的最外层容器上面

自定义事件的解绑：

全局事件总线（推荐使用）

作用：实现任意组件间的通信

原理图：


全局事件总线的原理：就是我们可以使用一个“东西”，让所有的vc都可以在它身上绑定事件，这样我们就可以利用emit以及回调函数来传递参数，那么这个东西是什么好呢？因为这个“东西”要能有v-on,$off,$emit。所以这东西必须是vc或vm,其实可以创建一个vc但我们可以直接使用vm,另一个问题就是这个vm放在哪里才能被所有的vc看见呢？答案是vue的原型上，同样我们称这个东西为$bus
创建事件总线的代码：

//这段代码是写在new Vue里面的
beforeCreat(){
    Vue.prototype.$bus=this;
}

例子如下：
使用方法：我们在School中为$bus绑定了一个函数，其中回调函数，也在School上，然后再Student这个组件上面触发了$bus触发了相应的事件，这样就实现了School和Student这两个兄弟组件的数据传递

消息订阅与发布

同样是实现任意两个组件间的通信，不过需要引入第三方库：pubsub-js

需要注意的是：当我们为subscribe绑定回调函数是，如果绑定的是函数为普通的完整的函数那么该回调函数里面的this为undine，解决该问题的方法有两个，1：将该回调函数写成箭头函数的形式 2：将回调函数写在methods里面然后再使用this绑定该回调函数

例子如下：
首先再需要发布消息的组件下引入pubsub对象：import pubsub from "pubsub-js"
publish(),同样有两个参数一个是要发布的消息名，一个是要发布的信息

然后再需要接受该消息的组件下同样引入pubsub，使用函数接受消息：接受消息的函数为subscribe()，该函数可以接受两个参数一个是订阅的消息名，另一个是传递过来的参数，另一个就是取消该订阅的问题，这个就类似取消定时器一样，需要使用一个变量来记录它的标识，然后通过该标识取消订阅

浏览器本地存储

·
代码实现保存数据：
前提这边的key和value一定要为字符串.如果不是字符串也会自动帮你转化成字符串
使用,localstorage.setItem(‘存入的key’,‘对应的值’)


如果传入的是一个对象类型的话：

发现这就是对象的tostring 的结果也就是说,这个数据废了,之后读出来的也不是数据的结果

因为就像前面说的只要不是字符串类型它都会给你调用tosting,而对象类型千万不要调tostring因为会把数据破坏掉

所以我们用,JSON.stringify()来实现 把对象转为字符串


实现读取数据

localStorage.getItem(‘放入存入字符串名’)

由于对象存储时用JSON.stringify()把它转化成了字符串的形式,所以这边要把它用JSON.parse()解析出来变成对象类型

例子如下：

Vue动画效果

vue动画的理解

首先如果我们自己写一个切换效果的话，可以利用css3中的动画，先定义关键帧动画，然后通过切换类名来切换动画，从而实现的效果
例子如下：使用原生的css3实现切换效果

通过切换h1的类名来实现
上面的方法需要自己切换类名，也就是要操作dom然后改变类名，很麻烦，有没有办法让他自己切换效果？使用trasiiton将要变化的元素切换，但是使用这个标签它有指定的类名。
标签出现时的动画的类名：.v-enter-active
标签消失时的动画的类名：.v-leave-active
通过上面的方法我们就不需要操作节点，只需创建关键帧率，然后指定类名，最后只需控制标签的出现即可：
例子如下：


name=""为每一个transition都起一个名字，然后将你要使用的动画.v改为你起的名字即可，使用name的好处，不可以能所有的标签都是使用移动动画i下过吧？所以所有的transition都使用.v-enter-active是不现实的

:appear="ture"/appear
可以使该transition有一个突然出现的效果

vue过渡的理解

使用css3变形实现动画效果：例如transform
这里同样是利用transition标签包裹需要变形的函数，然后使用两个类，这两个类分别表示起点，终点，然后可以在这个类中添加起点和终点的样式然后，慢慢过渡即可，但这里我们需要自己配置transition事件，感觉transition其实就是一个自动切换类名的效果
进入有两个类：
进入的起点：.v-enter
进入的终点：.v-enter-to
离开有两个类：
离开的起点：.v-enter
离开的终点：.v-enter-to
例子如下：

合并代码：

使用上面的方法的缺点：需要在该标签原来的css样式上面添加一个transition样式，如果不想要改变原来的样式怎么办？这里就要利用我们上面代码的的.v-enter-active，其实一个标签的出现vue为其添加了三个类名,离开也加上了三个类名，transition的作用就是自动为我们切换这三个类名
1：进入起点的样式 ：.v-enter
2.：进入整个过程的样式：.v-enter-active
3：进入终点的样式：.v-enter-to

.v-enter太快了，看不到

同样离开也一样，这里就不多写了：

多个便签使用同一个过渡效果

使用：transition-group被包裹的标签一定要有key值

第三方动画库

推荐一个第三方动画库：npm 上的aminate.css
使用第三方库的方法：
1.安装你想要使用的库

2.然后引入该库
因为引入的是样式所以不需要使用路径

3.然后复制你想要使用的样式的类名

总结

插槽

首先是插槽的作用：如果我们想要网组件标签里边添加我们的html标签的话，我们直接向html那样直接写上html标签是行不通的，因为它不知道具体往标签内部的那个位置插入我们的dom元素，所以要想解决这个问题就必须使用插槽

例子如下：

默认插槽

使用默认插槽实现下图的效果：

首先给每个组件传递数据：

生成列表：

往组件标签内添加我们想要添加的标签：

注意：它会先在这边将所有的dom节点都解析完后，所以我们就不需要再向其他的组件传递数据，直接先再App中生成节点再使用插槽插进出

使用默认插槽控制这些标签的位置：

具名插槽

使用两个默认插槽时：

如果没有使用具名插槽，它会将每个插槽都放一份我们所解析的节点，并不是说每个插槽只能放一个dom节点：如下图

怎么解决上面的问题？使用name为每个插槽进行命名，然后每个dom元素通过solt属性选择要放到那个插槽里面

使用具名插槽生成下图效果：

例子如下：

作用域插槽

可以通过作用域插槽，在不同和的组件之间传送数据

例子如下：
确实下面的例子有种脱裤子放屁的感觉不过我们会使用这个知识点即可

发送数据：
发送数据就跟普通的组件传送数据一样，不过数据传到了哪里？谁使用这个插槽就给谁传一份数据

接受数据：
怎么接受插槽传送过来的数据？首先需要使用来包裹插槽插入的部分，然后在template标签上使用scope属性来接受数据，接受的名字可以任意取，以什么名字接受就使用什么名字，而且使用的接受的数据是以一个对象保存起来的

总结

VUEX

实现组件键的数据共享之前我们使用了全局事件总线来实现了这个功能，可如果是组件的数量过多的话，那就有点麻烦了，所以VUEX就是为了解决这个问题

也就是说如果某些数据是许多的组件都要使用的，那我们可以将这些数据放在vuex中

vuex的工作原理

首先使用vuex的工作流程如下：你可以把vue components当成去餐厅吃饭的用户，action当成我们的点餐员，Mutaction当成我们的后厨来理解，其中state就是我们的菜品

需要注意的是vuex的三个组成部分保存的数据都是以对象的形式进行保存的，action的作用看似乎多次一举，其实Action可以起到一个与后端接口交互的作用，可以在Actions处通过ajax获取数据然后交给Mutactions

当然如果我们不需要从后端获取数据也可以直接跳过Actions直接在Vue处调用commt

官方没有给出的是：其实vuex里面的3个部分都是通过store进行管理的其中，dispatch与commit都是通过store进行调用的

搭建vuex环境

1. 首先我们要下载插件：npm i vuex ,然后引入import,最后使用Vue.use(Vuex),只有通过这样vm里面才会认可store 配置项

2. 配置好我们的store ,一般创建一个store文件夹子，然后在store文件夹里面创建一个index.js文件，并在该文件里面配置好所需的方法

3. 将在main.js中的配置项store改为我们自己写的配置项，其中的store可以直接简写为store
   
   因为必须先使用了vuex才能将import导入，可是导入时最先执行的，所以只能将Vue.use(Vuex)以及import vuex放到store 中的index中去
   

例子如下：
首先我们需要在vc里面向Actions里面分派函数，diapatch有两个参数：第一个参数为函数名，第2个参数为需要传递的参数，因为store已经是vc身上的一个配置项了所以可以直接调用

在action里面创建对应的响应函数，actions里面的响应函数可以接受到两个参数，第一个是缩小版的store这里命名为context,第二个参数为vc传递过来的参数，这里并不是真正操作state的地方，还需要将将参数传递到mutations里面进行操作

同样mutactions里面的参数同样有两个参数，第一个是完整的state里面包含了所有的数据，所以可以直接操作state，第2个参数就是传递过来的参数

当然你也可以直接在vc那边进行commit越过actions

总结

重点：你可能会想到我都能直接能在actions里的context获取到了state哪为什么还要通过mutations修改数据？因为只有mutations会与开发者工具有交流所以不通过mutations修改的数据，开发者工具是没法发现的，尽管代码有效

getter配置项

使用mapState和mapGetters来优化书写

因为我们每次调用state里面的数据时都需要使用$store.state…十分的麻烦又没有办法简化代码，去掉前面重复的这一段？我们可以自己写计算属性，但这更麻烦，其实官方给出了方法
首先我们需要引入import {mapState} from "vuex"
然后通过mapState方法来建立映射

1. 参数时对象形式
   这个方法的参数是以对象的形式传入的，且返回值也是对象所以放在computed里面时需要使用点语法进行展开
   
2. 参数是数组形式
   
   mapGetters也是一样的就是改了个名字
   
   总结：
   
   使用mapMutactions以及mapActions简化代码
   
   

vuex模块化

也就是将不同组件的所需要使用的数据也分开，不同注册是就需要根据我们分开的对象进行注册，其中使用时也需要先将通过this.$store.state.personAbout的方式进行调用

如果不想要使用countAbout.sum的形式就在使用mapState的时候就将它进行展开

但想要使用上面这种形式进行展开的时候需要在配置store的时候，为每一个分类的配置项都加上一个属性:namespaced:true,只有这样我们在store中注册的时候为它起的名字才会生效

我们将各种数据按组件进行分类了以后，获取数据的方法肯定也得进行改变，无论是直接通过$store的方法进行改变，还是通过…mapState的方法都必须进行相应分改变，例子如下，注意不用map…获取getters里面的数据跟获取state里面的数据的形式是不一样的

使用map…映射是十分简单的，想用this.$store.state.countAbout.。。。
可是使用这种方法进行commit方法时怎么控制提交到那个配置项的actions里面？例子如下需要在要触发的方法前加上相应配置项的名字

路由

路由的简介

就我个人的理解：路由时为了实现单页面引用里的组件的切换

路由的基本使用

首先如果你想要使用路由，就必须要先下载这个路由插件，然后使用，并在VM里面配置好路由配置项：router:router,但是使用这个配置项之前你得先有自己的router



例子如下：
首先第一步：我们需要在mian.js下，下载vue-router插件，并且使用改插件，只有这样我们才能配置一个router项，至于router这需要我们自己写一个

第2步：创建一个router项，一般都是创建一个router文件夹，然后使用index.js作为router,需要注意的是我们需要自己new一个router,并配置好routes:[];里面的键值对以对象的形式保存，现在的路由组件暂时都式放在cpmponents中，以后你可以创建一个路由组件文件夹pages,自己改变一下路径就行

创建router时的注意点：首先是path路径问题：这里一级路由固定为/+变量
的形式，不过path后面的变量并不是指该组件的名字，可以随意命名，router会将path跟comoenent建立映射

第三步：如果之前的多页面是通过a标签进行切换的，这需要改为router-link标签来进行切换

第四步：就是通过router-view标签来控制显示的组件在那个地方插入

注意：路由是根据path来切换路由的所以即使跨组件使用路由也是可以的，也就是说即使router-link与控制路由的方法不在同一个组件也可以

$route与 $router

$route:每个路由组件都有属于自己的 $route 里面携带有各种的参数，如query,paerams
$router:整个项目只有一个router，主要用于后面的编程式路由的跳转

嵌套路由

例子如下：

第一步：准备好组件后，便准备配置路由，注意以及路由直接在routes下配置键值对即可，可是2级路由，需要在你嵌套的组件按下配置路由，这里就需要使用一个新的配置项children,它的使用方法与routes一样，只不过需要足以的是配置键值对时，path不再需要加上/,直接加上你想使用的变量即可，router会自动加上/

第2步：同样使用router-link标签控制要显示的组件，使用router-view标签控制显示组件的位置，需要足以的是router-link标签里的to所指向的地址必须是加上了1级地址的完整地址,因为它要基于1级地址寻找2级地址

query路由传参

例子如下：

使用路由实现上图的功能，首先需要学会使用3级路由其实3级路由和2级路由的嵌套都是一样的

其次就是利用query参数来传递参数，query参数是隐藏在router-link的跳转地址中使用？表明后面的是参数，然后使用&分割要传递的参数，可是注意如果我们要传递变量的时候怎么办？使用模版字面量的方式‘${变量}’，不然直接使用“”无法识别变量，使用:to会报错，因为里面不全是js代码
第二种方法：使用对象的形式，to后面的地址使用对象表示，然后再对象中使用path配置项保存要跳转的组件的地址，使用query对象保存要传递的参数

怎么使用？this.$route.变量

命名路由

作用：name的值可以随意,可以直接通过控制name来控制router-link的跳转，使用name来替换path,不过to的后面必须写成对象的模式

params传参

例子如下：
第一步：首先使用params传参不需要像query一样使用？分割，传递参数时直接使用/分割要传递的参数即可

上面传递的时固定参数，如果要传递变量的化还是得使用模版字面量的形式

其次就是路由路径配置的问题，因为没有了分割符，我们必须要使路由知道后面的是参数所以我们再路由那边使用占位符说明这是参数

其次就是接受的组件如何使用这些路由的问题了，直接通过route配置项上的params参数来使用传递的参数

上面是to的字符串写法，下面使用to的对象写法
注意：如果携带了params参数to后面的对象跳转路由，必须使用命名路由
不过如果使用to的对象模式必须使用命名路由，:to对象中不能使用path的形式

路由的props配置

作用：使用query和params传完参数后我们使用时不断重复$route.query.或者$route.params.是不是有点麻烦？有没有办法像vuex一样简写一下？有的就是使用props配置项
那个路由组件需要接受东西就在router中相应的路由上面写上props配置项

然后在相应的组件通过props配置项来接受参数

确实接受路由传递过来的参数是，如果太多参数的化就必须不断的重复$route.params这段代码，由没有办法一次性接受所有的参数然后直接使用即可？有的就是props配置项

例子如下：
首先是需要在router中配置props项
使用第1种传参方式的局限非常大只能传递常量
使用第2种方法时route可以自己将params参数收集并传递不过只限于params方式，如果使用query传参又想要使用props就必须使用props的函数形式，而使用query无法传参
第3中方法：props的函数形式：这种方法无论使用什么传参方式都可以使用

同样再接受参数的组件使用props接受即可

编程式路由跳转

上面的所有的代码由router-link来完成组件的切换的，也就是所底层是使用的a标签，可是有没有办法通过button这些元素来控制组件的切换？当然由办法，其实页面的切换是通过使用栈结构来维护地址实现的，那么我们可以直接利用router结合push方法以及使用replace（会直接将当前的栈顶的地址提换掉）方法来实现

例子如下：

我们只需要将原来的touter-link标签内to后面的对象放到push里面充当参数即可，既可以通过命名路由，也可以通过path

路由缓存技术

注意include里面的是组件的名字，也就是组件的name

缓存多个组件需要使用数组的形式

两个心得生命周期钩子

例子如下：

路由守卫

作用：当你想要切换路由时，我们可以为切换路由时加上一些权限只有满足某些条件的路由才有资格切换路由

前置路由首位：起的是限制作用，判断能否切换路由
第一步：我们要先获取router，使用beforeEach函数，该函数有三个参数
1.form对象：切换路由时的起始路由
2.to 对象：切换的目的路由
3.next() 放行函数，只有配置了这个函数，切换路由才可以进行

第2步：就是判断是否有权力切换路由，就是在执行next()函数之前加上限定条件
首先我们可以利用to对象和from对象中的path以及name进行判断

当然也可以在meta:{}中加上我们自己定义的配置项来进行判断,注意想要加上自己的配置项时一定要在meta里面加，不然路由无法获取


最后我们可以在next();配置我们通过路由下一跳所要跳转的路由

后置路由守卫：切换完路由后，路由需要做的事情

Element ui的基本使用

VUE网络应用

上面的指令都是通过vue命令来开发本地应用，下面的知识点是结合axios网络请求库来开发网络应用即VUE+axios

axios的基本使用

1. 要想使用axios的话首先需要进行导包,而且还得再联网的情况下才能使用该代码,引入该代码后,会自动生成一个全局的axios对象供我们使用

<script src="http://unpkg.com/axios/dist/axios.min.js"></script>

axios在项目中的使用

首先在main.js下下载axios:npm i axios
然后在需要使用组件下引入我们的axios:import ... from ...

请求数据库的方法:

1. get() 请求:axios.get(地址?查询字符串).then(function(response){},function(err){})

2. get() 请求:axios.get(地址?key=value&key2=value).then(function(response){},function(err){})
   对上面代码的讲解:地址指的是文档提供的接口地址,.then方法里面有两个回调函数,其中第一个是请求成功后调用的,里面的形参是服务器相应的内容,第二个是服务器相应失败后提供的错误信息,?查询字符串值得是我们要传递过去的参数,查询字符串的格式,其中key的个数由我们自己来决定,key是文档提供的,value是我们具体要传输的数据

3. post() 请求:axios.post(地址?参数对象).then(function(response){},function(err){})

4. post() 请求:axios.post(地址?{key:value,key2:value}).then(function(response){},function(err){})
   对上面代码的讲解:key和values的意思与get相同

通过看视频获取的接口:
一些用过的接口：
获取笑话的接口

https://autumnfish.cn/api/joke/list

获取注册信息的接口

https://autumnfish.cn/api/user/reg

获取天气的接口

http://wthrcdn.etouch.cn/weather_mini
//请求方法get
//请求参数：city(城市名)
//响应内容天气信息

例子如下: