Day01
01-项目入门方案
01-HelloVuejs
通过入门方案了解Vue代码编写,掌握基本的Vue编码格式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
<h2>{{name}}</h2>
</div>
<!-- 下载到本地项目文件夹,引入vue.js-->
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'Hello',
name:'Vuejs'
}
})
</script>
</body>
</html>
【运行结果展示】
02-Vue列表展示
通过列表展示,了解在vue框架下如何进行列表循环展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in movies">{{item}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
movies:['肖申克的救赎','星际穿越','流浪地球','盗梦空间']
}
})
</script>
</body>
</html>
【运行结果展示】
03-计数器
了解如何在页面监听一个事件,合理设置事件绑定。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>当前计数:{{counter}}</h2>
<!-- <button v-on:click="counter++">+</button>-->
<!-- <button v-on:click="counter--">-</button>-->
<button @click="add">+</button> <!--@ 是 语法糖 是一种简写-->
<button @click="sub">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
counter:0
},
methods:{
add:function () {
console.log("+被执行");
this.counter++;
},
sub:function () {
console.log("-被执行")
this.counter--;
}
}
})
</script>
</body>
</html>
【运行结果展示】
02-插值操作
1、Mustache语法
双大括号语法,数据是响应式的。
<div id="app">
<h2>{{message}}</h2>
<h2>{{message}},123</h2>
<!-- Mustache语法中可以写简单的表达式!-->
<h2>{{firstName + lastName}}</h2>
<h2>{{firstName + ' ' + lastName}}</h2>
<h2>{{firstName}}{{lastName}}</h2>
<h2>{{counter * 2}}</h2>
</div>
Mustache语法中可以写简单的表达式!
2、v-once指令
该指令表示元素和组件只渲染一次,不会跟随数据的改变而改变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<h2 v-once>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'你好啊!'
}
})
</script>
</body>
</html>
【控制台修改操作】
修改app.message的值,第一个无v-once属性的h2标签被修改,第二个有v-once属性的h2标签没有被修改。
3、v-html指令
从服务器请求到的数据本身是一个HTML代码,需要解析并展示出HTML。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2 v-html="url">{{url}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'你好啊!',
url:'<a href="http://www.baidu.com">百度一下</a>'
}
})
</script>
</body>
</html>
【页面展示】
4、v-text指令
将数据显示在界面中,v-text通常情况下接受一个string类型。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>{{message}},123</h2>
<h2 v-text="message">123</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'你好啊!'
}
})
</script>
</body>
</html>
【页面分析】
5、v-pre指令
用于跳过这个元素和它的子元素的编译过程,用于显示原本标签内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<h2 v-pre>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'你好啊!'
}
})
</script>
</body>
</html>
【界面分析】
6、v-cloak指令
在某些情况下,浏览器会显示出未经编译的Mustache标签,这时会影响用户浏览体验,需要进行隐藏处理。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
{{message}}
</div>
<script src="../js/vue.js"></script>
<script>
setTimeout(function () {
const app = new Vue({
el:'#app',
data:{
message:'你好啊!'
}
})
},1000)
</script>
</body>
</html>
【界面分析】
Day02
01-动态绑定属性
01-v-bind的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- <img v-bind:src="imgURL" alt="" >-->
<!-- <a v-bind:href="aHref">百度一下</a>-->
<!-- 语法糖写法(简写)-->
<img :src="imgURL" alt="" >
<a :href="aHref">百度一下</a>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'你好啊!',
imgURL:'https://img-blog.csdnimg.cn/2020032810351598.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Vsc2ExNQ==,size_16,color_FFFFFF,t_70',
aHref:'http://www.baidu.com'
}
})
</script>
</body>
</html>
【界面展示】
02-v-bind动态绑定class对象语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.active{
color: red;
}
</style>
</head>
<body>
<div id="app">
<!-- <h2 class="active">{{message}}</h2>-->
<!-- <h2 :class="active">{{message}}</h2>-->
<h2 class="title" v-bind:class="{active:isActive,line:isLine}">{{message}}</h2>
<button v-on:click="btnClick">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'你好啊!',
isActive:true,
isLine:true
},
methods: {
btnClick:function () {
this.isActive = !this.isActive
}
}
})
</script>
</body>
</html>
【界面展示及分析】
03-v-bind动态绑定class数组语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2 class="title" :class="[active,line]">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'你好啊!',
active:'11111',
line:'222222'
}
})
</script>
</body>
</html>
【界面展示】
04、v-bind动态绑定style对象语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- <h2 :style="{'font-size':'50px'}">{{message}}</h2>-->
<h2 :style="getStyle()">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message: '你好啊!',
finalSize: 100,
finalColor: 'red'
},
methods:{
getStyle:function () {
return {'font-size': this.finalSize + 'px',backgroundColor: this.finalColor }
}
}
})
</script>
</body>
</html>
【界面展示】
05 小作业 (v-for和v-bind的结合)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.active{
color: red;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in movies" @click="liClick(index)"
:class="{active:currentIndex === index}">
{{index}}-{{item}}
</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
movies:['海王','海尔兄弟','火影忍者','进击的巨人'],
currentIndex: 0
},
methods:{
liClick(index){
this.currentIndex = index;
}
}
})
</script>
</body>
</html>
【页面展示】
02-计算属性
01-计算属性的基本使用
<div id="app">
<h2>{{firstName + ' ' + lastName}}</h2>
<!-- 方法-->
<h2>{{getFullName()}}</h2>
<!-- 计算属性-->
<h2>{{fullName}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
firstName:'Lebron',
lastName:'James'
},
computed:{
fullName:function () {
return this.firstName + ' ' + this.lastName
}
},
methods:{
getFullName:function () {
return this.firstName + ' ' + this.lastName
}
}
})
</script>
方法需要加上括号,本质是一个函数,而计算属性不需要加括号。
02-计算属性的复杂操作
使用计算属性来计算图书总价格,
<div id="app">
<h2>总价格:{{totalPrice}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
books:[
{id:110,name:'Linux编程艺术',price:119},
{id:111,name:'代码大全',price:105},
{id:112,name:'深入理解计算机原理',price:96},
{id:113,name:'现代操作系统',price:87}
]
},
computed:{
totalPrice:function () {
let result = 0;
for (let i=0;i<this.books.length;i++){
result += this.books[i].price;
}
return result
}
}
})
</script>
03-事件监听
01-v-on的基本使用
<div id="app">
<h2>{{counter}}</h2>
<!-- <button v-on:click="counter++">+</button>-->
<!-- <button v-on:click="counter--">-</button>-->
<button v-on:click="increment">+</button>
<button v-on:click="decrement">-</button>
<!-- 语法糖的写法-->
<!-- <button @click="increment">+</button>-->
<!-- <button @click="decrement">-</button>-->
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
counter:0
},
methods:{
increment(){
this.counter++;
},
decrement(){
this.counter--;
}
}
})
</script>
【页面展示】
02-v-on的参数问题
-
当通过methods中定义方法,以供@click调用时,需要注意的参数问题:
-
情况一:如果该方法不需要额外参数,那么方法后的括号可以不添加。
但是注意:如果方法本身中有一个参数,那么会默认原生事件event参数传递进去
-
情况二:如果需要同时传入某个参数,同时需要event时,可以通过$event传入事件。
03-v-on修饰符
- 1、.stop 停止冒泡
- 2、 .prevent 阻止默认行为
- 3、 .keyCode 只当事件是特定键触发时才触发回调
- 4、 .native 监听组件根元素的原生事件
- 5、 .once 只触发一次回调
04-条件判断
01-v-if、v-else-if、v-else的使用
<div id="app">
<!-- 方式1-->
<h2 v-if="score>=90">优秀</h2>
<h2 v-else-if="score>=80">良好</h2>
<h2 v-else-if="score>=60">及格</h2>
<h2 v-else>不及格</h2>
<!-- 方式2-->
<h1>{{result}}</h1>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
score: 99
},
computed:{
result(){
let showMessage = '';
if(this.score >= 90){
showMessage = '优秀'
}else if (this.score >= 80){
showMessage = '良好'
}else if (this.score >= 60){
showMessage = '及格'
}else {
showMessage = '不及格'
}
return showMessage
}
}
})
</script>
【页面展示】
02-用户登录切换案例
<div id="app">
<span v-if="isUser">
<label for="username">用户账号</label>
<input type="text" id="username" placeholder="用户账号" key="username">
</span>
<span v-else>
<label for="email">用户邮箱</label>
<input type="text" id="email" placeholder="用户邮箱" key="email">
</span>
<button @click="isUser = !isUser">切换类型</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
isUser:true
}
})
</script>
【页面展示】
05-循环遍历
01-v-for遍历数组
<div id="app">
<!-- 在遍历过程中没有使用索引值(下标值)-->
<ul>
<li v-for="item in names">{{item}}</li>
</ul>
<!-- 在遍历过程中获取索引值-->
<ul>
<li v-for="(item,index) in names">{{index+1}}-{{item}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
names:['123','456','789']
}
})
</script>
【页面展示】
02-v-for遍历对象
<div id="app">
<ul>
<li v-for="(value,key) in info">{{key}}:{{value}}</li>
</ul>
<ul>
<li v-for="(value,key,index) in info">{{index}}-{{key}}-{{value}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
info:{
name:'123',
age:18,
height:1.88
}
}
})
</script>
【页面展示】
03-响应式的数组方法
-
1、push() 尾部插入元素(可多个)
this.letters.push("123","456");
-
2、pop() 尾部删除元素
this.letters.pop();
-
3、shift() 头部删除元素
this.letters.shift();
-
4、unshift() 头部插入元素(可多个)
this.letters.unshift("123","456");
-
5、splice() 删除/插入/替换元素
删除:
this.letters.splice(1,2);//表示删除第一个元素的后面两个元素
插入:
this.letters.splice(1,0,"1","2","3");//表示在第一个元素后插入“1”,“2”,“3”这三个元素值
替换:
this.letters.splice(1,2,"1","2");//表示用“1”和“2”依次替换第一个元素后面的两个元素
-
6、sort() 排序
this.letters.sort();
-
7、 reverse方法 顺序反转
this.letters.reverse();
06-书籍购物车案例
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app">
<div v-if="books.length">
<table>
<thead>
<tr>
<th></th>
<th>书籍名称</th>
<th>出版日期</th>
<th>价格</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in books">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.date}}</td>
<td>{{item.price | showPrice}}</td>
<td>
<button @click="decrement(index)" v-bind:disabled="item.count <= 1">-</button>
{{item.count}}
<button @click="increment(index)">+</button>
</td>
<td><button @click="removeHandle(index)">移除</button></td>
</tr>
</tbody>
</table>
<h2>总价格:{{totalPrice | showPrice}}</h2>
</div>
<h2 v-else>购物车为空</h2>
</div>
<script src="../js/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
main.js
const app = new Vue({
el: '#app',
data:{
books:[
{
id:1,
name:'《算法导论》',
date:'2006-9',
price:85.00,
count:1
},
{
id:2,
name:'《UNIX编程艺术》',
date:'2006-2',
price:59.00,
count:1
},
{
id:3,
name:'《编程珠玑》',
date:'2008-10',
price:185.00,
count:1
},
{
id:4,
name:'《程序员教程》',
date:'2006-9',
price:35.00,
count:1
}
]
},
methods:{
increment(index){
this.books[index].count++;
},
decrement(index){
this.books[index].count--;
},
removeHandle(index){
this.books.splice(index,1)
}
},
computed:{
totalPrice(){
let totalPrice = 0;
for(let i = 0; i<this.books.length;i++){
totalPrice += this.books[i].price * this.books[i].count
}
return totalPrice
}
},
filters:{
showPrice(price){
return '¥' + price.toFixed(2)
}
}
})
style.css
table {
border: 1px solid #e9e9e9;
border-collapse: collapse;
border-spacing: 0;
}
th,td {
padding: 8px 16px;
border: 1px solid #e9e9e9;
text-align: left;
}
th {
background-color: #f7f7f7;
color: #5c6b77;
font-weight: 600;
}
【项目展示】
记得收藏啊😀😄