文章目录
六、class 和 style绑定
6.1 class 绑定
<!DOCTYPE html>
<html>
<head>
<meta content="utf-8">
<title></title>
<script type="text/javascript" src="js/vue.js"></script>
<style type="text/css">
.mystyle1{
width: 200px;
height: 100px;
background: orange;
}
.my-style2{
border-radius: 10px;
}
.mystyle3{
width: 200px;
height: 100px;
background: black;
}
</style>
</head>
<body>
<div id="container">
<!-- 如果b1为true 就用mystle1 -->
<div :class="{'mystyle1':b1,'my-style2':b2}"></div>
<!-- 为class属性加载多个样式名 -->
<div :class="[chooseStyle2,chooseStyle3]"></div>
<div :class="['my-style2','mystyle3']"></div>
<div class="my-style2 mystyle3"></div>
<!-- 三目运算 -->
<!-- 如果在三目运算中使用使用样式名要加单引号 -->
<div :class="[b2? chooseStyle1:chooseStyle3]"></div>
<div :class="[b2? 'mystyle1' : 'mystyle3']"></div>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#container",
data:{
b1:true,
b2:false,
chooseStyle1:"mystyle1",
chooseStyle2:"my-style2",
chooseStyle3:"mystyle3"
}
});
</script>
</body>
</html>
6.2 style绑定
<!-- 使用v-bind绑定内联样式的时候
1.使用{}定义style样式才能获取data中的值。{}要遵循JSON格式
2.{}中不使用style样式属性名”font-size“ 而要使用js对应的属性名fontSize
3.border-style-width ---- borderStyleWidth -->
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
------------
data: {
activeColor: 'red',
fontSize: 30
}
直接绑定到一个样式对象通常更好，这会让模板更清晰：
<div v-bind:style="styleObject"></div>
--------------------
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：
<div v-bind:style="[baseStyles, overridingStyles]"></div>
七、条件与列表的渲染
7.1条件渲染
7.1.1 v-if 和 v-else
<!DOCTYPE html>
<html>
<head>
<meta content="utf-8"/>
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="container">
<h3 v-if="code=='hei'">你好</h3>
aa
<h3 v-else>世杰</h3>
<!-- if 和 else中间加文本没问题 但是不能加 标签 -->
<h3 v-if="code='hei'">你好啊</h3>
<h3 v-else>世杰</h3>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#container",
data:{
a:true,
code:"hei"
},
});
</script>
</body>
</html>
7.1.2 v-else-if
<h3 v-if="fenshu==100">厉害</h3>
<h3 v-else-if="fenshu>=80">优秀</h3>
<h3 v-else-if="fenshu>=60">可以</h3>
<h3 v-else>寄</h3>
-----------------------
data:{
fenshu:80
}
7.1.3 v-show
从功能上将v-show 和 v-if 作用是相同的 渲染过程有区别
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
7.2 列表渲染
我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
<ul id="example-1">
<li v-for="item in items" :key="item.message">
{{ item.message }}
</li>
</ul>
----------------
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
八、事件处理
- 在使用vue进行数据渲染时，如果使用原生js事件绑定（列如onclick），如果需要获取vue实例中的数据并传参需要通过拼接完成
- vue 提供了v-on 指令用于绑定各种事件（v-on:click），简化vue取值过程，但是触发方法需要定义在vue实例的methods中
<div id="example-1">
<button v-on:click="counter += 1">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
</div>
--------------------
var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
}
})
8.1 事件处理方法
v-on:click 可以简写成@click
event表示触发当前函数的事件
event.srcElement 表示发生事件的元素
event.srcElement.dataset 表示按钮上绑定的数据集（data- 开头的属性）
<div id="example-2">
<!-- `greet` 是在下面定义的方法名 -->
<button @click="greet" ：data-snum="s.stuNum">Greet</button>
</div>
------------------------------
var example2 = new Vue({
el: '#example-2',
data: {
name: 'Vue.js',
stus:[]
},
// 在 `methods` 对象中定义方法
methods: {
greet: function (event) {
// `this` 在方法里指向当前 Vue 实例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
}
}
})
8.2 事件修饰
8.2.1 时间修饰符
- .stop 阻止事件冒泡(阻止子标签向上冒泡)
- .self 设置只有自己能触发的事件(子标签不能触发)
- .once 限定事件只触发一次
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
8.2.2 按键修饰符
为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：
.enter.tab.delete(捕获“删除”和“退格”键).esc.space.up.down.left.right
九、表单输入绑定
表单输入绑定，即双向绑定：就是能够将vue实例的data数据渲染到表单视图(input/text/select)也能够将输入视图的数据同步更新到vue实例的data中
<!DOCTYPE html>
<html>
<head>
<meta content="utf-8" />
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="container">
<!-- 文本框 -->
<input type="text" v-model="str"><br>
<!-- 密码框 -->
<input type="password" v-model="pwd"><br>
<!-- 单选按钮 -->
<input type="radio" v-model="opt1" value="A"> A 3
<input type="radio" v-model="opt1" value="B"> B 4
<input type="radio" v-model="opt1" value="C"> C 5
<input type="radio" v-model="opt1" value="D"> D 6
<br>
<!-- 多选按钮 -->
<input type="checkbox" v-model="opt2" value="唱"> 唱跳rap
<input type="checkbox" v-model="opt2" value="跳"> 跳
<input type="checkbox" v-model="opt2" value="rap"> rap
<br>
<!-- 下拉菜单 -->
<select v-model="city">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="sz">深圳</option>
</select>
<br>
<!-- 下拉菜单 可多选-->
<select v-model="cities" multiple>
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="sz">深圳</option>
</select>
<br>
<br>
<button type="button" @click="doSearch">测试</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#container",
data: {
str: "zhao",
pwd: "1234",
opt1:"",
opt2:[],
city:"",
cities:[]
},
methods: {
doSearch: function () {
// window.location.href = "https://cn.bing.com/search?q=" + vm.str;
alert(vm.cities);
}
}
});
</script>
</body>
</html>
十、vue使用案例
10.1 接口说明
| 接口名称 | |
|---|---|
| 功能描述 | 根据关键字搜索音乐 |
| 请求URL | localhost:9999/music/search |
| 请求方式 | GET|POST |
| 请求参数 | s String [必须] 搜索关键字 limit int [可选] 返回搜索结果的条数，默认为10 type int [可选] 搜索类型(1 单曲 10 歌单) 默认为1 offset int [可选] 搜索结果的偏移 |
| 返回结果 |  |
10.2部署jar文件
java -jar music.jar
10.3实现
10.3.1 音乐搜索
<div id="container">
<input type="text" placeholder="歌曲名、歌手" v-model="keyword" />
<button type="button" @click="doSearch">搜索</button>
<table class="table table-boradered table-condensed">
<tr>
<th>序号</th>
<th>歌曲ID</th>
<th>歌曲名</th>
<th>歌手</th>
<th>专辑</th>
<th>时长</th>
<th>操作</th>
</tr>
<tr v-for="song,index in songs">
<td>{{index+1}}</td>
<td>{{song.id}}</td>
<td>
{{song.name}}
</td>
<td>
<span v-for="artist in song.artists">
/{{artist.name}}
</span>
</td>
<td>{{song.album.name}}</td>
<td width="8%">{{Math.round(song.duration/1000)}} s</td>
<td width="10%">
<button type="button" class="btn btn-success btn-xs">播放</button>
</td>
</tr>
</table>
</div>
--------------------------------
var vm = new Vue({
el: "#container",
data: {
keyword: "",
songs: [],
},
methods: {
doSearch: function () {
console.log(vm.keyword);
// $.get("http://localhost:9999/music/search"+{s:vm.keyword,limit:15,offset:0},function (res) {
$.get("http://localhost:9999/music/search?s=" + vm.keyword, function (res) {
console.log(res);
if (res.code == 200) {
//获取此关键词搜索的总记录数
var count = res.result.songCount;
//获取音乐合集
var arr = res.result.songs;
vm.songs = arr;
}
}, "json");
}
}
10.4音乐播放
-
定义音乐播放器在vue容器之外
<audio controls style="width:100%" src="" id="player"></audio> -
给播放按钮添加 doPlay
<!DOCTYPE html> <html> <head> <meta content="utf-8"> <title></title> <link rel="stylesheet" href="css/bootstrap.min.css"> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript" src="js/jquery-1.9.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> </head> <body> <div id="container"> <input type="text" placeholder="歌曲名、歌手" v-model="keyword" /> <button type="button" @click="doSearch">搜索</button> <table class="table table-boradered table-condensed"> <tr> <th>序号</th> <th>歌曲ID</th> <th>歌曲名</th> <th>歌手</th> <th>专辑</th> <th>时长</th> <th>操作</th> </tr> <tr v-for="song,index in songs"> <td>{{index+1}}</td> <td>{{song.id}}</td> <td> {{song.name}} </td> <td> <span v-for="artist in song.artists"> /{{artist.name}} </span> </td> <td>{{song.album.name}}</td> <td width="8%">{{Math.round(song.duration/1000)}} s</td> <td width="10%"> <button type="button" class="btn btn-success btn-xs" @click="doPlay" :data-mid="song.id">播放</button> <button type="button" v-if="song.mvid!=0" class="btn btn-primary btn-xs">播放MV</button> </td> </tr> </table> </div> <audio controls style="width:100%" src="" id="player"></audio> <script type="text/javascript"> var player = document.getElementById("player"); var vm = new Vue({ el: "#container", data: { keyword: "", songs: [], currentid: 0 }, methods: { doSearch: function () { console.log(vm.keyword); // $.get("http://localhost:9999/music/search"+{s:vm.keyword,limit:15,offset:0},function (res) { $.get("http://localhost:9999/music/search?s=" + vm.keyword, function (res) { console.log(res); if (res.code == 200) { //获取此关键词搜索的总记录数 var count = res.result.songCount; //获取音乐合集 var arr = res.result.songs; vm.songs = arr; } }, "json"); }, doPlay: function (event) { vm.currentid = event.srcElement.dataset.mid; player.src= "http://music.163.com/song/media/outer/url?id=" + this.currentid; player.play(); } } }); </script> </body> </html> -
优化
<button type="button" v-if="song.id==currentid&& status==1" class="btn btn-warning btn-xs" @click="doPause" :data-mid="song.id">暂停</button> <button type="button"v-else-if="song.id==currentid&& status==0" class="btn btn-danger btn-xs" @click="doContiune" :data-mid="song.id">继续播放</button> <button v-else type="button" class="btn btn-success btn-xs" @click="doPlay" :data-mid="song.id">播放</button> <button type="button" v-if="song.mvid!=0" class="btn btn-primary btn-xs">播放MV</button> ------------------------- doPlay: function (event) { vm.currentid = event.srcElement.dataset.mid; player.src= "http://music.163.com/song/media/outer/url?id=" + this.currentid; player.play(); vm.status=1; }, doPause: function(){ player.pause(); vm.status=0; }, doContiune:function(){ player.play(); vm.status=1; }
404
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
