Vue学习笔记与常用操作

脚手架文件结构

在源码目录中创建如下结构： ​

 - App.vue：是所有组件的父组件
 ​
 - main.js: 是整个项目的入口
 ​
 - assets：用于存放静态资源文件
 ​
 - components：用于存放Vue功能组件
 ​
 - views：用于存放Vue视图组件
 ​
 - router：用于存放vue-router配置

关于不同版本的Vue:

   1.vue.js与vue.runtime.xxx.js的区别:
         (1).vue.js是完整版的Vue，包含:核心功能+模板解析器。
         (2).vue.runtime.xxx.js是运行版的Vue，只包含:核心功能;没有模板解析器。
   2.因为vue.runtime.xxxjs没有模板解析器，所以不能使用template配置项，需要使用 render函数接收到的createElement函数去指定具体内容。
 ​
 ​

ref属性

     1.被用来给元素或子组件注册引用信息(id的替代者)
     2.应用在htm1标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象(vc)
     3.使用方式:
         打标识:<h1 ref="xxx">.....</h1> 或<School ref="xxx"></School>
         获取:this.$refs.xxx

配置项props

功能:让组件接收外部传过来的数据

 (1)传递数据:
 ​
      <Demo name="xxx"/>
      
 (2).接收数据:
 ​
      第一种方式(只接收):
          props:['name']
         
      第二种方式(限制类型):
         props:{
             name:Number
             }
             
      第三种方式(限制类型、限制必要性、指定默认值):
         props:{ 
            name:{
                     type:String，//类型
                     required:true，//必要性 
                     default:老王//默认值
                   }
                 }
 备注:props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，

插件

 功能:用于增强Vue
         本质:包含instal1方法的一 个对象，instal1的第一个参 数是Vue,第二个以后的参数是插件使用者传递的数据。
         定义插件:
             对象.install = function (Vue, options) {
                 // 1.添加全局过滤器
                 Vue . filter(....)
                 // 2.添加全局指令
                 Vue . directive(....)
                 // 3.配置全局混入(合)
                 Vue . mixin(....)
                 // 4.添加实例方法
                 Vue . prototype . $myMethod = function () {...}
                 Vue . prototype . $myProperty = xxxx
      使用插件: Vue.use()

scoped样式

 1.作用：让样式在局部生效，防止冲突
 2.写法：<style scoped>

总结TodoList案例

参考代码

 1.组件化编码流程:
 ​
         (1).拆分静态组件:组件要按照功能点拆分，命名不要与html元素冲突。
 ​
         (2).实现动态组件:考虑好数据的存放位置,数据是一个组件在用, 还是一 些组件在用: 
 ​
                 1).一个组件在用:放在组件自身即可。
 ​
                 2).一些组件在用: 放在他们共同的父组件.上(状态提升)。
                 
                 (3).实现交互:从绑定事件开始。
 ​
 2. props适用于:
 ​
          (1).父组件==>子组件通信
 ​
          (2).子组件==>父组件通信(要求父先给子-一个函数)
 ​
 3.使用v-modelI时要切记: v-model绑定的值不能是props传过来的值，因为props是不可以修改的!
 ​
 4. props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。

webStorage（本地存储和会话技术）

 ​
     1.存储内容大小一般支持5MB左右(不同浏览器可能还不一样)
     2.浏览器端通过WindowsessionStorage和WindowlocalStorage属性来实现本地存储机制。
     3.相关API:
         1.xxxxxStorage.setItem('key','value');
             该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。
         
         2.xxxxxStorage.getItem('person');
             该方法接受一个键名作为参数，返回键名对应的值。
         3.xxxxxStorage.removeItem('key');
             该方法接受一个键名作为参数，并把该键名从存储中删除。
         4.*xxxxStorage.clear()
             该方法会清空存储中的所有数据。
     4.备注:
         1.SessionStorage存储的内容会随着浏览器窗口关闭而消失。
         2.LocalStoraae存储的内容，需要手动清除才会消失。
         3.xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getltem的返回值是null
         4.JSON.parse(null)的结果依然是null

组件的自定义事件

 ##组件的自定义事件
 ​
     1.一种组件间通信的方式，适用于:子组件==>父组件
 ​
     2.使用场景:A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件(事件的回调在A中)。
 ​
     3.绑定自定义事件:
             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,数据)
 ​
     5.解绑自定义事件this.$off('atguigu')
 ​
     6.组件上也可以绑定原生DOM事件，需要使用native修饰符。
 ​
     7.注意:通过this.$refs.xxx.$on(atguigu，回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题!

全局事件总线(GlobalEventBus)

 ##全局事件总线(GlobalEventBus)
         1.一种组件间通信的方式，适用于任意组件间通信。
         
         2.安装全局事件总线:
             new Vue({
               beforeCreate(){
                 Vue.prototype.$bus=this//安装全局事件总线，$bus就是当前应用的vm}，
              })
         3.使用事件总线:
               1.接收数据:A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。
                     methods(){
                     demo(data){......}}
                     
                     mounted(){
                     this.$bus.$on('xxxx',this.demo)
                     
                     
               2.提供数据:this.$bus.$emit(xxxx,数据)
               
         4.最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件

消息订阅与发布(pubsub)

 npm i pubsub-js

 ##消息订阅与发布(pubsub)
         1.一种组件间通信的方式，适用于任意组件间通信。
         
         2.使用步骤:
             1.安装pubsub:npm i pubsub-js
             2.引入: import pubsub from 'pubsub-js'
             3.接收数据:A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。
                     methods(){
                     demo(data){......}}
                     
                     ....
                     mounted(){
                     this.pid=pubsub.subscribe(xxxthisdemo)//订阅消息   I  
 ​
             4.提供数据:pubsub.publish('xxx,数据)
             5.最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去取消订阅

现在我学习过的，组件间的通讯

父传>子 1. props ，

子>传父 ：1.自定义组件，2.props ，前提是父组件给子组件一个回调函数

兄弟组件互传 1.全局事件总线 2.用第三方库的，消息发布与订阅

过渡动画(插件：Animate.css在vue中的使用)

vue中Animate.css的安装和使用

安装：

 npm install animate.css --save
 //或者
 yarn add animate.css

引入

在main.js全局引入

 ​
 import animate from 'animate.css' // npm install animate.css --save安装，在引入
  
 Vue.use(animate)

选择你要的样式

打开官网Animate.css

具体使用

1>基本的使用就是在过度元素上使用对应的name属性

 <transition-group name="fadeLeft" tag="ul">
     <li v-for="item in items" v-bind:key="item">
         {{ item }}
     </li>
 </transition-group>

2>使用不同的载入载出动画

第一种：使用custom-classes-transition,需要在不同的载入,载出动画上加-enter和-leave后缀

 <transition
   name="custom-classes-transition"
   enter-active-class="bounceLeft-enter"
   leave-active-class="bounceRight-leave"
 >
   <p v-if="show">hello</p>
 </transition>

第二种：使用in/out类名在动画名后面加上In或者Out

 <transition
   name="bounce"
   enter-active-class="bounceInLeft"
   leave-active-class="bounceOutRight"
 >
   <p v-if="show">hello</p>
 </transition>

案例：

 <template>
 ​
     <transition
             appear
     name="animate__animated animate__bounce"
     enter-active-class="animate__backInLeft"
     leave-active-class="animate__backOutDown"
     >
     <div >
         <button @click="isShow = !isShow">显示/隐藏</button>
         <h1 v-show="isShow" >你好啊!</h1>
     </div>
     </transition>
 </template>

过渡动画总结

 写法:
     1.准备好样式:
         ·元素进入的样式:
             1v-enter:进入的起点
             2.v-enter-active:进入过程中
             3.v-enter-to:进入的终点
         .元素离开的样式:
             1v-leave:离开的起点
             2v-leave-active离开过程中
             3.v-leave-to:离开的终点
     2.使用<transition>包裹要过度的元素，并配置name属性:
         <transition name="hello">
         <h1v-show="isShow">你好啊!</h1>
         </transition>
 ​
     3.备注:若有多个元素需要过度，则需要使用:<transition-group>，且每个元素都要指定key值。

vue脚手架配置代理

 方法一:
     在vueconfigjs中添加如下配置:
             devServer:{
             proxy:"http://localhost:5000
 ​
 说明:
 1.优点:配置简单，请求资源时直接发给前端(8080)即可。
 2.缺点:不能配置多个代理，不能灵活的控制请求是否走代理。
 3.工作方式:若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器(优先匹配前端资源)

 方法二
 编写vueconfigjs配置具体代理规则:
         module.exports={
             devServer:{ 
             proxy:{
                 '/api1':{//匹配所有以/api1"开头的请求路径
                 target:'http://localhost:5000',// 代理目标的基础路径 changeOrigin: true,
                 pathRewrite:{'^/api1':''}}，
                 '/api2':{//匹配所有以/api2开头的请求路径
                 target:'http://localhost:5001',//代理目标的基础路径 changeOrigin: true,
                 pathRewrite:{'^/api2':''}
         }
         }}/*
         
 changeOrigin设置为true日，服务器收到的请求头中的host为:localhost:5000 
 changeOrigin设置为false时，服务器收到的请求头中的host为:localhost:8080
 changeOrigin默认值为true*/
 说明:
 1.优点:可以配置多个代理，且可以灵活的控制请求是否走代理。
 2.缺点:配置略微繁琐，请求资源时必须加前缀。

slot 插槽

\1. 默认插槽

\2. 命名插槽

\3. 作用域插槽

vuex 是什么

1. 概念：专门在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，对 vue 应

用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方

式，且适用于任意组件间通信。

安装Vuex

 npm i vuex  //vuex4
 ​
 npm i vuex@3  //vuex3
 ​
 =====================================
 vuex2中、要用vuex3版本
 ​
 Vuex3中、要用vuex4版本
 ​
 2022年2月后，默认自动安装vuex4版本

配置：

 //该文件用于创建Vuex中最为核心的store
 ​
 //引入vue
 import Vue from 'vue'
 ​
 //引入Vuex
 import vuex from 'vuex'
 Vue.use(vuex);
 ​
 ​
 //准备action-用于响应组件中的动作
 const action={}
 ​
 //准备mutations-用于操作数据（state）
 const mutations={}
 ​
 //准备state-用于存储数据
 const state={}
 ​
 ​
 //创建并暴露store
 export default  new vuex.Store({
     action,
     mutations,
     state
 })
 ​

引入：

............

//引入store
import store from './store'

.............


//创建vue的实例对象----（vm）
new Vue({
    el:'#app',
    render:h=>h(App),
    store

})

使用：

 //该文件用于创建Vuex中最为核心的store
 ​
 //引入vue
 import Vue from 'vue'
 ​
 //引入Vuex
 import vuex from 'vuex'
 Vue.use(vuex);
 ​
 ​
 //准备action-用于响应组件中的动作
 const actions= {
     //响应组件中加的动作
     jia(context,value){
         console.log('action被调用了')
         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
 })

组件中读取vuex中的数据：$store.state.sum

组件中修改vuex中的数据：store.dispatch（′action中的方法名′，数据）或store.commit('mutations中的方法名，数据')

路由

vue-router 的理解

在2022年2月，默认版本都是，vue-router4，只能在vue3中使用

 npm i  vue-router  //默认
 ​
 npm i  vue-router@3  //降级

vue 的一个插件库，专门用来实现 SPA 应用

对 SPA 应用的理解

1. 单页 Web 应用（single page web application，SPA）。
2. 整个应用只有一个完整的页面。
3. 点击页面中的导航链接不会刷新页面，只会做页面的局部更新。
4. 数据需要通过 ajax 请求获取。

路由的理解

1. 什么是路由?

1. 一个路由就是一组映射关系（key - value）

2. key 为路径, value 可能是 function 或 component

2. 路由分类

1. 后端路由：

1. 理解：value 是 function, 用于处理客户端提交的请求。

2. 工作过程：服务器接收到一个请求时, 根据请求路径找到匹配的函数

来处理请求, 返回响应数据。

1. 前端路由：

1. 理解：value 是 component，用于展示页面内容。

2. 工作过程：当浏览器的路径改变时, 对应的组件就会显示。

总结: 编写使用路由的 2 步

1. 定义路由组件 ,暴露并注册路由

 ​
 //该文件，专门用于创建整个应用的路由器
 import VueRouter from "vue-router";
 ​
 ​
 //引入组件
 import MyAbout from "@/components/MyAbout"
 import MyHome from "@/components/MyHome";
 ​
 ​
 //创建并暴露一个路由器
 export default new VueRouter({
       routes:[
           {
               path:'/about',
               component:MyAbout
           },
           {
               path:'/home',
               component:MyHome
           },
       ]
 })
 ​

1. 使用路由

  <!--原始html中我们使用的是a标签实现页面的跳转-->
    <!--
      <a class="list-group-item active" href="./about.html">About</a>
      <a class="list-group-item" href="./home.html">Home</a>
     -->                
 =======================================================================
 <!--Vue借助router-link标签实现页面的跳转-->
 <router-link class="list-group-item" active-class="active" to="/about">About</router-link>
 <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
                 </div>
 ​
 ....
  <!--指定组件的呈现位置-->
       <router-view></router-view>
 ....

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

router-view：指定展示位置

总结：注意事项

1. 一般组件通常放在components文件中，路由组件放在pages文件中
2. 通过切换，隐藏的路由组件和一般组件不一样，使用完后，就被vue销毁，如果再使用，就重新挂载
3. 每个组件都有自己的$route属性，里面存储着自己的路由信息
4. 整个应用只有一个router（路由器），可以通过组件的$router获取到。

多级路由（嵌套路由）

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

 routes:[
     {
         path:'/about',
         component:MyAbout
     },
     {
         path:'/home',
         component:MyHome,
         children:[  //通过chliaren配置子路由
             {
             path:'homeMessage',  //此处一定不要带 '/'
             component:HomeMessage,
         },
             {
                 path:'homeNews',  //此处一定不要带 '/'
                 component:HomeNews,
             }
         ],
 ​
     },
 ]

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

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

路由的query参数

1.传递参数

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

2.接收参数

 $route.query.id
 $route.query.tit

name属性简化路由

我们可以通过在routes中，写name属性，去简化路由

 routes:[
     {
         name：'xxxx',  //命名
         path:'/about',
         component:MyAbout
     },
     {
         name：'xxxx',
         path:'/home',
         component:MyHome,
         children:[  //通过chliaren配置子路由
             {
             name：'xxxx',
             path:'homeMessage',  //此处一定不要带 '/'
             component:HomeMessage,
         },
             {
                 name：'xxxx',
                 path:'homeNews',  //此处一定不要带 '/'
                 component:HomeNews,
             }
         ],
 ​
     },
 ]

2.简化跳转

  <!--原本的写法-->
  <router-link :to="`/home/homeMessage/homeMessageDetail?id=${m.id}&tit=${m.tit}`">{{m.tit}}</router-link>&nbsp;&nbsp;
 ​
 <!--路由跳转，携带query参数,to的对象写法-->
 <router-link
          :to="{
              name:'xxxx', <!--这里写命名-->
               query:{id:m.id,tit:m.tit
               }
           }">{{m.tit}}</router-link>

路由的params参数

1.params

 routes:[
           {
               path:'/about',
               component:MyAbout
           },
           {
               path:'/home',
               component:MyHome,
               children:[
                   {
                   path:'homeMessage',
                   component:HomeMessage,
                       children:[
                           {
                               name:'tang',
                               path:'homeMessageDetail/:id/:tit', //占位符声明接收params参数
                               component:HomeMessageDetail,
                           },
                       ]
               },

2.传递参数

  <!--路由跳转，携带query参数,to的对象写法-->
                 <router-link
                         :to="{
                        name:'tang',
                        params:{id:m.id,tit:m.tit}
                        }">{{m.tit}}</router-link>

特别注意：路由器携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！

3.接收参数

 $route.params.id
 $route.params.tit

编程式路由导航

1.作用：不依赖于实现路由跳转，让路由跳转更灵活

2.具体编码

 //$router的2个API
                this.$router.push({
                     name:'tang',
                     params:{id:m.id,tit:m.tit}
                 })
             },
        
                this.$router.replace({
                     name:'tang',
                     params:{id:m.id,tit:m.tit}
                 })
             }

Vue UI:组件库

7.1移动端常用UI组件库

1. Vant Vant 3 - Mobile UI Components built on Vue
2. Cube Ul cube-ui Document<
3. Mint Ul Mint UI

7.2PC端常用Ul组件库

1. Element Ul https://element.eleme.cn
2. IView Ul https://www.iviewui.com

来源：3309064415