![](https://img-blog.csdnimg.cn/20210406120543562.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
Jedi Hongbin
hongbin.xyz meta.hongbin.xyz kmyc.hongbin.xyz
展开
-
vue-cli todolist
【代码】vue-cli todolist。原创 2022-10-20 15:49:20 · 229 阅读 · 0 评论 -
vue 书店管理系统
适用大学前端专科课 的 vue2 书店管理系统。原创 2022-09-15 17:33:31 · 732 阅读 · 1 评论 -
vuecli仿淘宝
仿淘宝 项目地址: https://github.com/tangmusenLiu/miniTaobao原创 2020-07-15 09:48:37 · 885 阅读 · 0 评论 -
vue日历组件
<template> <div class="Calendar"> <Header /> <DateList /> <div style="overflow: hidden;"> <div @touchstart="touchstart" @touchend="touchend" @touchmove="touchmove" ref="w.原创 2020-07-14 11:08:57 · 536 阅读 · 2 评论 -
keep-alive缓存某一指定路由
路由的元信息,可以理解成保存某一路由的特定辨识信息,当辨识信息对上了某些判断,则执行某些操作正常显示的路由不使用keep-alive缓存,但是某一特定需要使用keep-alive保存操作记录,就可以使用两个router-view,通过判断当前路由的meta信息中的变量的值来决定时候使用keep-alive <transition> <router-view v-if=...原创 2020-04-23 11:25:36 · 2202 阅读 · 0 评论 -
vuecli实现仿写饿了么
点击github获取代码仿写饿了么是一个不错的用来锻炼vue的方式,我仿写的饿了么还是比较浅显的,没有使用饿了么提供的api,数据就是自己手写的几条json用json-server打开,只是实现基本功能,唯一一个第三方api就是百度地图的获取的定位还不是精准定位只定位到城市,高德的可以实现精准定位,不过用到cli中不会用了,就只用了百度的定位 ...原创 2020-04-22 19:06:44 · 2561 阅读 · 3 评论 -
Vue实现计算器
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,in...原创 2020-03-30 20:47:35 · 1575 阅读 · 4 评论 -
MUI使用
MUI是数字天堂推出的一跨类似bootstrap的框架,号称最接近原生App体验的高性能前端框架,使用方法和bootstrap大同小异,异就异在还没像bootstrap一样的体验,因为虽然都是复制粘贴直接用,但是MUI不能用npm下载,至少现在好像是,还有一些小问题啦,总之使用方法十分的简单看图:下载完的文件夹中有所有的例子,直接在这打开查看效果然后查看网页源码,直接复制到自己的文件中即...原创 2020-03-07 10:33:08 · 402 阅读 · 0 评论 -
VueCLI实现电商商城项目
bandicam 2020-03-13 17-17-04-444 GitHub地址.这个项目用到了,vuecli,vuex,vue-router,库:MUI,Mint-ui,moment,vue-preview,开发项目的每一部和每遇到的问题和解决方法都记录在三篇项目纪实...原创 2020-03-14 18:43:41 · 1790 阅读 · 1 评论 -
购物车底部卡片动画
<footer class="footer" ref='panel'> <span class="pu">总计(不含运费)</span><span @click="down" ref='upordown' class="arrow">></span><br> <br> <span c...原创 2020-03-13 14:03:37 · 224 阅读 · 0 评论 -
VueCLI商城项目纪实day.3
home页的图片区顶部滚动条:MUI的tab-top-webview-main组件设个组件需要用到mui的js文件引入//MUI的js文件,解决顶部滑块无法滑动问题 import mui from '../../lib/MUI/js/mui.min.js'引入之后要初始化组件mui('.mui-scroll-wrapper').scroll({ deceleration...原创 2020-03-12 15:36:40 · 367 阅读 · 0 评论 -
vuex使用
用它来简化组件传值引入创建vuex实例//像创建路由一样,创建vuex实例 var store = new Vuex.Store({ state:{ count:0 }, mutations:{} })挂载到vue实例上let vm = new Vue({ el:"#app", store...原创 2020-03-11 15:29:50 · 190 阅读 · 0 评论 -
VueCLI商城项目开发纪实day.2
Home页第一个板块新闻板块新闻板块是Home组件中的一个子组件创建<template> <div id="news"> <h3>{{ name }}</h3> </div></template><script> export default { data(){ return{ ...原创 2020-03-08 21:04:44 · 248 阅读 · 0 评论 -
VueCLI商城项目开发纪实day.1
注意事项:因为webpack使用不达标,所以用了VueCLI搭建项目引入MintUI组件库全部组件引入(不好:所有的组件全部下载,实际开发中有很多用不到,浪费内存)import MintUI from 'mint-ui'Vue.use(MintUI)import 'mint-ui/lib/style.css'//样式表都得引入按需使用(推荐:需要什么,引入什么)import 'm...原创 2020-03-08 10:56:01 · 482 阅读 · 0 评论 -
vue cli 使用babel命令记录
npm install --save-dev babel-plugin-transform-object-rest-spreadcnpm i babel-core babel-loader babel-plugin-transform-runtime -Dcnpm i bable-preset-env babel-preset-stage-0 -Dmint Uiimport Min...原创 2020-03-07 14:59:53 · 683 阅读 · 0 评论 -
vue简单的表格增删改查
bandicam 2020-02-28 19-59-01-717 html<style> .table { border: 1px solid rgb(149, 140, 140); width: 100%; } .table ...原创 2020-03-02 13:04:38 · 1290 阅读 · 0 评论 -
Vue实现表格的增删改查
bandicam 2020-03-01 09-41-46-926 html<body> <div id="app"> <model ref='mod' v-show=isShow @addlist="addItem" @editlist...原创 2020-03-02 13:02:06 · 3777 阅读 · 0 评论 -
Vue keep-alive缓存路由信息
在不使用keep-alive时,通过路由跳转到另一组件上时,上一个组件会被vue销毁,在次进入,页面会保持初始状态,不会对用户的更改保留,如果需要包作在某组件上的更改,就可以使用keep-alive保存路由入口 <keep-alive> <router-view></router-view> </keep-aliv...原创 2020-02-26 19:57:03 · 616 阅读 · 0 评论 -
vue路由的使用,命名,参数,范式,嵌套,动态匹配
基本使用:1,让Vue使用该VueRouter创建,Vue.use(VueRouter);2, 创建router对象var router = new VueRouter({ });3, 在创建的router对象中配置路由对象,路由匹配的规则,var router = new VueRouter({ routes: [ { ...原创 2020-02-26 16:33:54 · 439 阅读 · 0 评论 -
Vue 组件传值方法5,利用$parent和$Children
实现思想:利用每个组件的属性来传值,即每个组件都有parents和parents和parents和Children等属性,根据这些属性找到要找的组件,对其进行操作,比如Vue实例vm的父级没有,子组件在这里有App和App下的Son,这些都是vm的属性中报错,换句话说vm下面的每一行代码都能在vm的某个属性中找到,对其进行更改,便可达到从父组件向子组件传值的效果,换言之,从子组件向父组件‘传...原创 2020-02-25 16:06:30 · 1638 阅读 · 0 评论 -
Vue组件传值方法4利用provide和inject
父组件中设置provide可以设置多个属性,在它的子组件中设置inject接收父组件:provide:{ for:'App Pass Value', }子组件:data() { return { name: 'Two sons', msg:'', ...原创 2020-02-25 14:59:39 · 862 阅读 · 0 评论 -
Vue组件传值方法3:兄弟组件间传值
类似子类想父类传值,不过这个不管中间有多少个组件,都可是实现,不用再每个组件中设置属性或绑定$attrs;实现思路是:用一个独立的Vue组件,点击某一组件注册事件,不过事件是注册在独立的做为中转的实力上,在需要接受值的组件中使用 $on调用事件名,设置回调函数,在函数中进行值的设定。定义一个组件let dus = new Vue();传输组件Vue.component('Eldest...原创 2020-02-25 14:10:03 · 2756 阅读 · 0 评论 -
vue 组件传值方法2-使用$attrs实现组件传值
图中 第一行是最高级组件里的两条数据’App‘和‘组件传值’,‘组件传值’是用笨办法每一个组件中都用props定义个属性接受,很费劲,数据多了不小心就出错;‘App’是用attrs来实现的,官网是这么描述的:包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 ...原创 2020-02-24 21:56:29 · 3687 阅读 · 0 评论 -
vuecli安装使用笔记
下载Node.js,下载完安装,一直下一步,安装完成在终端输入node -v查看版本号,若有版本号说明安装成功,然后下载vuecli,终端输入npm install -g @vue/cli安装完成输入vue -V(大写的v)查看版本号,若有V证明安装成功,然后可以下载一个cnpm淘宝镜像,终端输入:npm install -g cnpm --registry=https://reg...原创 2020-02-23 14:39:05 · 123 阅读 · 0 评论 -
vuecli的属性传值方法1和注册事件
属性传值:1,传值:比如String,传入的值发生改变,只会作用在发生改变的子组件中2,传引用:如Array,只发生变动,所用引用该值的地方都会发生变动。注册事件:vue不推荐子组件改变父组件中的变量,会报错,想要更改,可以使用注册事件,如:在子组件中调用一个方法,该方法使用$emit注册事件,事件在父组件中调用:子组件: <div id="header" @click="ch...原创 2020-02-23 14:00:53 · 277 阅读 · 0 评论 -
axios请求的get/post
axios用到的比fetch要多,更加方便,提供了很多使用的API,引用的三种方式:npmnpm install axiosbowerbower install axioscdn<script src="https://unpkg.com/axios/dist/axios.min.js"></script>get请求的格式:// 为给定 ID 的 us...原创 2020-02-21 18:49:59 · 228 阅读 · 0 评论 -
fetch请求get/post
fetch的基本格式fetch('http://jsonplaceholder.typicode.com/todos') .then(res =>{ }) .then(data=>{ });它只是一个 HTTP 响应,而不是真的JSON。为了获取JSON的内容,我们需要使用 json() 方法: fetch("http://jsonplaceholder.typ...原创 2020-02-21 18:40:20 · 7106 阅读 · 0 评论 -
计算属性 vs methods
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Hongbin</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">&...原创 2020-02-18 21:39:03 · 216 阅读 · 0 评论