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= ...
随机推荐
- cordova 中de.sitewaerts.cordova.documentviewer 插件 看pdf图片缩略图与实际图片不一致
//if (document == nil) // Unarchive failed so create a new ReaderDocument object //{ document = [[Re ...
- Solr Cloud的搭建使用
Solr的安装下载http://archive.apache.org/dist/lucene/solr/6.4.0/或者直接去官网下载最新版本网页指导 https://cwiki.apache.org ...
- Arduino MEGA 2560找不到驱动怎么办
刚买了Arduino MEGA 2560(比Arduino UNO稍微高级一点的板子),按照视频一步一步操作(似乎插板子也不太一样,不管他,能插上去就完事了),但是到了代码烧录的时候,点击Tools- ...
- [集合]解决system权限3389无法添加的用户情况
Webshell有了SYSTEM权限,却无法成功添加administrators用户,因此导致无法成功连接3389.总结原因有以下几点:I.杀软篇1,360杀毒软件2,麦咖啡杀毒软件3,卡巴斯基杀毒软 ...
- 135 - ZOJ Monthly, August 2014
135 - ZOJ Monthly, August 2014 A:构造问题,推断序列奇偶性.非常easy发现最小值不是1就是0.最大值不是n就是n - 1,注意细节去构造就可以 E:dp.dp[i][ ...
- 手机话费充值和手机流量充值 API
最近正好需要用到手机充值和流量充值接口,网上找到的,记录并分享下. 聚合数据上面有手机充值的接口,也有流量充值的接口:注册以后可以使用它的OpenId和AppKey. 手机话费充值的接口:https: ...
- 【Python数据分析】IPython基础
一.配置启动IPython 打开cmd窗口,在dos界面下输入ipython,结果报错了!!! 出现这个问题是由于环境变量未配置(前提:已经安装了ipython),那么接下来配置环境变量 我的电脑→右 ...
- IOS 网络解析
网络解析同步异步 /*------------------------get同步-------------------------------------*/ - (IBAction)GET_TB:( ...
- Android学习笔记(24):进度条组件ProgressBar及其子类
ProgressBar作为进度条组件使用,它还派生了SeekBar(拖动条)和RatingBar(星级评分条). ProgressBar支持的XML属性: Attribute Name Related ...
- nginx for windows 配置多域名反向代理
调试了很久...哦耶 共享出来吧 其实 nginx反向代理同一ip多个域名,给header加上host就可以了 upstream test.test.cn { server 119. ...