【Vue2】基础知识二

• 跳转【Vue2】基础知识一

• 跳转【Vue2】基础知识二

脚手架文件结构

|—— node_modules

|—— public

|   |—— favicon.ico: 页签图标

|   |—— index.html: 主页面

|—— src

|   |—— assets: 存放静态资源

|   |      |—— logo.png

|   |—— components： 存放组件

|   |      |—— HelloWorld.vue

|   |—— App.vue: 汇总所有文件

|   |—— main.js: 入口文件

|

|—— .gitignore：git版本管理忽略的配置

|—— babel.config.js：babel的配置文件

|—— package-lock.json：包版本控制文件

|—— package.json：应用包配置文件

|—— README.md：应用描述文件

|—— vue.config.js：自定义控制脚手架配置

 

关于不同版本的Vue：

    1.vue.js与vue.runtime.xxx.js的区别

       1.vue.js是完整版的vue，包含：核心功能+模板解析器

       2.vue.runtime.xxx.js 是运行版的Vue，只包含：核心功能：没有模板解析器

    因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用

    render函数接收到的createElement函数去指定具体内容。

 

vue.config.js配置文件

>    使用vue inspect > output.js可以查看到Vue脚手架的默认配置。

>    使用vue.config.js可以对脚手架进行个性化定制，详情见vue官网 > vue 生态cli >配置参数

 

ref属性

  1.被用来给元素或子组件注册引用信息（id的替代者）

  2.应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）

  3.使用方式：

      打标识：<h1 ref="xxx">...</h1> 或 <School ref="xxx"></School>

      获取：   this.$refs.xxx

 

配置项props

    功能：让组件接收外部传过来的值

      （1）传递数据：

          <Demo name="xxx"/>

      （2）接收数据 （接受数据三种写法）

          第一种方法（只接收）：

          props：['name']

          第二种方法（限制类型）：

          props：{

            name:String

          }

          第三种方法（限制类型、限制必要性、指定默认值）：

            props:{

              name:{

                  type:String,//类型

                  required:true,//必要性

                  default:'老王'//默认值

              }

            }

      备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，

      若业务需求确实需要修改，name请复制props的内容到data中一份，然后去修改data中的数据。(data里重新return ，储存一个新变量名储存值，然后后用methods或computed计算一下)

 

mixin(混入) 基础模块暴露，代码复用

    功能：可以把多个组件共用的配置提取成一个混入对象

    使用方式：

        第一步定义混合，例如：

          {

            data()(...),

            methods:(...)

            ......

          }

        第二步使用混入，例如：

            （1）全局混入：Vue.mixin(xxx)

            （2）局部混入：mixins:['xxx']

 

插件（使用方法类似express里的中间件）

    功能：用于增强Vue

    本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。

   

    定义插件：对象.install = function(Vue,options){

       // 全局过滤器

        Vue.filter('mySlice',function (value) {})

        // 定义全局指令

        Vue.directive('fbind', {})

        // 配置全局混入

        Vue.mixin({})

        // 给vue原型上添加方法（vm和vc都能用了）

        Vue.prototype.$myMethod = () =>{alert('你好啊')}

        Vue.prototype.$myProperty = xxx

    }

    使用插件：

    Vue.use(plugins)

 

scope样式

    作用：让样式在局部生效，防止冲突。

    写法：<style scoped>  <style lang="less">

 

总结TodoList案例

    1.组件化编码流程：

      （1）. 拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。

      （2）. 实现动态组件：考虑好数据的存放位置，数据是一个组件再用，还是一些组件再用；

             1）一个组件在用：放在组件自身即可。

             2）一些组件在用：放在他们共同的父组件上（状态提升）。

      （3）. 实现交互，从绑定事件开始。

    2.props适用于：

      （1）父组件==> 子组件  通信

      （2）子组件==> 父组件 通信（要求父先给一个函数）

    3.使用v-model要切记：v-model绑定的值不能是props传过来的值，因为props是只读不可修改的。

    4.props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。

 

webSrorage

    1.存储内容大小一般支持5MB左右（不同浏览器可能还不一样）

    2.浏览器通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。

    3.相关API：

      1.local/sessionStorage.setItem('key', 'value')

      2.local/sessionStorage.getItem('key', 'value')

      3.local/sessionStorage.removeItem('key')

      4.local/sessionStorage.clear()

    4.备注：

      1.sessionStorage 存储的内容会随着浏览器窗口关闭而消失

      2.LocalStorage存储的内容，需要手动清除才会消失

      3.local/sessionStorage.getItem（xxx）如果对应的value获取不到，那么对应的返回值是null

      4.JSONP.parse(null)的结果依然是null

 

组件的自定义事件★

  1.一种组件间通信的方式，适用于： 子组件==>父组件

  2.使用场景：A是父组件，B是子组件，B想给A传数据，name就要在A中给B绑定自定义事件（事件的回调在A中）

  3.绑定自定义事件（自定义时间名称必须用小写或者用 x-x 连接）：

        1.第一种方式，在父组件中   <Demo @atguigu="test" /> 或 <Demo v-on:atguigu="test" />

        2.第二种方式

            <Demo ref="demo" />

            .....

            mounted(){

              this.$refs.xxx.$on('atguigu', this.test)

            }

        3.若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。

        4.触发自定义事件：this.$emit('atguigu', data)

        5.解绑自定义事件：this.$off('atguigu')

        6.组件上也可以绑定原生DOM事件，需要使用native修饰符。★

        7.注意：通过this.$refs.xxx.$on('atguigu', options)绑定自定时事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出现问题。

 

全局事件总线（GlobalEventBus）

  1.一种组件间通信方式，适用于任意组件间通信。

  2.安装全局事件总线：

    　　new Vue({

      　　......

      　　beforeCreate(){

          　　Vue.prototype.$bus = this           //安装全局事件总线，$bus就是当前应用的vm

                         　　 在vm create时给vue原型对象安装一个傀儡$bus（傀儡vm实例对象）

      　　}

      　　.....

   　　 })

  3.使用事件总线：

    1）.接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身

      　　methods(){

        　　demo(data){......}

      　　}

      　　.....

      　　mounted(){

        　　this.$bus.$on('事件名', this.demo)           //或者直接把this.demo写成成回调函数形式

      　　}

     2）.提供数据：this.$bus.$emit('事件名', data)

  4.最好在beforeDestroy钩子中，用$off 去解绑当前组件所用到的事件。

 

消息订阅与发布（全局事件总线的封装库）（react常用）

  1.一种组件间通信的方式，适用于任意组件间通信。

  2.使用步骤：

    1.安装pubsub： npm i pubsub-js

    2.引入： import pubsub from 'pubsub-js'

    3.订阅方接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身

   　　   method(){

   　　     demo(data){.....}

  　　    }

   　　   .....

   　　   mounted(){

     　　   this.pid = pubsub.subscribe('xxx', this.demo)//订阅消息

   　　   }

     4.发布方提供数据：pubsub.publish('xxx', data)

     5.最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid) 去取消订阅

 

nextTick

    1.语法 this.$nextTick(回调函数)

    2.作用 在下一次DOM更新结束后执行其指定的回调

    3.什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行

 

插槽

    1.作用：让父组件向子组件指定位置插入html结构，也是一种组件间通信的方式，使用于父组件 ===> 子组件（props反向配置）

    2.分类：默认插槽、具名插槽、作用域插槽

    3.使用方式

          1.默认插槽

            父组件

                  <Category>

                    <div>html结构</div>

                  </Category>

            子组件

                  <template>

                    <div>

                      <!-- 定义插槽 -->

                        <slot>插槽默认内容</slot>

                    </div>

                  </template>

           2.具名插槽

             父组件

                  <Category slot="center">

                      <div>html结构1</div>

                  </Category>

                  <Category v-slot:footer>

                      <div>html结构2</div>

                  </Category>

            子组件

                  <template>

                    <div>

                      <!-- 定义插槽 -->

                        <slot name="center">插槽默认内容...</slot>

                        <slot name="footer">插槽默认内容...</slot>

                    </div>

                  </template>

            3.作用域插槽

                1.理解：数据在组件自身，但根据数据生成的结构需要的组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）

                2.具体编码：

 

  <Category>
      <template scope="scopeData">
        <!-- 生成ul列表 -->
        <ul>
          <li v-for="(g, index) in scopeData.games" :key="index">{{g}}</li>
        </ul>
      </template>
  </Category>

  <Category>
      <template slot-scope="scopeData">
        <!-- 生成h4标题 -->
        <h4 v-for="(g, index) in scopeData.games" :key="index">{{g}}</h4>
      </template>
  </Category>

<!-- 子组件 -->
<template>
  <div>
    <slot :games="games">我是默认的</slot>
  </div>
</template>

<script>
  export default {
    name:"Category",
    props:['title'],
    data() {
    return {
      games: ["红色警戒", "穿越火线", "劲舞团", "超级玛丽"],
    };
  },

  }
</script>

 

Vuex

  1.概念：在vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且使用以任意组件间通信。

  2.何时使用：多个组件需要共享数据时

  3.搭建vuex环境

 

      1.创建文件  src/store/index.js

<!-- !该文件用于创建Vuex中最为核心的store -->
<!-- !引入vue -->
import Vue from 'vue'
<!-- !引入Vuex -->
import Vuex from 'vuex'
<!-- !使用vuex插件 -->
Vue.use(Vuex)

<!-- !准备actions,用于响应组件中的动作 -->
const actions ={}
<!-- !准备mutations,用于操作数据（state） -->
const mutations ={}
<!-- !准备state,用于存储数据 -->
const state ={}


<!-- !创建并暴露store -->
  export default new Vuex.Store({
      actions,
      mutations,
      state
  })

      2.main.js中创建vm时传入store配置项

  import Vue from "vue";
  import App from './App.vue';
  Vue.config.productionTip = false;
  <!-- !引入store -->
  import store from './store/index'

  new Vue({
      el:"#app",
      render:(h)=> h(App),
      store,
      beforeCreate() {
          Vue.prototype.$bus = this
      },
  })

      3.基本使用，配置actions、配置mutations、操作文件store.js

1.  
<!-- !该文件用于创建Vuex中最为核心的store -->
<!-- !引入vue -->
import Vue from 'vue'
<!-- !引入Vuex -->
import Vuex from 'vuex'
<!-- !使用vuex插件 -->
Vue.use(Vuex)
<!-- !准备actions,用于响应组件中的动作 -->
const actions ={
    jia(context, value) {
        console.log('actions中的jia被调用');
        context.commit('JIA', value)
    }
}
<!-- !准备mutations,用于操作数据（state） -->
const mutations ={
    JIA(state, value){
        console.log('mutations中的JIA被调用');
        state.sum += value
    }
}
<!-- !准备state,用于存储数据 -->
const state ={
    sum:0 //当前的和
}

<!-- !创建并暴露store -->
export default new Vuex.Store({
    actions,
    mutations,
    state
})
<!-- !模板里不用写this,js脚本里写应该加this -->
2.组件中读取vuex中的数据：$store.state.sum
3.组件中修改vuex中的数据：$store.dispatch('actions中的方法名'， 数据)
或直接 $store.commite('mutations中的方法名', 数据)
若没有网络请求或其他业务逻辑，组件中也可以越过actions,即不写dispatch,直接编写commit

    4.getters的使用

      1.概念：当state中的数据需要经过加工再使用时，可以使用getters加工

      2.在store.js中追加getters配置

      3.组件中读取数据，$store.getters.bigSum

<!-- !准备getters，用于将state中的数据进行加工 -->
const getters ={
    bigSum(state){
        return state.sum*10
    }
}
<!-- !创建并暴露store -->
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})

      6.四个map方法的使用

        1.mapState:用于帮助我们映射state中的数据为计算属性
<!-- !借助mapMutations生成对应的方法，方法中会调用commit去联系mutations（数组写法） -->
computed:{
...mapMutations(['JIA', 'JIAN']),
}
<!-- !借助mapMutations生成对应的方法，方法中会调用commit去联系mutations（对象写法） -->
computed:{
...mapMutations({increase:'JIA', decrease:'JIAN'}),
}
 
        2.mapGetters方法：用于帮助我们映射getters中的数据为计算属性
<!-- !借助mapStae生成计算属性，从state中读取数据。（对象写法） -->
computed:{
...mapGetters({bigSum:'bigsum'})
}
<!-- !借助mapState生成计算属性，从state中读取数据。（数组写法） -->
computed:{
...mapGetters(['bigSum'])
}

        3.mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数
<!-- !借助mapMutations生成对应的方法，方法中会调用diapatch去联系actions（数组写法） -->
methods:{
...mapActions(['jiaOdd', 'jiaWait']),
}
<!-- !借助mapMutations生成对应的方法，方法中会调用diapatch去联系actions（对象写法） -->
methods:{
...mapActions({increaseOdd:'jiaOdd', increaseWait:'jiaWait'})
}

      7.模块化+命名空间

        1.目的：让代码更好维护，让多种数据分类更加明确。

        2.修改store.js(inde.js)

<!-- !求和相关的配置 -->
const countAbout = {
    <!-- *开启命名空间，以区分不同组件 -->
    namespaced:true,
    state: { x:1 },
    actions: { ... },
    mutations: { ... },
    getters: {
        bigSum(state) {
            return state.sum * 10
        }
    }
}
<!-- !人员管理相关的配置 -->
const personAbout = {
    <!-- *开启命名空间，以区分不同组件 -->
    namespaced:true,
    state: { x:1 },
    actions: { ... },
    mutations: { ... },
}
<!-- !创建并(暴露)store -->
const store =  new Vuex.Store({
    modules:{
        countAbout:countOptions,
        personAbout:personOptions
    }
})

        3.开启命名空间后，组件中读取state数据（这里直接去案例里看具体写法）Count.vue里用了map方式，Person.vue用了纯自己写的

  　　　　方式一、自己直接读取

 　　　　 return this.$store.state.personAbout.personList

 　　　　 方式二、借助mapState读取

 　　　　 ...mapState('countAbout', ['sum', 'school', 'subject']),

        4.开启命名空间后，组件中读取getters数据

 　　　　 方式一、组件直接读取

　　　　  return this.$store.getters['personAbout/firstPersonName']

　　　　  方式二、借助mapGetters读取

　　　　  ...mapGetters('countAbout', ['bigSum'])

       5.开启命名空间后，组件中调用dispatch数据

　　　　  方式一、组件直接读取

 　　　　 this.$store.dispatch('personAbout/addPersonWang', personObj)

 　　　　 方式二、借助mapGetters读取

  　　　　...mapActions('countAbout', {increaseOdd:'jiaOdd', increaseWait:'jiaWait'})

        6.开启命名空间后，组件中调用commit

 　　　　 方式一、组件直接读取

  　　　　this.$store.commit('personAbout/ADD_PERSON', personObj)

 　　　　 方式二、借助mapGetters读取

 　　　　 ...mapMutations('countAbout', {increase:'JIA', decrease:'JIAN'}),

 

路由

    1.理解：一个路由（route）就是一组映射关系（key - value）,多个路由需要路由器（router进行管理）

    2.前端路由：key是路径，value是组件。

    一、基本使用

      1.安装vue-router，命令：npm i vue-router

      2.应用插件:Vue.use(VueRouter)

      3.编写router配置项

  <!-- !该文件专门用于创建整个应用的路由器 -->
  import VueRouter from "vue-router";
  <!-- !引入路由组件 -->
  import About from '../components/About'
  import Home from '../components/Home'

  <!-- !创建并暴露一个路由器,去管理一组一组的路由规则 -->
  export default new VueRouter({
      routes:[
          {
              path:'/about',
              component:About
          },
          {
              path:'/home',
              component:Home
          },
      ]
  })

      4.实现切换（active-class可配置高亮样式）

  　　　　<router-link active-class="active" to="/about">About</router-link>

      5.指定展示位置

 　　　　 <router-view></router-view>

 

    二、几个注意点

        1.路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。

        2.通过切换，‘隐藏’了的路由组件，默认是被销毁掉的，需要的时候再去挂载

        3.每个组件都有组件的$route睡醒，里面存储着组件的路由消息。

        4.整个应用只有一个router，可以通过组件的$router属性获取到

 

    三、多级路由（嵌套路由）

      1.配置路由规则，使用children配置项

<!-- !创建并暴露一个路由器 -->
export default new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            children:[  //通过childrend配置子级路由
                {
                    path:'news',    //二级路由不能加路径/
                    component:News,
                },
                {
                    path:'message', //二级路由不能加路径/
                    component:Message,
                },
            ]
        },
    ]
})

      2.跳转（要写完整路径）

 　　　　 <router-link to="/home/message">Message</router-link>

 

    四、路由的query参数

         1.传递参数

  <!-- !跳转路由并携带query参数，to的字符串写法 -->
  <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>&nbsp;&nbsp;
  <!-- !跳转路由并携带query参数，to的对象写法 -->
  <router-link :to="{
      path:'/home/message/detail',
      query:{
          id:m.id,
          title:m.title
      }
  }">
      {{m.title}}</router-link>

         2.接收参数

   　 　$route.query.id

  　 　 $route.query.title

 

    五、命名路由

         1.作用：可以简化路由的跳转

         2.如何使用

            1.给路由命名：

  {
    path:'/demo',
    component:Demo,
    children:[
        {
            path:'test', //二级路由不能加路径/
            component:Test,
            children:[
                {
                    name:'hello',
                    path:'welcome', //二级路由不能加路径/
                    component:Hello,
                }
            ]
        },
    ]
  },

            2.简化跳转

  <!-- !简化前，需要写完整路径 -->
  <router-link to="/demo/test/welcome">跳转</router-link>
  <!-- !简化后，直接通过名字跳转 -->
  <router-link :to="{name:'hello'}">跳转</router-link>

  <!-- !简化写法配合传递参数 -->
  <router-link :to="{
      name:'hello',
      <!-- //path:'/home/message/detail', -->
      query:{
          id:m.id,
          title:m.title
      }
  }">
  跳转</router-link>

    六、路由的params参数

        1.配置路由，声明并接收params参数

  {
    path:'/demo',
    component:Demo,
    children:[
        {
            path:'test', //二级路由不能加路径/
            component:Test,
            children:[
                {
                    name:'hello',
                    path:'/demo/:id/:title', //使用占位符声明并接收params参数
                    component:Hello,
                }
            ]
        },
    ]
  },

        2.传递参数

        路由使用params参数时，若使用to的对象写法，则不能使用path配置项（/aa/bb），必须使用name配置

  <!-- !跳转并携带params参数，to的字符串写法 -->
  <router-link to="/demo/test/welcome/666/你好">跳转</router-link>
  <!-- !跳转并携带params参数，to 的对象写法 -->
  <router-link :to="{
      name:'hello', //路由使用params参数时，若使用to的对象写法，则不能使用path配置项（/aa/bb），必须使用name配置
      query:{
          id:m.id,
          title:m.title
      }
  }">
  跳转</router-link>

        3.接收参数

  　　 　　$route.params.id

  　　　     $route.params.title

    七、路由的props配置

          作用：让路由组件更方便的收到参数

{
  path:'message', 
  component:Message,
  children:[
      {
          name:'xiangqing',
          path:'detail',  //二级路由不能加路径
          component:Detail,

          <!-- !props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件 -->
          props:{a:1,b:'hello'}
           <!-- !props的第二种写法,值为对象，若布尔值为真，就会把路由组件收到的所有params参数，以props的形式传给Detail组件 -->
          props:true
           <!-- !props的第三种写法,值为函数,此写法最强大,此处可以解构赋值并连续解构赋值 -->
          props({$route}){
              return {
                  id:$route.query.id,
                  title:$route.query.title
              }
          }
      }
  ]
},

   八、<router-link>的replace属性

          1.作用：控制路由器跳转时操作浏览器历史记录的模式

          2.浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前的记录，路由跳转时候默认为push

          3.如何开启replace模式<router-link replace ...>News</router-link>

  九、编程时路由导航

          1.作用：不借助<router-link>实现路由跳转，让路由跳转更加灵活

          2.具体编码

  <!-- !$router的两个API -->
  this.$router.push({
        name:'xiangqing',   //使用params参数不允许使用path配置项
        query:{
            id:m.id,
            title:m.title
        }
  })

  this.$router.replace({
        name:'xiangqing',   //使用params参数不允许使用path配置项
        query:{
            id:m.id,
            title:m.title
        }
  })

  <!-- !$router的另外三个API -->
  前进
  back(){
      this.$router.back()
  },
  后退
  forward(){
      this.$router.forward()

  },
  可前进也可后退
  test(){
      this.$router.go(+3)
  }