20231012-黑马Vue学习笔记-第一天
文章目录
- Vue的概念
- Vue2官网
- 创建一个Vue实例
- 安装Vue开发者工具
- Vue指令
- 案例-波仔的学习之旅
- 常见的事件类型
- 案例-小黑的书架
- 案例-小黑记事本
Vue的概念
Vue 是一个用于 构建用户界面 的 渐进式 框架
Vue2官网
https://v2.cn.vuejs.org/
创建一个Vue实例
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
head>
<body>
<div id="app">
<h1>
{{msg}}
h1>
<p>{{friend.name+' '+(friend.age>=18?'成年':'未成年')}}p>
div>
<script>
// Vue构造函数
const app = new Vue({
// 通过el配置选择器，指定Vue管理哪个盒子
el: "#app",
// 通过data提供数据
data: {
msg: "Hello world",
friend: {
name: 'Jony',
age: 18
}
}
});
// Vue响应式特性
// data中的数据是会被添加到实例上
// 1.访问数据 实例.属性名 app.msg
console.log(app.friend.name);
// 2.修改数据 实例.属性名 = 新值
app.msg = "你好，世界！";
script>
body>
html>
安装Vue开发者工具
https://chrome.zzzmh.cn/index#/index
Vue指令
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
head>
<body>
<div id="app">
<div v-html="msg">div>
<h2 v-show="falg">Hello world!h2>
<h2 v-if="falg">你好，世界！h2>
<h2 v-if="gender===1">性别：♂男h2>
<h2 v-else>性别：♀女h2>
<h2 v-if="score>=90">优秀h2>
<h2 v-else-if="score>=80">良好h2>
<h2 v-else-if="score>=60">及格h2>
<h2 v-else>不及格h2>
<div>
<button v-on:click="count--">-button>
<span>{{count}}span>
<button @click="count++">+button>
div>
<div>
<button @click="ShowOrHide">切换显示隐藏button>
<span v-show="isShow">天生我材必有用，千金散尽还复来span>
div>
<div style="border: 2px solid red; width: 200px; margin-top: 20px;">
<h3>小黑自动售货机h3>
<button @click="Buy(5)">可乐5元button>
<button @click="Buy(10)">咖啡10元button>
<p>银行卡余额：{{money}}元p>
div>
<div>
<img v-bind:src="imgUrl" alt="" style="width: 180px; height: 120px;">
div>
<div>
<h3>小黑水果店h3>
<ul>
<li v-for="(item,index) in list">{{item}}-{{index}}li>
<li v-for="item in list">{{item}}li>
ul>
div>
<div style="width: 250px; height: 140px; border: 1px solid black; text-align: center;">
账户：<input type="text" v-model="username">
<br><br>
密码：<input type="password" v-model="password">
<br><br>
<button @click="login">登录button>
<button @click="reset">重置button>
div>
div>
<script>
const app = new Vue({
el: '#app',
data: {
msg: "Nice day!
",
falg: false,
gender: 2,
score: 59,
count: 100,
isShow: false,
money: 100,
imgUrl: "./images/1.jpg",
list: ['苹果', '香蕉', '梨'],
username: '',
password: ''
},
methods: {
ShowOrHide() {
this.isShow = !this.isShow;
},
Buy(price) {
this.money -= price;
},
login() {
if (this.username === 'admin' && this.password === 'admin') {
alert('登陆成功!');
} else {
alert('登录失败！');
}
},
reset() {
this.username = '';
this.password = '';
}
}
});
script>
body>
html>
案例-波仔的学习之旅
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<style>
* {
margin: 0;
padding: 0;
}
#box {
width: 480px;
height: 640px;
background-color: aquamarine;
margin: 100px auto;
text-align: center;
}
#box img {
width: 240px;
height: 240px;
margin: 100px auto;
border: 1px solid black;
}
.btns {
height: 80px;
background-color: skyblue;
}
.btns button {
width: 100px;
height: 40px;
border-radius: 20px;
margin-top: 20px;
}
.lastBtn {
float: left;
margin-left: 100px;
}
.nextBtn {
float: right;
margin-right: 100px;
}
style>
head>
<body>
<div id="box">
<h2>波仔的学习之旅h2>
<img :src="imgsUrl[index]" alt="">
<div class="btns">
<button class="lastBtn" v-show="index > 0" @click="index--">上一页button>
<button class="nextBtn" v-show="index < imgsUrl.length-1" @click="index++">下一页button>
div>
div>
<script>
const app = new Vue({
el: "#box",
data: {
imgsUrl: ['./images/波仔/10-01.png', './images/波仔/10-02.png', './images/波仔/11-00.gif', './images/波仔/11-01.gif', './images/波仔/11-02.gif', './images/波仔/11-03.gif', './images/波仔/11-04.png', './images/波仔/11-05.png'],
index: 0,
}
});
script>
body>
html>
常见的事件类型
- 鼠标事件：
- click：鼠标点击事件
- dblclick：鼠标双击事件
- mousedown：鼠标按下事件
- mouseup：鼠标松开事件
- mousemove：鼠标移动事件
- mouseover：鼠标移入事件
- mouseout：鼠标移出事件
- 键盘事件：
- keydown：按下键盘按键事件
- keyup：松开键盘按键事件
- keypress：按下并松开键盘按键事件
- 表单事件：
- input：输入事件，当输入框的值发生变化时触发
- change：值改变事件，当表单元素的值发生变化时触发
- submit：表单提交事件
- focus：获得焦点事件
- blur：失去焦点事件
- 触摸事件：
- touchstart：触摸开始事件
- touchmove：触摸移动事件
- touchend：触摸结束事件
- 滚动事件：
- scroll：滚动事件，当滚动条滚动时触发
案例-小黑的书架
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
head>
<body>
<div id="bookshelf">
<h1>小黑的书架h1>
<ul>
<li v-for="item in booksList" :key="item.id">{{item.name}} {{item.author}}
<button @click="del(item.id)">删除button>
li>
ul>
div>
<script>
const app = new Vue({
el: '#bookshelf',
data: {
booksList: [
{ id: 1, name: '《红楼梦》', author: '曹雪芹' },
{ id: 2, name: '《西游记》', author: '吴承恩' },
{ id: 3, name: '《水浒传》', author: '施耐庵' },
{ id: 4, name: '《三国演义》', author: '罗贯中' },
],
},
methods: {
del(id) {
// filter 根据条件 保留满足条件的对应项 得到一个新数组
this.booksList = this.booksList.filter(item => item.id != id);
}
}
});
script>
body>
html>
案例-小黑记事本
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<style>
* {
margin: 0;
padding: 0;
}
#notepad h1 {
text-align: center;
padding: 10px;
}
.addTask {
text-align: center;
padding: 20px;
}
.addTask input {
height: 40px;
width: 360px;
font-size: 20px;
}
.addTask button {
height: 40px;
width: 80px;
border-radius: 20px;
margin-left: 10px;
}
.items {
width: 640px;
background-color: aqua;
margin: 0 auto;
}
.items li {
list-style: none;
background-color: cadetblue;
height: 48px;
font-size: 24px;
line-height: 48px;
text-align: center;
margin-bottom: 10px;
}
.items li button {
background-color: transparent;
border: 1px solid transparent;
font-size: 20px;
color: brown;
float: right;
margin-top: 15px;
margin-right: 20px;
}
.bottomNav {
height: 40px;
background-color: deepskyblue;
}
.bottomNav span {
line-height: 40px;
margin-left: 40px;
}
.bottomNav button {
float: right;
width: 80px;
height: 32px;
border-radius: 16px;
background-color: darkcyan;
margin-right: 40px;
margin-top: 5px;
}
style>
head>
<body>
<div id="notepad">
<h1>小黑记事本h1>
<div class="addTask">
<input type="text" v-model="addTask">
<button @click="Add">添加任务button>
div>
<div class="items">
<ul>
<li v-for="(item,index) in tasksList" :key="item.id">{{++index}}、{{item.taskName}}
<button @click=Remove(item.id)>Xbutton>
li>
ul>
<div class="bottomNav" v-show="tasksList.length>0">
<span>合计：{{tasksList.length}}span>
<button @click="Reset">清空任务button>
div>
div>
div>
<script>
const app = new Vue({
el: "#notepad",
data: {
tasksList: [
{ id: 1, taskName: '跑步一公里' },
{ id: 2, taskName: '跳绳200个' }
],
addTask: '',
},
methods: {
// unshift 在数组最前面添加数据
Add() {
if (this.addTask.trim() === '') {
alert("请输入任务名称！！！");
return;
}
let newTask = { id: this.tasksList.length + 1, taskName: this.addTask };
this.tasksList.push(newTask);
this.addTask = '';
},
Reset() {
this.tasksList = [];
},
Remove(id) {
this.tasksList = this.tasksList.filter(item => item.id != id);
}
}
});
script>
body>
html>