邂逅Vuejs
学习视频来自b站，传送门 https://www.bilibili.com/video/BV15741177Eh
内容概述
简单认识
Vue.js安装
01-Vue初体验
01-HelloVuejs
编程工具不重要，IDEA、WS都可以
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p>{
{message}}</p>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
// let(变量)/const（常量）
//编程范式:声明式式编程
new Vue({
el: '#app',//挂载要管理的元素
data: {
//定义数据
message: 'hello，Vuejs'
}
})
//元素js的做法(编程范式:命令式编程)
// 1.创建div元素,设置id属性
// 2.定义一个变量叫message
// 3.将message变量放在前面的div元素中显示
</script>
</html>
02-vue列表展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="../js/vue.js"></script>
<body>
<div id="app">
<ul>
<!-- <li>{
{movies[0]}}</li>
<li>{
{movies[1]}}</li>
<li>{
{movies[2]}}</li>-->
<li v-for="item in movies">{
{item}}</li>
</ul>
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
message: 'Hello',
movies: ['火影忍者','银魂','柯南']
}
})
</script>
</html>
03-vue案例-计数器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="../js/vue.js"></script>
<body>
<div id="app">
<h1>{
{message}}{
{count}}</h1>
<!--<button v-on:click="count++">+</button>
<button v-on:click="count--">-</button>-->
<button v-on:click="add">+</button>
<button @click="sub">-</button>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
message: '计数器',
count: 0
},
methods: {
add: function () {
console.log("加被执行");
this.count++
},
sub: function () {
console.log("减被执行");
this.count--
}
}
})
</script>
</html>
Vue中的MVVM
开发中什么时候称之为方法,什么时候称之为函数?
- 方法: method
- 函数: function
04-vue的template
<div id="app">
<p>{
{message}}</p>
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'hello，Vuejs'
}
})
</script>
此后在Html页面直接<vue>回车即可
模板语法
内容概述
02-插值的操作
01-Mustache语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>{
{message}}</h2>
<h2>{
{message}},李银河!</h2>
<h2>{
{firstName +" "+ lastName}}</h2>
<h2>{
{count*2}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: ' #app',
data: {
message: ' 你好啊',
firstName: 'kobe',
lastName: 'bryant',
count: 100
}
})
</script>
</body>
</html>
02-v-once指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p>{
{message}}</p>
<p v-once>{
{message}}</p>
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'hello，Vuejs'
}
})
</script>
</body>
</html>
3-v-html指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p>{
{url}}</p>
<p v-html="url"></p>
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'hello，Vuejs',
url: ' <a href="http://www.baidu.com">百度一下</a>'
}
})
</script>
</body>
</html>
04-v-text指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p>{
{message}}</p>
<p v-text="message"></p>
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'hello，Vuejs'
}
})
</script>
</body>
</html>
05-v-pre指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p>{
{message}}</p>
<p v-pre>{
{message}}</p>
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'hello，Vuejs'
}
})
</script>
</body>
</html>
06-v-cloak指令
<!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>
<p>{
{message}}</p>
</div>
<script src="../js/vue.js"></script>
<script>
//在vue解析之前，div中有一个属性V-cloak
//在vue解析之后，div中没有一个属性v-cloak
setTimeout(function () {
new Vue({
el: '#app',
data: {
message: 'hello，Vuejs'
}
})
}, 2000)
</script>
</body>
</html>
03-动态绑定属性
01-v-bind的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p>{
{message}}</p>
<img v-bind:src="imgURL">
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'hello，Vuejs',
imgURL: 'https://img10.360buyimg.com/seckillcms/s140x140_jfs/t1/78070/33/7757/189352/5d5b612fE5c86d0c0/8426a625f7216e70.jpg.webp'
}
})
</script>
</body>
</html>
v-bind语法糖
<!--语法糖-->
<img :src="imgURL">
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 v-bind:class="{key1: value1, key2: value2}">{ {message}}</h2>-->
<!--<h2 v-bind:class="{类名1: true, 类名2: boolean}">{ {message}}</h2>-->
<h2 :class="{active:isActive,line:isLine}">{
{message}}</h2>
<h2 :class="getClass()">{
{message}}</h2>
<button @click="btnClick">+++</button>
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'hello，Vuejs',
isActive: true,
isLine: true
},
methods: {
btnClick: function () {
this.isActive = !this.isActive
},
getClass: function () {
return {
active: this.isActive, line: this.isLine}
}
}
})
</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>
<h2 class="title" :class="['active', 'line']">{ {message}}</h2>
<h2 class="title" :class="getClass()">{ {message}}</h2>
</div>
<script src="../js/vue. js"></script>
<script>
const app = new Vue({
el: ' #app',
data: {
message: '你好啊',
active: 'aaaaaa',
line: 'bbbbbbb'
},
methods: {
getClass: function () {
return [this.active, this.line]
}
}
})
</script>
</body>
</html>
04-作业(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">
<p>{
{message}}</p>
<ul>
<li :class="{active: isActive==index?true:false}" @click="changeColor(index)" v-for="(m,index) in movies">{
{m}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'hello，Vuejs',
movies: ["我爱罗", "手鞠", "勘九郎"],
isActive: 0
},
methods: {
changeColor: function (index) {
this.isActive=index
}
}
})
</script>
</body>
</html>
05-v-bind动态绑定style(对象语法)
<!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>-->
<!--<h2 :style="{fontSize: finalSize + 'px' }">{
{message}}</h2> -->
<!--finalSize当成一个变量使用-->
<h2 :style="{
fontSize: finalSize}">{
{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'hello，Vuejs',
finalSize: '50px'
}
})
</script>
</body>
</html>
06-v-bind动态绑定style(数组语法)
<!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>-->
<!--<h2 :style="{fontSize: finalSize + 'px' }">{
{message}}</h2> -->
<!--finalSize当成一个变量使用-->
<h2 :style="{
fontSize: finalSize}">{
{message}}</h2>
<h2 :style="getStyle()">{
{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'hello，Vuejs',
finalSize: '50px'
},
methods: {
getStyle: function () {
return {
fontSize: this.finalSize}
}
}
})
</script>
</body>
</html>
06-v-bind动态绑定style(数组语法)
<!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>
new Vue({
el: '#app',
data: {
message: 'hello，Vuejs',
baseStyle: {
backgroundColor: 'red'},
baseStyle1: {
fontSize: '20px'}
}
})
</script>
</body>
</html>
04-计算属性
01-计算属性的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-什么是计算属性</title>
</head>
<body>
<div id="app">
<h2>{
{firstName}} {
{lastName}}</h2>
<h2>{
{fullName}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: 'Kobe',
lastName: 'Bryant'
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName
}
},
// methods: {
// fullName() {
// return this.firstName + ' ' + this.lastName
// }
// }
})
</script>
</body>
</html>
数组对象的区别
数组[, , ,]
对象{key:value,key:value,key:value}
02-计算属性复杂操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-计算属性复杂操作</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: [
{
name: 'Java编程思想', price: 99, count: 3},
{
name: 'Unix编程艺术', price: 118, count: 2},
{
name: 'Vuejs程序设计', price: 89, count: 1},
]
},
computed: {
totalPrice() {
// 1.第一种方式
/*
let total = 0
this.books.forEach(book => {
total += book.price * book.count
})
return total
*/
// 2.第二种方式
// let total = 0
// for (let i in this.books) {
// const book = this.books[i]
// total += book.price * book.count
// }
// return total
// 3.第三种方式
return this.books.reduce((preValue, book) => {
return preValue + book.price * book.count
}, 0)
}
}
})
</script>
</body>
</html>
03-计算属性setter和getter
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03-计算属性setter和getter</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: {
//一般没有set方法
fullName: {
set(newValue) {
const names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[1]
},
get() {
return this.firstName + ' ' + this.lastName
}
}
}
})
</script>
</body>
</html>
04-computed和methods的区别
methods会多次执行，computed有缓存数据不发生不发生变化就会直接调用缓存取数据
建议使用computed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04-computed和methods的区别</title>
</head>
<body>
<div id="app">
<h2>{
{fullName}}</h2>
<h2>{
{fullName}}</h2>
<h2>{
{fullName}}</h2>
<h2>{
{getFullName()}}</h2>
<h2>{
{getFullName()}}</h2>
<h2>{
{getFullName()}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: 'LeBron',
lastName: 'James'
},
computed: {
fullName() {
console.log('调用了computed中的fullName');
return this.firstName + ' ' + this.lastName
}
},
methods: {
getFullName() {
console.log('调用了methods中的getFullName');
return this.firstName + ' ' + this.lastName
}
}
})
</script>
</body>
</html>
00-ES6补充
01-块级作用域
<!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(bbb) {
// bbb = 'why'
console.log(bbb);
}
abc(name)
name = 'kobe'
// 3.没有块级作用域引起的问题: for的块级
// 为什么闭包可以解决问题: 函数是一个作用域.
// var btns = document.getElementsByTagName('button');
// for (var i=0; i<btns.length; i++) {
// (function (num) { // 0
// btns[i].addEventListener('click', function () {
// console.log('第' + num + '个按钮被点击');
// })
// })(i)
// }
const btns = document.getElementsByTagName('button')
for (let i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', function () {
console.log('第' + i + '个按钮被点击');
})
}
// ES5
// var i = 5
// {
// btns[i].addEventListener('click', function () {
// console.log('第' + i + '个按钮被点击');
// })
// }
//
// {
// btns[i].addEventListener('click', function () {
// console.log('第' + i + '个按钮被点击');
// })
// }
//
//
// {
// btns[i].addEventListener('click', function () {
// console.log('第' + i + '个按钮被点击');
// })
// }
//
//
// {
// btns[i].addEventListener('click', function () {
// console.log('第' + i + '个按钮被点击');
// })
// }
//
// {
// btns[i].addEventListener('click', function () {
// console.log('第' + i + '个按钮被点击');
// })
// }
//
// // ES6
// { i = 0
// btns[i].addEventListener('click', function () {
// console.log('第' + i + '个按钮被点击');
// })
// }
//
// { i = 1
// btns[i].addEventListener('click', function () {
// console.log('第' + i + '个按钮被点击');
// })
// }
// { i = 2
// btns[i].addEventListener('click', function () {
// console.log('第' + i + '个按钮被点击');
// })
// }
// { i = 3
// btns[i].addEventListener('click', function () {
// console.log('第' + i + '个按钮被点击');
// })
// }
// { i = 4
// btns[i].addEventListener('click', function () {
// console.log('第' + i + '个按钮被点击');
// })
// }
</script>
</body>
</html>
03-const的使用
<!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 = {}
console.log(obj);
obj.name = 'kobe';
obj.age = 40;
obj.height = 1.87;
console.log(obj);
</script>
</body>
</html>
04- 对象增强写法
<!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.函数的增强写法
// ES5的写法
// const obj = {
// run: function () {
//
// },
// eat: function () {
//
// }
// }
const obj = {
run() {
},
eat() {
}
}
</script>
</body>
</html>
05-事件监听
01-v-on基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-v-on基本使用</title>
</head>
<body>
<div id="app">
<h2>{
{counter}}</h2>
<button v-on:click="counter++">点击按钮1</button>
<button v-on:click="btnClick()">点击按钮2</button>
<!--语法糖-->
<button @click="counter++">点击按钮3</button>
<button @click="btnClick()">点击按钮4</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
counter: 0
},
methods: {
btnClick() {
this.counter++
}
}
})
</script>
</body>
</html>
02-v-on参数问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-v-on参数问题</title>
</head>
<body>
<div id="app">
<h2>点击次数: {
{counter}}</h2>
<!--情况一: 方法没有参数-->
<button @click="btnClick1">按钮1</button>
<button @click="btnClick1()">按钮1</button>
<!--情况二: 如果方法有参数-->
<!--1.调用时不传入参数,会默认将event作为第一个参数传入-->
<button @click="btnClick2">按钮2</button>
<!--2.调用时不传入参数,那么参数为undefined-->
<button @click="btnClick2()">按钮2</button>
<!--情况三: 如果方法有参数,并且希望传入event-->
<button @click="btnClick3(10, $event)">按钮3</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
counter: 0
},
methods: {
btnClick1() {
console.log('按钮1被点击');
},
btnClick2(payload) {
console.log('按钮2被点击', payload);
},
btnClick3(num, event) {
console.log('按钮3被点击', num, event);
}
}
})
</script>
</body>
</html>
03-v-on停止冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03-v-on停止冒泡</title>
</head>
<body>
<div id="app">
<div @click="divClick">
<!--点击按钮div绑定的点击事件不会被触发-->
<button @click.stop="btnClick">按钮</button>
</div>
<!--阻止默认行为（此时不会跳转链接，而是打印）-->
<a href="http://www.baidu.com" @click.prevent="aClick">百度一下</a>
<!--<input type="text" @keyup.enter="onEnter">-->
<!--监听键盘-->
<input type="text" @keyup.13="onEnter">
<button @click.once="btnClick"></button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
},
methods: {
divClick() {
console.log('divClick');
},
btnClick() {
console.log('btnClick');
},
aClick() {
console.log('aClick');
},
onEnter() {
console.log('enter被点击');
}
}
})
</script>
</body>
</html>
06-条件判断
01-v-if的使用
<!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>
{
{message}}
</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
isShow: true
}
})
</script>
</body>
</html>
02-v-if和v-else的使用
<!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>
{
{message}}
</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>
03-v-if和v-else-if的使用v-else的使用
<!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>
04-用户登录切换的案例
<!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>
<label for="email">用户邮箱</label>
<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>
05-用户登录切换的案例（小问题）
用key做唯一标识
<!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>
<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>
</body>
</html>
06-v-show的使用
<!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">{
{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
isShow: true
}
})
</script>
</body>
</html>
07-循环遍历
01-v-for遍历数组
<!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>
02-v-for遍历对象
<!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>
组件的key属性
03-v-for使用过程添加key
<!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>
04-哪些数组的方法是响应式的
splice()的用法 https://www.w3school.com.cn/jsref/jsref_splice.asp
<!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('aaaa', 'bbbb', 'cccc')
// 2.pop(): 删除数组中的最后一个元素（最后push进的数据）
// this.letters.pop();
// 3.shift(): 删除数组中的第一个元素
// this.letters.shift();
// 4.unshift(): 在数组最前面添加元素
// this.letters.unshift()
// this.letters.unshift('aaa', 'bbb', 'ccc')
// 5.splice作用: 删除元素/插入元素/替换元素
// 删除元素: 第二个参数传入你要删除几个元素(如果没有传,就删除后面所有的元素)
// 替换元素: 第二个参数, 表示我们要替换几个元素, 后面是用于替换前面的元素
// 插入元素: 第二个参数, 传入0, 并且后面跟上要插入的元素
// splice(start)
// splice(start):
this.letters.splice(1, 3, 'm', 'n', 'l', 'x')
// this.letters.splice(1, 0, 'x', 'y', 'z')
// 5.sort()
// this.letters.sort()
// 6.reverse()
// this.letters.reverse()
// 注意: 通过索引值修改数组中的元素
// this.letters[0] = 'bbbbbb';
// this.letters.splice(0, 1, 'bbbbbb')
// set(要修改的对象, 索引值, 修改后的值)
// Vue.set(this.letters, 0, 'bbbbbb')
}
}
})
// function sum(num1, num2) {
// return num1 + num2
// }
//
// function sum(num1, num2, num3) {
// return num1 + num2 + num3
// }
// function sum(...num) {
// console.log(num);
// }
//
// sum(20, 30, 40, 50, 601, 111, 122, 33)
</script>
</body>
</html>
08-书籍购物车案例
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>
<script>
</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: 39.00,
count: 1
},
{
id: 4,
name: '《代码大全》',
date: '2006-3',
price: 128.00,
count: 1
},
]
},
methods: {
// getFinalPrice(price) {
// return '¥' + price.toFixed(2)//保留两位小数
// }
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
// for (let i in/of this.books)
// reduce
}
},
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;
}
高阶函数（补充）
// 编程范式: 命令式编程/声明式编程
// 编程范式: 面向对象编程(第一公民:对象)/函数式编程(第一公民:函数)
// 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 (prevValue, n) {
//对数据进行汇总，prevValue上一次返回的值
return prevValue + 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) { // 20
// 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)
// }
//
// console.log(new2Nums);
//
//
// // 3.需求:将所有new2Nums数字相加,得到最终的记过
// let total = 0
// for (let n of new2Nums) {
// total += n
// }
//
// console.log(total);
09-v-mode使用
01-v-mode的基本使用
<!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>
02-v-mode的原理
<!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.target.value;//input中最新输入的值
}
}
})
</script>
</body>
</html>
03-v-model结合redio类型
<!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>
04-v-model结合checkbox类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--1.checkbox单选框-->
<label for="agree">
<input type="checkbox" id="agree" 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>
:for就是label里面的for 和对应的input里面的id配对
05-v-model结合select类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--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>
06-v-model修饰符的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--1.修饰符: lazy-->
<input type="text" v-model.lazy="message">
<h2>{
{message}}</h2>
<!--2.修饰符: number-->
<input type="number" v-model.number="age">
<h2>{
{age}}-{
{typeof age}}</h2>
<!--3.修饰符: trim-->
<input type="text" v-model.trim="name">
<h2>您输入的名字:{
{name}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
age: 0,
name: ''
}
})
var age = 0
age = '1111'
age = '222'
</script>
</body>
</html>