vue应用示例
1 . 实现轮播图
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app">
<img :src="data:images[currentIndex].imgSrc" alt="" @click='imgHandler'>
<br>
<button @click='prevHandler'>上一张</button>
<button @click='nextHandler'>下一张</button> </div>
<script src="./vue.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
let vm = new Vue({
el: '#app',
data() {
return {
images: [
{id: 1, imgSrc: './images/1.jpg'},
{id: 2, imgSrc: './images/2.jpg'},
{id: 3, imgSrc: './images/3.jpg'},
{id: 4, imgSrc: './images/4.png'} ],
currentIndex: 0
}
},
methods: {
nextHandler(e) {
this.currentIndex++;
//更改图片地址
if (this.currentIndex == 4) {
this.currentIndex = 0;
}
},
prevHandler(e) { },
imgHandler(e) {
console.log(e.target);
console.log(this);
}
},
//组件创建完成， ajax vue的钩子函数
created() {
//this指向问题 能用箭头函数 不要用匿名函数
setInterval(() => {
console.log(this);
this.currentIndex++;
if (this.currentIndex == 4) { // 当索引为4的时候,让索引变成1,这样可以循环
this.currentIndex = 0;
}
}, 2000); }
})
</script>
</body>
</html>
代码
效果 :
2 . vue 中使用ajax( created 是组件创建完成时执行)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
span.active{
color:red;
}
</style> </head>
<body>
<div id="app">
<div>
<span @click = 'handlerClick(index,category.id)' v-for = '(category,index) in categoryList' :key = 'category.id' :class = '{active:currentIndex==index}'>
{{category.name}}
</span> <ul>
<li></li>
</ul>
</div>
</div>
<script src="./vue.js"></script>
<!--axios-->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
let vm = new Vue({
el: '#app',
data() {
return {
categoryList:[],
currentIndex:0
}
},
methods: {
handlerClick(i,id){
this.currentIndex = i;
//发起请求
$.ajax({
url:`https://www.luffycity.com/api/v1/courses/?sub_category=${id}`,
type:'get',
success:(data) => {
var data = data.data;
console.log(data);
}
})
}
},
//组件创建完成， ajax vue的钩子函数
created() {
//this指向问题 能用箭头函数 不要用匿名函数 $.ajax({
url:"https://www.luffycity.com/api/v1/course_sub/category/list/",
type:"get",
success: (data) => {
console.log(data);
if (data.error_no === 0){
var data = data.data;
let obj = {
id:0,
name:'全部',
category:0
}
this.categoryList = data;
this.categoryList.unshift(obj) }
},
error:function (err) {
console.log(err);
}
}) }
})
</script>
</body>
</html>
3 . 实现音乐播放器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
ul li.active{
background-color: darkcyan;
}
</style>
</head>
<body>
<div id="music">
<!--@ended 播放完成 会自动调用该方法-->
<!--<audio :src="musicData[currentIndex].songSrc" controls autoplay @ended = 'nextHanlder'></audio>-->
<ul>
<li @click = 'songHandler(index)' v-for = '(item,index) in musicData' :key="item.id" :class = '{active:index===currentIndex}'>
<h2>歌手：{{ item.author }}</h2>
<p>歌名：{{ item.name }}</p>
</li>
</ul>
</div>
<script src="./vue.js"></script>
<script>
var musicData = [{
id: 1,
name: '于荣光 - 少林英雄',
author: '于荣光',
songSrc: './static/于荣光 - 少林英雄.mp3'
},
{
id: 2,
name: 'Joel Adams - Please Dont Go',
author: 'Joel Adams',
songSrc: './static/Joel Adams - Please Dont Go.mp3'
},
{
id: 3,
name: 'MKJ - Time',
author: 'MKJ',
songSrc: './static/MKJ - Time.mp3'
},
{
id: 4,
name: 'Russ - Psycho (Pt. 2)',
author: 'Russ',
songSrc: './static/Russ - Psycho (Pt. 2).mp3'
}
]; new Vue({
el: '#music',
data() {
return {
musicData:[],
currentIndex:0
} },
methods:{
songHandler(i){
this.currentIndex = i;
},
// nextHanlder(){
// this.currentIndex++;
// }
}, created(){
this.musicData = musicData
}
})
</script>
</body>
</html>
代码
vue应用示例的更多相关文章
- Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例，vue基础语法
一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...
- Vue（1）- es6的语法、vue的基本语法、vue应用示例，vue基础语法
一.es6的语法 1.let与var的区别 ES6 新增了let命令,用来声明变量.它的用法类似于var(ES5),但是所声明的变量,只在let命令所在的代码块内有效.如下代码: { let a = ...
- python 之CORS,VUE+rest_framework示例
一.跨域 浏览器的同源策略 ----对ajax请求进行阻拦 ----对href属性读不阻拦 xhr=new XML ...
- Vue.js示例：GitHub提交（watch数据，created钩子，filters过滤）； 网格组件(功能：1.检索，2排序)；
GitHub提交 codePen: https://codepen.io/chentianwei411/pen/wEVPZo 注意:频繁看案例,可能会被限制. 重点: 表单输入绑定, 单选按钮的使 ...
- Django rest framework + Vue简单示例
构建vue项目参考这篇文章https://segmentfault.com/a/1190000008049815 一.创建Vue项目 修改源:npm config set registry https ...
- VUE购物车示例
代码下载地址:https://github.com/MengFangui/VueShoppingCart 1.index.html <!DOCTYPE html> <html lan ...
- webAPP如何实现移动端拍照上传（Vue组件示例）？
摘要:使用HTML5编写移动Web应用,主要是为了尝试一下“一套代码多处运行”,一个webapp几乎可以不加修改的运行在PC/Android/iOS等上面运行.但是写到现在觉得虽然这种方式弊大于利,不 ...
- Vue+restfulframework示例
一.简单回顾vue 前不久我们已经了解了vue前端框架,所以现在强调几点: 修改源: npm config set registry https://registry.npm.taobao.org 创 ...
- Vue.js示例：树型视图； 模式组件；
树型图 本示例是一个简单的树形视图实现,它展现了组件的递归使用. mycode pen:https://codepen.io/chentianwei411/pen/KGKQxE 重点:递归是如何形成的 ...
- vue指令示例合集
vue所有指令练习合集.这是个html文件,用chrome打开可查看结果. <!DOCTYPE html> <html lang="en" xmlns:v-on= ...
随机推荐
- 在dedecms后台发表文章显示外部连接栏目
问题描述:客户的网站,有个顶级栏目,下面包含了几个子栏目,这个顶级栏目不想发布什么内容,点击后进入他的某个子栏目就可以了,这时候把这个顶级栏目设置为“外部连接”就可以了 但是设置顶级栏目为外部连接后, ...
- Flutter开发记录part2
(1)文本超出折叠:child: Text('跑马灯dddd的范德萨范德萨放多少范德萨范德萨范德萨范德萨范德萨发',maxLines: 1,overflow: TextOverflow.ellipsi ...
- C 递归 递归指的是在函数的定义中
C 递归 递归指的是在函数的定义中使用函数自身的方法. 举个例子:从前有座山,山里有座庙,庙里有个老和尚,正在给小和尚讲故事呢!故事是什么呢?"从前有座山,山里有座庙,庙里有个老和尚,正在给 ...
- VirtualBox 笔记
VirtualBox 笔记p=111" target="_blank"> http://www.youi5.com/?p=111 VirtualBox 虚拟机,由I ...
- 【Python】分析文本split()
分析单个文本 split()方法,是以空格为分隔符将字符串拆分成多个部分,并将这些部分存储到一个列表中 title = 'My name is oliver!' list = title.split( ...
- eclipse svn插件 删除原账号信息重新登录
1.通过删除SVN客户端的账号配置文件 1)查看你的Eclipse中使用的是什么SVN Interface(中文:svn接口)windows > preference > Team ...
- rtmp 错误 Server error: call to function _checkbw failed
客户端使用rtmp协议与rtmp服务通信如遇到 Server error: call to function _checkbw failed错误 需要在服务端修改代码.如服务端使用的是CrtmpSer ...
- SW线路中串联1K电阻的作用
主要作用的去ESD,去干扰 和ADC上串的一样一样的作用 物美价廉的ESD方案 我还是觉得起到控制开关打开的快慢,也就是控制开关脉冲的上升沿,加了这个1K电阻,可以减缓上升延的斜率.如果上升沿过快,会 ...
- PowerDesigner将PDM导出生成WORD文档(转）
今天的温习老知识,是如何将一个PD设计的PDM来导出WORD文档,这是一个非常实用的功能,可以在软件过程的数据库设计文档编写中节省N多时间, 那不废话了,我们就开始今天的讲解吧! 第一步,点击Repo ...
- jquery瀑布流布局插件,兼容ie6不支持下拉加载,用于制作分类卡
调用方法 $('需要布局的块').sault() 如果要在图片加载后调用需要使用$(window).load(function(fx){});函数,即等待图片加载完成再调用 3个参数 1.left:左 ...