el挂载点
1.el是用来设置Vue实例挂载（管理）的元素 ；
2.Vue会管理el选项_命中的元素及其内部的后代元素_；
3. 可以使用其他的选择器,但是建议使用ID选择器；
4. 可以使用其他的双标签,不能使用_HTML和BODY_
<div id="app">
{{ message }}
</div>
var app = new Vue({
el:"#app",
data:{
message:"黑马程序员"
}
})
vue指令
v-text
- 设置标签的内容（textContent）
- 默认写法会替换全部内容
- 使用差值表达式{{}}可以替换指定内容， 内部支持写表达式
v-html
- 设置元素的innerHTML
- 内容中有HTML结构会被解析为标签， v-text指令无论内容是什么，只会解析为文本
- 解析文本使用v-text，需要解析HTML结构使用v-html
v-on
为元素绑定事件
<div id="app">
<input type="button" value="事件绑定" v-on:click="方法">
</div>
<div id="app">
<input type="button" value="事件绑定" v-on:monseenter="方法">
</div>
<div id="app">
<input type="button" value="事件绑定" v-on:dblclick="dolt">
<input type="button" value="事件绑定" @dblclick="dolt">
</div>
var app = new Vue({
//挂载的div，类名、标签名都可以，一般用ID
el: "#app",
methods:{
dolt:function(){}
}
})
加减按钮
<div id="app">
<div class="input-num">
<button @click="sub">-</button>
<span>{{num}}</span>
<button @click="add">+</button>
</div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
num:1,
},
methods:{
add:function(){
if (this.num<10){
this.num++;
}else{
alert("别点啦！最大啦！");
}
},
sub:function(){
if(this.num>0){
this.num--
}else{
alert("别点啦！最小了！")
}
}
} })
</script>
v-show
1.根据表达值的真假，切换元素的显示与隐藏。
2.原理是修改元素的display，实现显示隐藏
3.指令后面的内容，最终都会解析为布尔值
4.值为true时元素显示，为false时元素隐藏
5.数据改变之后，对应元素的显示状态会同步更新
<div id="app">
<img src="1.png" v-show="true"> <-- 图片会显示，但是显示这个状态是固定的 -->
<input type="button" value="切换显示状态" @click="changeIsShow">
<img src="1.png" v-show="isShow">
<input type="button" value="累加年龄" @click="addAge">
<img src="1.png" v-show="age>=18">
</div>
var app = new Vue({
el:"#app",
data:{
isShow:false, //为true时图片显示
age:17,
}
methods:{
changeIsShow:function(){
this.isShow = !this.isShow;
},
addAge:function(){
this.age++;
}
}
})
v-if
1.根据表达值的真假，切换元素的显示与隐藏；
2.本质是通过操纵DOM元素来切换显示状态
3.表达式的值为true，元素存在于DOM树中。为false时，从DOM树中移除
4.频繁的切换v-show，反之使用v-if，前者的切换消耗小
<div id="app">
<input type="button" value="切换" @click="toggIsShow">
<p v-if="isShow">黑马</p>
<p v-show="isShow">v-show修饰</p>
<h2 v-if="temperature>=35">热死啦</h2>
</div>
var app = new Vue({
el:"#app",
data:{
isShow:false,
temperature:20,
},
methods:{
toggIsShow:function(){
this.isShow = !this.isShow;
}
}
})
v-show：操作的是样式（display），如果需要频繁切换状态用v-show；
v-if：操作的是DOM（隐藏时直接把此元素删除），如果频繁切换就需要频繁操作DOM，影响性能。
v-bind
1.为元素绑定属性（比如：src,title,class）
2.完整写法是v-bind:属性名，简写为 :属性名
3.需要动态增删class建议使用对象的方式
<style>
.active{border:1px solid red;}
</style>
<div id="app">
<img :src="imgSrc">
<img :title="imgTitle+'!!!'">
<img :class="isActive?'active':''" @click="toggleActive"> <-- isActive为true时，则class为active，反之为空 -->
<img :src="{active:isActive}" @click="toggleActive"> <-- active是否生效，取决于isActive的值 -->
</div>
var app = new Vue({
el:"#app",
data:{
imgSrc:"1.png",
imgTitle:"黑马",
isActive:false
},
methods:{
toggleActive:function(){
this.isActive = !this.isActive;
}
}
})
图片切换
列表数据使用数组保存；v-bind指令可以设置元素属性，比如src；v-show和v-if都可以切换元素的显示状态，频繁切换用v-show。
1.图片数组：imgArr[]，
2.添加图片索引：index
3.v-bind：绑定SRC属性
4.v-on：图片切换逻辑
5.v-show：显示状态切换
<div id="#app">
<img :src="imgArr[index]">
<-- 第一张图片时隐藏左箭头 -->
<a href="#" @click="prev" v-show="index!=0">上一张</a>
<-- 最后一张图片时隐藏右箭头 -->
<a href="#" @click="click" v-show="index<imgArr.length-1">下一张</a>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
imgArr:[
"images/1.png",
"images/2.png",
"images/3.png",
"images/4.png",
],
index:0,
},
methods:{
//左箭头
prev:function(){
this.index--;
},
//右箭头
next:function(){
this.index++;
},
},
})
</script>
v-for
根据数据生成列表结构
<div id="app">
<ul>
<--
arr是要循环的数据，在data里面。in是关键字，不能修改；
item、index是遍历的每一项，可以改名字，需符合命名规则；
v-for会把他母板的内容根据数据的个数拷贝若干份，也包括母板里面的所有内容
-->
<li v-for="(item,index) in arr" :title="item">
{{index}}{{item}}
</li>
<li v-for="(item,index) in objArr">
{{item.name}}
</li>
</ul>
</div>
var app = new Vue({
el:"app",
data:{
arr:[1,2,3,4,5],
objArr:[
{name:"jack"},
{name:"rose"}
]
}
})
v-for实例
<div id="app">
<ul>
<li v-for="(it,index) in arr">
{{}index+1}黑马程序员校区：{{it}}
</li>
</ul>
</div>
<div id="app">
<h2 v-for="item in vegetables" v-bind="item.name">
{{item.name}}
</h2>
<input type="button" value="添加数据" @click="add">
<input type="button" value="删除数据" @click="remove">
</div>
<script>
var app = new Vue({
el:"#app",
data:{
arr:["北京","上海","广州","深圳"],
vegetables:[
{name:"西蓝花炒蛋"},
{name:"炒蛋西蓝花"},
]
},
methods:{
add:function(){
this.vegetables.push({name:"花菜炒蛋"});
},
remove:function(){
this.vegetables.shift();//shift删除最左边的一个
}
}
})
</script>
本地应用v-on补充
传递自定义参数，事件修饰符
<div id="app">
<input type="button" @click="doIt(p1,p2)" /> //传递参数
<input type="text" @keyup.enter="sayHi" /> //事件修饰符
</div>
<script>
var app = new Vue({
el:"#app",
methods:{
doIt:function(p1,p2){},
sayHi:function(){}
}
})
</script>
v-model
获取和设置表单元素的值（双向数据绑定），更改两边任何一边的值，它们的值都会同步更新。
<div id="app">
<input type="button" value="修改message" />
<input type="text" v-model="message" @keyup.enter="getM" /> <h2>{{message}}</h2>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"黑马程序员",
},
methods:{
getM:function(){
alert(this.message);
},
setM:function(){
this.message="酷丁鱼"
}
}
})
</script>
小黑记事本
新增
删除
点击删除指定内容 (v-on splice 索引)
1、数据改变,和数据绑定的元素同步改变
2、 事件的自定义参数
3、splice方法的作用
统计
统计信息个数 (v-text length)
1、基于数据的开发方式
2、v-text指令的作用
清空
点击清除所有信息（v-on 清空数组）
1、基于数据的开发方式
隐藏
没有数据时，隐藏元素（v-show v-if 数组非空----arr.length != 0）
记事本功能重点总结
<!-- 主体区域 -->
<section id="todoapp">
<!-- 输入框 -->
<header class="header">
<h1>小黑记事本</h1>
<input
v-model="inputValue"
@keyup.enter="add"
autofocus="autofocus"
autocomplete="off"
placeholder="请输入任务"
class="new-todo"
/>
</header>
<!-- 列表区域 -->
<section class="main">
<ul class="todo-list">
<li class="todo" v-for="(item,index) in list">
<div class="view">
<span class="index">{{ index+1 }}.</span> <label>{{ item }}</label>
<button class="destroy" @click="remove(index)"></button>
</div>
</li>
</ul>
</section>
<!-- 统计和清空 -->
<footer class="footer" v-show="list.length!=0">
<span class="todo-count" v-if="list.length!=0">
<strong>{{ list.length }}</strong> items left
</span>
<button v-show="list.length!=0" class="clear-completed" @click="clear">
Clear
</button>
</footer>
</section>
<script>
var app = new Vue({
el: "#todoapp",
data: {
list: ["写代码", "吃饭饭", "睡觉觉"],
inputValue: "好好学习,天天向上",
},
methods: {
add: function () {
this.list.push(this.inputValue);
},
remove: function (index) {
console.log("删除");
console.log(index);
this.list.splice(index, 1);
},
clear: function () {
this.list = [];
},
},
});
</script>
网络应用
vue结合网络数据开发应用
axios：网络请求库；
封装了的Ajax，功能单一只发送请求，体积小，能更好的和各种库进行结合开发。
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
get请求
key是接口文档提供的key，value是具体要传输的值。
axios.get(地址?key=value&key2=values).then(function(response){ },function(err){})
post请求
axios.post(地址,{key:value,key2:value2}).then(function(response){},function(err){})
获取随机笑话/注册用户
<input type="button" value="get请求" class="get" />
<input type="button" value="post请求" class="post" />
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
/*
接口1：随机笑话
请求地址：https://autumnfish.cn/api/joke/list
请求方法：get
请求参数：num（笑话条数，数字）
响应内容：随机笑话
*/
document.querySelector(".get").onclick = function () {
axios.get("https://autumnfish.cn/api/joke/list?num=3").then(
function (response) {
console.log(response);
},
function (err) {
comsole.log(err);
}
);
};
/*
接口2：用户注册
请求地址：https://autumnfish.cn/api/user/reg
请求方法：post
请求参数：useername（用户名，字符串）
响应内容：注册成功或失败
*/
document.querySelector(".post").onclick = function () {
axios
.post("https://autumnfish.cn/api/user/reg", {
username: "张三",
})
.then(
function (response) {
console.log(response);
},
function (err) {
comsole.log(err);
}
);
};
</script>
1、then方法中的第一个函数返回成功的数据，第二个返回失败时的数据。
2、function(err)中的err就是形参
axios+vue：axios如何结合vue一起开发网络应用
网络应用的核心：data中定义的数据一部分是通过网络获取到的。
axios+vue获取数据
<div id="app">
<input type="button" value="获取笑话" @click="getJoke" />
<p>{{ joke }}</p>
</div>
<!-- 导入的先后顺序无所谓，只要在执行代码的前面就行 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
/*
接口1：随机笑话
请求地址：https://autumnfish.cn/api/joke/list
请求方法：get
请求参数：num（笑话条数，数字）
响应内容：随机笑话
*/
var app = new Vue({
el: "#app",
data: {
joke: "笑话",
},
methods: {
// 定义一个方法getJoke获取笑话
getJoke: function () {
/*
this会因为从网络获取数据后改变，
所以在这里用一个that把this存起来。
*/
var that = this;
axios
.get("https://autumnfish.cn/api/joke/list")
// 这里的response是后台获取到的所有响应数据
.then(
function (response) {
//需要的只是data的内容
console.log(response.data);
//that.joke是上面保存的当前this，在这里用获取的数据赋值
that.joke = response.data;
},
function (err) {
console.log(err);
}
);
},
},
});
</script>
天知道实例
回车查询
1、按下回车（v-on .enter）
2、查询数据（axios 接口 v-model）
3、渲染数据（v-for 数组 that）
点击查询
1、点击城市（v-on 自定义参数）
2、查询数据（this.()方法）
3、渲染数据
<div class="wrap" id="app">
<div class="search_form">
<div class="logo"><img src="img/logo.png" alt="logo" /></div>
<div class="form_group">
<input
type="text"
@keyup.enter="searchWeather"
v-model="city"
class="input_txt"
placeholder="请输入查询的天气"
/>
<button class="input_sub">搜 索</button>
</div>
<div class="hotkey">
<a href="javascript:;" @click="changeCity('北京')">北京</a>
<a href="javascript:;" @click="changeCity('上海')">上海</a>
<a href="javascript:;" @click="changeCity('广州')">广州</a>
<a href="javascript:;" @click="changeCity('深圳')">深圳</a>
</div>
</div>
<ul class="weather_list">
<li v-for="item in weatherList">
<!-- item.type 中的type是接口中的，返回天气是啥，例如 晴 -->
<div class="info_type"><span class="iconfont">{{ item.type }}</span></div>
<div class="info_temp">
<b>{{ item.low }}</b>
~
<b>{{ item.high }}</b>
</div>
<div class="info_date"><span>{{ item.date }}</span></div>
</li>
</ul>
</div>
<script>
/*
请求地址:http://wthrcdn.etouch.cn/weather_mini
请求方法:get
请求参数:city(城市名)
响应内容:天气信息
1. 点击回车
2. 查询数据
3. 渲染数据
*/
var app = new Vue({
el: "#app",
data: {
city: '',
weatherList: [],
},
methods: {
// 一、 回车查询
searchWeather: function() {
//保存this
var that = this;
//1.点击查看方法有没有触发
console.log("回车查询天气");
//2.看看输入的城市是否被获取到了
console.log(this.city);
// city='+this.city,city的值不是固定的，所以用this.city
axios.get('http://wthrcdn.etouch.cn/weather_mini?city=' + this.city).then(function(response) {
//打印一下看能不能拿到城市的天气信息
console.log(response.data.data.forecast);
/*
在页面使用v-for数组把天气渲染出来，在data里面定义一个天气的数组
默认是一个空数组，在回调函数里面把天气信息赋值给weatherList:[]
因为是回调函数，this已经改变。在函数里面第一行保存一个this
*/
that.weatherList = response.data.data.forecast
}).
catch (function(err) {
})
},
//二、点击改变城市
changeCity: function(city) {
this.city = city;
/* 调用城市天气信息，methods中定义的方法内部，
可以通过this关键字点出其他方法 */
this.searchWeather();
},
}
})
</script>
悦听播放器
1、歌曲搜索
1.1、按下回车(v-on .enter)
1.2、查询数据(axios 接口 v-model )
1.3、渲染数据(v-for 数组 that)
2、歌曲播放
2.1、点击播放(v-on 自定义参数)
2.2、歌曲地址获取(接口 歌曲id)
2.3、歌曲地址设置(v-bind)
**歌曲id** 依赖 **歌曲搜索** 的结果，对于不用的数据也需要关注
3、歌曲封面
4、歌曲评论
5、播放动画
6、mv播放
<div class="wrap">
<!-- 播放器主体区域 -->
<div class="play_wrap" id="player">
<div class="search_bar">
<img src="images/player_title.png" alt="" />
<!-- 搜索歌曲 -->
<input
type="text"
autocomplete="off"
v-model="query"
@keyup.enter="searchMusic"
/>
</div>
<div class="center_con">
<!-- 搜索歌曲列表 -->
<div class="song_wrapper">
<ul class="song_list">
<li v-for="item in musicList">
<a href="javascript:;" @click="playMusic(item.id)"></a>
<b>{{ item.name }}</b>
<span v-if="item.mvid!=0" @click="playMV(item.mvid)"><i></i></span>
</li>
</ul>
<img src="images/line.png" class="switch_btn" alt="" />
</div>
<!-- 歌曲信息容器 -->
<div class="player_con" :class="{playing:isPlaying}">
<img src="images/player_bar.png" class="play_bar" />
<!-- 黑胶碟片 -->
<img src="images/disc.png" class="disc autoRotate" />
<img :src="musicCover" class="cover autoRotate" />
</div>
<!-- 评论容器 -->
<div class="comment_wrapper">
<h5 class="title">热门留言</h5>
<div class="comment_list">
<dl v-for="item in hotComments">
<dt><img :src="item.user.avatarUrl" alt="" /></dt>
<dd class="name">{{ item.nickname}}</dd>
<dd class="detail">{{ item.content }}</dd>
</dl>
</div>
<img src="images/line.png" class="right_line" />
</div>
</div>
<div class="audio_con">
<audio
ref="audio"
@play="play"
@pause="pause"
:src="musicUrl"
controls
autoplay
loop
class="myaudio"
></audio>
</div>
<div class="video_con" v-show="isShow" style="display: none">
<video :src="mvUrl" controls="controls"></video>
<div class="mask" @click="hide"></div>
</div>
</div>
</div>
<script>
/*
1:歌曲搜索接口
请求地址:https://autumnfish.cn/search
请求方法:get
请求参数:keywords(查询关键字)
响应内容:歌曲搜索结果
2:歌曲url获取接口
请求地址:https://autumnfish.cn/song/url
请求方法:get
请求参数:id(歌曲id)
响应内容:歌曲url地址
3.歌曲详情获取
请求地址:https://autumnfish.cn/song/detail
请求方法:get
请求参数:ids(歌曲id)
响应内容:歌曲详情(包括封面信息)
4.热门评论获取
请求地址:https://autumnfish.cn/comment/hot?type=0
请求方法:get
请求参数:id(歌曲id,地址中的type固定为0)
响应内容:歌曲的热门评论
5.mv地址获取
请求地址:https://autumnfish.cn/mv/url
请求方法:get
请求参数:id(mvid,为0表示没有mv)
响应内容:mv的地址
*/
var app = new Vue({
el: "#player",
data: {
// 查询的信息
query: "",
// 信息以列表的方式渲染，添加一个数组
musicList: [],
// 歌曲地址
musicUrl: "",
// 歌曲封面
musicCover: "",
// 歌曲评论
hotComments: [],
// 动画播放状态
isPlaying: false,
// 遮罩层的显示状态
isShow: false,
// mv地址
mvUrl: ""
},
methods: {
/* 1、歌曲搜索：按下回车（@keyup.enter）、
查询数据(axios接口，v-model)、渲染数据（v-for 数组 保存this为that） */
searchMusic: function() {
var that = this;
axios.get("https://autumnfish.cn/search?keywords=" + this.query).then(function(response) {
console.log(response);
that.musicList = response.data.result.songs;
}, function(err) {
console.log(err)
})
},
/* 2、歌曲播放 */
playMusic: function(musicId) {
var that = this;
//console.log(musicId);
axios.get("https://autumnfish.cn/song/url?id=" + musicId).then(function(response) {
console.log(response.data.data[0].url);
that.musicUrl = response.data.data[0].url;
}, function(err) {
console.log(err);
}); /* 3、歌曲封面、详情获取 */
axios.get("https://autumnfish.cn/song/detail?ids=" + musicId).then(function(response) {
console.log(response.data.songs[0].picUrl);
that.musicCover = response.data.songs[0].picUrl;
}, function(err) {
console.log(err)
}); /* 4、歌曲评论 */
axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + musicId).then(function(response) {
console.log(response.data.hotComments);
that.hotComments = response.data.hotComments;
}, function(err) {
console.log(err)
}); /* 6、MV播放 */
axios.get().then(function(response) {
}, function(err) {
})
},
/* 5、播放动画 */
play: function() {
this.isPlaying = true
},
pause: function() {
this.isPlaying = false
},
// 播放mv
playMV: function(mvid) {
var that = this;
axios.get("https://autumnfish.cn/mv/url?id=" + mvid).then(
function(response) {
// console.log(response);
console.log(response.data.data.url);
that.isShow = true;
that.mvUrl = response.data.data.url;
}, function(err) {});
},
// 隐藏
hide: function() {
this.isShow = false;
}
}
})
</script>
searchMusic写掉一个r
