VUE
szuwaterbrother
WeChat☞Y13425347606
19届新生
还在摸索
展开
-
电协小便签实现--用typescript和vue脚手架
1. 需要的知识储备2.搭建环境3. 模型设计4.datahelper实现数据类的封装 实现数据的增删查改// DataHelper类 - 负责 localStorage 操作class DataHelper { dataKey: string; primaryKey: string; // 一、构造函数 --作用:为对象 添加 各种属性-------------------------- constructor(dataK原创 2020-06-02 18:21:21 · 279 阅读 · 0 评论 -
详细页的banner实现
Banner的实现首先是整个组件的页面布局然后Banner 的代码如下<template> <div> <div class="banner" @click="handleBannerClick"> <img class="banner-img" src="//img1.qunarzz.com/sight/p0/1505/be/be4802e10f3b3107.water.jpg_600x330原创 2020-05-21 12:57:25 · 549 阅读 · 0 评论 -
Vuex 的基本入门操作流程
vuex实现当地的数据存储使用的api叫 localstorage用localstorage时候可以用try catch来抓取异常项目中 需要对vuex进行拆分以便后期维护mapstate把vuex的数据映射到这个组件的computed里面mapmutation改写前改写后mapgetter声明它使用它当数据足够冗杂,就要模块化...原创 2020-05-19 21:08:18 · 266 阅读 · 0 评论 -
vue网页性能优化
keep-alive进行页面缓存当页面keep-alive进行页面缓存vuex状态管理activated页面刷新变化时候重新渲染变化原创 2020-05-18 23:12:55 · 212 阅读 · 0 评论 -
Vue去实现搜索框的业务逻辑
涉及到的知识点数据双向绑定父子组件传值事件监听数据节流数据接收和渲染滚动条引入v-show的用法代码的优化(计算逻辑放入computed里面)原创 2020-05-18 16:43:32 · 1030 阅读 · 0 评论 -
VUE实现字母列表点击以实现屏幕定位
事件绑定发送给父组件事件监听定义事件父组件传给子组件接收父组件监听器原创 2020-05-18 15:29:26 · 681 阅读 · 0 评论 -
VUE如何用axios渲染json数据
涉及到的知识点脚手架接口请求的默认地址设置生命周期函数的使用父级向子级组件传值脚手架接口请求的默认地址设置在后端的接口尚未做出来之前,可以通过默认地址的设置让他人看懂我们的接口请求数据动态渲染的操作过程其实我也不太理解,但就是会用,下面拿个数组和对象赋值的例子来演习吧先data数据创一个对象和数组触发生命周期然后触发传值操作再把对象和数组父级传到子级子级组件去取值后循环渲染父级组件的操作子级组件的操作props接收数组和声明类型v-for实现动态渲染原创 2020-05-17 23:52:27 · 2620 阅读 · 0 评论 -
手把手教你用VUE搭建一个旅游网站以及给你优化方案
阶段一: 轮播图实现实现过程VUE快速搭建轮播图VUE实现css样式以及图片防抖动优化开源源码轮播图———swiperlist原创 2020-05-16 14:43:16 · 2870 阅读 · 0 评论 -
icon图标实现轮播效果和页面切换
VUE如何快速做一个轮播图温馨提示==>>大家先看这个,再来理解下面的实现以及优化的思路引入轮播图组件,嵌套两层 swiper 和 swiper-slider,然后写里面就可以套图片和文字实现轮播图效果但是数据(文字以及图片信息)放在template是很不好的,难维护不方便更新。因此我们要弄一个类似json数据的东西写在data里面当图标容量超过了单页面容量时候,就会溢出,所以要用特定的computed prop去把溢出内容放入下一页面层级具体操作1. 套入swiper和s原创 2020-05-16 14:36:46 · 723 阅读 · 0 评论 -
VUE组件实现一个防抖动效果
问题防抖动问题顾名思义,由于html加载最后才会加载图片,所以如果没有提前设置高度的话,就会出现窗口抖动,用户体验很不好.如果固定死高度的话,又不能于宽等比例缩放如果是vue里面出现这种问题要怎么解决思路给template加< div >套起来,然后绑定class=“wrape”给wrape写百分比 让图片在文字出来前就能撑开一个空间(有浏览器兼容问题,所以待会介绍两种写法)具体操作先套个div针对div的样式来写注明:这里宽和高是一个百分比的关系,原创 2020-05-15 19:03:34 · 899 阅读 · 0 评论 -
VUE如何快速做一个轮播图
1. 第三方插件https://github.com/surmon-china/vue-awesome-swipernpm install swiper vue-awesome-swiper --save或者yarn add swiper vue-awesome-swiper2. 全局注册注明! 全局配置我写在了main.js里面了3. 局部注册我没用过import { Swiper, SwiperSlide, directive } from 'vue-awesome-s原创 2020-05-15 01:34:07 · 8101 阅读 · 1 评论 -
VUE中引入stylus的一些需要注意的地方以及优化方法
VUE如何设置全局的css/stylus/less直接写 import就好了很多文件的路径都很冗长,如何缩短打开下面的文件然后找出 resolve其中需要注意的地方是,以这种缩写的方法引入css的时候,要写 ~...原创 2020-05-14 23:42:54 · 177 阅读 · 0 评论 -
手把手教你用Vue搭建一个商品页面
vue的一些零散知识一.VUE对象和vue实例如何使用Vue实例开始编写Vue应用程序,以及如何将基本数据加载到网页上。 Vue实例是每个Vue应用程序的根Vue实例插入到DOM中的一个元素中Vue实例的数据可以使用称为表达式的类似于mustache的语法{{}}来显示。(放data然后再处理)Vue是响应式的,原例改变后面跟着变二.VUE属性绑定比如 data我放了product的text和一个image和link,在html页面时候 我就直接{{}}框出文字。原创 2020-05-10 01:07:51 · 3663 阅读 · 0 评论