Web前端-Vue2+Vue3基础入门到实战项目-Day1(初始Vue, Vue指令, 小黑记事本)
Web前端-Vue2+Vue3基础入门到实战项目-Day1
- Vue快速上手
-
- 创建一个Vue实例
- 插值表达式
- Vue响应式特性
- Vue指令
-
- 指令初识 和 v-html
- v-show 和 v-if
- v-else 和 v-else-if
- v-on
-
- 内联语句
- methods处理函数
- 调用传参
- v-bind
- 案例 - 波仔的学习之旅
- v-for
-
- v-for基本使用
- 案例 - 小黑的书架
- v-for的key
- v-model
- 综合案例 - 小黑记事本
- 来源
Vue快速上手
创建一个Vue实例
创建Vue实例, 初始化渲染的核心步骤:
- 准备容器
- 引包(官网) - 开发版本 / 生产版本
- 创建Vue实例
new Vue() - 指定配置项 el data => 渲染数据
- el: 指定挂载点, 选择器指定控制的是哪个盒子
- data: 提供数据
<body>
<div id="app">
<h1>{{ msg }}h1>
<a href="#">{{ count }}a>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script>
// 引入VueJS核心包, 就有了Vue构造函数
const app = new Vue({
// 通过 el 配置选择器, 指定 Vue 管理的是哪个盒子
el: '#app',
// data 提供数据
data: {
msg: "Hello Vue",
count: 666
}
})
script>
body>
插值表达式
- 作用: 利用表达式进行插值, 将数据渲染页面中
- 格式:
{{ 表达式 }} - 注意点:
- 使用的数据要存在(data)
- 支持的是表达式, 而非语句
if ... for - 不能在标签属性里使用
<body>
<div id="app">
<p>{{ nickname }}p>
<p>{{ nickname.toUpperCase() }}p>
<p>{{ nickname+'你好' }}p>
<p>{{ age>= 18 ? '成年' : '未成年' }}p>
<p>{{ friend.name }}p>
<p>{{ friend.desc }}p>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
nickname: 'tony',
age: 18,
friend: {
name: 'jepson',
desc: '热爱学习 Vue'
}
}
})
script>
body>
Vue响应式特性
- 响应式: 数据变化, 视图自动更新
- 访问和修改数据
- data中的数据, 会被添加到实例上
- 访问数据:
实例.属性名 - 修改数据:
实例.属性名 = 值
<body>
<div id="app">
{{ msg }}
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
msg: 'Hello Vue'
}
})
script>
body>
Vue指令
指令初识 和 v-html
- Vue指令: 带有v-前缀的特殊标签属性
<body>
<div id="app">
<div v-html="msg">div>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
msg: `
黑马程序员
`
}
})
script>
body>
v-show 和 v-if
- v-show
- 底层原理:切换 css 的 display: none 来控制显示隐藏
- 场景: 频繁切换显示隐藏的场景
- v-if
- 底层原理: 根据 判断条件 控制元素的 创建 和 移除(条件渲染)
- 场景: 要么显示, 要么隐藏, 不频繁切换的场景
<head>
...
<style>
.box {
width: 200px;
height: 100px;
line-height: 100px;
margin: 10px;
border: 3px solid #000;
text-align: center;
border-radius: 5px;
box-shadow: 2px 2px 2px #ccc;
}
style>
head>
<body>
<div id="app">
<div v-show="flag" class="box">我是v-show控制的盒子div>
<div v-if="flag" class="box">我是v-if控制的盒子div>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
flag: true
}
})
script>
body>
v-else 和 v-else-if
<body>
<div id="app">
<p v-if="gender === 1">性别：♂ 男p>
<p v-else>性别：♀ 女p>
<hr>
<p v-if="score >= 90">成绩评定A: 奖励电脑一台p>
<p v-else-if="score >= 70">成绩评定B: 奖励周末郊游p>
<p v-else-if="score >= 60">成绩评定C: 奖励零食礼包p>
<p v-else>成绩评定D: 惩罚一周不能玩手机p>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
gender: 1,
score: 80
}
})
script>
body>
v-on
内联语句
<body>
<div id="app">
<button @click="--count">-button>
<span>{{ count }}span>
<button v-on:click="++count">+button>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
count: 100
}
})
script>
body>
methods处理函数
<body>
<div id="app">
<button @click="fn">切换显示隐藏button>
<h1 v-show="isShow">黑马程序员h1>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
isShow: false
},
methods: {
fn () {
this.isShow = !this.isShow
}
}
})
script>
body>
调用传参
<head>
...
<style>
.box {
border: 3px solid #000000;
border-radius: 10px;
padding: 20px;
margin: 20px;
width: 200px;
}
h3 {
margin: 10px 0 20px 0;
}
p {
margin: 20px;
}
style>
head>
<body>
<div id="app">
<div class="box">
<h3>小黑自动售货机h3>
<button @click="buy(5)">可乐5元button>
<button @click="buy(10)">咖啡10元button>
<button @click="buy(8)">牛奶10元button>
div>
<p>银行卡余额: {{ money }}元p>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
money: 100
},
methods: {
buy (price) {
this.money -= price
}
}
})
script>
body>
v-bind
- 作用: 动态地设置html的标签属性
<body>
<div id="app">
<img v-bind:src="imgUrl" v-bind:title="msg" alt="">
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
imgUrl: './imgs/10-01.png',
msg: 'Hello 波仔'
}
})
script>
body>
案例 - 波仔的学习之旅
<body>
<div id="app">
<button v-show="index > 0" @click="--index">上一页button>
<div>
<img :src="list[index]" alt="">
div>
<button v-show="index < list.length - 1" @click="++index">下一页button>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
index: 0,
list: [
'./imgs/11-00.gif',
'./imgs/11-01.gif',
'./imgs/11-02.gif',
'./imgs/11-03.gif',
'./imgs/11-04.png',
'./imgs/11-05.png',
]
}
})
script>
body>
v-for
v-for基本使用
<body>
<div id="app">
<h3>小黑水果店h3>
<ul>
<li v-for="(item, index) in list">
{{item}} - {{index}}
li>
ul>
<ul>
<li v-for="item in list">
{{item}}
li>
ul>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
list: ['西瓜', '苹果', '鸭梨']
}
})
script>
body>
案例 - 小黑的书架
- filter: 根据条件, 保留满足条件的对应项, 得到一个新数组
<body>
<div id="app">
<h3>小黑的书架h3>
<ul>
<li v-for="(item, index) in booksList" :key="item.id">
<span> {{item.name}} span>
<span> {{item.author}} span>
<button @click="del(item.id)">删除button>
li>
ul>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
booksList: [
{ id: 1, name: '《红楼梦》', author: '曹雪芹' },
{ id: 2, name: '《西游记》', author: '吴承恩' },
{ id: 3, name: '《水浒传》', author: '施耐庵' },
{ id: 4, name: '《三国演义》', author: '罗贯中' }
]
},
methods: {
del(id){
// 通过 id 删除数组中的对应项 -> filter(不会改变原数组)
// filter: 根据条件, 保留满足条件的对应项, 得到一个新数组
this.booksList = this.booksList.filter(item => item.id !== id)
}
}
})
script>
body>
v-for的key
- key的作用: 给元素添加的唯一标识, 便于Vue进行列表项的正确排序复用
- 注意点
- key的值只能是字符串或数字类型
- key的值必须具有唯一性
- 推荐使用id作为key(唯一), 不推荐使用index作为key(会变化, 不对应)
- 不加key: v-for的默认行为会尝试 原地修改元素(就地服用)
v-model
- 作用: 给表单元素使用, 双向数据绑定 -> 可以快速获取或设置表单元素的内容
- 数据变化, 视图自动更新
- 视图变化, 数据自动更新
<body>
<div id="app">
账户：<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>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
username: '',
password: ''
},
methods: {
login(){
console.log(this.username, this.password)
},
reset(){
this.username = ''
this.password = ''
}
}
})
script>
body>
综合案例 - 小黑记事本
功能总结:
- 列表渲染:
- v-for
- key的设置
- {{}}插值表达式
- 删除功能:
- v-on调用传参
- filter过滤
- 覆盖修改原数组
- 添加功能:
- v-model绑定
- unshift修改原数组添加
- 底部统计和清空
- 数组.length累计长度
- 覆盖数组清空列表
- 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" />
<link rel="stylesheet" href="./css/index.css" />
<title>记事本title>
head>
<body>
<section id="app">
<header class="header">
<h1>小黑记事本h1>
<input placeholder="请输入任务" class="new-todo" v-model="todoName"/>
<button class="add" @click="add">添加任务button>
header>
<section class="main">
<ul class="todo-list">
<li class="todo" v-for="(item, index) in list" :key="item.id">
<div class="view">
<span class="index"> {{index+1}}. span> <label> {{item.name}} label>
<button class="destroy" @click="del(item.id)">button>
div>
li>
ul>
section>
<footer class="footer" v-show="list.length > 0">
<span class="todo-count">合 计:<strong> {{list.length}} strong>span>
<button class="clear-completed" @click="clear">
清空任务
button>
footer>
section>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
list: [
{id: 1, name: '跑步两公里'},
{id: 2, name: '跳绳500下'}
],
todoName: ''
},
methods: {
del(id){
this.list = this.list.filter(item => item.id !== id)
},
add(){
if(this.todoName.trim() === ''){
alert('请输入任务名称')
return
}
this.list.unshift({
id: +new Date(),
name: this.todoName
})
this.todoName = ''
},
clear(){
this.list = []
}
}
})
script>
body>
html>
来源
黑马程序员. Vue2+Vue3基础入门到实战项目