Vue基础
Vue2基础
流氓也是种气质 _Cookie
人生不能等待,学习赚钱就趁现在。预见桃花何处源,横笛偏向行路难。
展开
-
vue 项目报Uncaught runtime errors: 导致项目崩溃
vue 项目报Uncaught runtime errors: 导致项目崩溃,关闭报错原创 2023-09-18 15:13:39 · 3865 阅读 · 1 评论 -
vscode 运行vue项目报FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
vscode 运行vue项目报FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory原创 2023-08-18 10:33:04 · 434 阅读 · 0 评论 -
vue 事件委托动态修改背景图片
vue 利用事件委托动态修改背景图片原创 2023-03-22 15:38:51 · 252 阅读 · 0 评论 -
Vue 使用scss 注意事项
vue 使用scss 避免入坑1.先安装scss 依赖的包,一定要注意版本!!!原创 2023-03-21 09:35:27 · 359 阅读 · 0 评论 -
vue2和vue3的环境搭建
vue2和vue3的环境安装原创 2022-12-16 09:40:20 · 652 阅读 · 0 评论 -
vue2自定义指令及钩子函数
在Vue中,自定义指令的生命周期(也叫钩子函数),有5个事件钩子:1-bind 被绑定, 2-inserted 被插入, 3-update 开始更新, 4-componentUpdated 更新完成,5-unbind 解除绑定。我们可以设置指令在某一个事件发生时的具体行为。根据权限判断是否显示按钮原创 2022-12-02 12:14:03 · 3836 阅读 · 0 评论 -
基于axios 的二次封装
axios的二次封装请求拦截里面针对 token 进行处理响应拦截里面判断 token 是否过期等等原创 2022-06-28 15:26:51 · 795 阅读 · 0 评论 -
vue js动画及动画封装
js动画钩子函数:@before-enter@enter@after-enter@before-leave @leave@after-leave<template> <div> <button @click="change"> 触发动画</button> <p>vue 中列表动画</p> <!-- 离开动画的钩子函数是before-leave --> <transi...原创 2021-02-10 10:31:19 · 115 阅读 · 0 评论 -
vue 单选和多选
效果图:<template> <div> <!-- 单选 --> <!-- <ul class="box"> <li v-for="c,index of cities" :class="{checked:index==n}" @click="changeList(index)" :key="index">{{c}}</li> </ul> -->..原创 2021-10-26 16:53:57 · 137 阅读 · 0 评论 -
vue 高级特性 异步组件
异步组件1)使用import 函数2)异步组件,加载体积大的组件如富文本编辑器,echarts等,性能优化的一种形式ps:查看效果打开控制台 network中<template> <!-- rights组件 --> <div class="header"> <Inp v-if="show"></Inp> <button @click="show=true">点击确认异步加载</button原创 2021-01-07 14:51:59 · 188 阅读 · 0 评论 -
vue中class和style样式绑定
1.class样式绑定的方式1)使用v-bind2) 使用驼峰写法3)class对象写法,class数组写法,表达式方式的写法原创 2021-01-06 16:09:43 · 776 阅读 · 0 评论 -
vue 给组件绑定原生事件
通过事件修饰符@click.native 给组件绑定原生事件父组件home<template> <div> <h1>home组件</h1> <child1 @click.native="change(2)"></child1> <p>total: {{total}}</p> </div> </template>原创 2021-02-12 16:47:04 · 104 阅读 · 0 评论 -
vue transition css动画原理
slide-enter进入动画第一帧slide-enter-active 监听整个进入动画的过程,一旦有什么改变,马上触发动画在规定时间内完成动画slide-leave-to 动画离开第二帧slide-leave-enter 监听整个动画离开的过程,一旦改变,立即触发动画<template> <div> <button @click="change"> 触发动画</button> <transition name=.原创 2021-02-10 09:24:16 · 170 阅读 · 0 评论 -
vue 中应用节流函数
vue 中应用节流函数<template> <div> <input type="search" placeholder="输入" v-model="key" /> <ul> <li v-for="item in data" :key="item.id"> {{item.name}} </li> </ul> </div></t原创 2021-01-14 19:11:02 · 841 阅读 · 0 评论 -
vue 高级特性keepalive
缓存组件keep-alive,频繁切换,但不重复渲染,使用场景tab切换等,性能优化的场景之一 可以在控制台看log 的输出情况<template> <!-- rights组件 --> <div> <button @click="show='a'">a</button> <button @click="show='b'">b</button> <!-- 切换时会一直触发多次..原创 2021-02-07 13:46:38 · 246 阅读 · 0 评论 -
vue 高级特性 动态组件
动态组件:引入,定义, 注册, 使用缺一不可!!<template> <!-- rights组件 --> <div class="header"> // 使用动态组件 <component :is="componentInp"></component> </div></template><script type="text/ecmascript-6">// 引入imp.原创 2021-01-07 14:24:43 · 190 阅读 · 0 评论 -
vue ref放在标签与放在组件上的区别
ref 加在标签上 this.$refs是拿到dom , 若ref加上组件上this.$refs拿到的是组件的引用子组件B<template> <div class="con"> <p @click="add">{{num}}</p> </div></template><script type="text/ecmascript-6">export default { data() {.原创 2021-02-10 15:50:03 · 651 阅读 · 0 评论 -
vue 高级特性 $nextTick
vue 是异步渲染 ,组件更新之后 如果要立即获取最新的dom 使用this.$nextTick()<template> <div class="header"> <!-- rights组件 --> <p>组件更新之后 如果要立即获取最新的dom 使用this.$nextTick</p> <ul ref='ul'> <li v-for="(item,index) in list" :.原创 2021-01-07 11:22:32 · 90 阅读 · 0 评论 -
vue 组件间的通讯及生命周期
vue 组件间的通讯1)props ,$emit父子组件通讯2)自定义事件父组件rights, 子组件inp和item<template> <div class="header"> <!-- rights组件 --> <!-- 子组件触发的this.emit事件必须与父组件的自定义事件name一致!!! --> <Inp @add='addHandler'></Inp> <I.原创 2021-01-06 20:24:35 · 186 阅读 · 0 评论 -
vue 实现分页器
功能还未完善<template> <div> <ul> <li v-for="val in select" :key="val.id"> {{ val.id }} </li> </ul> <div class="page"> <div class="gu"> <span>共多少{{ tatol }原创 2021-02-08 10:18:56 · 294 阅读 · 0 评论 -
vue事件,自定义参数及事件修饰符和按键修饰符
<template> <div> <p> {{number}} </p> <button @click="add1">+1</button> <!-- 有自定义参数时,我们如何传递envent ,自定义参数 --> <button @click="add2(2 ,$event)">+2</button> </div></templat.原创 2021-02-05 15:36:48 · 173 阅读 · 0 评论 -
vue transition 多个元素 多个组件 动态组件 做动画
父组件<template> <div> <button @click="change"> 触发动画</button> <!-- 加key是为了dom不复用 mode="out-in"> --> <!-- <p>vue 使用多个元素中的动画</p> --> <!-- <transition mode="out-in"> <div.原创 2021-02-10 09:33:03 · 478 阅读 · 0 评论 -
解决设置固定定位,会遮盖住元素的问题
解决方案是:给定位的盒子套个div有问题的效果图<template> <div> <!-- 也可以套个wra div --> <div :class="isFixed ? 'wra' : '' "> <div class="header" ref="he" :class="isFixed ? 'ding' : '' ">header</div> </div> &l原创 2021-01-14 14:16:16 · 2274 阅读 · 0 评论 -
vue 高级特性 自定义v-model
vue 高级特性 自定义v-model1)自定义v-model(v-bind+触发的input事件)实现双向绑定<template> <div class="header"> <!-- rights组件 --> <p>{{name}}</p> <!-- 自定义v-model --> <Inp v-model="name"></Inp> <!--平时我们原创 2021-01-07 10:12:14 · 201 阅读 · 0 评论 -
vue过滤器filters获取不到this对象的解决办法
<template> <!-- 这里过滤器一定要把that传过去 --> <div>{{ a |filter(that)}}</div></template><script> export default { name: "test", data() { return { that: this, a: 1, b: 2 } .原创 2021-08-01 18:00:02 · 174 阅读 · 0 评论 -
vue render函数使用
render函数1)组件的复用先用vnode描述一个Dom结构<div id='div1' class="header"> <p style="font-size: 20px">vdom</p></div>// vnode描述Dom结构{ tag: 'div', props:{ // 属性 id: 'div1', className: 'header', },children原创 2021-01-11 15:55:06 · 227 阅读 · 0 评论 -
vue 数据响应原理,及劫持和代理
响应数据原理:初始化通过Proxyget方法收集依赖(dep对象的作用)--->数据改变触发set-->set触发notify(更新依赖)--> 再更改对应的dom(通过diff算法,patchVnode对比dom,对比根节点再创建等功能)--->重新render(渲染)// vue2 是通过defineproperty 数据响应绑定var obj = { na: 'liu man', age: 666}// Object.defineProper...原创 2021-01-11 17:56:03 · 160 阅读 · 0 评论 -
vue 高级特性mixins
vue 高级特性mixins1)抽离多个组件相同的逻辑<template> <!-- rights组件 --> <div class="header"> <p>mixin 抽取公共组件逻辑,缺点是不易阅读,命名冲突等</p> <hr> <div>{{name}} {{city}}</div> <button @click="showName">显示名原创 2021-01-07 15:11:49 · 329 阅读 · 0 评论 -
computed 和watch 区别
computed 和watch的区别1)computed依赖缓存,data不变则不会重新计算,性能优化的一种形式2)watch 如何深度监听deep :true, 拿不到旧的值<p>num {{num}}</p> <p>double1 {{double1}}</p><input type="text" v-model="double2"><input type="text" v-model="name">原创 2021-01-06 15:41:24 · 133 阅读 · 0 评论 -
非网络引用element-ui css导致图标无法正常显示的解决办法
前言官方推荐的css及js引用方式如下:<!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui@1.4/lib/theme-default/index.css"><!-- 引入组件库 --><script src="https://unpkg.com/element-ui@1.4/lib/index.js"></script>这种方式引入,如果原创 2021-05-06 14:51:08 · 217 阅读 · 0 评论 -
vue transition 和 animate.css同时使用
// https://www.dowebok.com/98.html animate.css下载链接<template> <div> <p>vue 同时使用transition 和 animate.css</p> <button @click="change"> 触发动画</button> <!-- 自定义name 以及使用animated.css,添加apper实现页面刷新第一次触发动画 .原创 2021-02-10 09:28:24 · 352 阅读 · 0 评论 -
vue 动态切换样式
思路:动态绑定class样式,通过事件赋值,从而改变样式!<div class="f"> <div :class="{'toggle': ver==1 }" @click="ver=1">1</div> <div :class="{'toggle': ver==2 }" @click="ver=2">2</div> <h2>{{ver}}</h2></div><script.原创 2020-12-28 15:01:06 · 192 阅读 · 0 评论 -
vue 组件的参数校验props
props特性:在dom 不显示属性msg(自定义)非props特性:在dom中会显示属性父组件home<template> <div> <h1>home组件</h1> <!-- 没有加v-bind 传的值永远是字符串 --> <!-- <child msg='123'></child> --> <child1 :msg=原创 2021-02-12 12:36:31 · 597 阅读 · 0 评论 -
npm 下载指定版本包
# 升级或安装 cnpm$ npm install -g cnpm --registry=https://registry.npmmirror.com$ npm config set registry https://registry.npmmirror.comnpm下载指定版本cnpm i @supermap/iclient-leaflet@10.2.1npm查看历史版本npm view axios versionsnpm查看本地安装版本npm ls axios...原创 2022-04-19 10:03:41 · 14398 阅读 · 0 评论 -
开发vue 插件 及异步拆分加载vuex
开发vue 插件使用到的关键方法install,mixin,this.$options获取自定义配置原理是这样的function a1() { console.log('a1');}// 只是a 函数的输出a1Vue.use(a1) // afunction a2() { console.log('a2');}a2.install= function() { console.log('install');}// 有install的时候只 输出installVu.原创 2021-01-09 11:18:13 · 135 阅读 · 0 评论 -
vue-cli项目 创建全局组件(全局配置)及render函数使用
ps:全局组件指的是全局配置,只需全局引入一次就能在 vue文件中使用 局部配置指的的公共组件写在components中,每次使用都要引入,这二个概念需要区分清楚1.目录结构2.创建你要全局的一个组件页面,如下run.vue3.在刚才创建的index.js页面引入你想要全局的组件import Vue from 'vue'import run from './views/run.vue'Vue.component('run',run)Vue.component...原创 2021-05-14 10:37:37 · 620 阅读 · 0 评论 -
vue mock数据
mock数据原因当后端的同学还未搭建服务接口时,我们不能停下来等他们开发完成后我们才进行工作,会严重影响开发效率安装 npm i mockjs -Dmock的api.js 建在src/mock/api.js// api.jsimport Mock from 'mockjs'Mock.mock('/api/index','get',{ 'status' :'200', 'data': { 'methods': 'get', 'name': 'liu man'.原创 2021-01-07 18:43:52 · 124 阅读 · 0 评论 -
vue实战项目仿卖座电影APP
所用到技术栈:vue-cli,vue-router,vuex,swiper,batter-scroll,axios,mint-ui,stylus,es6以及百度地图API下面页面是项目效果页面项目城市选择页面影院页面电影页面电影详情页面项目地址:https://github.com/zhanghenxiao/maizuo,能帮助到你可以start,不懂得地方可以留言...原创 2020-08-26 14:43:24 · 2299 阅读 · 17 评论 -
vue 使用递归组件
vue 使用递归组件组件中配置name的意义,是为了使用递归组件,以及this.$options的取值<template> <div> <second :list='list'></second> </div></template><script>export default { data() { return { // 数据满足这样的格式 list: [原创 2021-01-14 19:33:59 · 88 阅读 · 0 评论 -
vue事件中event参数和自定义参数
event参数和自定义参数1)event是原生的<p>{{count}}</p><button @click="add">+1</button><button @click="reduce(1,$event)">-1</button>methods: { add(event) { console.log(event.__proto__.constructor); // event是原生的原创 2021-01-06 16:36:11 · 857 阅读 · 0 评论