目录
Vue简介
编辑
第一个vue程序
el挂载点
data数据对象
Vue指令
v-text和v-html
v-on
v-show
v-if
v-bind
v-for
v-model
记事本案例
axios网络请求库
1、安装
2、使用，作一个音乐播放器
均来自黑马教程。
Vue简介
第一个vue程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello world-vue</title>
<!-- 引入vue.js，开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
// el:'元素选择器' 将new的Vue实例和Dom元素绑定起来，设置vue实例的挂载点
el: '#app',
data: {
message: 'hello world!'
}
})
</script>
<!--引入vue不可以放这哦-->
</body>
</html>这边要注意vue.js的引入位置，需要在用到vue之前执行，也就是要在new Vue前执行，我第一次放在后面导致vue is not defined报错。
el挂载点
语法 el:'元素选择器'
作用 将new的Vue实例和Dom元素绑定起来，设置vue实例的挂载点
作用范围 vue实例只作用于其挂载的的元素以及后代元素。
data数据对象
vue实例的挂载元素中如果有{{}}的话，会被解析并将data对象中的数据渲染进去。
会解析上面的html，一旦解析到有vue的语法，就会自动按照vue的语法将data中的数据渲染进去。
<body>
<div id="app">
<b>一名屌丝的基本信息</b><br>
在干嘛：{{message}}<br>
院校信息:{{school.name}} <br>
爱好：{{interest[1]}}
</div>
<script>
var app = new Vue({
el:"#app",
data:{
// 基本数据类型
message:"学vue第一天",
// 对象
school:{
name:"莆田学院",
address:"莆田市城厢区",
phone:"18120997089"
},
// 数组
interest:["跑步",3,"乒乓球","打游戏"]
}
})
</script>
</body>Vue指令
v-text和v-html
<body>
<!--
v-text 会将标签体的内容全部替换掉，而且只能原封不动的将data中的数据替换标签体，
若只想替换部分内容可以用vue的插值语法{{}}
v-html 也是将标签体中的内容全部替换掉，但是如果data数据中有
html内容，会先解析好后再替换标签体内容。
-->
<div id="app">
<h1 v-text="message+'!'">一段文本</h1>
<h2>{{info+"!"}}一段文本</h2>
<p v-html="content">wen</p>
<p v-text="content">wen</p>
</div>
<script>
var vue = new Vue({
el:"#app",
// 准备一些数据
data:{
message:"hello",
info:"内容",
content:"<a href='https://www.baidu.com/'>百度</a>"
}
})
</script>
</body>v-on
<body>
<!--
v-on:事件名="方法名" 指令可以给元素绑定事件，当事件触发后，会执行方法。
v-on: 可替换为@
v-on:click 单击事件
-->
<div id="app">
<input type="button" value="提交" v-on:click="method1"></input>
<p v-on:click="showTime">{{time}}</p>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
time: "点击查看时间"
},
// 定义方法
methods: {
method1: function () {
alert("你要加油!");
console.log("数据:"+this.time);
},
showTime: function () {
// this可以获取到data对象，this.数据名可以操作数据内容，从而改变dom中的内容，不用像以前操作dom元素来修改内容。
var t = new Date();
this.time = t;
}
}
})
</script>
</body>v-on的补充
<body>
<!--
v-on:事件名='方法名'
对v-on事件绑定的补充:
1.我们可以给事件触发的方法传参数,前提是在方法的定义处需要定义形参来接收我们的实参.
2.事件修饰符
@keyup.enter
@keyup是键盘事件, .enter给事件添加修饰符,就是当回车时才触发,通过'.xxx'来添加事件修饰符.
-->
<div id="app">
<input type="text" @keyup.enter="login('小明')">
<button>登录</button>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
},
methods:{
login(userName){
alert(userName + "登录成功");
}
}
})
</script>
</body>v-show
<body>
<!--
当v-show后面的表达式值为true时，才显示标签元素，否则隐藏。
表达式可以直接取到data中的数据。
这个原理是操作标签的样式：style="display: none;" 实现元素的隐藏。
-->
<div id="app">
<div>
<img src="../img/monkey.png" v-show="isShow==true">
</div>
<br>
<button @click="showChange">按我</button>
</div>
<script>
var vue = new Vue({
el:"#app",
data:{
isShow:true
},
methods:{
showChange:function(){
this.isShow = !this.isShow;
}
}
})
</script>
</body>v-if
<body>
<!--
v-if 和v-show效果一样，都是当表达式的值为true时，才显示。
但是原理不同，v-if是直接操作dom树，删除或添加元素到dom树中。
当频繁切换显示，使用v-show，v-if直接操作dom树，开销大。
-->
<div id="app">
<span v-if="temp > 3">hello </span>
<button v-on:click="add">切换显示状态</button>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
temp: 2
},
mehtods: {
add: function () {
this.temp++;
console.log(this.temp);
}
}
})
</script>
</body>v-bind
<body>
<!--
v-bind 可以给标签的属性绑定一个data对象中的数据，从而控制标签的属性。
v-bind 可以省略
-->
<div id="app">
<img v-bind:title="imgTitle" src="http://tva2.sinaimg.cn/large/83e2e207jw1fchpgbeyg8j21c00u0dkb.jpg"
class="imgStyle" />
<br>
<!-- <span v-bind:class="{isActive:textL}">一段文本</span> -->
<!-- isActive为真才取textL值 -->
<span v-bind:class="{textL:isActive}" @click="changeClass">一段文本</span>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
imgTitle: "你的名字",
isActive: true
},
methods: {
changeClass: function () {
this.isActive = !this.isActive;
}
}
})
</script>
</body>v-for
<body>
<!--
1.v-for="item in items" 会遍历整个items,item代表每一个数据遍历项.
v-for="(item,index) in items" item表示每一个数据遍历项,index代表索引值.
2.v-for作用的标签,有几个遍历项,标签就渲染几次.
3.使用{{}}插值语法来取数据.
-->
<div id="app">
<h4>周末做什么:</h4>
<ol>
<li v-for="todo in todos">{{todo}}</li>
</ol>
<h4>无序列表:</h4>
<ul>
<li v-for="(item,index) in users" v-bind:title="item.age">
{{index}} --> {{item.name}}
</li>
</ul>
<button @click="addUser">添加用户</button>
<button @click="minusUser">减少用户</button>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
// 基本数组
todos: [
"吃饭",
"睡觉",
"打游戏",
"看剧"
],
// 对象数组
users: [
{ name: "小明", age: 23 },
{ name: "小花", age: 21 },
{ name: "明华", age: 33 }
]
},
methods:{
addUser(){
this.users.push({name:"某某",age:24})
},
minusUser(){
this.users.shift();
}
}
})
</script>
</body>v-model
<body>
<!--
v-model用于表单元素和vue数据对象的双向绑定
1.v-model只能用于表单元素,常见的表单元素有:input(text,button,radio...),select,checkbox...
v-model双向绑定,vue数据和表单元素数据两者相互影响.
2.v-bind只是单向绑定,vue数据改变才会改变属性数据,属性数据改变不影响vue数据.
-->
<div id="app">
<!-- <span v-model="message"></span> -->
<input type="text" v-model="message" @keyup.enter="showData">
<input type="text" v-bind:value="message" @keyup.enter="showData">
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"默认文本"
},
methods: {
showData() {
alert("vue实例中的数据:" + this.message);
},
},
})
</script>
</body>记事本案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>记事本</title>
<!-- 引入vue.js，开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<style>
.w{
padding-left: 26‒;
margin-left: 38px;
}
</style>
</head>
<body>
<div id="app">
<h2>小菜鸡记事本</h2>
<!-- v-model和输入框的value属性绑定,可以用于获取用户的输入. -->
<input type="text" placeholder="请输入任务" @keyup.enter="addItem()" v-model="inputValue">
<ul>
<li v-for="(item,index) in items" @mouseenter="floatDelete" @mouseleave="hideDelete">
{{index+1+'.'}} {{item}}
<span v-show="isDelete" @click="deleteItem(index)">x</span>
</li>
</ul>
<span v-show="items.length != 0">{{items.length}} items left</span> <span v-show="items.length != 0" class="w" @click="clear">clear</span>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
items:[
"吃饭",
"睡觉",
"打游戏"
],
inputValue:"",
isDelete:false,
total: 3
},
methods:{
addItem(){
console.log("inputValue:"+this.inputValue);
this.items.push(this.inputValue);
this.inputValue = "";
// console.log("inputValue:"+this.inputValue);
},
floatDelete:function(){
this.isDelete = true;
},
hideDelete(){
this.isDelete = false;
},
deleteItem(index){
this.items.splice(index,1);
this.total = this.items.length;
if(this.items.length == 0){
this.isDelete = false;
}
},
clear(){
this.items.splice(0);
}
}
})
</script>
</body>
</html>axios网络请求库
是一个网络请求库，我的理解就是向后台发送请求，返回自己需要的资源。
1、安装
方式一：使用npm下载axios依赖
npm install axios
方式二：在线导入（要保证联网）
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
2、使用，作一个音乐播放器
两种常用的请求：GET POST
axios.get(地址?参数列表).then(function(response){},function(err){})
请求成功则执行前面的函数 失败执行后面的函数
<!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>悦听player</title>
<!-- 样式 -->
<link rel="stylesheet" href="./css/index.css">
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<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="key" @keyup.enter="search" />
</div>
<div class="center_con">
<!-- 搜索歌曲列表 -->
<div class='song_wrapper'>
<ul class="song_list">
<li v-for="song in songs"><a href="javascript:;" @click="play(song.id,song.al.picUrl)"></a>
<b>{{song.name}}</b>
<span><i v-if="song.mv > 0"><img src="./images/mv.png" @click="playMv(song.mv)"></i></span>
</li>
<!-- <li><a href="javascript:;"></a> <b>你好</b> <span><i></i></span></li> -->
</ul>
<img src="images/line.png" class="switch_btn" alt="">
</div>
<!-- 歌曲信息容器 -->
<div class="player_con" :class="{playing:isPlay}">
<img src="images/player_bar.png" class="play_bar" />
<!-- 黑胶碟片 -->
<img src="images/disc.png" class="disc autoRotate" />
<img v-bind:src="songPicUrl" class="cover autoRotate" />
</div>
<!-- 评论容器 -->
<div class="comment_wrapper">
<h5 class='title'>热门留言</h5>
<div class='comment_list'>
<dl>
<dt><img src="./images/person.png" alt=""></dt>
<dd class="name">盐焗西兰花</dd>
<dd class="detail">
绝对值得一听，吹爆
</dd>
</dl>
</div>
<img src="images/line.png" class="right_line">
</div>
</div>
<div class="audio_con">
<audio ref='audio' @play="doPlay" @pause="pause" v-bind:src="songUrl" controls autoplay loop
class="myaudio"></audio>
</div>
<div class="video_con" v-show="mvUrl != ''">
<video controls="controls" :src="mvUrl"></video>
<div class="mask" @click="closeMv"></div>
</div>
</div>
</div>
<script src="./js/main.js"></script>
</body>
</html>
var app = new Vue({
el:"#player",
data:{
key:"",
songs:[],
songUrl:"",
songPicUrl:"",
isPlay:false,
mvUrl:""
},
methods:{
// 查询歌曲
search(){
var that = this;
axios.get("https://autumnfish.cn/cloudsearch?keywords="+this.key)
.then(function(response){
console.log(response.data.result.songs);
that.songs = response.data.result.songs;
},function(err){})
},
// 获取歌曲播放url
play(id,url){
this.songUrl = "https://music.163.com/song/media/outer/url?id="+id+".mp3";
this.songPicUrl = url;
},
doPlay(){
this.isPlay = true;
},
pause(){
this.isPlay = false;
},
playMv(mvId){
var that = this;
axios.get("https://autumnfish.cn/mv/url?id="+mvId).then(function(response){
console.log(response.data.data.url)
that.mvUrl = response.data.data.url;
})
},
closeMv(){
this.mvUrl = "";
}
}
})
![Zookeeper[1]-Zookeeper介绍与安装以及集群环境准备](https://img-blog.csdnimg.cn/f19a5e1031f64c74bd8aec8685b68db1.png)
![[附源码]Python计算机毕业设计SSM基于Web课堂签到管理系统（程序+LW)](https://img-blog.csdnimg.cn/6b8c6c6687a7407194ff1702f23b5bf6.png)
