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= ...
随机推荐
- 【spring boot】7.静态资源和拦截器处理 以及继承WebMvcConfigurerAdapter类进行更多自定义配置
开头是鸡蛋,后面全靠编!!! ======================================================== 1.默认静态资源映射路径以及优先顺序 Spring B ...
- 模拟登陆web微信的流程和参数细节
这几天在用python写了一个模拟登陆web微信,发送和接受信息的程序.发现步骤不多,但需要的参数太多了 整个过程中,务必保证session.headers.cookie一致,不然的话,中间会出现登陆 ...
- PHP设置头部编码为UTF-8语句
header("Content-type: text/html; charset=utf-8");
- mysql数据库查看各实例磁盘占用情况
1.总体查看: use information_schema; select TABLE_SCHEMA, concat(truncate(sum(data_length)/1024/1024,2),' ...
- zabbix学习系列之触发器
触发器的简介 监控项仅负责收集数据,而通常收集数据的目的还包括在某指标对应的数据超出合理范围时给相关人员发送告警信息,"触发器"正式 用于为监控项所收集的数据定义阈值 每一个触发器 ...
- mysql left join中on后加条件判断和where中加条件的区别
left join中关于where和on条件的几个知识点: .多表left join是会生成一张临时表,并返回给用户 .where条件是针对最后生成的这张临时表进行过滤,过滤掉不符合where条件的记 ...
- 分享个免费的货币汇率API
先上API文档链接:https://www.juhe.cn/docs/api/id/23,支持人民币牌价.外汇汇率查询:数据仅供参考,交易时以银行柜台成交价为准. 人民币牌价 接口地址:http:// ...
- link标签的rel属性
<link>标签定义了当前文档与 Web 集合中其他文档的关系.link 元素是一个空元素,它仅包含属性.此元素只能存在于 head 部分,不过它可出现任何次数.在 HTML 中,< ...
- 利用php调用so库文件中的代码
某个功能被编译到so文件中,那么如何通过php来调用它?一个方法是写一个php模块(php extension),在php中调用该模块内的函数,再通过该模块来调用so中的函数.下面做一个简单的例子,使 ...
- 使用Nginx的proxy_cache缓存功能取代Squid
Nginx从0.7.48版本开始,支持了类似Squid的缓存功能.这个缓存是把URL及相关组合当作Key,用md5编码哈希后保存在硬盘上,所以它可以支持任意URL链接,同时也支持404/301/302 ...