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= ...
随机推荐
- Path特效之PathMeasure打造万能路径动效
前面两篇文章主要讲解了 Path 的概念和基本使用,今天我们一起利用 Path 做个比较实用的小例子: 上一篇我们使用 Path 绘制了一个小桃心,我们这一篇继续围绕着这个小桃心进行展开: ----- ...
- ThinkPHP 中M方法和D方法的具体区别
M方法和D方法的区别 ThinkPHP 中M方法和D方法都用于实例化一个模型类,M方法 用于高效实例化一个基础模型类,而 D方法 用于实例化一个用户定义模型类. 使用M方法 如果是如下情况,请考虑使用 ...
- 【Todo】Python中文及Java中文问题及解决方法总结 & 及各种字符编码问题跟踪贴
Python中文编码问题看这里吧:http://www.cnblogs.com/charlesblc/p/6159109.html Mysql中文编码问题可以看这篇:http://www.cnblog ...
- C#控件之ListView
1.添加一行 listView1.Items.Add(new ListViewItem(new string[] {str1, str2, str3 })); 2.鼠标悬停在listview某项时弹出 ...
- ANT安装及配置
首先,到http://ant.apache.org/找到合适的版本下载. 其次,讲下载的zip包解压,得到的目录拷贝到硬盘,如C:\apache-ant-1.9.4 其三,设置环境变量 ANT_HOM ...
- websocket关于禁止一个账号多窗口链接的问题
通过websocket的session.getSessionId()与oldSession.getSessionId()来equals判断是否是新窗口. 如果不同不让链接. 问题1.虽然新来的链接连不 ...
- xshell的快捷键（很有用）
删除 ctrl + d 删除光标所在位置上的字符相当于VIM里x或者dl ctrl + h 删除光标所在位置前的字符相当于VIM里hx或者dh ctrl + k 删除光标 ...
- typedef 与 define 的区别
1.区别 (1)定义.执行时间.作用域 定义.执行时间: #define pchar char * typedef char *pchar; 定义的格式差别,显而易见的,要注意,define 是不能存 ...
- java获取网页源码
获取网页的源码: package com.atguigu.crud.controller; import java.io.BufferedReader; import java.io.Buffered ...
- apt-mirror 校验错误文件处理
apt-mirror是一个用来将Debian或Ubuntu的软件源镜像到本地的工具,这个工具工作得非常好,不过有的时候由于网络问题,会有一些文件的校验是失败的,但apt-mirror并不能发现,等到最 ...