vue学习笔记

vue学习笔记

vue框架介绍

Vue.js（读音/vju：/，发音类似于view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。

Vue 的核心库只关注视图层，并且非常容易学习，也非常容易与其他库或已有项目整合。Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。

Vue.js 还提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API，其目标是通过尽可能简单的 API 实现响应式的数据绑定和可组合的视图组件。

我们也可以说 Vue.js 是一套响应式系统（Reactivity System）。数据模型层（Model）只是普通 JavaScript 对象，如下图所示，{ }代表一个 JavaScript 对象，修改它则更新相应的 HTML 片段（DOM），这些 HTML 片段也称为“视图（view）”。这会让状态管理变得非常简单且直观，可实现数据的双向绑定，所以我们也称之为响应式系统。

node的下载步骤

1、下载nodejs

2、安装过程

3、在cmd下输入 node -v

4、设置文件的日志缓存存放路径和包下载地址（在安装路径下新建文件夹 cache global)

5 、命令为

npm config set prefix "安装路径/global"

npm config set cache "安装路径/cache"

6.根据版本不同查看是否配置成功（我用的命令是npm config list 也有的是npm config ls)

vue脚手架的下载

1. 确认是否安装npm包管理工具
2. 执行命令 npm install -g @vue/cli
3. 查看是否安装成功vue -V(注意后面的V是大写)

创建vue项目

1. 自己选择一个文件夹

2. 用cmd命令打开

3. 执行vue create 项目名称

   vue create demo
   

4. 可以选择自定义版本也可以使用官方配置

5. 选择完成后输入以下命令并打开浏览器复制cmd命令窗口的网址

   npm run serve
   

props 的注意事项

1. props节点的数据只能读不能写
2. 一般用来接受数据（父组件数据传给子组件）

父组件传给子组件数据演示

1. 在子组件中定义props节点
   

   2.父组件传值

子组件给父组件传值

1. 通过自定义事件

   this.$emit("绑定数据名",)
   

   

2. 父组件通过函数赋值

   兄弟间传输数据需要定义第三方EventBus

   1. 定义的数据转换方

      import Vue from "vue";
      
      export default new Vue()
      

​ 2.兄弟组件都需要导入上面的EventBus

​ 3.发送方代码

 Bus.$emit('share',this.sendMsg)

​ 4.接收方代码

Bus.$on('share',val=>{
    this.msg=val
  })

接收方代码截图

使用vant组件库开发

1. 打开vant官网

2. 根据自己的版本执行如下命令

   # Vue 3 项目，安装最新版 Vant：
   npm i vant -S
   
   # Vue 2 项目，安装 Vant 2：
   npm i vant@latest-v2 -S
   

3. 在项目中引入组件

   导入所有组件
   import Vant from 'vant'
   
   按需导入
   import { Button } from 'vant'
   

4. vue挂载(然后小伙伴就可以快乐的使用咯)

   Vue.use(Vant)
   

路由的安装与使用

1. 创建项目时自定义模式可以选择是否添加路由

2. 没添加就要自己配置

   1. 先安装路由

      npm i vue-router -s
      

   2. 在src下创建router文件夹 在router下新建router.js文件

      // src/router/index.js就是当前项目的路由模块
      // 1 导入Vue 和VueRouter的包
      import Vue from 'vue'
      import VueRouter from 'vue-router'
      // 导入路由要用到的组件
      import Home from '../components/Home.vue'
      import Movie from '../components/Movie.vue'
      import About from '../components/About.vue'
       
      // 2 调用vue.use()函数，把VueRouter安装为vue插件
      Vue.use(VueRouter)
      
      // 3 创建路由的实例对象
      const router = new VueRouter({
        // 定义数组routes[],对应哈希地址与组件之间的关系
        routes: [
        //路由规则
          { path: '/home', component: Home },
          { path: '/movie', component: Movie },
         {
            path: '/about',
            component: About,
            // about组件里的嵌套路由
            children: [
              { path: 'tab1', component: Tab1 },
              { path: 'tab2', component: Tab2 }
            ]
          },
          // 路由重定向：强制跳转
          { path: '/', redirect: '/home' }
        ]
      })
      
      // 4 向外共享路由的实例对象
      export default router
      
      

   3.在main.js导入路由模块 并且挂载实例

   // 1 导入路由模块，拿到路由实例
   import router from '../src/router/index.js'
   
   new Vue({
     render: h => h(App),
     
     //  2 挂载路由
     router: router
   }).$mount('#app')
   

   使用router切换页面

   1. 先创建自己的组件需要放在views目录下

   2. 在引用的组件下用进行占位

   3. 代码演示

      //要展示的组件进行占位
      
      //路由链接
      切换到Fisrt组件
      

   4. 在router.js文件下进行注册配置

      import Vue from 'vue'
      import VueRouter from 'vue-router'
      
      //注册组件
      import First from '@/views/First.vue';
      import Second from '@/views/Second.vue';
      
      Vue.use(VueRouter)
      
      //配置规则
      const routes = [
        {path:'/first',component:First},
        {path:'/second',component:Second}
      ]
      
      const router = new VueRouter({
      //挂载引用	
        routes
      })
      
      export default router
      

   5. 路由可以嵌套子路由就像套娃一样（就是在展示的组件里面继续加路由规则）

      //代码示例
      
      //配置规则
      const routes = [
        {path:'/first',component:First},
        {path:'/second',component:Second，
         children:[
         {path:'路径',component:组件}
         ]
        }
      ]
      

   6. 路由守卫

      • 全局前置守卫

        //to表示要去的组件路径  from 表示要离开的组件路径 next表示是否放行
        router.beforeEach(function(to,from,next){
        //简单的判断  可以做登录判断
            if(to.path=='/first'){
              next()
            }
        })
        

      • next(‘路径’)表示强制跳转到输入路径下

      • 全局后置守卫

        全局后置守卫，组件初始化时调用，每次路由切换之后调用，路由切换之后指的就是，举个例子说，当前我在A路由组件，我要切换到B路由组件，那么前置路由守卫就是在我点了切换按钮B路由组件呈现到页面中后被调用。

        router.afterEach(function(to,from){
          //to表示要去的组件路径  from 表示要离开的组件路径 next表示是否放行
        }
        

      • 独享守卫

        是在进入组件时被调用,区别就在于，想对那个路由进行权限控制就直接在其路由配置项中添加守卫

        beforeEnter(to,from,next){
         //to表示要去的组件路径  from 表示要离开的组件路径 next表示是否放行
        }
        

      • 组件内守卫

        当使用路由规则进入该组件或离开该组件时，就会触发组件内守卫的调用

        //进入守卫：通过路由规则，进入该组件时被调用
        beforeRouteEnter (to, from, next) {
          //to表示要去的组件路径  from 表示要离开的组件路径 next表示是否放行
        },
        //离开守卫：通过路由规则，离开该组件时被调用
        beforeRouteLeave (to, from, next) {
         //to表示要去的组件路径  from 表示要离开的组件路径 next表示是否放行
        }
        
        

组件的使用

1. 自定义组件（在components文件夹里面定义 或者在views文件夹下面定义）

2. views一般存放的是由路由控制的组件

3. 组件文件后缀（.vue）文件名首字母大写

4. 先导入语法规则如下

   import ** from '**' 
   

5. 在components函数注册后使用

封装axios发送异步请求（代码的复用性）

1. 导入axios模块

   import axios from "axios";
   

2. 封装axios设置地址并共享出去

   const request=axios.create({
     baseURL:'http://www.baidu.com'
   })
   
   export default request
   

3. 使用前导入就可以使用了

抽取异步请求的公共部分

1. 简化开发提高代码的复用（我来个简单示例）

   //get请求方式  request就是一个axios模块
   export const 函数名=function(){
   	return requst.get('请求地址')
   } 
   

ES6模块化

1. 注意node的版本（v14.15.1以上）在packag.json中加入type：”module“

2.默认导出只允许出现一次（export default)

promise

• promise的基本概念

  1. promise是一个构造函数

     • 我们可以创建一个promise实例 const p = new promise()
     • new 出来的promise对象表示异步操作

     2.promise.prototype上包含一个.then()方法

  2. then()方法用来指定成功和失败的回调函数

     1. p.then(result=>{},error=>{})
     2. 成功的回调函数是必选的，失败的可选可不选

• 回调地狱的问题

  1. 建议使用链式调用
  2. 可读性差 代码冗余 牵一发动全身

• async和await

  • 他们都是用来简化promise开发的
  • 用了await的函数必须要用aysnc来修饰
  • 注意事项
    1. 在async中第一个await会同步执行 剩下的会异步执行

• 同步任务和异步任务

  1. javascript是一门单线程语言
  2. 同步任务指的是后面的任务必须依靠前一个执行完成
  3. 异步任务指的是同时执行耗时任务

  异步任务

  1. 包括宏任务和微任务（宏任务队列）
  2. 先执行宏任务在执行微任务

1.把同步任务相继加入同步任务队列。
2.把同步任务队列的任务相继加入主线程。
3.待主线程的任务相继执行完毕后，把主线程队列清空。

4.把宏任务相继加入宏任务队列，像setTimeout(()=>{},time)
5.把宏任务队列的任务相继加入主线程。
6.待主线程的任务相继执行完毕后，把主线程队列清空。

7.把微任务相继加入微任务队列。
8.把微任务队列的任务相继加入主线程。
9.待主线程的任务相继执行完毕后，把主线程队列清空。

EventLoop

• 事件循环（event loop）就是 任务在主线程不断进栈出栈的一个循环过程。任务会在将要执行时进入主线程，在执行完毕后会退出主线程。

  setTimeout(()=>{console.log(6)},100)   
  setTimeout(()=>{console.log(4)})    
  setTimeout(()=>{console.log(5)})   
  
  new Promise((rel)=>{              
  console.log(1)                         
  })
  .then((res)=>{console.log(res)})  
  
  console.log(2)                
  
  // 打印结果：1,2,3,4,5,6
  
  

微任务队列的任务相继加入主线程。
9.待主线程的任务相继执行完毕后，把主线程队列清空。

### EventLoop 

- 事件循环（event loop）就是 任务在主线程不断进栈出栈的一个循环过程。任务会在将要执行时进入主线程，在执行完毕后会退出主线程。

setTimeout(()=>{console.log(6)},100)
setTimeout(()=>{console.log(4)})
setTimeout(()=>{console.log(5)})

new Promise((rel)=>{
console.log(1)
})
.then((res)=>{console.log(res)})

console.log(2)

// 打印结果：1,2,3,4,5,6