![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
iku_ki
这个作者很懒,什么都没留下…
展开
-
Vue数据代理
vue中数据代理的好处:更加方便地操作data中的数据 Object.definedProperty(vm,"name",{ get(){ return vm._data.name } set(newValue){ vm._data.name=newValue } })原创 2021-08-22 21:25:31 · 50 阅读 · 0 评论 -
vue3新特性,Vue3快速上手
Vue3快速上手1.Vue3简介2020年9月18日,Vue.js发布3.0版本,代号:One Piece(海贼王)耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者github上的tags地址:https://github.com/vuejs/vue-next/releases/tag/v3.0.02.Vue3带来了什么1.性能的提升打包大小减少41%初次渲染快55%, 更新渲染快133%内存减少54%…2.源码的升级使用Proxy转载 2021-08-13 21:45:14 · 215 阅读 · 0 评论 -
给项目目录起别名
const path = require("path")const resolve = dir => path.resolve(__dirname, dir)module.exports = { webpack: { alias: { "@": resolve("src"), "components": resolve("src/components") } }}原创 2021-08-12 14:35:59 · 122 阅读 · 0 评论 -
animate.css在Vue中的使用
# Vue集成第三方动画库 animate.css官网链接:https://animate.style/ 安装: npm install animate.css --save 在项目种引入 import "animate.css" 使用animate.css 给transition标签添加上固定的name属性 按需求添加上 enter-active-class="官网上自己找动画值" =》进入动画的过程 leave-acitve-原创 2021-08-04 20:51:21 · 1463 阅读 · 0 评论 -
Vue动画详解 【图文】
# Vue动画 想要给谁加动画效果,就给谁包裹transition标签 transition默认会动态给被包裹元素添class样式: v-enter:元素显示/插入前的效果,元素初始的位置 例如:transform: translateX(-200%); v-active-enter:元素显示/插入的过渡时间和函数,初始前到最终的一个时间段 例如:transition: all 0.3s ease; v-enter-to:元素显示/插入后的效果,元素最终的位置 .原创 2021-08-04 20:05:26 · 300 阅读 · 0 评论 -
vue全局事件总线
# 全局事件总线:可以实现任意组件间的通信 可以设置为全局事件总线的对象需要满足: 1、能使全局所有的组件都能够访问的到 2、这个对象具有$emit() $on() $off() 方法 满足这个两个要求的只有是Vue对象 全局事件组件可以实现任意两个组件之间进行数据的交互 创建全局实例对象:方式1 在main.js中 import Vue from "vue" Vue.prototype.$EventBus=new Vue() 创建原创 2021-07-31 22:07:27 · 350 阅读 · 0 评论 -
vue消息订阅与发布
消息订阅与发布 也可以实现任意组件间的通信 1.订阅消息:设置消息名 --》需要数据的组件进行订阅消息 2.发布消息:传递消息内容 --》传递数据的组件进行发布消息 npm i pubsub-js --> 消息订阅与发布所需库 使用步骤 1.npm i pubsub-js -S 2.在需要使用消息订阅与发布的地方使用 订阅消息的组件(接收数据的组件) import pubsub from "pubsub-js" mo原创 2021-07-31 21:59:05 · 1408 阅读 · 0 评论 -
vue重要知识点总结(一)
监听的属性发生改变就会执行回调函数注意:Vue所管理的函数,都不能写成箭头函数,Vue管理的函数:methods中定义的函数,计算属性,监听器中的函数事件修饰符vue中的事件修饰符: 1.prevent:阻止默认事件(常用);原生阻止默认行为:event事件对象.preventDefault() 2.stop:阻止事件冒泡(常用);原生阻止冒泡:event事件对象.stopPropagation() 3.once:事件只触发一次(常用)之后就不会触发绑定的事件函数; 4.capture:使用原创 2021-07-31 20:34:23 · 277 阅读 · 0 评论 -
Vue与组件VueComponent的关系
Vue中一个重要的内置关系:VueComponent.prototype.__proto__===Vue.prototype这个内置关系使得:让组件实例对象(vc)可以访问到Vue原型上的属性和方法原创 2021-07-30 20:02:13 · 230 阅读 · 0 评论 -
Vue,微信小程序,uni-app生命周期对比
原创 2021-07-29 22:08:08 · 501 阅读 · 0 评论 -
Vue内置指令大全
原创 2021-07-29 21:06:38 · 89 阅读 · 0 评论 -
Vue内置指令、Vue指令 + Vue收集表单数据
我们学过的指令: v-bind : 单向绑定解析表达式, 可简写为 :xxx v-model : 双向数据绑定 v-for : 遍历数组/对象/字符串 v-on : 绑定事件监听, 可简写为@ v-if : 条件渲染(动态控制节点是否存存在) v-else : 条件渲染(动态控制节点是否存存在) v-show : 条件渲染 (动态控制节点是否展示) v-text指令: 1.作用:向其所在的节点中渲染文本内容。 2.与插值..翻译 2021-07-27 22:07:18 · 91 阅读 · 0 评论 -
Vue数组中响应式的方法:
Vue数组中响应式的方法: push() 在数组最后元素中追加元素 pop() 删除数组最后一个元素 shift() 删除数组中第一个元素 unshift() 在数组前面元素中追加元素 splice() 删除、插入、替换元素 sort() 排序 reverse() 反转Vue中的响应式原理vue响应式依赖的两种核心技术:1.Vue中修改数据,Vue内部是如何监听message数据的变化的Object.defineProperty()原创 2021-07-27 20:37:19 · 200 阅读 · 0 评论 -
Web前端学习视频、Vue教程、React教程、Axios教程...【最详细视频教程】
资源链接:https://download.csdn.net/download/weixin_46435234/20429610此链接为博客资源链接,请放心购买,(整理资源不易,就当请小弟一杯奶茶啦)资源目录:原创 2021-07-23 11:09:50 · 71 阅读 · 0 评论 -
Web前端学习视频、Vue教程、React教程、Axios教程...【最详细视频教程】
资源链接:https://download.csdn.net/download/weixin_46435234/20429610此链接为博客资源链接,请放心购买资源目录:原创 2021-07-22 17:24:38 · 94 阅读 · 0 评论 -
vue3项目-饿了么项目
首页详情页确定订单页添加收货地址订单备注页在线支付页确认订单页订单详情页我的页我的收货地址页原创 2021-07-21 17:52:50 · 592 阅读 · 0 评论 -
Node监听本地文件变化,自动重新启动服务
最好安装一下nodenmon 这个来启动node环境pip install nodemon// node监听本地文件发生变化,重新启动服务async function kill(child, callback) { if (process.platform === "win32") { const _child = execa('taskkill /pid ' + child.pid + ' /T /F', [], { shell: true, cwd原创 2021-07-18 18:29:19 · 540 阅读 · 0 评论 -
怎么监听Vuex数据
分析: 此题考查Vuex的应用及 Vue内部的监听数据变化的机制 解答: 首先确定 Vuex是为了解决什么问题而出现的 ? Vuex是为了解决组件间状态共享而出现的一个框架. 其中有几个要素 是组成Vuex的关键, state(状态) mutations actions , state 表示 需要共享的状态数据 mutations 表示 更改 state的方法集合 只能是同步更新 不能写ajax等异步请求 actions 如果需要做异步请求 ...转载 2021-07-17 14:53:42 · 3121 阅读 · 0 评论 -
方法/通用better-scroll【最详细教程】
文章目录 better-scroll介绍better-scroll 是什么起步滚动原理better-scroll 在 MVVM 框架的应用 安装NPMscript 加载 选项 / 基础startXstartYscrollXscrollYfreeScrolldirectionLockThresholdeventPassthroughclickdblclick(v1.12.0+)tapbouncebounceTimemomentummomentumLimitTimemomentumLimitDi...原创 2021-07-14 19:59:58 · 2806 阅读 · 0 评论 -
Better-Scroll的封装
Bettor-Scroll.vue组件<template> <!-- wrapper必须要有高度 --> <div class="wrapper"> <!-- 当 content 的高度不超过父容器的高度,是不能滚动的 --> <div class="content"> <!-- 滚动内容 --> <slot></slot> </div>..原创 2021-07-07 15:35:15 · 156 阅读 · 0 评论 -
vue&react中的key的作用
经典面试题: 1). react/vue中的key有什么作用?(key的内部原理是什么?) 2). 为什么遍历列表时,key最好不要用index? 1. 虚拟DOM中key的作用: 1). 简单的说: key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用。 2). 提升渲染性能 2). 详细的说: 当状态中的数据发生变化时,react会根据【新数据.转载 2021-07-02 20:45:48 · 63 阅读 · 0 评论 -
Vue响应式原理
原创 2021-06-28 21:07:49 · 42 阅读 · 0 评论 -
Vue图片懒加载
图片懒加载: 懒加载:用到时再加载,图片显示再视口上,再进行加载 npm i vue-lazyload -S 在main.js中使用 import VueLazyLoad from "vue-lazyload" Vue.use(VueLazyLoad,{ 图片没有加载出来的时候用那张图片代替 loading:import("路径")//在js中导入静态文件 }) 使用 <img v-lazy="地址" />...原创 2021-06-28 14:37:30 · 56 阅读 · 0 评论 -
移动端-vue轮播图组件的封装
轮播图组件封装思路:所以会封装两个组件1.swiper 2.swiperItemswiperitem组件:<template> <div class="slide"> <!-- 组件插槽给图片站的位置 --> <slot></slot> </div></template><script> export default { name: "Sl原创 2021-06-14 23:05:10 · 576 阅读 · 4 评论