vue学习笔记

已于 2022-10-11 14:30:08 修改
阅读量426 收藏
点赞数
分类专栏： 笔记 文章标签： vue.js 学习 javascript
于 2022-10-11 14:24:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lin_mx/article/details/127262640
版权

目录

todolist案例 利用localStorage实现本地存储数据

localStorage和sessionStorage的区别：

  1. 在存储时间上：localStorage除非手动删除否则会一直存放到浏览器本地；sessionStorage在网页关闭时自动删除；
  2. 在存储大小上：两者存储空间大小都为5M
  3. 在生效空间上：localStorage限制在同一页面下才能获取；sessionStorage则没有这个要求；

localStorage基本使用语法

  1. 存放数据:对于不是基本数据类型的值，要通过JSON.stringify()转为JSON
    localStorage.setItem(属性名，属性值);
  2. 获取数据：
    localStorage.getItem(属性名);
    实现逻辑：
    mounted生命周期中初始化本地存储和获取todolist数据，将本地数据赋值给todolist；在获取本地数据前判断是否有该属性，若没有，就添加默认本地数据
    之后每当修改todolist都重新给本地数据赋值

todolist案例 利用自定义事件实现子组件到父组件的数据传递

自定义事件准则：给谁绑定就找谁触发
绑定自定义事件的方法：

  1. 通过v-on指定绑定
    <my-header @addTodo=“handleAddTodo”>
    addTodo是自定义事件名称，handleAddTodo是事件回调函数；
    在my-header组件中触发该事件，并为回调传递参数，参数在app组件中的回调函数可以获取；
    this.$emit(‘addTodo’,x,y,z);
  2. 通过ref打标识，当模板载入页面后（mounted）通过$on(name,callback)绑定自定义事件；
  3. 以上两个方法的区别：
    • 通过ref打标识的方法可以更加灵活的绑定自定义事件，例如延迟几秒后自定义事件才生效；
    • 自定义事件只触发一次：通过$once（name，callback）绑定自定义事件
  4. 解绑自定义事件
    • this.$off(event);//解绑指定事件
    • this.$off([event1,event2]);//解绑多个自定义事件
    • this.$off();//解绑所有的自定义事件

todolist案例 全局事件总线实现两两组件间数据传递

让每个组件实例对象和Vue实例对象都拥有一个公共对象，该对象具有$on（）和$emit（）；vue中有vueComponent实例和vue实例满足条件；

  1. 在Vue的原型链上添加该对象：因为vueComponent的原型对象是Vue
  2. 通过添加一个vueComponent实例对象，这个实例对象通过Vue.extend({})返回一个组件构造函数，再通过new 获取实例
  3. 添加vm对象；在beforeCreate生命周期回调中为Vue添加原型属性，当中的this就是Vue实例对象

todolist案例 消息订阅与发布实现组件间数据传递

第三方库：pubsub.js
应用方法：

  1. pubsub.subscribe(name,callback);消息订阅
  2. pubsub.unsubscribe(name);取消订阅
  3. pubsub.publish(name,attribute);发布消息

需要注意的是：回调函数不仅接收publish传递的参数还有消息名，可以使用下划线占位

谁订阅谁发布:每回消息发布时，订阅了该消息的组件都要执行回调；

todolist案例中编辑功能

当点击编辑按钮时为当前item对象添加isEdit属性来保存编辑状态，事件回调传参获取当前item对象，添加属性通过this.$set(obj,key,value)才会被vue认可，来让vue进行数据代理和数据监听；注意添加时判断对象有没有该属性（hasOwnProperty方法）;利用该属性控制输入框隐藏显示，当输入框失去焦点时isEdit值为false隐藏输入框，修改对象值；

因为本次案例使用本地存储所以需要对todolist数据进行深度侦听（deep:true)；

github搜索案例

想要在请求未回来时显示加载，添加一个loading状态，初始值为false，在请求时修改该值；

技巧：多个状态需要在请求时修改，整合为一个对象，通过es6语法扩展运算符快速修改;
例如需要传四个值修改，但有个值不常修改的，想只传三个值；

this.info={…this.info,…att}

插槽

有三种插槽：

  1. 默认插槽：适合传入一个元素作为组件内容

    使用：在组件中通过<slot></slot>插入元素
  2. 具名插槽：可传入多个元素，以name属性区分

    传入：特殊写法<template v-slot:ownName></template>常用写法slot="ownName"做名称

    使用：<slot name=“ownName”></slot>
  3. 作用域插槽：数据在组件内，使用者决定数据的显示方式；可以理解为使用同一个数据以不同样式展示

    传入：必须要用template包裹，<template scope=“slotDataObj”><ul>…</ul></template>scope接收的是一个对象，包含有多个key-value；


    使用：<slot :data=“data”></slot>

问题：

  1. 当未传入插槽时，slot是空着的
  2. 具名插槽只传入一个，另一个是不是空着的
  3. 针对未传入插槽时，可以在slot内写入内容默认显示
  4. 同name的slot是可以追加的，但是建议使用一个父元素直接包裹，不用一个一个添加name属性
  5. 结构在哪，样式就写在哪里

Vuex插件 状态管理

由vue团队开发的状态管理插件；vue2对应使用vuex3，vue3使用vuex4；

创建store是通过Vuex.Store();需要传入配置对象；再将创建的store赋值给Vue实例对象

配置vuex运行环境

//store.js
import Vue from 'vue'
import Vuex from 'vuex'
//应用vuex插件
Vue.use(vuex)

//配置项对象

//用于存储数据
const state = {}
//用于响应组件中的动作
const actions = {}
//用于操作state数据
const mutations = {}
//用来对state加工，与computed计算属性类似，返回加工后的值
const getters = {}

export default new Vuex.Store({
   state,
   actions,
   mutations,
   getters
})

//main.js
import store from './store/store'

new Vue({
   el:'#app',
   render:h=>h('App'),
   components:{App},
   store
})

使用vuex操作数据

//App.vue
export default {
   data(){
      return {num:1}
   },
   methods:{
      //对总数加一
      increment(){
         //引起increment动作
         this.$store.dispatch('increment',this.num);
      }
   }
}

//store.js

const actions={
   //函数第一个参数接收到的context上下文对象，即store对象；之后的参数是dispatch传递的参数
   increment(context,num){
      context.commit('increment',num);
      //这里可以直接修改state的数据，但是开发工具是不记录这次的修改
      //context.state.count += num;
      //而且在这里可以做一些判断，网络请求等操作，再进行数据的操作
   }
}
const mutations={
   //函数第一个参数接收到的是state
   increment(state,num){
      state.count += num;
   }
}

mapState状态映射 和 mapGetters

在模板中书写太多的store.state.xxx，想通过computed计算属性简写，而在计算属性又有许多重复的代码。借助vuex中的mapState状态映射自动生成计算属性；

import {mapState,mapGetters} from 'vuex'

computed:{
   //dizhi是计算属性名称，address是指定获取的state属性名
   //这里的sum不能触发对象的简写方式，简写方式是当值为变量且名字与属性名相同
   //...mapState({sum:'sum',dizhi:'address'})
   //当生成的计算属性名和获取属性名相同时，可以传入数组
   ...mapState(['sum','address']),
   //从getters获取数据，生成计算属性
   ...mapGetters(['bigSum'])
}

mapActions 和 mapMutations

//App.vue
//需要注意的是，在调用时要传递参数，要不然默认传递的是事件对象
<button @click="increment(num)">+</button>

import {mapActions} from 'vuex'
export default {
   methods:{
      ...mapActions({increment:'increment'})
      //数组写法
      //...mapAction(['increment'])
   }
}

//mapMutations同mapActions相同

vuex 模块化管理

当vuex存放许多数据后，数据是可以分类的，连同操作数据的actions，mutations，getters；

//分为多个配置对象，每个对象都有自己的actions等操作数据动作
const personOption = {
   //在mapState用到配置对象名称，需要给配置对象添加namespaced：true
   namesapced:true,
   state:{},
   actions:{},
   ...
}
const countOption = {
   state:{},
   ...
}
export default new Vuex.Store({
   modules:{
      personOption,
      countOption
   }
})

//获取对应的state
//$store.personOption.state.xxx

//mapState,mapGetters,mapMutations,mapActions自动生成代码
//...mapState('countOption',['count'])
//...mapGetters('countOption',['bigCount'])
//传递的第一个参数指定配置对象

//自己写methods方法和computed计算属性,在属性名前带着配置名称/
/**
methods:{
   increment(){
      this.$store.dispatch('countOption/increment',this.num)
   }
},
computed:{
   bigCount(){
      return this.$store.getters['countOption/bigCount'];
   },
   count(){
      return this.$store.state.countOption.count;
   }
}
*/

模块化引起的注意事项

  1. 原先在里面直接使用this.state.xxx获取数据也是可行的，每个配置项里面的this是store对象；

    但经过模块化区分后就不建议这样使用了，这时的this是总的store对象，包含了personOption
actions={
   increment(context,num){
      //调用countOption的commit
      this.commit('countOption/INCREMENT',num);

      //直接使用context上下文对象，就是当前配置对象
      context.commit('INCREMENT',num);
      //而且在前期也可以使用，后期就算修改为模块化也不需要修改
   }
}
  1. 不通过mapState等方法自动生成代码，配置对象不添加namespaced：true，可以不添加**personOption/**但是会引起被其他配置对象同名属性覆盖问题报错问题，也就是说添加了namespaced：true后，每个配置对象中的属性名可以相同

vue-router 路由

配置

vue2搭配vue-router@3使用，vue3搭配vue-router@4使用；

使用vue-router 实现单页应用

1、创建路由器

//引入vue-router
import VueRouter from 'vue-router'
//引入路由组件
import Home from '../pages/Home'
import About from '../pages/About'

//创建路由器
export default new VueRouter({
   //编写路由规则 是一个数组，以key-value的形式存放多个路由
   routes:[
      {path:'/home',component:Home},
      {path:'/about',component:About}
   ]
})

2、使用路由链接

<router-link to="/home" active-class="active">Home</rouoter-link>
<router-link to="/about" active-class="active">About</rouoter-link>
//active-class="active"指定路由链接选中样式

3、定义路由组件放置位置

<router-view></router-view>

注意点

  1. 当路由不断切换时，路由组件是被不断挂载和加载的
  2. 路由组件比一般组件多了两个属性：$route $router

    $route：与其他路由组件的$route都不相等,是当前路由组件独有的，是当前路由组件的路由规则

    $router:是整个应用的路由器，所有路由组件的$router都相等

多级路由

//router.js
export default new VueRouter({
   route:[
      {
         path:'/home',
         component:Home,
         children:[
            {
               path:'news',
               component:News
            },
            {
               path:'messages',
               component:Messages
            }
         ]
      }
   ]
})

路由传参

query传参

  1. 字符串写法
    //Messages
<router-link :to="`/home/messages/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>
  2. 对象写法
    <router-link :to="{
   path:'/home/messages/detail',
   query:{
      id:m.id,
      title:m.titl
   }
}">{{m.title}}</router-link>
  3. 获取传递的参数
    $route.query.xxx

params传参

必须写成对象写法，因为路径是通过命名路由匹配路径，命名路由只能对象写法

//router.js
export default new VueRouter({
   routes:[
      {
         path:'/home',
         component:Home,
         children:[
            {
               path:'messages',
               component:Messages,
               children:[
                  {
                     //命名路由
                     name:'detail',
                     //定义接收参数
                     path:'detail/:id/:title',
                     component:Detail
                  }
               ]
            }
         ]
      }
   ]
}) 

//Messages.vue
<router-link :to="{
   name:'detail',
   params:{
      id:m.id,
      title:m.title
   }
}">{{m.title}}</router-link>

获取参数：

$route.params.xxxx

路由props配置

不在路由组件中通过$route.query.xxx或$route.params.xxx获取参数，直接在组件中props获取参数；

通过路由props配置，将参数传递给组件props：

//router.js
export default new VueRouter({
   routes:[
      {
      ...
         {
            //命名路由
            name:'detail',
            path:'detail/:id/:title',
            component:Detail,
            //第一种写法：props值为对象，将key-value作为props传给组件
            props:{id:666,title:'test'}
            //第二种写法：props值为boolean，将params参数通过props传递给组件,还是要老老实实定义接收的
            props:true
            //第三种写法：props值为函数，返回值作为props传递给组件
            props($route){
               return {id:$route.query.id,title:$route.query.title}
            }
         }
       ...
      }
   ]
})

需要注意的是，路径里还是要定义接收params参数的。

router-link的replace属性

  1. 将路由模式转为replace替换模式，替换成当前路径，上一次路径不保留历史记录，无法退回。
  2. 路由模式分为两种：push追加历史记录、replace替换当前记录
  3. 应用：
    <router-link replace to="/home">Home</router-link>

编程式路由导航

  1. 定义：不借助router-link跳转路由，让路由调转更加灵活。
  2. 常用api
    • $router.forward()前进
    • $router.back()后退
    • $router.go(n)指定前进或回退到第几步，n>0前进，n<0后退
    • $router.push({path:‘’,query:{…}}),追加模式跳转到指定路由
    • $router.replace({…})，替换模式跳转到指定路由

缓存路由组件

作用：让不展示的路由组件不被销毁（卸载）
实现：

//缓存一个路由
<keep-alive include="News">
   <router-link></router-link>
</keep-alive>

//缓存多个路由
<keep-alive :include="['News','Messages']">
   <router-link></router-link>
</keep-alive>

需要注意的：

  1. include写的是组件名，组件名，组件名。要是不写那router-link展示的路由组件都会被缓存。
  2. 路由组件要配置name:'News’即组件名，就是在开发工具显示的那个，要不然include不起效

缓存路由引起的两个生命周期钩子

因为路由被缓存后当路由组件不显示时也不会被卸载，所以beforeDestroy（）不会被调用，也就没办法通过这个生命周期删除计时器。可以使用以下的生命周期。

  1. deactivated（）：在路由组件不被显示（失活）时，调用该函数
  2. activated（）：当路由组件被显示（激活）时，调用该函数

缓存路由需要注意的事项

activated和deactivated是配合keep-alive一起使用的

activated和deactivated没有keep-alive的时候是不会被触发的

路由守卫

全局前置路由守卫

作用：在初始化时、路由切换前调用

//router.js
const router = new VueRouter({
   routes:[
      ...
      {
         path:'/home',
         component:Home,
         meta:{
            isAuth:true //添加路由元，属性名自定义
         }
      }
   ]
})

router.beforeEach((to,from,next)=>{
//to 下一个路径的信息对象，包含path、meta、name...
//from 当前路径的信息对象，包含path、meta、name...
//next() 让路径可以跳转
//首先可以通过meta自定义属性中的isAuth判断下一个路由是否需要路由守卫
if(to.path.meta.isAuth){
   if(localStorage.getItem('xxx') === xxxx){
      next()
   }else{
      alert('sorry,you can\'t go on')
   }
}else{
   next()
}
})

全局后置路由守卫

作用：在初始化时、路由切换后调用;虽然没法拦截，但是可以在路由切换后更改标签或其他操作

const router = new VueRouter({
   routes:[
      {
         path:'/home',
         meta:{title:'首页'},
         component:Home
      },
      {
         path:'/about',
         meta:{title:'相关'},
         component:About
      }
      ...
   ]
})

//没有next
router.afterEach((to,from)=>{
document.title = to.meta.title || '测试'
})

独享路由守卫

作用：单独为一个路由设置守卫，特定路由被切换时调用

export default new VueRouter({
   routes:[
      ...
      children:[
         {
            path:'messages',
            component:Messages,
            beforeEnter(to,from,next){
               if(localStorage.getItem('xxx')==='xxxx'){
                  next()
               }else{
                  alert('you can\'t go on')
               }
            }
         }
      ]
   ]
})

组件内路由守卫

作用：在路由组件中配置路由守卫

//Messages.vue
//通过路由规则，（注意是通过路由规则）进入该路由组件时被调用
beforeRouteEnter(to,from,next){
   if(localStorage.getItem('xxx')==='xxx'){
      next()
   }else{
      alert('you can\'t go on')
   }
},
//通过路由规则，离开该组件时被调用
beforeRouteLeave(to,from,next){
   ....
}

路由模式

  1. hash模式：#后边的值就是hash值，hash值不包含在HTTP请求中，不会带给服务器
  2. history模式
  3. 修改模式：
    //router.js
export default new VueRouter({
   mode:'hash',
   route:[...]
})
  4. 区别
    • hash带有#不美观
    • hash兼容性比history好
    • history在项目部署时要后端人员支持，解决页面刷新时将路径当作资源请求造成的404问题

      后端解决方法有：使用node.js中间件connect-history-api-fallback

Vue3

改变

  1. 改用proxy实现响应式
  2. 内存更小，更新渲染和初次渲染更快

vue引入方式

比vue2中App更加“轻盈”

import {createApp} from 'vue'
import App from './App'

createApp(App).mount('#app')

template模板可以不在外边使用div包裹全部元素

新增setup配置项

  1. 数据、方法等写在setup中，通过返回值让模板获取
  2. setup是所有Composition API（组合API）“ 表演的舞台 ”。
  3. 可以在配置中写vue2的data、methods，但是vue2配置项中可以获取vue3的配置，vue3获取不到vue2；
  4. vue3与vue2的配置重名时，vue3优先
  5. setup返回值有对象，渲染函数：
    • 返回对象时在模板中可以直接使用
    • 返回一个渲染函数时，可以更改渲染的内容，不根据模板渲染
    //setup返回对象，利用作用域减少this使用
import {h} from 'vue'
export default {
   name:'App',
   setup(){
      let name='zhangsan'
      let age=44
      function cslName(){
         console.log(name)
      }
      return {
         name,
         age,
         cslName
      } 
   }
}
//setup返回一个渲染函数，这个渲染函数在vue中获取
...
setup(){
   ...
   //页面仅显示h渲染的内容
   return ()=>h('h1','测试')
}
...

ref函数

  1. 作用：定义一个响应式的数据
    ...
setup(){
   //基本数据类型还是通过defineProperty（）实现响应式
   let name=ref('zhangsan')
   //引用数据类型通过proxy代理实现响应式
   let obj=ref({name:'zhangsan',age:22})
}
...
  2. 操作数据通过xxx.value，模板中直接{{xxx}}
Lin_mx
关注
专栏目录
Vue学习笔记（尚硅谷天禹老师）
qq_55593227的博客
08-15 32万+
Vue学习笔记（尚硅谷天禹老师讲解） 1. Vue核心 1.1. Vue简介 1.1.1. 官网 英文官网 中文官网 1.1.2. 介绍与描述 动态构建用户界面的渐进式JavaScript框架 作者：尤雨溪 1.1.3. Vue的特点 遵循MVVM模式 编码简洁，体积小，运行效率高，适合移动/PC端开发 它本身只关注UI，可以引入其它第三方库开发项目 1.1.4.与其他JS框架的关联 借鉴 Angular 的模板和数据绑定技术 借鉴 React 的组件化和虚拟DOM
vue 学习笔记
weixin_43971312的博客
05-22 2297
VUE 学习笔记 1 简介 1.1 简介 中文网 https://cn.vuejs.org/v2/guide/ Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架。 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的
Vue学习笔记
大圣你在哪
04-20 2031
Vue：前端体系、前后端分离 一、V前端核心分析 1、Vue概述 Vue (读音 /vjuː/，类似于 view)是一套用于构建用户界面的渐进式JavaScript框架(渐进式意味着你可以将Vue作为你应用的一部分嵌套其中)，发布于2014年2月。与其他大型框架不同，Vue被设计为可以自底向上逐层应用。Vue的核心是只关注视图层，不仅易于上手，还便于与第三方库(如：vue-router：跳转，vue-resource：通信，vuex：状态管理)或既有项目整合。 Vue官网：https://v3.cn.vue
VUE学习笔记
weixin_51660483的博客
05-30 1866
什么是VUE？vue是一个用于构建用户界面的渐进式框架vue是一个基于数据渲染出用户能够看到的页面渐进式框架。
Vue学习笔记总结
个人学习博客，不足之处，还望不吝赐教！
10-21 804
vue、vue学习教程、vue教程、vue3
vue学习笔记（超详细）
热门推荐
fmk1023的博客
12-18 4万+
文章目录一. Vue基础认识Vue.jsVue安装方式Vue的MVVM二. Vue基础语法生命周期模板语法创建Vue, options可以放什么语法综合v-onv-for遍历数组v-model表单绑定v-model结合radio类型使用v-model结合checkbox类型使用v-model结合select类型使用值绑定修饰符检测数组更新计算属性 computed计算属性setter和gettercomputed / methods区别fulters过滤器三. 组件化开发组件的基本介绍注册组件的基本步骤全局
Vue学习笔记(黑马前端)
JayChouyyds589的博客
10-02 4113
黑马前端Vue学习笔记(未学完)
vue学习笔记（vue核心知识）
maohe的博客
01-22 2386
记录Vue学习过程笔记和知识点（更新中）。
Vue学习笔记04
weixin_52521356的博客
05-06 646
Vue学习笔记04 什么是vue-cli ​ vue-cli是官方提供的一个脚手架，用于快速生成一个vue的项目模板； ​ 主要功能： 统一的目录结构 本地调试 热部署 单元测试 集成打包上线 需要的环境 Node.js：Download | Node.js (nodejs.org) 检查node.js是否安装完成 node -v npm-v npm install -g安装镜像 这里的安装教程直接贴一个视频的链接吧。 [vue脚手架安装] npm run dev 运行第一个自己的vue项目
Vue 状态管理工具vuex
gklcsdn的博客
11-07 460
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 解决了多个组件共享状态时，状态的可维护性和可预测性问题。
Vue 自定义icon组件封装SVG图标
gaowxx的博客
11-04 461
通过自定义子组件CustomIcon.vue使用SVG图标，相比iconfont下载文件重新替换更节省时间
速盾：vue的cdn是干嘛的？
最新发布
zhuguowang01的博客
11-08 251
这时就可以使用CDN来加速这些库或者插件的加载。总结一下，Vue的CDN是一种将Vue.js及其相关的库或者插件缓存在全球各个节点的技术，通过就近访问的原则，加速网页加载，减轻服务器负载，并提高网站的稳定性和可靠性。Vue的CDN可以帮助将Vue.js及其相关的库或者插件存储到全球各个节点的服务器中，使得用户可以从最近的服务器上加载这些资源，从而提高加载速度。提高网站的稳定性和可靠性：CDN通过将资源存储在多个服务器上，即使某个节点故障或者不可用，用户仍然可以从其他的节点上获取资源，保证网站的可用性。
fastapi_socketio连接vue的socktio.client
u014220146的博客
11-06 401
所以默认配置是客户端连接时使用的路径时ws，而不是http， 并且路径还要带上socketio.io。提示：如果遇到跨域问题自行解决。
Vue Cli的配置中configureWebpack和chainWebpack的主要作用及区别是什么？
friend_ship的博客
11-08 505
Vue Cli提供的两种方案，一种是基于configureWebpack项直接覆盖同名配置；另一种是chainWebpack直接修改默认配置。
vue2 -- el-form组件动态增减表单项及表单项验证
King Saj
11-06 103
在数据录入场景（如订单信息录入）中，可根据实际情况（如商品种类增加）动态添加表单项（如商品相关信息）。包含必填项验证和数据格式验证（如邮箱、电话格式），防止错误数据提交。// 此处执行错误的逻辑。// 执行父组件回调。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值