整理了一些vue2的知识点

1、vue.js介绍
vue.js是一个渐进式框架，它主张最少，自底而上，逐渐增强。意思就是可以在一个库和一个完整框架之间伸缩自如。
优点：轻量级框架，双向数据绑定，组件化开发，客户端路由
缺点：首屏加载过慢，会出现闪屏，不利于seo优化

2、指令
v-text ：渲染内容把内容渲染到当前标签内
v-html ： 和上面一样，但是可以识别标签
v-on: 绑定事件
v-if ： 条件渲染，符合条件就渲染，不符合条件就不渲染
v-else ：和上面的配合使用，否则会失效，上面那个不成立则会执行这个
v-show:控制元素的显示和隐藏
v-model ：双向数据绑定，通常在视图中绑定之后要在data中定义
v-bind ：动态绑定属性
v-for ：循环  v-for="(数组中的项,项的下标)  in 数组"

3、v-if和v-show的区别
相同点：都是按照条件渲染然后控制元素的显示与隐藏
不同点：
3.1   v-show 没有else，每一条判断都是独立的，v-if和v-else是可以进行绑定
3.2   v-show控制的是元素的display的值，一开始就把所有的标签渲染出来了
3.3   v-if控制的是某元素是否渲染
v-show缺点：初始渲染开销大，v-if缺点：切换开销大

4、v-for指令与key值
v-for采用的是就地复用原则，只有变化的地方才会重新渲染。其他的内容不会变，这样极大的提高了渲染效率。
但是遇到没有变化的这种节点时，我们就需要给每一个节点添加一个key属性。这样就可以更好的区分组件，能更高效的更新虚拟dom

5、v-for和v-if的优先级
 v-for的优先级更高，如果v-for和v-if同时出现，先使用for去创建，然后再使用if去销毁

6.mvc设计模式
M(model)模型，数据模型，数据及数据处理部分
V(view)视图，显示数据的部分（前端的界面）
C(controller)，控制器，处理用户的一些请求，发送数据

7、MVVM模式
vue采用的就是mvvm模式，
m(model)数据模型，从后台请求过来的数据，
v（view）前端视图，
vm(viewModel)viewModel负责与view层进行数据双向绑定，负责和model数据交互，viewModel是连接view和model的桥梁

8、常用事件修饰符
.prevent     阻止默认事件
.stop          阻止冒泡
.capture     把事件变为捕获
.self           自己
.once         只触发一次

9、生命周期
在vue中，从创建一个vue实例开始，它的生命周期就开始了。 整个vue的生命周期就是 从创建到销毁的过程
创建之前：beforeCreate(){ }
创建完成：created(){}
挂载之前: beforeMount(){}
挂载完成：mounted(){}
更新之前：beforeUpdate(){}
更新完成：updated(){}
销毁之前：beforeDestroy(){}
销毁完成：destroyed(){ }

10、对生命周期的理解
在创建之前    没有el元素，也没有data数据
在创建完成    还是没有el元素，但是已经注入了方法和数据
在创建完成和挂载之前会做出一些判断 ：寻找el元素，if有则继续执行生命周期，else则查看是否手动的调用了vm.$mount("#app")，如果调用了，则继续执行生命周期，如果没有则生命周期提前结束。
如果继续执行了生命周期，则判断有没有template属性，if有则把temmplate的内容通过内置的render渲染到页面。else则把外部的html模板（#app）作为template模板进行渲染
在挂载之前    已经有了dom结构，但是还没有把数据渲染到页面
在挂载完成    页面已经渲染完成
如果页面数据做了更新，则会执行更新之前和更新完成这两个函数
当我们手动的调用了vm.$destroy()这个函数则，会销毁vue实例，执行销毁之前和销毁完成这两个函数，生命周期结束

11、computed和methods的区别
相同点 ：内部写的都是方法，方法都是通过return返回的结果，都会对data进行操作.data改变也会影响他们的最终结果
不同点 ：
11.1计算属性具有缓存效果，只要依赖的数据没有改变, 无论调用了多少次，都只执行一次。而方法调用几次就执行几次
11.2当很多个数据影响一个结果的时候，我们只是项得到最终的结果，此时适合计算属性。
11.3如果有大量的逻辑计算的程序，也适合计算属性。如果只是js交互则应该使用methods

12、过滤器
| 管道符

{{ 数据 | 过滤器 }}
{{ 数据 | 过滤器(实参) }}   
把数据通过过滤器进行处理，过滤器是在双花括号里去进行解析的

13、脚手架
下载前提条件：安装node 、全局安装webpack
脚手架创建项目：vue create   项目名称  

14、组件调用
引入组件：在主组件或者其他组件中引入此组件      import vHome from "./components/home.vue"
注册组件：在主组件中注册组件components:{  vHome:vHome }
调用组件：
<template>
    <div>
        <vHome></vHome>
    </div>
</template>

15、组件通讯
15.1父传子

父组件
<template>
    <div>
        <!-- 3、调用子组件-->
        <vSon 属性="普通字符串的值"  :动态属性="data数据"></vSon>
    </div>
</template>

<script>
    //1、引入子组件
    import vSon from "./son.vue"

    export default {
        
        components:{
            // 2、注册子组件
            vSon    
        }
    }
</script>

子组件
<script>
    export default {
        data(){},
        props:[ "数据1","数据2",,]
    }
</script>

15.2子传父

子组件
methods:{
    某函数(){
        this.$emit("自定义事件名",数据)
    }
},

生命周期函数(){
     this.$emit("自定义事件名",数据)
}

父组件
<template>
    <div>
        <vSon @自定义事件名="函数"></vSon>
    </div>
</template>

<script>
    //1、引入子组件
    import vSon from "./son.vue"

    export default {
        
        components:{
            // 2、注册子组件
            vSon    
        },
        methods:{
             函数(e){
                //e就是传递过来的值
            }
        }
    }
</script>

16、props验证
props优先级高于data和computed
props的值只能读取不能修改
props是单项数据流（只能实现父传子）
props不能实现隔代传值（只能一层一层的传）
props的值一般是数组
props也可以是{}，可以进行数据验证（props验证）

17、ref属性
<标签名  ref="自定义的ref名"></标签名>
ref属性：快速获取DOM节点

18、is属性
is属性可以把组件当做标签去进行渲染
is属性快速实现动态组件切换

19、SPA单页面的理解
整个项目只有一个html文件。只在web页面初始化的时候加载所有的html/css/js。一旦加载完成之后就不会再重新加载了
优点：用户体验好，内容的改变不会重新加载整个页面，避免不必要的跳转的重复渲染，继而对服务器的压力较小。前后端分离清晰，架构清晰，前端只进行逻辑交互，后端做数据处理
缺点：初次加载耗时过多。可能会出现空白页前进和后退需要路由去进行管理，浏览器本身无法实现前进和后退。不利于SEO，因为所有的内容都在一个页面中

20、slot插槽
20.1匿名槽口
在父组件中引入子组件并且注册和使用
父组件：
<v-son>
          <p>我想往子组件里面插入内容</p>
          <div>
               divdivdivdivdiv 
          </div>
</v-son>
子组件：
<template>
    <div class="son">
        <slot></slot>
        <h1>子   <slot></slot>  组件</h1>
        <slot></slot>
    </div>
</template>
在子组件的根标签内部，可以把调用插入的内容。想调用几次就调用几次，想在哪里调用就在哪里调用

20.2具名槽口
子组件：
<slot name="自定义槽口名字"></slot>
父组件：
<v-son>
    <标签 slot="自定义槽口名字">
 
    </标签> 
</v-son>

20.3作用域槽口
传递数据：视图由父组件决定，数据由子组件决定
子组件：传递数据
<slot a="值a" b="值b"></slot> 

父组件：接收数据
<v-son>
    <div slot-scope="数据名">
        内容  接收到的数据是一个json数据，这个json内部会把所有传递的数据综合到一起
    </div>
</v-son>

21、路由
路由（vue-router）是vue的核心插件之一，通过不同的地址url去渲染不同的组件，它是官方提供的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌
路由基本设计和使用：
// 引入组件
import Index from '../components/index.vue'

// routes 路线
const routes = [
    {
        path:"/index",// 哈希值  #  后面的url
        component:Index
    },
    {
        path:"/cart",
        component:Cart
    },
    {
        path:"/my",
        component:My
    }
]

22、路由重定向
{ 
    path:"*",//匹配所有路由
    redirect:"/index"
}

23、编程式导航
push 往历史记录中添加一条记录

replace  替换当前历史记录

back  回退

forward  前进

go    -1 上一页  0  当前页   1  下一页

24、路由懒加载
const routes = [
    {
      path:"/index",
      component:()=> import("../pages/index.vue"),
    }
]

25、路由模式
mode: "hash|history"

hash  # 模式  vue的默认模式

history 传统的 /模式

26、hash模式和history模式的区别
hash带# ，history不带#
在开发环境除了#没有任何区别
history在前进、后退、跳转上没有问题，但是history在刷新的时候会出错。因为刷新页面的时候，history是一个真正的完整路径，所以服务器会以为在访问某个没有配置的路由

27、axios
axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
语法：
axios({
    url:"请求地址",
    method:"请求方式 get|post",//默认是get方法
    
    //get传参  跟动态参数没有关系
    params:{
        //参数
    },
    
    //post传参
    data:{ 
       //参数
    }
    
}).then(res=>{
    
}).catch(err=>{
    
})