![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
写bug的小气球
go go go
展开
-
前端(实际开发总结)2
1.ElementUI中表单验证下面的提示文字,这里好像少一步也不行,就按这个走吧,第一次写这个提示,这里逻辑应该是valid代表着是不是输入框为空值,空值返回false。...原创 2020-05-09 18:07:11 · 1421 阅读 · 0 评论 -
前端(实际开发总结)1
prop相当于从数组传的参数,也就是.什么,elementUi中:data就相当于数组,他会根据prop来分布到每一行,这里有个fixed,这个地方固定住了宽度原创 2020-04-24 17:41:31 · 324 阅读 · 0 评论 -
uni-app(5)
触屏事件@touchstart手指按下@touchend手指离开手指在屏幕上的坐标event.changeTouches[0].clientX和clientY滑动是改变索引,所以明白之前为什么要取列表数组+索引,而不是直接去item来,是为了改变索引,增加减少来形成滑动改变图片<image>是block下载图片//点击下载图片 async handleD...原创 2020-03-24 22:57:21 · 220 阅读 · 0 评论 -
Vue外卖项目的学习(9)
滑动购物车的一些bug这里的scroll有一点小bug,如果不加判断,每点击一次都会增加一个new BScroll,导致出现bug第二 如果不加this.scroll.refresh(),先单击一个食物,然后关闭,然后再添加多个,就会到值第一次滑动没有变化,第二次才好用,原因是滑动存在了,它不重新统计内容高度了,这里的食物都是动态添加的,与之前的tops那个数组不同,那个是直接发送请求,固定...原创 2020-02-09 13:26:12 · 152 阅读 · 0 评论 -
Vue外卖项目的学习(8)
点击左侧,右侧到达对应位置clickMenuItem(index) { // console.log(index) // 使用右侧列表滑动到对应的位置 // 得到目标位置的scrollY const scrollY = this.tops[index] // 立即更新scrollY(让点击的分类项成为当前分类) ...原创 2020-02-07 16:58:58 · 246 阅读 · 0 评论 -
Vue外卖项目的学习(7)
继续昨日内容(总结下这种情况)find()函数用来查找目标元素,找到就返回该元素,找不到返回undefined。findIndex()函数也是查找目标元素,找到就返回元素的位置,找不到就返回-1。indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。总结它的思想是获得右侧视频分类的一个数组tops,这个数组是每个分类对应第一个分类的位置,然后我们还要获得实时滑动y轴的...原创 2020-02-06 18:02:11 · 204 阅读 · 0 评论 -
Vue外卖项目的学习(6)
异步显示先显示初始数据,再显示处理过数据这里一开始是空对象,异步获取到信息,才让它显示,所以才会报错,这里必须用v-if来解决 v-if是直接干掉这一块,v-show是解析了,但是不显示<div class="shop-header-discounts" v-if="info.supports"> <div class="discounts-left">...原创 2020-02-05 18:46:30 · 149 阅读 · 0 评论 -
Vue外卖项目的学习(5)
简单的前台验证及弹出提示框提示框可以想成两个div,让提示框做到显示隐藏即可import AlertTip from '../../components/AlertTip/AlertTip'methods:{ showAlerts(alertText){ this.showAlert = true this.alertText = alertText...原创 2020-02-03 17:38:03 · 155 阅读 · 0 评论 -
Vue外卖项目的学习(4)
使用svg显示加载种提示界面这里不能给svg那个ul用v-for="(shop, index) in shops”,我们的目的是为了在没获取到数据的时候,界面这样显示,用了就都不能显示,所以 v-for="items in 6"需要这样,评论星星这里shop.rating是获取到的评分 ,size星星大小 ,Number也需要强制绑定哦就是根据评分这个条件来进行一系列操作,创建个数组,往...原创 2020-02-02 17:08:08 · 164 阅读 · 0 评论 -
Vue外卖项目的学习(3)
理解一下使用 mounted(){ this.getAddress() }, methods:{ ...mapActions(['getAddress'])//相当于有了方法名 },原创 2020-02-01 19:50:26 · 114 阅读 · 0 评论 -
Vue外卖项目的学习(2)
使用Swiper轮播详细可以去看Swiper中文网的例子,很全面,出现了一个问题,3和4版本都有dist文件,5没有,直接引入就行了,需要引入一个方法也就是js以及一个css,功能比较好玩基本结构就是3个div 包括class名字都是固定的,参考官网<div class="swiper-container"> <div class="swiper-wrap...原创 2020-01-31 19:03:23 · 206 阅读 · 0 评论 -
Vue外卖项目的学习(1)
底部导航栏的实现这里是用什么标签都行,使用了路由进行了界面的跳转class:on是一个带颜色的class,这里是为了动态添加,$route中有一个path属性,代表着当前路径这里的思路是当前路径为msite时,就显示,这里涉及到了class的绑定,使用了对象绑定的方式,也就等同于:class="{on:true}"此时就显示class on<a href="javascript:;...原创 2020-01-30 17:00:17 · 201 阅读 · 0 评论 -
Vuex的学习(18)
使用Vuex优化前面的Todos基本要点与基本流程//TodoHeaderthis.$store.dispatch('addTodo', todo)//actionsaddTodo ({commit}, todo) { // 提交一个comutation请求 commit(ADD_TODO, {todo}) // 传递给mutation的是一个包含数据的对象 },...原创 2020-01-27 19:11:26 · 191 阅读 · 0 评论 -
Vue的学习(17)
优化昨日Demo<template> <div> <p>click {{count}} times, count is {{evenOrOdd}}</p> <button @click="increment">+</button> <button @click="decrement">...原创 2020-01-26 11:50:09 · 96 阅读 · 0 评论 -
Vue的学习(16)vuex
新年快乐呦vuex 是什么:对 vue 应用中多个组件的共享状态进行集中式的管理我理解的流程是:从vue组件通过dispatch触发actions中对应的函数,对应的回调函数通过执行commit()来触发 mutation 的调用, 间接更新 state,state就像data中的数据,直接更新视图的显示。demo小练习基本的vuex使用,实现计数器的功能:创建一个store.js ...原创 2020-01-25 19:16:34 · 141 阅读 · 0 评论 -
Vue的学习(15)编程式路由导航
就是用js叫编程式<template> <div> <ul> <li v-for="(message, index) in messages" :key="message.id"> <router-link :to="`/home/messages/detail/${message.id}`">{...原创 2020-01-21 14:56:03 · 89 阅读 · 0 评论 -
Vue的学习(14)向路由组件中传递数据
向路由组件中传递数据方式 1: 路由路径携带参数(param/query)基于昨天继续做,这里用param,param是:, query是??//index{ path:'messages',//简化写法 component:Message, children: [ { pa...原创 2020-01-21 13:37:19 · 217 阅读 · 7 评论 -
Vue的学习(13)路由
基本路由感觉就像超链接一样,只不过他不跳转把对应的组件创建好配置好路由器//mainimport Vue from 'vue'import App from './App'//配置路由器import router from './router'new Vue({ el:'#app',//需要挂载到哪 components:{App},//将App映射为标签 te...原创 2020-01-20 17:31:21 · 104 阅读 · 0 评论 -
Vue的学习(12)
mint_ui组件库Mint UI:a. 主页: http://mint-ui.github.io/#!/zh-cnb. 说明: 饿了么开源的基于 vue 的移动端 UI 组件库Elmenta. 主页: http://element-cn.eleme.io/#/zh-CNb. 说明: 饿了么开源的基于 vue 的 PC 端 UI 组件库下载npm install --save ...原创 2020-01-20 13:43:55 · 124 阅读 · 0 评论 -
Vue的学习(11)
实现搜索,然后返回结果这里用到了同级通信,以及发送请求,以及map的使用1.Ajax请求的位置,放在Main中,因为无论是在发送请求前后都要更新Main中的状态2.兄弟间的通信要么用props给父组件,再传递给子组件,要么就用PubSub订阅与发布来做,用这个首先得想清楚,发布是传递一个值,所以在这你可以想成把搜索框的值传递到Main中,来实现url的变化3.map的使用,一对一,不用过滤...原创 2020-01-19 19:48:27 · 151 阅读 · 1 评论 -
Vue的学习(10)Vue_Ajax
Vue_Ajaxvue-resource要在main中声明//在入口文件引入 就是main.js中import VueResource from 'vue-resource'//声明使用插件//内部会给vm对象和组件对象添加一个属性:$http 里面有两个方法get postVue.use(VueResource)<template> <div> ...原创 2020-01-19 14:52:09 · 122 阅读 · 0 评论 -
Vue的学习(9)
组件间通信 slot父子间传递通信形式不是数据,是标签首先在子组件中设置好卡槽,其实就是占好位置,然后在父组件中吧对应的东西插进去子组件什么也不用传,不像props,卡槽嘛,在父组件中吧要插入的标签写好,slot表示要放在哪把最初定义在子组件的方法之类的放在父组件中,上面注释讲到了原因数据存储优化优化一下前面的数据存储其实就是单独放出来/*使用localStorage存...原创 2020-01-19 12:36:05 · 140 阅读 · 1 评论 -
Vue的学习(8)
自定义事件这两种类型一般用于父子间的通信第一种第二种想在Vue中操作DOM元素,就必须使用ref来注册引用信息,引用信息会根据父组件的 $refs 对象进行注册。消息订阅与发布绑定事件监听--------------------------订阅消息 在大的里面触发事件----------------------------发布消息 在子组件中这两者原理类似下载库:...原创 2020-01-18 17:15:28 · 95 阅读 · 0 评论 -
Vue的学习(7)
存储数据在昨日基础上修改下,来实现关闭页面再打开也能看见数据//App data(){ return{ //这里感觉可以想成这样,先以json数据形式存到本地, // 然后通过通过读取并转义json为javascript对象,这里是变成了数组 //会以数组形式存 //从localstorage读取todos ...原创 2020-01-18 10:21:24 · 86 阅读 · 0 评论 -
Vue的学习(6)
与(5)类似的demo//App<template> <div id="root"> <div class="todo-container"> <div class="todo-wrap"> <TodoHeader :addTodo="addTodo"/> <TodoL...原创 2020-01-17 17:29:57 · 152 阅读 · 0 评论 -
Vue的学习(5)
交互添加以及交互删除,从昨天继续//Add<template> <div class="col-md-4"> <form class="form-horizontal"> <div class="form-group"> <label>用户名</label> <...原创 2020-01-17 13:17:48 · 166 阅读 · 0 评论 -
Vue的学习(4)
1.基于脚手架编写项目这里引入别人的一些理解,我觉得还不错:在浏览器打开的瞬间,浏览器中正文部分会瞬间显示index.html中定义的正文部分<div id="app">来自index.html正文中的内容</div>上面有一个id为app的挂载点,之后我们的Vue根实例就会挂载到该挂载点上;main.js作为项目的入口文件,在main.js中,新建了一个Vue...原创 2020-01-16 17:49:45 · 120 阅读 · 0 评论 -
Vue的学习(3)
绑定监听 事件修饰符 事件修饰符<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="demo">默认事件形参: ev...原创 2020-01-08 20:23:02 · 119 阅读 · 0 评论 -
Vue的学习(2)
class与style的绑定<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .aClass{ color: red; } .bCl...原创 2020-01-07 18:00:11 · 104 阅读 · 0 评论 -
Vue的学习(1)
指令 大括号 双向绑定<div id="app"> <input type="text" v-model="message"><!--指令--> <p>Hello {{message}}</p><!--大括号表达式--></div><script type="text/javascript" s...原创 2020-01-06 21:05:08 · 93 阅读 · 0 评论