前端学问点总结——VUE（延续更新中）

1.框架和库的区分：

框架：framework 有着本身的语法特性、都有对应的各个模块
库 library 专注于一点

框架的优点：

1.提到代码的质量，开辟速率
2.进步代码的复用率
3.下降模块之间的耦合度
（高内聚低耦合）

UI：user interface
GUI : graphical user interface
CLI : command line interface
API : application interface

头脑形式的转换：

从操纵DOM的头脑形式 切换到 以数据为主

2.Vue概述

1、what    
    是一个渐进式的构建用户界面的js框架
2、where
    小到的简朴的表单处置惩罚，大到庞杂的数据操纵比较频仍的单页面应用程序
3、why
    1.轻易浏览的中文文档
    2.轻易上手 （学习曲线比较紧张）
    3.体积小
    4.基于组件化的开辟体式格局
    5.代码的可读性、可维护性获得了进步
4、how
    事情体式格局：能够经由过程雄厚的指令扩大模板，能够经由过程林林总总的插件来加强功用

    搭建环境：
    体式格局1
         全局装置 vue-cli
        $ npm install --global vue-cli
        # 竖立一个基于 webpack 模板的新项目
        $ vue init webpack my-project
        # 装置依靠，走你
        $ cd my-project
        $ npm install
        $ npm run dev
    体式格局2:
        直接引入对应的js文件

3.Vue中基础学问

1、双花括号
    mustache(胡子)/interpolation（插值表达式）

    语法：
    <any>{{表达式}}</any>
    作用：
    将表达式实行的结果 输出当挪用元素的innerHTML中；还能够将数据绑定到视图

    

2、指令-轮回指令
    基础语法1：
    <any v-for="tmp in array"></any>
    基础语法2：
    <any v-for="(value,index) in array"></any>
    
    作用：
    在遍历array这个集应时，将暂时变量保存在tmp中，竖立多个any标签

3、指令-挑选指令
    语法：
      <any v-if="表达式"></any>
      <any v-else-if="表达式"></any>
      <any v-else="表达式"></any>
    作用：
      依据表达式实行结果的真假，来决议是不是要将当前的这个元素 挂载到DOM树


4、指令-事宜绑定
    语法：
        <any v-on:eventName="handleEvent"></any>
    作用：
        给指定的元素 将handleEvent的要领绑定给指定eventName事宜
    

5、指令-属性绑定
  基础语法：
    <any v-bind:myProp="表达式"></any>
    补充，支撑简写：
    <any :myProp="表达式"></any>
  作用：
    将表达式实行的结果 绑定 到当前元素的myProp属性

    <img v-bind:src="'img/'+myImg" alt="">
   动态款式绑定
    <p :style="{backgroundColor:myBGColor}">动态款式绑定</p>

   动态款式类绑定
      <h1 :class="{myRed:false}">动态款式类的绑定</h1>

6、指令-双向数据绑定
    方向1：数据绑定到视图
    方向2：将视图中（表单元素）用户操纵的结果绑定到数据

    基础语法:
      <表单元素 v-model="变量">
      </表单元素>

4.组件化

组件：组件就是可被重复运用的，带有特定功用的视图

所谓的组件化，就像玩积木一样，把封装的组件举行复用,把积木（组件）拼接在一起，组成一个庞杂的页面应用程序。

组件树就是由各个组件组成的一种数据结构，它存在的意义是为了帮梳理应用程序

1、组件的竖立
  全局组件
    Vue.component('my-com',{
      template:`
        <h2>it is a header</h2>
      `
    })
      部分组件
    new Vue({
        components:{
            'my-footer':{
           template:''
         }
        }
    })
2、组件运用
    作为平常的标签去运用
    <my-com></my-com>


3、注意事项
    1.组件的id和运用体式格局 遵照烤串式定名体式格局：a-b-c 
    2.假如一个组件 要衬着多个元素，将多个元素放在一个顶层标签中，比方div、form
    3.全局组件能够用在id为example的范围内的任何一个组件内部，直接挪用能够；然则部分组件只能在父模板中直接挪用

5.自定义指令

1、竖立和运用
 Vue.directive('change',{
    bind:function(el,bindings){
    //初次挪用
    },
    update:function(el,bindings){
    //只如果有数据变化，都邑挪用
    },
    unbind:function(){
    //解绑
    }
 })
 <any v-change="count"></any>

6.过滤器

过滤器是针对一些数据 举行挑选、过滤、格式化等相干的处置惩罚，变成我们想要的数据

过滤器的实质 就是一个带有参数带有返回值的要领

Vue1. 支撑内置的过滤器，然则Vue2. 就不再内置过滤器，然则支撑自定义过滤器。

1、过滤器的竖立和运用

1.竖立
   Vue.filter(
    'myFilter',
    function(myInput){
       //myInput是在挪用过滤器时，管道前表达式实行的结果
       //针对myInput，根据营业需求做处置惩罚
       //返回
       return '处置惩罚后的结果'
    })

2.运用
    <any>{{expression | myFilter}}</any>

2、如安在挪用过滤器时，完成参数的发送和接收

1.发送
<any>{{expression | myFilter(参数1，参数2)}}</any>

2.接收
Vue.filter('myFilter',function(myInput，参数1，参数2){
    return '处置惩罚后的结果'
})

7.复合组件

学问回忆：
  Vue.component('my-header',{
    template:`<div></div>`
  });

  <my-header></my-header>

 复合组件：并非新的观点，就是一个组件，只不过这个组件中 能够挪用其他的组件

 注意事项：
  1.组件要衬着的内容 取决于在定义组件时template
  
  <my-list>
    <my-item></my-item>
  </my-list>
  结果是出不来的
  2.许可在一个组件中，直接来挪用别的一个组件

8.生命周期

四个阶段：
    create 准备事情 （数据的初始化。。。）
    mount  挂载前后针对元素举行操纵
    update 数据发生变化，
    destroy 清算事情 (封闭定时器、鸠合清空..)

    beforeCreate/created
    beforeMount/mounted
    beforeUpdate/updated
    beforeDestroy/destroyed

9.经常使用属性

1、watch
       1. 表单元素的双向数据绑定
   v-model="myValue"
   2.监听
    watch:{
    myValue:function(newValue,oldValue){
    
    }
    }
2、computed
    盘算属因而用于在模板中，搞定庞杂的营业逻辑，由于有依靠缓存。
    1.指定盘算属性
        computed:{
          myHandle:function(){
           return 数据
          }
        }

    2.挪用
        <any>{{myHandle}}</any>

10.组件间通讯

1、父与子通讯 （props down）
    1.发送
        <son myName='zhangsan'>
        </son>
    2.接收
        到son组件：
        Vue.component('son',{
          props:['myName'],
          template:`
           <p>{{myName}}</p>
          `
        })
    
2、子与父通讯 (events up)
     1.绑定
    methods:{
     handleEvent:function(msg){}
    }
    <son @customEvent="handleEvent"></son>
    2.触发
    子组件内部：
    this.$emit(‘customEvent’,100);

3、ref(reference 援用/参考 绰号)
 协助在父组件中 获得子组件中的数据、要领。
    1.指定ref属性
    <son ref="mySon"></son>

    2.依据ref获得子组件实例
    this.$refs.mySon

4、$parent
    this.$parent获得父组件的实例

5、兄弟组件通讯
    1.var bus = new Vue();
    2.接收方
    bus.$on('eventName',function(msg){})
    3.发送方
    bus.$emit('eventName',123);

11.补充组件竖立的体式格局

1、直接在template属性中指定模板内容
    1.全局组件
    Vue.component
    2.部分组件
    {
      components:{
        'my-footer'：{template:``}
      }
    }
2、.vue末端的文件
    <template></template>
    <script></script>
    <style></style>
3、零丁指定一个模板内容
    <script
    id='myContent'
    type='text/x-template'>
    </script>

    Vue.component('',{
      template:'#myContent'
    })

12.路由模块

路由模块的实质 就是竖立起url和页面之间的映照关联

1、SPA的基础观点和事情道理

SPA：single page application 单一页面应用程序，只要一个完全的页面；
它在加载页面时，不会加载全部页面，而是只更新某个指定的容器中内容。
比方Gmail、挪动的webApp


事情道理：
1.剖析地点栏 
    完全的页面地点、路由地点
2.依据路由地点 从路由辞书中找到真正的要加载的页面
3.提议ajax要求 
    要求要加载的页面
4.像指定的容器中 插进去加载来的页面

2、路由模块的基础运用

专业术语： 
    router路由器 
    route路由
    routes 路由数组（路由辞书）
1.引入vue.js vue-router.js
2.指定一个容器
<router-view></router-view>
3.竖立营业所须要用到的组件类
        var MyLogin = Vue.component()
4.设置路由辞书
 const myRoutes = [
  {path:'',component:MyLogin},
  {path:'/login',component:MyLogin}
 ];

 const myRouter = new VueRouter({
  routes:myRoutes
 })

 new Vue({
   router:myRouter
 })
5.测试
    修正地点栏中的路由地点，测试看加载的组件是不是准确

注意事项：
 1.先引入vue，再引入插件
 2.一定要指定router-view
 3.route路由 {path:'',component:}
  routes 路由数组 []
  router 路由器:根据指定的路由划定规矩去接见对应的组件 new VueRouter

3、运用路由模块来完成页面跳转的体式格局

体式格局1：直接修正地点栏
体式格局2：js
this.$router.push(‘路由地点’);
体式格局3：
 <router-link 
 to="路由地点"></router-link>

4、完成参数的通报

在页面之间跳转的时刻，在有些场景下，须要同时指定参数

1.明白发送方和接收方
list --20--> detail
1.设置接收方的路由地点
/detail --》 /detail/:index

this.$route.params.index
2.发送
routerLink to="/detail/20"
this.$router.push('/detail/20')

5、路由嵌套

在一个路由中，path对应一个component，假如这个component须要依据
差别的url再加载其他的component，称之为路由的嵌套

举例：比方A组件如今须要依据差别的url，加载B组件或许C组件
1.给A组件指定一个容器
  <router-view></router-view>
2.设置路由辞书
  {
    path:'/a',
    component:A,
    children:[
      {path:'/b',component:B}
    ]
  }

  需求：如今有两个组件，分别是login/mail,竖立SPA。
  在此基础上，愿望mail组件 嵌套inbox/outbox/draft

  补充：在设置子路由，路由婚配划定规矩依然是实用的，
  只不过路由地点为空和非常，要照顾父组件的路由地点
  /mail /mail/draft

13.搭建基于CLI开辟环境的体式格局

1.指定一个文件夹
C:\xampp\htdocs\framework\vue\project
2.将tpls.zip拷贝到project中 
3.右键单击压缩包，解压缩到当前文件夹
4.进入到tpls
5.同时按下shift和鼠标右键，挑选在此位置翻开命令行串口
6.实行npm install
7.实行npm start

14.axios

1.axios的get要领

export const getAjax= function (getUrl,getAjaxData) {
  return axios.get(getUrl, {
    params: {
      'getAjaxDataObj1': getAjaxData.obj1,//obj1为getAjaxData的一个属性
      'getAjaxDataObj2': getAjaxData.obj2
    }
  })
}

2.axios的post要领

export const postAjax= function (getUrl,postAjaxData) {
return axios.get(postUrl, {

  'postAjaxDataObj1': postAjaxData.obj1,//obj1为postAjaxData的一个属性
  'postAjaxDataObj2': postAjaxData.obj2

})
}

3.axios的阻拦器
重要分为要乞降相应两种阻拦器,要求阻拦平常就是设置对应的要求头信息(实用与罕见要求要领,虽然ajax的get要领没有要求头,然则axios内里举行啦封装),相应平常就是对reponse举行阻拦处置惩罚,假如返回结果为[]能够转化为0

1.要求阻拦:将当前都市信息放入要求头中

axios.interceptors.request.use(config => {
config.headers.cityCode = window.sessionStorage.cityCode //jsCookie.get(‘cityCode’)
return config
},

2.相应阻拦:处置惩罚reponse的结果

axios.interceptors.response.use((response) =>{
  let data = response.data
  if(response.request.responseType === 'arraybuffer'&&!data.length){
    reponse.date=0
  }
})