【Vue学习笔记】黑马程序员四小时速成VUE
Vue学习笔记
- Vue学习
-
- 1. Vue基础
- 2. Vue本地应用
-
- Vue指令
- v-text
- v-html
- v-on
- v-show
- v-if
- v-bind
- v-for
- v-model
- 案例1 计数器
- 案例2 图片切换
- 案例3 小黑记事本
- 3. Vue网络应用
-
- axios的使用
- axios + vue 的使用
- 案例4 天知道
- 4. Vue综合应用
-
- 案例5 音乐播放器
Vue学习
视频地址：https://www.bilibili.com/video/BV12J411m7MG
1. Vue基础
Vue简介
- JavaScript框架
- 简化Dom操作
- 响应式数据驱动
Vue官方文档：
- https://cn.vuejs.org
- https://v3.cn.vuejs.org/
Demo1：第一个程序，初步学会使用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>Vue基础title>
<script src="vue.js">script>
head>
<body>
<div id="app">
{{ message }}
div>
<script>
var app = new Vue({
el:'#app',
data:{
message:"Hello Vue!"
}
})
script>
body>
html>
Demo2：认识Vue实例——el挂载点
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>Documenttitle>
<script src="vue.js">script>
head>
<body>
app元素外部：{{ message }}
<div id="app_1">
app元素内部:{{ message }}
<br>
<span>app元素内部的sapn标签下：{{ message }}span>
div>
<script>
var app = new Vue({
el:'#app_1',
data:{
message:"Hello Vue!"
}
})
script>
<br>
<div class="app_2">
{{ message }}
div>
<script>
var app = new Vue({
el:'.app_2',
data:{
message:"现在使用的class选择器"
}
})
script>
<br>
<h2 id="app_3">
{{ message }}
h2>
<script>
var app = new Vue({
el: '#app_3',
data:{
message:"这是H2元素"
}
})
script>
body>
html>
Demo3：认识Vue实例——data数据对象
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>Documenttitle>
<script src="vue.js">script>
head>
<body>
<div id="app">
{{ message }}
<h2>{{ school.name }} {{ school.mobile }}h2>
<ul>
<li>{{ campus[0] }}li>
<li>{{ campus[1] }}li>
<li>{{ campus[2] }}li>
<li>{{ campus[3] }}li>
ul>
div>
<script>
var app = new Vue({
el: '#app',
data:{
message:"你好，小黑。",
school:{
name:"黑马程序员",
mobile:"400-618-9090"
},
campus:["北京校区","上海校区","广州校区","深圳校区"]
}
})
script>
body>
html>
2. Vue本地应用
通过Vue实现常见的网页效果
Vue指令
内容绑定，事件绑定。
显示切换，属性绑定。
列表循环，表单元素绑定。
| Vue指令 | 作用 |
|---|---|
| v-text | 设置标签的内容（textContent） |
| v-html | 设置元素的innerHTML |
| v-on | 为元素绑定事件 |
| v-show | 根据真假切换元素的显示状态 |
| v-if | 根据表达式的真假切换元素的显示状态 |
| v-bind | 为元素绑定属性 |
| v-for | 根据数据生成列表结构 |
| v-model | 便捷的设置和获取表单元素的值 |
v-text
Demo_v-text指令
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>Documenttitle>
<script src="vue.js">script>
head>
<body>
<div id="app">
<h2 v-text="message">h2>
<h2 v-text="info">h2>
<h2>{{ message }}h2>
<h2 v-text="message">深圳h2>
<h2>{{ message }}深圳h2>
<h2 v-text="message + '!!'">h2>
<h2>{{ message + '!!'}}深圳h2>
div>
<script>
var app = new Vue({
el:'#app',
data:{
message:"黑马程序员",
info:"前端与移动教研部"
}
})
script>
body>
html>
v-html
Demo_v-html指令
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>Documenttitle>
<script src="vue.js">script>
head>
<body>
<div id="app">
<p v-html="content">p>
<p v-text="content">p>
div>
<script>
var app = new Vue({
el:'#app',
data:{
// content:"黑马程序员"
content: "黑马程序员"
}
})
script>
body>
html>
v-on
Demo_v-on指令
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>Documenttitle>
<script src="vue.js">script>
head>
<body>
<div id="app">
<input type="button" value="事件绑定-点击" v-on:click="dolt">
<input type="button" value="事件绑定-双击" v-on:dblclick="dolt">
<input type="button" value="事件绑定-简写点击" @click="dolt">
<h2 @click="change">{{ food }}h2>
div>
<script>
var app = new Vue({
el:"#app",
data:{
food:"西蓝花炒鸡蛋"
},
methods:{
dolt:function(){
alert("做IT");
},
change:function(){
// console.log(this.food);
this.food += "好好吃！"
}
}
})
script>
body>
html>
Demo_v-on指令补充
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>Documenttitle>
<script src="vue.js">script>
head>
<body>
<div id="app">
<input type="button" value="点击" @click="doIt(666)">
<input type="text" @keyup.enter="sayHi">
div>
<script>
var app = new Vue({
el:'#app',
methods:{
doIt:function(p1){
console.log("做It");
console.log(p1);
},
sayHi:function(){
alert("吃了没");
}
}
})
script>
body>
html>
v-show
Demo_v-show指令
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>Documenttitle>
<script src="vue.js">script>
head>
<body>
<div id="app">
<input type="button" value="切换显示状态" @click="changeIsShow">
<img v-show="IsShow" src="1.png" alt="">
<br>
<span>{{ age }}span>
<input type="button" value="年龄age增加" @click="changeAge">
<img v-show="age >= 18" src="1.png" alt="">
div>
<script>
var app = new Vue({
el:'#app',
data:{
IsShow:false,
age:17
},
methods:{
changeIsShow:function(){
this.IsShow = ! this.IsShow;
},
changeAge:function(){
this.age++;
}
}
});
script>
body>
html>
v-if
Demo_v-if指令
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>Documenttitle>
<script src="vue.js">script>
head>
<body>
<div id="app">
<button @click="ChangeShow">切换状态button>
<p v-if="IsShow">我是一个p标签，由v-if控制p>
<p v-show="IsShow">我是一个p标签，由v-show控制p>
<p v-if="temperature >= 35">热死了！p>
div>
<script>
var app = new Vue({
el:'#app',
data:{
IsShow:true,
temperature:40
},
methods:{
ChangeShow:function(){
this.IsShow = !this.IsShow;
}
}
});
script>
body>
html>
v-bind
Demo_v-bind指令
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>Documenttitle>
<script src="vue.js">script>
<style>
.active{
border: 1px solid red;
}
style>
head>
<body>
<div id="app">
全写：v-bind:src
<img v-bind:src="imgSrc" v-bind:title="imgTitle" alt="">
<br>
简写 ：src
<img :src="imgSrc" :title="imgTitle + '!!!!'" alt="">
<br>
添加类_三元表达式
<button @click="toggleActive">点击我改变class属性button>
<img :src="imgSrc" :title="imgTitle + '!!!!'" :class="isActive?'active':''" alt="">
<br>
添加类_对象方式
<button @click="toggleActive">点击我改变class属性button>
<img :src="imgSrc" :title="imgTitle + '!!!!'" :class="{active:isActive}" alt="">
div>
<script>
var app = new Vue({
el:'#app',
data:{
imgSrc:"http://www.itheima.com/images/logo.png",
imgTitle:"黑马程序员",
isActive:false
},
methods:{
toggleActive:function(){
this.isActive = !this.isActive;
}
}
});
script>
body>
html>
v-for
Demo_v-for指令
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>Documenttitle>
<script src="vue.js">script>
head>
<body>
<div id="app">
<ul>
<li v-for="item in Array">你好,{{ item }}li>
ul>
<h2 v-for="item in vegetables" :title="item.name">{{ item.name }}h2>
<button @click="add">点我添加button>
<button @click="remove">点我移除button>
div>
<script>
var app = new Vue({
el:'#app',
data:{
Array:["张三","李四","王五","马六","二蛋"],
vegetables:[
{name:"葱花炒蛋"},
{name:"番茄炒蛋"}
]
},
methods:{
add:function(){
this.vegetables.push({ name:"韭菜炒蛋"});
},
remove:function(){
// 移除最左边的一个
this.vegetables.shift();
}
}
})
script>
body>
html>
v-model
Demo_v-model指令
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>Documenttitle>
<script src="vue.js">script>
head>
<body>
<div id="app">
<input type="text" v-model="message" @keyup.enter="getMessage">
<h2>{{ message }}h2>
<input type="button" value="点我修改" @click="setMessage">
div>
<script>
var app = new Vue({
el:'#app',
data:{
message:"黑马程序员"
},
methods:{
getMessage:function(){
alert(this.message);
},
setMessage:function(){
this.message = "111";
}
}
});
script>
body>
html>
案例1 计数器
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>Documenttitle>
<script src="vue.js">script>
head>
<body>
<div class="input-num" id="app">
<button @click='reduce'>-button>
<span>{{ num }}span>
<button @click='add'>+button>
div>
<script>
var app = new Vue({
el:'#app',
data:{
num:1
},
methods:{
reduce:function(){
console.log("reduce")
if(this.num == 1){
alert("不能为0")
}
else{
this.num--;
}
},
add:function(){
console.log("add")
if(this.num>=9){
alert("不能超过10个")
}
else{
this.num++;
}
}
}
});
script>
body>
html>
案例2 图片切换
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>Documenttitle>
<script src="vue.js">script>
head>
<body>
<div id="app">
<img :src="imgArray[index]" alt="">
<a href="#" @click="prev" v-show="index>0">上一张a>
<a href="#" @click="next" v-show="index" >下一张a>
div>
<script>
var app = new Vue({
el:'#app',
data:{
imgArray:["https://img20.360buyimg.com/pop/s590x470_jfs/t1/222408/26/6055/99082/61b997c0Ead36013d/9b2da06b3f438624.jpg.webp",
"https://img14.360buyimg.com/pop/s590x470_jfs/t1/208171/7/13900/69634/61c96765E6e65374c/642ed952f9778144.jpg.webp",
"https://imgcps.jd.com/ling4/100012043978/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6f4/a10ab487/cr/s/q.jpg",
"https://img12.360buyimg.com/pop/s590x470_jfs/t1/205354/16/17988/82004/61b1dc96Ee600f3f3/9ffa616349105df0.png.webp"
],
index:0,
},
methods:{
prev:function(){
this.index--;
},
next:function(){
this.index++;
}
}
});
script>
body>
html>
案例3 小黑记事本
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>Documenttitle>
<script src="vue.js">script>
head>
<body>
<section id="todoapp">
<header class="header">
<h1>小黑笔记本h1>
<input v-model="inputValue" @keyup.enter="add" type="text" autofocus="autofocus" autocomplete="off" placeholder="请输入任务" class="new_todo">
header>
<section class="main">
<ul class="to_list">
<li class="todo" v-for="(item,index) in list">
<div class="view">
<span class="index">{{ index+1 }}span>
<label>{{ item }}label>
<button @click="remove(index)" class="destory">×button>
div>
li>
ul>
section>
<footer class="footer">
<span class="todo_count" v-if="list.length!=0">
<strong>{{ list.length }}strong>
items left
span>
<button @click="clear" class="clear_completed" v-show="list.length!=0">Clearbutton>
footer>
section>
<footer class="info">
footer>
<script>
var app = new Vue({
el:'#todoapp',
data:{
list:["写代码","吃饭饭","睡觉觉"],
inputValue:"好好学习", //用来获取用户输入的内容
},
methods:{
add:function(){
this.list.push(this.inputValue);
},
remove:function(index){
console.log("1")
this.list.splice(index,1);
},
clear:function(){
this.list = [];
}
}
})
script>
body>
html>
3. Vue网络应用
axios的使用
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>Documenttitle>
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
head>
<body>
<input type="button" value="get请求" class="get">
<input type="button" value="post请求" class="post">
<script>
document.querySelector(".get").onclick = function(){
axios.get("https://autumnfish.cn/api/joke/list?num=3")
.then(function(response){
console.log(response);
},function(err){
console.log(err);
})
}
script>
<script>
document.querySelector(".post").onclick = function(){
//post的数据是放到第二个参数里面写的
axios.post("https://autumnfish.cn/api/user/reg",{username:"张三aichidoya"})
.then(function(response){
console.log(response);
}),function(err){
console.log(err)
}
}
script>
body>
html>
axios + 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>Documenttitle>
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
<script src="vue.js">script>
head>
<body>
<div id="app">
<input type="button" value="获取笑话" @click="getjoke">
<p>{{ joke }}p>
div>
<script>
var app = new Vue({
el:'#app',
data:{
joke:"笑话"
},
methods:{
getjoke:function(){
// this会变，所以我们现在外边获取到this赋值到that。
var that = this;
axios.get("https://autumnfish.cn/api/joke")
.then(
function(response){
that.joke = response.data;
},
function(err){
console.log(err);
that.joke = "获取笑话失败哦"
}
)
}
}
})
script>
body>
html>
案例4 天知道
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>
<link rel="stylesheet" href="快速入门Vue.js资料\04-源代码\demo-天知道\css\index.css">
<link rel="stylesheet" href="快速入门Vue.js资料\04-源代码\demo-天知道\css\reset.css" />
head>
<body>
<div class="wrap" id="app">
<div class="search_form">
<div class="logo"><img src="快速入门Vue.js资料\04-源代码\demo-天知道\img\logo.png" alt="logo" />div>
<div class="form_group">
<input type="text" v-model="city" @keyup.enter="searchWeather" class="input_txt" placeholder="请输入查询的天气"/>
<button class="input_sub" @click="searchWeather">
搜 索
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">
<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 src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
<script>
var app = new Vue({
el:'#app',
data:{
city:"",
weatherList:[]
},
methods:{
searchWeather:function(){
var that = this;
axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city)
.then(
function(response){
console.log(response.data.data.forecast);
that.weatherList = response.data.data.forecast;
},
function(err){
console.log(err);
}
)
},
changeCity:function(city){
this.city = city;
this.searchWeather();
}
}
})
script>
body>
html>
4. Vue综合应用
案例5 音乐播放器
本篇文章用于作者本人学习回顾时使用。