学习视频来源：B站《Vue、Vuejs从入门到精通》
个人在视频学习过程中也同步完成课堂练习等，现将授课材料与个人笔记分享出来。
创建vue模板，这样仅输入vue后按Tab可补齐内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<h2>{{message}}，李银河！</h2>
<!--mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式-->
<h2>{{firstName + ' ' +lastName}}</h2>
<h2>{{firstName}} {{lastName}}</h2>
<h2>{{counter * 2}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
firstName: 'kobe',
lastName: 'bryant',
counter: 100
}
})
</script>
</body>
</html>
<!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>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>{{url}}</h2>
<h2 v-html="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>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<h2 v-text="message"></h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊'
}
})
</script>
</body>
</html>
<!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>
<!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>
//在vue解析之前，div中有一个属性v-cloak
//在vue解析之后，div中没有一个属性v-cloak
setTimeout(function () {
const app = new Vue({
el: '#app',
data: {
message: '你好啊'
}
})
}, 1000)
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 错误的做法：这里不可以使用mustache语法-->
<!-- <img src="{{imgURL}}" alt="">-->
<!-- 正确的做法：使用v-bind指令-->
<img v-bind:src="imgURL" alt="">
<a v-bind:href="aHref">百度一下</a>
<!-- <h2>{{}}</h2>-->
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
imgURL: 'https://img13.360buyimg.com/img/s200x200_jfs/t1/50975/30/15545/168609/5dc985c4E06e8dbda/032be1072bde8b82.jpg!cc_100x100.webp',
aHref: 'http://baidu.com'
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 错误的做法：这里不可以使用mustache语法-->
<!-- <img src="{{imgURL}}" alt="">-->
<!-- 正确的做法：使用v-bind指令-->
<img v-bind:src="imgURL" alt="">
<a v-bind:href="aHref">百度一下</a>
<!-- <h2>{{}}</h2>-->
<!-- 语法糖的写法-->
<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://img13.360buyimg.com/img/s200x200_jfs/t1/50975/30/15545/168609/5dc985c4E06e8dbda/032be1072bde8b82.jpg!cc_100x100.webp',
aHref: 'http://baidu.com'
}
})
</script>
</body>
</html>
<!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 v-bind:class="{类名1: true, 类名2: boolean}"></h2>-->
<h2 class="title" v-bind:class="{active: isActive, line: isLine}">{{message}}</h2>
<h2 class="title" v-bind:class="getClasses()">{{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
},
getClasses: function () {
return {active: this.isActive, line: this.isLine}
}
}
})
</script>
</body>
</html>
<!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>
<h2 class="title" :class="getClasses()">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
active: 'aaaaa',
line: 'bbbbb'
},
methods: {
getClasses: function () {
return [this.active, this.line]
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- <h2 :style="{key(属性名): value(属性值)}">{{message}}</h2>-->
<!-- '50px'必须加上单引号，否则是当做一个变量去解析-->
<!-- <h2 :style="{fontSize: '50px'}">{{message}}</h2>-->
<!-- finalSize当成一个变量使用-->
<h2 :style="{fontSize: this.finalSize + 'px', backgroundColor: this.finalColor}">{{message}}</h2>
<h2 :style="getStyles()">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
finalSize: 100,
finalColor: 'red',
},
methods: {
getStyles: function () {
return {fontSize: this.finalSize + 'px', backgroundColor: this.finalColor}
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2 :style="[baseStyle, baseStyle1]">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
baseStyle: {backgroundColor: 'red'},
baseStyle1: {fontSize: '100px'},
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>{{firstName + ' ' + lastName}}</h2>
<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: 计算属性()
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
},
methods: {
getFullName() {
return this.firstName + ' ' + this.lastName
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<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: 'Unix编程艺术', price: 119},
{id: 111, name: '代码大全', price: 105},
{id: 112, name: '深入理解计算机原理', price: 98},
{id: 113, name: '现代操作系统', price: 87},
]
},
computed: {
totalPrice: function () {
// filter/map/reduce
let result = 0
for (let i=0; i<this.books.length; i++) {
result += this.books[i].price
}
return result
//
// for (let i in this.books) {}
//
// for (let book of this.books) {}
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>{{fullName}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: 'Kobe',
lastName: 'Bryant'
},
computed: {
// fullName: function () {
// return this.firstName + ' ' + this.lastName
// }
// name: 'coderwhy'
// 计算属性一般是没有set方法，只读属性
fullName: {
set: function (newValue) {
// console.log('-------------', newValue);
const names = newValue.split(' ');
this.firstName = names[0];
this.lastName = names[1];
},
get: function () {
return this.firstName + ' ' + this.lastName
}
}
// fullName: function () {
// return this.firstName + ' ' + this.lastName
// }
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 1.直接拼接：语法过于繁琐-->
<h2>{{firstName}} {{lastName}}</h2>
<!-- 2.通过定义methods-->
<!-- <h2>{{getFullName()}}</h2>-->
<!-- <h2>{{getFullName()}}</h2>-->
<!-- <h2>{{getFullName()}}</h2>-->
<!-- <h2>{{getFullName()}}</h2>-->
<!-- 3.通过computed-->
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: 'Kobe',
lastName: 'Bryant'
},
methods: {
getFullName: function () {
console.log('getFullName');
return this.firstName + ' ' + this.lastName
}
},
computed: {
fullName: function () {
console.log('fullName');
return this.firstName + ' ' + this.lastName
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
// ES5中的var是没有块级作用域的(if/for)
// ES6中的let是有块级作用域的(if/for)
// ES5之前因为if和for都没有块级作用域的概念，所以在很多时候，我们都必须借助于function的作用域来解决引用外面变量的问题
// ES6中，加入了let，let它是有if和for块级作用域的
//1.变量作用域：变量在什么范围内是可用
// {
// var name = 'why';
// console.log(name);
// }
// console.log(name);
//2.没有块级作用域引起的问题：if的块级
// var func;
// if (true) {
// var name = 'why';
//
// func = function () {
// console.log(name);
// }
// // func()
// }
// name = 'kobe'
// func()
// console.log(name);
var name = 'why'
function abc(name) {
console.log(name);
}
abc(name)
name = 'kobe'
//3.没有块级作用域引起的问题：for的块级
//为什么闭包可以解决问题：函数是一个作用域，
// var btns = document.getElementsByTagName('button');
// for (var i=0; i<btns.length; i++) {
// (function (i) { // 0
// btns[i].addEventListener('click', function () {
// console.log('第' + i + '个按钮被点击');
// })
// })(i)
// }
const btns = document.getElementsByTagName('button')
for (let i=0; i<btns.length; i++) {
btns[i].addEventListener('click', function () {
console.log('第' + i + '个按钮被点击');
})
}
</script>
</body>
</html>
---------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<script>
//1.没有块级作用域引起的问题：for的块级
//为什么闭包可以解决问题：函数是一个作用域，
var btns = document.getElementsByTagName('button')
for (let i=0; i<btns.length; i++) {
btns[i].addEventListener('click', function () {
console.log('第' + i + '个按钮被点击');
})
}
//1.情况一：ES5中没有使用闭包（错误的方式）
//2.情况二：ES5中使用闭包
//ES6的let
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 1.注意一：一旦给const修饰的标识符被赋值之后，不能修改
// const name = 'why';
// name = 'abc';
//2.注意二：在使用const定义标识符，必须进行赋值
// const name;
//3.注意三：常量的含义是指向的对象不能修改，但是可以改变对象内部的属性
const obj = {
name: 'why',
age: 18,
height: 1.88
}
// obj = {}
obj.name = 'kobe';
obj.age = 40;
obj.height = 1.87
console.log(obj);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// const obj = new Object()
// const obj = {
// name: 'why',
// age: 18,
// run: function () {
// console.log('在奔跑');
// },
// eat: function () {
// console.log('在吃东西');
// }
//1.属性的增强写法
const name = 'why';
const age = 18;
const height = 1.88
// ES5的写法
// const obj = {
// name: name,
// age: age,
// height: height
// }
const obj = {
name,
age,
height,
}
console.log(obj);
//2.函数的增强写法
// const obj = {
// run: function () {
//
// },
// eat: function () {
//
// }
// }
const obj = {
run() {
},
eat() {
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>{{counter}}</h2>
<!-- <h2 v-bind:title></h2>-->
<!-- <h2 :title></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>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 1.事件调用的方法没有参数-->
<button @click="btn1Click()">按钮1</button>
<button @click="btn1Click">按钮1</button>
<!-- 2.在事件定义时，写函数时省略了小括号，但是方法本身是需要一个参数的，这个时候，Vue会默认将浏览器生产的event事件对象作为参数传入到方法-->
<!-- <button @click="btn2Click(123)">按钮2</button>-->
<button @click="btn2Click()">按钮2</button>
<!-- 3.在方法定义时，我们需要event对象，同时又需要其他参数-->
<!-- 在调用方法时，如何手动的获取到浏览器参数的event对象： $event-->
<button @click="btn3Click(123, $event)">按钮3</button>
</div>
<script src = "../js/vue.js"></script>
<script>
const app = new Vue ({
el: '#app',
data: {
message: '你好啊'
},
methods: {
btn1Click() {
console.log("btn1Click");
},
btn2Click(event) {
console.log('----------', abc);
},
btn3Click(abc, event) {
console.log('++++++++', abc, event)
}
}
})
// 如果函数需要参数，但是没有传入，那么参数的形参为undefined
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 1..stop修饰符的使用-->
<div @click="divClick">
aaaaa
<button @click.stop="btnClick">按钮</button>
</div>
<!-- 2..prevent修饰符的使用-->
<br>
<form action="baidu">
<input type="submit" value="提交" @click.prevent="submitClick"></input>
</form>
<!-- 3..监听某个键盘的键帽-->
<input type="text" @keyup.enter="keyUp">
<!-- 4..once修饰符的使用-->
<button @click.once="btn2Click">按钮2</button>
</div>
<script src = "../js/vue.js"></script>
<script>
const app = new Vue ({
el: '#app',
data: {
counter: 0
},
methods: {
btnClick() {
console.log("btnClick");
},
divClick() {
console.log("divClick");
},
submitClick() {
console.log('submitClick');
},
keyUp() {
console.log('keyUp');
},
btn2Click() {
console.log('btn2Click');
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2 v-if="isShow">
<div>abc</div>
<div>abc</div>
<div>abc</div>
<div>abc</div>
<div>abc</div>
<div>abc</div>
</h2>
</div>
<script src = "../js/vue.js"></script>
<script>
const app = new Vue ({
el: '#app',
data: {
message: '你好啊',
isShow: true
}
})
</script>
</body>
</html>
----------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2 v-if="isShow">
<div>abc</div>
<div>abc</div>
<div>abc</div>
<div>abc</div>
<div>abc</div>
<div>abc</div>
</h2>
<h1 v-else>isShow为false时，显示我</h1>
</div>
<script src = "../js/vue.js"></script>
<script>
const app = new Vue ({
el: '#app',
data: {
message: '你好啊',
isShow: true
}
})
</script>
</body>
</html>
------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2 v-if="score>=90">优秀</h2>
<h2 v-else-if="score>=80">良好</h2>
<h2 v-else-if="score>=60">及格</h2>
<h2 v-else>不及格</h2>
<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 = '良好'
}
// ...
return showMessage
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<span v-if="isUser">
<label for="username">用户账号</label>
<input type="text" id="username" placeholder="用户账号">
</span>
<span v-else>
<labl for="username">用户邮箱</labl>
<input type="text" id="email" placeholder="用户邮箱">
</span>
<button @click="isUser = !isUser">切换类型</button>
</div>
<script src = "../js/vue.js"></script>
<script>
const app = new Vue ({
el: '#app',
data: {
isUser: true
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<span v-if="isUser">
<label for="username">用户账号</label>
<input type="text" id="username" placeholder="用户账号" key="username">
</span>
<span v-else>
<labl for="username">用户邮箱</labl>
<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>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- v-if: 当条件为false时，包含v-if指令的元素，根本就不会存在dom中-->
<h2 v-if="isShow" id="aaa">{{message}}</h2>
<!-- v-show: 当条件为false时，v-show只是给我们的元素添加一个行内样式：display: none-->
<h2 v-show="isShow" id="bbb"></h2>
</div>
<script src = "../js/vue.js"></script>
<script>
const app = new Vue ({
el: '#app',
data: {
message: '你好啊',
isShow: true
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 1.在遍历的过程中，没有使用索引值（下标值）-->
<ul>
<li v-for="item in names">{{item}}</li>
</ul>
<!-- 2.在遍历的过程中，获取索引值-->
<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: ['why', 'kobe', 'james', 'curry']
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 1.在遍历对象的过程中，如果只是获取一个值，那么获取到的是value-->
<ul>
<li v-for="item in info">{{item}}</li>
</ul>
<!-- 2.获取key和value 格式：(value, key)-->
<ul>
<li v-for="(value, key) in info">{{value}}-{{key}}</li>
</ul>
<!-- 3.获取key和value和index 格式：(value, key, index)-->
<ul>
<li v-for="(value, key, index) in info">{{value}}-{{key}}-{{index}}</li>
</ul>
</div>
<script src = "../js/vue.js"></script>
<script>
const app = new Vue ({
el: '#app',
data: {
info: {
name: 'why',
age: 18,
height: 1.88
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in letters" :key="item">{{item}}</li>
</ul>
</div>
<script src = "../js/vue.js"></script>
<script>
const app = new Vue ({
el: '#app',
data: {
letters: ['A', 'B', 'C', 'D', 'E']
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in letters">{{item}}</li>
</ul>
<button @click="btnClick">按钮</button>
</div>
<script src = "../js/vue.js"></script>
<script>
const app = new Vue ({
el: '#app',
data: {
letters: ['a', 'b', 'c', 'd']
},
methods: {
btnClick() {
//1.push方法
// this.letters.push('aaa')
// this.letters.push('aaa', 'bbb', 'ccc')
//2.pop()：删除数组中的最后一个元素
// this.letters.pop()
//3.shift()：删除数组中的第一个元素
// this.letters.shift();
//4.unshift()：在数组最前面添加元素
// this.letters.unshift()
// this.letters.unshift('aaa', 'bbb', 'ccc)
//5.splice作用：删除元素/插入元素/替换元素
//删除元素：第二个参数传入要删除几个元素（如果没有传，就删除后面所有的元素）
//替换元素：第二个参数，表示我们要替换几个元素，后面是用来替换前面的元素
//插入元素：第二个安叔，传入0，并且后面跟上要插入的元素
//splice(start, )
// this.letters.splice(1, 3, 'm', 'n', 'l', 'x')
// this.letters.splice(1, 0, 'x', 'y', 'z')
//6.sort()
// this.letters.sort()
//7.reverse()
// this.letters.reverse()
//注意：通过索引值修改数组中的元素
// this.letters[0] = 'bbbbb';
// this.letters.splice(0, 1, 'bbbbb')
//set(要修改的对象，索引值， 修改后的值)
Vue.set(this.letters, 0, 'bbbbb')
}
}
})
</script>
</body>
</html>
作业解析
<!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"
:class="{active: currentIndex == index}"
@click="liClick(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>
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}}</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>
<script>
</script>
</body>
</html>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;
}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: 39.00,
count: 1
},
{
id: 4,
name: '《代码大全》',
date: '2006-3',
price: 128.00,
count: 1
},
]
},
methods: {
// getFinalPrice(price) {
// return '￥' + price.toFixed(2)
// }
increment(index) {
return this.books[index].count++;
},
decrement(index) {
return this.books[index].count--;
},
removeHandle(index) {
this.books.splice(index, 1)
}
},
computed: {
totalPrice() {
//1.普通的for循环
// let totalPrice = 0
// for (let i = 0; i < this.books.length; i++) {
// totalPrice += this.books[i].price * this.books[i].count
// }
// return totalPrice
//2.for ( le i in this.books)
// let totalPrice = 0
// for (let i in this.books) {
// totalPrice += this.books[i].price * this.books[i].count
// }
// return totalPrice
//3.for (let i of this.books)
// let totalPrice = 0
// for (let item of this.books) {
// totalPrice += item.price * item.count
// }
// return totalPrice
// reduce
return this.books.reduce(function (preValue, book) {
return preValue + book.price * book.count
}, 0)
}
},
filters: {
showPrice(price) {
return '￥' + price.toFixed(2)
}
}
}
)
//编程范式：命令式编程/声明式编程
//编程范式：面向对象编程（第一公民：对象）/函数式编程（第一公民：函数）
// filter/map/reduce
// filter中的回调函数有一个要求：必须返回一个boolean值
// true:当返回true时，函数内部会自动将这次回调的n加入到新的数组中
// false:当返回false时，函数内部会过滤掉这次的n
// const nums = [10, 20, 111, 222, 444, 40, 50]
//
// let total = nums.filter(n => n < 100).map(n => n * 2).reduce((pre, n) => pre + n );
// console.log(total);
// let total = nums.filter(function (n) {
// return n < 100
// }).map(function (n) {
// return n * 2
// }).reduce(function (preValue, n) {
// return preValue + n
// }, 0)
// console.log(total);
// // 1.filter函数的使用
// // 10, 20, 40, 50
// let newNums = nums.filter(function (n) {
// return n < 100
// })
// console.log(newNums);
//
// // 2.map函数的使用
// // 20, 40, 80, 100
// let new2Nums = newNums.map(function (n) {
// return n * 2
// })
// console.log(new2Nums);
//
// // 3.reduce函数的使用
// // reduce作用对数组中所有的内容进行汇总
// let total = new2Nums.reduce(function (preValue, n) {
// return preValue + n
// }, 0)
// console.log(total);
// 第一次：preValue 0 n 20
// 第二次：preValue 20 n 40
// 第三次：preValue 60 n 80
// 第四次：preValue 140 n 100
// 240
// //1.需求：取出所有小于100的数字
// let newNums=[]
// for (let n of nums) {
// if (n < 100) {
// newNums.push(n)
// }
// }
//
// //2.将所有小于100的数字进行转化：全部*2
// let new2Nums = []
// for (let n of newNums) {
// new2Nums.push(n * 2)
// }
//
// //3.将所有new2Nums数字相加，得到最终的结果
// let total = 0
// for (let n of new2Nums) {
// total += n
// }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" v-model="message">
{{message}}
</div>
<script src = "../js/vue.js"></script>
<script>
const app = new Vue ({
el: '#app',
data: {
message: '你好啊'
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" v-model="message">
<!-- <input type="text" :value="message" @input="valueChange">-->
<!-- <input type="text" :value="message" @input="message = $event.target.value">-->
<h2>{{message}}</h2>
</div>
<script src = "../js/vue.js"></script>
<script>
const app = new Vue ({
el: '#app',
data: {
message: '你好啊'
},
methods: {
valueChange(event) {
this.message = event.taget.value;
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<label for="male">
<input type="radio" id="male" value="男" v-model="sex" >男
</label>
<label for="female">
<input type="radio" id="female" value="女" v-model="sex">女
</label>
<h2>您选择的性别是：{{sex}}</h2>
</div>
<script src = "../js/vue.js"></script>
<script>
const app = new Vue ({
el: '#app',
data: {
message: '你好啊',
sex: '男'
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 1.checkbox单选框-->
<!-- <label for="license">-->
<!-- <input type="checkbox" id="license" v-model="isAgree">同意协议-->
<!-- </label>-->
<!-- <h2>您选择的是：{{isAgree}}</h2>-->
<!-- <button :disabled="!isAgree">下一步</button>-->
<!-- 2.checkbox多选框-->
<input type="checkbox" value="篮球" v-model="hobbies">篮球
<input type="checkbox" value="足球" v-model="hobbies">足球
<input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
<input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
<h2>您的爱好是：{{hobbies}}</h2>
</div>
<script src = "../js/vue.js"></script>
<script>
const app = new Vue ({
el: '#app',
data: {
message: '你好啊',
isAgree: false, //单选框
hobbies: [] //多选框
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 1.选择1个-->
<select name="abc" v-model="fruit">
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="榴莲">榴莲</option>
<option value="葡萄">葡萄</option>
</select>
<h2>您选择的水果是：{{fruit}}</h2>
<!-- 2.选择多个-->
<select name="abc" v-model="fruits" multiple>
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="榴莲">榴莲</option>
<option value="葡萄">葡萄</option>
</select>
<h2>您选择的水果是：{{fruits}}</h2>
</div>
<script src = "../js/vue.js"></script>
<script>
const app = new Vue ({
el: '#app',
data: {
message: '你好啊',
fruit: '香蕉',
fruits: []
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 1.checkbox单选框-->
<!-- <label for="license">-->
<!-- <input type="checkbox" id="license" v-model="isAgree">同意协议-->
<!-- </label>-->
<!-- <h2>您选择的是：{{isAgree}}</h2>-->
<!-- <button :disabled="!isAgree">下一步</button>-->
<!-- 2.checkbox多选框-->
<input type="checkbox" value="篮球" v-model="hobbies">篮球
<input type="checkbox" value="足球" v-model="hobbies">足球
<input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
<input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
<h2>您的爱好是：{{hobbies}}</h2>
<label v-for="item in originHobbies" :for="item">
<input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
</label>
</div>
<script src = "../js/vue.js"></script>
<script>
const app = new Vue ({
el: '#app',
data: {
message: '你好啊',
isAgree: false, //单选框
hobbies: [], //多选框
originHobbies: ['篮球', '足球', '乒乓球', '羽毛球', '台球', '高尔夫球']
}
})
</script>
</body>
</html>