![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
文章平均质量分 63
她还会来吗
长夜将至,我从今开始守望
展开
-
虚拟dom中key的作用
虚拟dom中key的作用 key是虚拟DOM对象的标识,当数据发生变化时,vue会根据新数据生成新的虚拟DOM,随后进行新旧虚拟DOM的差异比较对比规则1. 旧虚拟DOM中找到了与新虚拟DOM相同的key:若虚拟DOM中内容没变,直接使用之前的真实DOM,若虚拟DOM中内容变了,则生成新的真实DOM,随后替换掉页面中之前的真实DOM。2. 旧虚拟DOM中未找到与新虚拟DOM相同的key创建新的真实DOM,随后渲染到页面。用index作为key可能会引发的问题1. 若对数据进行,逆序添加,逆原创 2022-03-27 09:20:02 · 1468 阅读 · 0 评论 -
Vue3.0的基础学习
基于Vue cli的Vue3.0初体验转载 2021-09-18 21:32:15 · 86 阅读 · 0 评论 -
Vue生命周期钩子函数的使用以及应用场景
前言昨天做项目时,由于自己对Vue的生命周期钩子函数了解的不是很到位,以至于出现了很多问题,所以便在闲暇之余写下这篇博客,加深一下对钩子函数的认知。钩子函数介绍话不多说,先上图!!初看这幅图,可能觉得这Tm是什么啊,能不能说的直白点!!!(淦),但习惯就好,这就是官方。但稍微学习一下之后,可以发现这是很简单的~vue提供了多个生命周期函数供我们使用,分别为beforeCreate, created, beforeMount, mounted, beforeUpdate,原创 2021-09-09 11:19:19 · 2700 阅读 · 0 评论 -
Composition-API
简介Composition API简介:一组基于函数的附加API,能够灵活地组成组件逻辑,Composition API希望将通过当前组件属性、可用的机制公开为JavaScript函数来解决这个问题。Vue核心团队将组件Composition API描述为“一套附加的、基于函数的api,允许灵活地组合组件逻辑”。使用Composition API编写的代码更易读,并且场景不复杂,这使得阅读和学习变得更容易Options API和Composition-API的区别Options API在vue2中,原创 2021-09-08 00:44:22 · 3154 阅读 · 0 评论 -
axios发送网络请求
网络模块封装选择什么网络模块传统的Ajax缺点:配置和调用方式等非常混乱jQuery-Ajax缺点:在Vue整个开发中都是不需要使用jQuery的axiosaxios功能特点:在浏览器中发送XMLHttpRequests请求在Node.js中发送http请求支持Promise API拦截响应和请求转换请求和响应数据axios的基本使用安装axios框架:npm install axios --save在入口文件main.js中引入axios并调用注意:axios原创 2021-04-29 16:55:54 · 537 阅读 · 4 评论 -
为什么 BetterScroll 初始化不能滚动?
遇到的问题当使用better-scroll插件进行滚动时,滑动页面,页面却不滚动或刷新后滚动解决方法官方给出的:BetterScroll 滚动原理是 content 元素的高度/宽度超过 wrapper 元素的高度/宽度。而且,如果你的 content 元素含有不固定尺寸的图片,你必须在图片加载完之后,调用 refresh() 方法来确保高度计算正确。还存在一种情况是页面存在表单元素,弹出键盘之后,将页面的视口高度压缩,导致 bs 不能正常工作,依然是调用 refresh() 方法网上搜罗来的:原创 2021-04-07 11:41:01 · 584 阅读 · 2 评论 -
Better-scroll的安装及使用
Better-Scroll的安装npm安装:npm install better-scroll --savegithub安装下载地址:https://github.com/ustbhuangyi/better-scroll使用在组件中使用在组件template模板中创建一个div标签(类名一般为wrapper)div标签中必须只能传一个元素(但这个元素里面又可以包含许多元素)在script标签中,引入better-scroll,并new一个实例.BetterScroll 提供了一个类,原创 2021-04-06 20:54:25 · 809 阅读 · 0 评论 -
Tabbar
tabbar案例运行效果实现步骤在终端执行vue create Tabbar命令,创建一个Tabbar文件夹,并在Components文件夹下新建tabbar文件夹.自定义TabBar组件,在App中使用让TabBar处于底部,并且设置相关的样式<template>// 定义插槽 使得TabBar中显示的内容由外界决定 <div id="tab-bar"> <slot></slot> </div>原创 2021-04-03 19:30:57 · 1697 阅读 · 0 评论 -
简单学习Vuex
Vuex认识Vuex官方解释:Vuex是专门为Vue.js应用程序开发的状态管理模式(状态管理)它采用了集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化Vuex也集成到Vue官方调试工具devtools extension,提供了诸如零配置的time-travel调试,状态快照导入导出等高级调试功能状态管理:把需要多个组件共享的变量全部存储在一个对象里面然后,把这个对象放在顶层的Vue实例中,让其他组件可以使用Vuex提供一个在多个组件共享状态的插件(可原创 2021-03-31 13:32:00 · 88 阅读 · 0 评论 -
导航守卫与keep-alive
动态路由的使用在components文件夹下创建user.vue,将其导出,并引入到index.js中import User from '../components/user.vue'const routers=[ { path:'/user/:userid', component:User }]在vue.app中设置代码,将其响应到页面中<template> <div id="app"> <rout原创 2021-03-26 19:11:38 · 138 阅读 · 0 评论 -
vue-router学习第一天
vue-Router认识路由路由:就是通过互联网把信息从源地址传输到目的抵制的活动,决定数据包从来源到目的地的路径vue-router是基于路由和组件的:路由用于设定访问路径,将路径和组件映射起来;在vue-router的单页面应用中,页面的路径的改变就是组件的切换。vue-router的安装和配置方式步骤一:安装:npm install vue-router --save步骤二:在模块化工程中使用它1. 导入路由对象,并且调用Vue.use(VueRouter)2. 创建路由实例,并且原创 2021-03-24 10:52:32 · 92 阅读 · 0 评论 -
Vue CLI
Vue CLI(脚手架)认识脚手架CLI是Command-Line Interface,翻译为命令行界面,但是俗称脚手架Vue CLI是一个官方发布的vue.js项目脚手架使用vue-cli可以快速搭建vue开发环境以及对应的webpack配置脚手架的使用官网:https://cli.vuejs.org/zh/前提依赖:Node.js webpack脚手架安装npm install -g @vue/cli(注意:当前安装的为最新版本的CLI)Vue CLI >= 3 和旧版使原创 2021-03-23 12:09:55 · 93 阅读 · 0 评论 -
插槽
插槽的基本使用为什么使用插槽(slot)插槽的目的是让我们原来的设备具有更多的扩展性比如电脑的USB我们可以插入更多的设备组件的插槽组件的插槽也是为了让我们封装的组件更加具有扩展性,让使用者可以决定组件内部的一些内容到底展示什么。 <!-- 1.插槽的基本使用 <slot></slot> 2.插槽的默认值 <slot><button></button></slot>原创 2021-03-01 22:42:55 · 84 阅读 · 0 评论 -
vue第一天 认识vue与vue基本使用
vue第一天认识vuejsvue是一个渐进式的框架,渐进式意味着你可以将vue作为你应用的一部分嵌入其中,带来更丰富的交互体验vue有很多特点和web开发中常见的高级功能解耦视图和数据可复用的组件前端路由技术状态管理虚拟DOMvue.js安装网址:cn.vuejs.org下载并将其引入到编辑器中,使用时引入到页面中就行vue基本使用需要提供标签引入vue.js库文件可以使用vue的语法做功能了把vue提供的数据填充到标签里面实例参数分析: el:元素的挂载位置(值可以是c原创 2021-02-27 16:20:29 · 242 阅读 · 4 评论 -
Vue第三天 v-model与Vue组件化
Vue第三天 v-model与Vue组件化数据的双向绑定 v-model的使用v-model的基本使用Vue中使用v-model指令来实现表单元素和数据的双向绑定.<div id="app"> <input type="text" v-model="message"> <div> {{message}}</div> </div> <script src="./vue.js">原创 2021-02-28 23:42:58 · 139 阅读 · 0 评论 -
Vue 事件绑定 事件修饰符 条件判断 循环遍历
Vue第二天事件绑定v-on:事件 简写:@事件<div id="app"> <h2>{{counter}} </h2> <button v-on:click="add">+</button> <button v-on:click="decre">-</button> </div> <script src="./vue.js">原创 2021-02-28 16:07:03 · 466 阅读 · 0 评论