vue
sunhongyu007
纸上得来终觉浅
展开
-
VueX 学习笔记 记录
vuex 的个人学习笔记原创 2022-04-11 16:51:13 · 896 阅读 · 1 评论 -
axios的基本使用
npm i axios -s // npm安装axios的基本的用法axios({ //请求地址 url:'/user', //请求类型 method:'post', //请求根目录 baseURL:'http://xxx.xx.xx.x/api', // URl传递参数 params:{id:2},//get请求时用 data:{key:''},//post请求时用 //自定义请求头 headers:{'x-Requested-Wi原创 2021-09-24 17:05:25 · 87 阅读 · 0 评论 -
vuex是用来做什么的? 配置项有什么?怎么用的?
Vuexvuex 是什么?vuex的配置项都是什么什么时候我们要使用vuexvuex 是什么?Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式Vuex 采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化Vuex有五个核心概念,state, getters, mutations, actions, modulesVuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-trave原创 2021-08-02 11:45:58 · 453 阅读 · 0 评论 -
Vuex总结
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar原创 2021-06-04 19:53:35 · 126 阅读 · 0 评论 -
vue的data为什么必须是函数?
一个组件被复用多次的话,也就会创建多个实例。本质上,这些实例用的都是同一个构造函数。如果data是对象的话,对象属于引用类型,会影响到所有的实例。所以为了保证组件不同的实例之间data不冲突,data必须是一个函数。而 new Vue 的实例,是不会被复用的,因此不存在引用对象的问题。data为对象类型function Vue() { this.data= { name: '张三', age: '21' } }//创建了一个Vue实例.原创 2021-08-01 16:29:43 · 901 阅读 · 0 评论 -
vue2和vue3自定义指令的区别
scroll 事件事件监听要在组件销毁的时候移除selsct原创 2021-07-30 21:37:25 · 692 阅读 · 0 评论 -
vue 过滤器 格式化时间
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>格式化时间</title> <style> #app{ font-weight: bold; font-size: 20px; } </style></he原创 2021-07-22 17:43:32 · 325 阅读 · 3 评论 -
Vue插入视频播放器之video
一、video简介video.js是一款web视频播放器,支持html5和flash两种播放方式。官网地址 or 详细的二、使用1. 下载包 npm install video.js2. 引入在main中import Video from 'video.js'import 'video.js/dist/video-js.css'Vue.prototype.$video = Video3. 使用在组件中添加<video id="myVideo" cla原创 2021-07-21 23:12:50 · 501 阅读 · 1 评论 -
this.router.go()和this.$router.push()
this.$router.go(val) => 在history记录中前进(1)或者后退(-1),当val为0时刷新当前页面。 val 为几就会退几步。一般是一步一步的退或进。this.$router.push(path) => 在history栈中添加一条新的记录。path 可以是字符串(地址)也可以是对象 (路由配置对象 跳转到响应的页面)...原创 2021-07-21 22:44:26 · 402 阅读 · 0 评论 -
ajax 同步和异步区别?
ajax 同步和异步区别?我们发的请求基本都是会使用异步处理的。异步处理:就是我们通过事件触发到 ajax,请求服务器,在这个期间无论服务器有没有响应,客户端的其他代码一样可以运行同步处理:我们通过实践触发 ajax,请求服务器,在这个期间等待服务器处理请求, 在这个期间客户端不能做任何处理。当 ajax 执行完毕才会继续执行其他代码同步:提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事异步: 请求通过事件触发->服务器处理(这是浏览器仍然可以作其他事原创 2021-07-21 22:44:07 · 94 阅读 · 0 评论 -
vue 中:key 的作用
vue中在进行列表渲染的时候,会默认遵守 ‘就地复用策略’就地复用策略:当在进行列表渲染的时候,vue会直接对已有的标签进行复用,不会整个的将所有的标签全部重新删除和创建,只会重新渲染数据,然后再创建新的元素直到数据渲染完为止Vue中为v-for提供了一个属性,:keykey属性可以用来提升v-for渲染的效率!,vue不会去改变原有的元素和数据,而是创建新的元素然后把新的数据渲染进去在使用v-for的时候,vue里面需要我们给元素添加一个key属性,这个key属性必须是唯一的标识. (有相同原创 2021-07-21 17:30:12 · 6328 阅读 · 0 评论 -
什么是EventBus?
手写EventBus//eventBus.js文件function EventBus () { //定义一个用来存储回调的对象 let eventList = {} /** * 定义on方法 * eventName 是传递进来的自定义名称 * callback 是回调函数 * 将传递进来的以键值对的形式存储到eventList中 * eventName是键,callback就是值 * */ // 事件订阅 EventBus.protot原创 2021-07-20 01:13:04 · 537 阅读 · 0 评论 -
v3的图片懒加载
为什么要是有图片懒加载?图片多 回到这加载速度变慢 还可能会导致请求超时 从而没有图片自定义图片实现图片懒加载(vueuse)下载 npm i vueuse/coreimport { useIntersectionObserver } from '@vueuse/core'import defaltImg from '@/assets/images/200.png'const useLazyLoad = (target, url) => { // 1. stop 是一个函数。如果调.原创 2021-07-20 01:12:49 · 100 阅读 · 0 评论 -
vueuse实现吸顶效果
npm i @vueuse/core 下载<template> <div class="app-header-sticky" :class="{show:y>=78}"> <div class="container" v-show="y>=78"> <RouterLink class="logo" to="/" /> <AppHeaderNav /> <div class="lef原创 2021-07-20 01:12:37 · 285 阅读 · 0 评论 -
如何在vue3使用骨架屏
为什么要使用数据都都是ajax请求渲染来的 然后它可能请求的慢就会一片白 这不好 所以就要使用骨架屏了 站位 像这样创建个组件<template> <div class="xtx-skeleton shan" :style="{width:'100px',height:'50px'}"> <!-- 1 盒子--> <div class="block" :style="{backgroundColor:'black'}"><原创 2021-07-20 01:12:20 · 713 阅读 · 0 评论 -
Vue-3.0
1. vue3与vue2的区别性能提高 ,更支持ts, 增加Composition API, 移除$on ,移除过滤器 ,移除.snycVue3中,可以在template中写多个根元素; 核心代码不一样: createApp(根组件).mount(‘public/index.html中的div容器’)创建vue3的项目:vue create 项目名2. Composition API 组合式优点:功能代码组合维护,分散定义,组合使用 ; 缺点:不方便功能复用3. optionAPI选原创 2021-07-13 23:06:35 · 395 阅读 · 0 评论 -
todo-vue2
<template> <section class="todoapp"> <!-- 头部输入框区域 --> <header class="header"> <h1>todos</h1> <input class="new-todo" placeholder="请输入要完成的任务" autofocus v-model="flag" @keyup.enter="hAdd"/>原创 2021-07-13 20:49:32 · 73 阅读 · 0 评论 -
Vue中的 ref 和 $refs
ref 有三种用法:1、ref 加在普通的元素上,用this.¥refs.(ref值) 获取到的是dom元素2、 ref 加在子组件上 , 用this.¥refs.(ref值) 获取到的就是组件实例 ,可以用组件的所有方法。 在使用方法的时候直接用 this.¥refs.(ref值).方法() 就能直接用了3、如何利用 v-for 和 ref 获取一组数组或者dom 节点注意点:如果通过v-for 遍历想加不同的ref时记得加 :号,即 :ref =某变量 ;这点和其他属性一样,如果是固定原创 2021-07-04 23:44:33 · 2075 阅读 · 2 评论 -
Vue 的v-if与v-show
在Vue的内部指令中,v-show与v-if的区别,总结如下:在Vue中,我们可以使用v-if和v-show来控制元素或模板的渲染。而v-if和v-show也属于Vue的内部常用的指令(条件渲染)。这里所说的指令就是directive,指特殊的带有前缀v-的命令,指令的值限定为绑定表达式,指令的职责是当表达式的值改变时把某些特殊的行为应用到DOM上。v-if根据表达式的值true或false在DOM中生成或者移除一个元素(或多个元素)。有点类似JavaScript中的if条件判断。在Vue中除了原创 2021-07-04 23:44:17 · 12555 阅读 · 0 评论 -
Vue组件之间传参
组件传参父组件向子组件传值子组件向父组件传值父组件向子组件传值1. 创建子组件 , 创建一个子组件 ‘ zi.vue’2. 在子组件中创建 基本的模本<template> <div> <h2> 子组件 </h2> <p> {{ message }}</p></div><template><script>export default { props : ["message"]原创 2021-07-04 21:13:23 · 145 阅读 · 0 评论