随笔分类 -  vue项目练习

1 2 3 下一页
组件化，路由等等
vue--api的使用场景
摘要：1.过滤器（filter）(可以全局注册或者局部注册) 过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 定义局部方法 filters:{ xx(){ } } eg: <!-- 在双花括号中 --> {{ name | capitalize }} <!-- 在 `v-bind` 中 -- 阅读全文
posted @ 2019-10-11 09:59 星雨，恒奋斗，过客 阅读(174) 评论(0) 推荐(0)
vue-router--对应js的知识
摘要：?a=1234 对应是：location.search #/orderSuccess?orderid=021223242424 对应是：location.hash 阅读全文
posted @ 2019-10-06 21:45 星雨，恒奋斗，过客 阅读(128) 评论(0) 推荐(0)
axios使用
摘要：vue--http请求 阅读全文
posted @ 2019-09-22 16:04 星雨，恒奋斗，过客 阅读(145) 评论(0) 推荐(0)
vue-指令
摘要：1.v-cloak 使用 v-cloak 能够解决 插值表达式闪烁的问题 [v-cloak] {display: none; } 2.v-text <h4 v-text="msg"> </h4> <!-- 默认 v-text 是没有闪烁问题的 --> v-text会覆盖元素中原本的内容，但是 插值表 阅读全文
posted @ 2019-08-31 21:18 星雨，恒奋斗，过客 阅读(311) 评论(0) 推荐(0)
VueMusic-14搜索实现
摘要：1.创建search组件 <template> <div> <div class="search-title"> <input type="text" name="" placeholder="输入搜索内容" v-model="searchContent"> <button type="button 阅读全文
posted @ 2019-08-31 20:58 星雨，恒奋斗，过客 阅读(180) 评论(0) 推荐(0)
VueMusic-13歌手列表
摘要：1.歌手列表 <template> <div class="artists"> <ul class="list"> <router-link tag="li" :to="{name:'ArtistsDetails',params:{avatar:item.avatar_s500,name:item. 阅读全文
posted @ 2019-08-31 17:59 星雨，恒奋斗，过客 阅读(212) 评论(0) 推荐(0)
VueMusic-12歌词滚动
摘要：1.方法： srcollLrc(key,index){ const lrcDiv = this.$refs.lrc if(key < this.currentTime && key > this.currentTime - (this.keyArr[index+1] - this.keyArr[in 阅读全文
posted @ 2019-08-31 17:08 星雨，恒奋斗，过客 阅读(809) 评论(0) 推荐(0)
VueMusic-11播放-歌词适配
摘要：1.歌词的创建 <template> <div> 歌词{{this.$route.params.songid}} {{getAllKey}} <p class="lrc-p" v-show="(parseInt(currentTime) >= keyArr[index]) && (parseInt( 阅读全文
posted @ 2019-08-31 16:54 星雨，恒奋斗，过客 阅读(510) 评论(0) 推荐(0)
VueMusic-10.播放-歌词加载
摘要：1.歌词新建组件 <template> <div> 歌词{{this.$route.params.songid}} <p class="lrc-p" v-for="(item,key,index) in lrcData" :key="index"> {{ item }} </p> </div></t 阅读全文
posted @ 2019-08-31 14:29 星雨，恒奋斗，过客 阅读(450) 评论(0) 推荐(0)
VueMusic-9.播放-播放功能
摘要：1.添加路由 { path:'/musicplay', name:"MusicPlay", component:MusicPlay } 2.实例 <template lang="html"> <div class="play"> <div class="header"> <div class="ti 阅读全文
posted @ 2019-08-31 13:45 星雨，恒奋斗，过客 阅读(373) 评论(0) 推荐(0)
VueMusic-8更多-下拉刷新
摘要：1.插件地址：https://github.com/bajian/vue-pull-to-refresh 2.安装：cnpm install --save pull-to-refresh 3.引入：import VuePullRefresh from "vue-pull-refresh" 4.实例 阅读全文
posted @ 2019-08-29 22:00 星雨，恒奋斗，过客 阅读(187) 评论(0) 推荐(0)
VueMusic-7更多-数据适配
摘要：1.实例：路由传参 <template> <div class="more-list"> <div class="wrapper"> <h3>{{ this.$route.params.title }}</h3> <div class="info url log" v-for="(item,inde 阅读全文
posted @ 2019-08-29 21:52 星雨，恒奋斗，过客 阅读(127) 评论(0) 推荐(0)
VueMusic-6首页-热门榜单
摘要：1.实例 <template> <div class="mod-albums"> <div class="hd log url"> <h2>{{title}}</h2> <div>更多</div> </div> <div class="container"> <div class="gallery" 阅读全文
posted @ 2019-08-29 21:10 星雨，恒奋斗，过客 阅读(205) 评论(0) 推荐(0)
VueMusic-5首页-音乐榜单
摘要：1.音乐榜单组件 <template> <div class="mod-albums"> <div class="hd log url"> <h2>新歌速递</h2> <div>更多</div> </div> <div class="container"> <div class="gallery"> 阅读全文
posted @ 2019-08-27 22:45 星雨，恒奋斗，过客 阅读(383) 评论(0) 推荐(0)
VueMusic-4首页-视图适配
摘要：1.新歌速递模块 <template> <div class="mod-albums"> <div class="hd log url"> <h2>新歌速递</h2> <div>更多</div> </div> <div class="container"> <div class="gallery"> 阅读全文
posted @ 2019-08-27 21:47 星雨，恒奋斗，过客 阅读(163) 评论(0) 推荐(0)
VueMusic-3.-今日推荐-视图适配
摘要：<template> <div class="mod-albums"> <div class="hd log url"> <h2>今日推荐</h2> <div>更多</div> </div> <div class="container"> <div class="gallery"> <div cla 阅读全文
posted @ 2019-08-27 08:28 星雨，恒奋斗，过客
VueMusic-2.今日推荐-数据获取
摘要：1.redirect:'/Home'(重定向)； 2.安装npm install --save axios 3.配置axios的 import Axios from 'axios'Vue.prototype.$axios=Axios 4.跨域处理： proxyTable:{ "/baidu_musi 阅读全文
posted @ 2019-08-25 21:46 星雨，恒奋斗，过客 阅读(184) 评论(0) 推荐(0)
VueMusic-1.首页-路由配置
摘要：1.结构配置： <template> <div class="index"> <ul> <li> <router-link to="/Home"> <img src="../assets/logo-ea5.png" alt=""></router-link> </li> <li><router-li 阅读全文
posted @ 2019-08-25 20:02 星雨，恒奋斗，过客 阅读(190) 评论(0) 推荐(0)
vuerouter-11_常用组件库
摘要：vue常用的组件库网址：https://github.com/vuejs/awesome-vue 1.v-tooltip的安装 <template> <div class="mine">Mine<button v-tooltip="'You have ' + count + ' new messag 阅读全文
posted @ 2019-08-24 23:49 星雨，恒奋斗，过客 阅读(212) 评论(0) 推荐(0)
vuerouter-10_swiper组件
摘要：<template> <div class="shopcar"> shopcar <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback"> <swiper-slide>I'm Slide 1</swiper 阅读全文
posted @ 2019-08-24 20:07 星雨，恒奋斗，过客 阅读(219) 评论(0) 推荐(0)

1 2 3 下一页