02 Vue介绍与安装，指令系统 v-*、音乐播放器
VUE文档 https://cn.vuejs.org/v2/guide/
1、vue的介绍
尤雨溪
1、vue的优点
2、vue的介绍
3、vue的安装
4、声明式渲染
<body>
<div id="app1">
<!-- 插值语法 react {} angular {{}} {%%} <% = %>
你可以任意插
-->
<h3>{{title}}</h3>
<h3>{{ 1>2?"true":"false"}}</h3>
</div>
<script src="vue.js"> </script>
<script>
// vue实例化对象
var app = new Vue({
el: "#app1",
// 所有的数据都放在数据属性中
data:{
title:"土豆"
}
})
// 不推荐
console.log(app)
console.log(app.$el)
console.log(app.$data)
console.log(app.$data.title)
</script>
</body>
2、指令系统介绍
1、v-if v-for v-on v-show
<body>
<div id="app">
<!-- v-if -->
<div v-if='show'>vue-if</div>
<div v-else>vue-else</div> <div v-if='Math.random() > 0.5'>Now you see </div>
<div v-else>You dont</div> <!-- v-for -->
<div v-for="todo in todolist">{{todo.text}}</div> <!-- v-show -->
<h3 v-show='isShow'>this is 三级标题</h3> <!-- v-on -->
<button v-on:click="clickHandler">切换vue</button> </div> <script src="vue.js"></script>
<script>
// vue的实例对象 // 指令系统 v-*
var app = new Vue({
el: "#app",
data:{
show: false,
todolist:[
{text:"学习zabbix"},
{text:"学习salt"},
{text:"学习Vue"},
],
isShow:true
},
methods:{
clickHandler:function(){
alert(111)
console.log(this) //整个网页就一个实例化对象
this.show = !this.show
this.isShow = !this.isShow
}
}
}) // MVVM Model View ViewModel
// MTV Model Template View </script>
</body>
2、v-bind
<body>
<div id="app"> <!-- v-bind -->
<div title="嘿嘿">这是一个三级标题</div>
<div v-show='isShow' v-bind:title='data'>这是一个三级标题</div> <img src="" alt="">
<img v-bind:src='imgSrc' v-bind:alt="imgAlt"> <!-- 简便写法
v-bin:src :src
v-on:click @click
-->
<img :src='imgSrc' :alt="imgAlt">
</div> <script src="vue.js"></script>
<script>
// vue的实例对象 // 指令系统 v-*
var app = new Vue({
el: "#app",
data:{
isShow:true,
data:"hahah",
imgSrc:'./images/shiyun.jp',
imgAlt: `页面加载与${new Date().toLocaleString()}`
},
}) </script>
</body>
3、v-bind: class与style绑定
传个 v-bind：class 一个对象，以动态地切换class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
.box{
width:100px;
height: 100px;
background: red;
}
.box2{
width:100px;
height: 100px;
background: green;
} </style>
</head>
<body>
<div id="app">
<div class="box" v-bind:class={box2:isGreen} ></div>
<button @click='changeColor'>切换颜色</button>
</div> <script src="vue.js"></script>
<script>
// vue的实例对象 // 指令系统 v-*
var app = new Vue({
el: "#app",
data:{
isGreen:false
},
methods:{
changeColor:function(){
this.isGreen = !this.isGreen
},
} })
</script>
</body>
</html>
4、vue核心思想:数据驱动视图，双向数据绑定
<body>
<div id="app"> <!-- 核心思想概念：数据驱动视图 -->
<!-- 双向数据绑定 -->
<button v-on:click = 'count+=1'> 加 {{count}}</button>
</div> <script src="vue.js"></script>
<script>
// vue的实例对象 // 指令系统 v-*
var app = new Vue({
el: "#app",
data:{
count:0
},
methods:{ } })
</script>
</body>
声明式的指令 ：之前写的html，都是
命令式的：Vue
5、监听事件
6、应用：轮播图
版本1
<body>
<div id="app">
<!-- 列表渲染 :轮播图 --> <!-- 传统写法 -->
<div>
<img src="./images/vue.png" alt="">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div> <!-- Vue -->
<div>
<img :src="imgSrc" >
<ul>
<li v-for = "(item,i) in imgArr" @click='ChangeImgSrc(item)'>{{ i+ }}</li>
</ul>
</div>
<button @click='nextImg'>下一张</button>
</div> <script src="vue.js"></script>
<script>
// vue的实例对象 // 指令系统 v-*
var app = new Vue({
el: "#app",
data:{
imgSrc:'./images/1.png',
imgArr:[
{id:, src:'./images/1.png'},
{id:, src:'./images/2.png'},
{id:, src:'./images/3.png'},
{id:, src:'./images/4.png'}
],
currentIndex:
},
methods:{
ChangeImgSrc(item){
this.imgSrc = item.src
},
nextImg(){
if (this.currentIndex==this.imgArr.length-){
this.currentIndex=-
}
this.currentIndex ++
this.imgSrc = this.imgArr[this.currentIndex].src }
} })
</script>
</body>
版本2：添加定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title> <style type="text/css"> ul{
width:180px;
overflow: hidden;
list-style: none;
}
ul li{
float: left;
width: 30px;
height: 30px;
background: peachpuff;
margin-left: 10px;
line-height: 30px;
text-align: center;
color: black
}
</style>
</head> <body>
<div id="app">
<!-- 列表渲染 :轮播图 --> <!-- 传统写法 -->
<div>
<img src="./images/vue.png" alt="">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div> <!-- Vue -->
<div>
<img :src="imgSrc" @mouseenter="closeTimer" @mouseleave="openTimer">
<ul>
<li v-for = "(item,i) in imgArr" @click='ChangeImgSrc(item)'>{{ i+1 }}</li>
</ul>
</div>
<button @click='nextImg'>下一张</button>
</div> <script src="vue.js"></script>
<script>
// vue的实例对象 // 指令系统 v-*
var app = new Vue({
el: "#app",
data:{
imgSrc:'./images/1.png',
imgArr:[
{id:1, src:'./images/1.png'},
{id:2, src:'./images/2.png'},
{id:3, src:'./images/3.png'},
{id:4, src:'./images/4.png'}
],
currentIndex:0,
timer:null // 3.0 鼠标移到停止
},
created(){
// 生命周期方法
// 开启定时器
// 提前获取cookie和session
this.timer = setInterval(this.nextImg,2000)
console.log(1111)
},
methods:{
ChangeImgSrc(item){
this.imgSrc = item.src
},
nextImg(){
if (this.currentIndex==this.imgArr.length-1){
this.currentIndex=-1
}
this.currentIndex ++
this.imgSrc = this.imgArr[this.currentIndex].src },
closeTimer(){
clearInterval(this.timer) // 鼠标enter，停止定时器
},
openTimer(){
this.timer = setInterval(this.nextImg,2000) // 重新开启定时器
} } })
</script>
</body>
</html> 作业：
1、标号颜色
2、下一张
7、v-html：解析标签
<body>
<div id="app">
<!-- 为什么需要v-html,解析标签 -->
<div>{{str}}</div>
<div v-html="str"></div>
</div>
<script src="vue.js"></script>
<script>
// vue的实例对象
// 指令系统 v-*
var app = new Vue({
el: "#app",
data:{
str:"<p>为什么需要v-html，解析标签</p>"
},
methods:{
}
})
</script>
</body>
8、计算属性 ：getter setter
（1）getter
<body>
<!-- 计算属性 -->
<div id="computed"> <!-- 1.0 版本1 -->
<div>
{{ msg.split('').reverse().join('') }}
</div> <!-- 2.0 版本 -->
<div>
{{ recverseStr }}
</div> <!-- 3.0 修改字符串 -->
<button @click="clickHandler">修改</button>
</div> <script type="text/javascript" src="vue.js"></script>
<script>
// vue的实例对象
var com = new Vue({
el: "#computed",
data:{
msg:"Hello world"
},
computed:{
// 计算属性 watch 监听
// 默认只有getter方法 recverseStr(){
return this.msg.split('').reverse().join('')
} },
methods:{
clickHandler(){
this.msg = "Hello Luffy"
}
} })
</script>
</body>
（2） setter
<body>
<!-- 计算属性 -->
<div id="computed">
<!-- setter -->
<div>
{{ recverseStr }}
</div> <button @click="clickHandler">修改</button>
</div> <script type="text/javascript" src="vue.js"></script>
<script>
// vue的实例对象
var com = new Vue({
el: "#computed",
data:{
msg:"Hello world"
},
computed:{
// 计算属性 watch 监听
// 默认只有getter方法
// 如何添加set方法
recverseStr:{
set:function(newValue){
this.msg = newValue
},
get:function(){
return this.msg.split('').reverse().join('');
}
} },
methods:{
clickHandler(){
// this.msg = "Hello Luffy"
console.log(this.recverseStr) // GET this.recverseStr = "Talk is cheap" //SET
}
} })
</script>
</body>
9、v-model :双向绑定
（1） v-model 只适用于表单控件 form
<body>
<form id="computed">
<!-- v-model -->
<!-- 数据的双向绑定 = 单向数据绑定+UI事件监听 -->
<input type="text" v-model="msg">
<h3>{{ msg }}</h3>
</form>
<script type="text/javascript" src="vue.js"></script>
<script>
// vue的实例对象
var com = new Vue({
el: "#computed",
data:{
msg:"123",
getValue:"233"
},
})
</script>
</body>
（2）数据的双向绑定 = 单向数据绑定+UI事件监听
<body>
<form id="computed">
<!-- v-model -->
<!-- 数据的双向绑定 = 单向数据绑定+UI事件监听 -->
<!-- 等价于 -->
<input type="text" v-bind:value="getValue" @input="msgChange">
<h3>{{ getValue }}</h3>
</form>
<script type="text/javascript" src="vue.js"></script>
<script>
// vue的实例对象
var com = new Vue({
el: "#computed",
data:{
getValue:"233"
},
methods:{
msgChange(e){
console.log(e)
this.getValue = e.target.value
}
},
computed:{
getValue:{
set:function(newValue){
this.getValue = newValue
},
get:function(){
return this.getValue
}
}
}
})
</script>
</body>
（3）计算属性应用
10、vue表单
https://cn.vuejs.org/v2/guide/forms.html
<body>
<form id="computed">
<!-- v-model -->
<!-- 数据的双向绑定 = 单向数据绑定+UI事件监听 -->
<input type="text" v-model="msg">
<!-- 使用 change 事件进行同步 -->
<input type="text" v-model.lazy="msg">
<!-- 输入值转为数值类型 -->
<input type="text" v-model.number="msg">
<!-- 首尾空白字符 -->
<input type="text" v-model.trim="msg">
<h3>{{ msg }}</h3>
</form>
<script type="text/javascript" src="vue.js"></script>
<script>
// vue的实例对象
var com = new Vue({
el: "#computed",
data:{
msg:"123",
getValue:"233"
},
})
</script>
</body>
11、事件处理
https://cn.vuejs.org/v2/guide/events.html#事件修饰符
<body>
<!-- 阻止表单提交 -->
<!-- <form id="computed" > -->
<form id="computed" @submit.prevent>
<input type="text" v-model="msg">
<h3>{{ msg }}</h3>
<input type="submit" name="" value="提交">
</form>
<script type="text/javascript" src="vue.js"></script>
<script>
// vue的实例对象
var com = new Vue({
el: "#computed",
data:{
msg:"123",
getValue:"233"
},
methods:{
// ajax技术
// jquery ---> $ajax() 封装了(xmlhttpRequest)
// vue --> axios
}
})
</script>
</body>
3、音乐播放器
1、目录结构，rest css
reset css
https://meyerweb.com/eric/tools/css/reset/
2、v-for，@click：点击切换歌曲
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title> <style type="text/css">
*{
padding:0
}
ul{
list-style: none;
}
li{
border-bottom: 1px solid gray;
}
</style>
</head>
<body>
<!-- 1.0 死写法 -->
<audio src="./audios/1.mp3" autoplay="" controls=""></audio> <!-- 2.0 循环指令 -->
<div id="music"> <audio :src="currentSong" autoplay="" controls="" ></audio> <ul>
<li v-for="(item,index) in songs" @click='clickHandler(index)'>
<h3>歌名：{{ item.name }}</h3>
<p>歌手：{{ item.author }}</p>
</li>
</ul>
</div> <script type="text/javascript" src="vue.js"> </script> <script> var songs = [
{id:1, src:"./audios/1.mp3", name:"la la la", author:"Rla"},
{id:2, src:"./audios/2.mp3", name:"kkkk kkk", author:"kkaa"},
{id:3, src:"./audios/3.mp3", name:"thththt", author:"thth"},
{id:4, src:"./audios/4.mp3", name:"four four", author:"Four"}
] var musci = new Vue({
el: "#music",
data:{
songs:songs,
currentSong:"./audios/1.mp3",
currentIndex:0
},
methods:{
// 点击，切换下一首歌曲
clickHandler(index){
this.currentSong = this.songs[index].src;
}, },
computed:{ },
created(){
// 通常都用来做页面的初始化
}
})
</script> </body>
</html>
3、@ended :播放结束，切换下一首
<body>
<!-- 2.0 循环指令 -->
<div id="music"> <audio :src="currentSong" autoplay="" controls="" @ended='nextSong'></audio> <ul>
<li v-for="(item,index) in songs" @click='clickHandler(index)'>
<h3>歌名：{{ item.name }}</h3>
<p>歌手：{{ item.author }}</p>
</li>
</ul>
</div> <script type="text/javascript" src="vue.js"> </script> <script> var songs = [
{id:1, src:"./audios/1.mp3", name:"la la la", author:"Rla"},
{id:2, src:"./audios/2.mp3", name:"kkkk kkk", author:"kkaa"},
{id:3, src:"./audios/3.mp3", name:"thththt", author:"thth"},
{id:4, src:"./audios/4.mp3", name:"four four", author:"Four"}
] var musci = new Vue({
el: "#music",
data:{
songs:songs,
currentSong:"./audios/1.mp3",
currentIndex:0
},
methods:{
// 点击，切换下一首歌曲
clickHandler(index){
this.currentSong = this.songs[index].src;
}, // 音频播放完成，切换下一首 方法1
nextSong(){
alert(111)
this.currentIndex++;
this.currentSong = this.songs[this.currentIndex].src
}
},
computed:{ },
created(){
// 通常都用来做页面的初始化
}
})
</script> </body>
4、computed:实时监控，计算数据属性***
<body>
<!-- 1.0 死写法 -->
<audio src="./audios/1.mp3" autoplay="" controls=""></audio> <!-- 2.0 循环指令 -->
<div id="music"> <!-- 方法2 -->
<audio :src="currSong" autoplay="" controls="" @ended='nextSong'></audio> <ul>
<li v-for="(item,index) in songs" @click='clickHandler(index)'>
<h3>歌名：{{ item.name }}</h3>
<p>歌手：{{ item.author }}</p>
</li>
</ul>
<button @click="addOneSong">添加1首歌</button>
</div> <script type="text/javascript" src="vue.js"> </script> <script> var songs = [
{id:1, src:"./audios/1.mp3", name:"la la la", author:"Rla"},
{id:2, src:"./audios/2.mp3", name:"kkkk kkk", author:"kkaa"},
{id:3, src:"./audios/3.mp3", name:"thththt", author:"thth"},
{id:4, src:"./audios/4.mp3", name:"four four", author:"Four"}
] var musci = new Vue({
el: "#music",
data:{
songs:songs,
currentIndex:0
},
methods:{
// 点击，切换下一首歌曲
clickHandler(index){
this.currentIndex = index;
}, // 音频播放完成，切换下一首
nextSong(){
this.currentIndex++;
},
// 添加1首歌
addOneSong(){
this.songs.push({id:5, src:"./audios/5.mp3", name:"qqq", author:"qqq"})
}
},
computed:{
// 方法2 currsong 实时监听，数组 index
// 计算属性：计算数据属性，data中的数据
// 数据驱动视图 currSong(){
return this.songs[this.currentIndex].src
}
},
created(){
// 通常都用来做页面的初始化
}
})
</script> </body>
计算属性：data中的数据
网页中的实时监控
4、作业与总结
1、作业
2、总结
02 Vue介绍与安装，指令系统 v-*、音乐播放器的更多相关文章
- Ubuntu系统的安装与使用 深度音乐播放器
1.添加深度音乐播放器的ppa源并更新源缓存 sudo add-apt-repository ppa:noobslab/deepin-sc sudo apt-get update 2. 安装需要的依 ...
- 躁！DJ 风格 Java 桌面音乐播放器
本文适合有 Java 基础知识的人群,跟着本文可学习和运行 Java 版桌面 DJ 音乐播放器. 本文作者:HelloGitHub-秦人 HelloGitHub 推出的<讲解开源项目>系列 ...
- Simple2D-14（音乐播放器）简介
接下来文章中,会介绍一个简单的程序——音乐播放器.通过编写一个音乐播放器在 Simple2D 中加入两个库:音频库 bass 和界面库 ImGui. 下面是音乐播放器的预览图: 播放器的功能比较简单, ...
- vue——一个页面实现音乐播放器
请忽略下面这段文字年关将至,时间好歹又多出了些许.却不敢过度消遣.岁月未曾饶过我,我亦不想饶过岁月.且将它塞得膨胀,让这一年看似加更充实.不曾料想我一个爱些风花雪月.研墨行歌之人,却做起了碼农这一行当 ...
- 【Linux_Fedora_应用系列】_1_如何安装音乐播放器和mp3解码
因为安装环境的不同,Fedora在安装后会安装不同的软件包.通常在安装的时候有多种选择: 1.桌面环境: 适合个人日常使用,安装包含办公软件(Fedora 默认安装Open Office).娱乐影音软 ...
- 如何用vue打造一个移动端音乐播放器
写在前面 没错,这就是慕课网上的那个vue音乐播放器,后台是某音乐播放器的线上接口扒取,虽然这类项目写的人很多,但不得不说这还是个少有的适合vue提升的好项目,做这个项目除了想写一个比较大并且功能复杂 ...
- ubuntu12.04安装深度音乐播放器和深度影音
昨天折腾了一天,想要安装深度播放器和深度影音都未成功,老是出现依赖关系不满足这个错误.网上解决办法有非常多,可是都没能有效的解决这个问题.今天突然想起来之前换过软件源,是不是这个原因而导致了依赖关系不 ...
- 一个基于H5audio标签的vue音乐播放器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Ubuntu 14.04 用户如何安装深度音乐播放器和百度音乐插件
播放本地音乐或者收听国外的音乐电台,Ubuntu 14.04 自带的音乐播放器 Rhythmbox 完全能够满足,但是如果你想有像酷狗那样的国内播放器就需要折腾一下,还好有深度音乐播放器,这是一款完全 ...
随机推荐
- IDEA中便捷更新Git项目最新代码
更新:IDEA中直接点击Gir后面的第一个图标 会出现一个这样的弹框,点击OK,就可以将GitLab中最新的代码更新到IDEA中(本地)
- PAT B1016.部分A+B（15)
B1016.部分A+B(15) #include <cstdio> #include <cstring> int calc(long long a, long long da) ...
- X86逆向1：软件破解入门课【课件下载】
从本节课开始,我将带领小白入门学习软件破解的相关内容,大佬绕过,以后将会定期更新从最基本的破解知识点开始学习,由简单到复杂循序渐进,难度会逐步提高. 为了防止版权方面的争议,我将自行编写一些破解案例来 ...
- Codeforces 1236C. Labs
传送门 注意到 $f(X,Y)+f(Y,X)$ 是一个定值(因为每个元素都不相同) 所以如果能让 $f(X,Y)$ 与 $f(Y,X)$ 尽可能接近,那么一定是最优的 所以可以这样构造:把 $n^2$ ...
- luogu P2423 [HEOI2012]朋友圈 (最大团)
在很久很久以前,曾经有两个国家和睦相处,无忧无虑的生活着. 一年一度的评比大会开始了,作为和平的两国,一个朋友圈数量最多的永远都是最值得他人的尊敬,所以现在就是需要你求朋友圈的最大数目.两个国家看成是 ...
- c# mvc权限系统
登陆界面可以用index1,现在这个是仿照这个写的 登陆后的界面.模板都是套的,数据那个easyui自己写的 后台直接三层架构,dapper连处理数据后面加了autofac demo地址:https: ...
- python 获取当前目录下的文件目录和文件名
python 获取当前目录下的文件目录和文件名 os模块下有两个函数: os.walk() os.listdir() 1 # -*- coding: utf-8 -*- 2 3 import os ...
- mui APP 微信登录授权
一.在微信平台上申请appid.appsecret. 二.app --> manifest.json-->SDK配置(填写申请好的appid和appsecret) 三.在登录页,点击微信登 ...
- html和css制作百度界面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- go语言中获取变量类型的三种方法
package main import ( "fmt" "reflect" ) func main() { var num float64 = 3.14 // ...