目录
5.v-cloak：如果script延迟加载，那么加载之前对应的值不显示
代码放到码云上了，可以自己拉取：https://gitee.com/cxy-xupeng/vue-test.git
一、Mustache（插入赋值语法）
就是把new Vue里面的值插入到document里面。赋值的方法很灵活。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<h2>{
{message}}</h2>
<h3>{
{firstName+lastName}}</h3>
<h3>{
{firstName+' '+lastName}}</h3>
<h3>{
{firstName}} {
{lastName}}</h3>
<h3>{
{counter *2}}</h3>
</div>
<script src="../js/vue.js"></script>
<script>
//let（修饰变量）,const（修饰常量）
//编程范式：声明式编程
const app = new Vue({
el:'#app',//用于挂载要管理的元素
data:{//定义数据
message:'你好，徐鹏',
firstName:'打工人',
lastName:'程序员',
counter:100
}
})
</script>
</body>
</html>
1.v-once：只会显示第一次数据，不会改变
我们知道，修改名称对应的值，那么值会自己变。如果业务场景不允许再改变怎么办？用v-once
因为加了v-once，所以我们在下面变动，上面的值没变
2.v-html：以html格式展示文本
对于一些html的文本，不能原样展示，要用v-html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<h2 v-once>{
{message}}</h2>
<h2>{
{url}}</h2>
<h2 v-html="url2"></h2>
</div>
<script src="../js/vue.js"></script>
<script>
//let（修饰变量）,const（修饰常量）
//编程范式：声明式编程
const app = new Vue({
el:'#app',//用于挂载要管理的元素
data:{//定义数据
message:'你好，徐鹏',
url:'<a href="http://www.baidu.com">百度一下</a>',
url2:'<a href="http://www.baidu.com">百度一下</a>'
}
})
</script>
</body>
</html>
3.v-text：显示文本（没啥用，不建议使用）
跟普通赋值没啥区别，而且既用v-text，又用{ {}}，后面会覆盖前者。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<h2 v-text="message"></h2>
</div>
<script src="../js/vue.js"></script>
<script>
//let（修饰变量）,const（修饰常量）
//编程范式：声明式编程
const app = new Vue({
el:'#app',//用于挂载要管理的元素
data:{//定义数据
message:'你好，徐鹏'
}
})
</script>
</body>
</html>
4.v-pre：将值原样输入
我们如果真的是想输出{ {message}}这个字符串，而不是它对应的结果，要用v-pre。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<h2>{
{message}}</h2>
<h2 v-pre>{
{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
//let（修饰变量）,const（修饰常量）
//编程范式：声明式编程
const app = new Vue({
el:'#app',//用于挂载要管理的元素
data:{//定义数据
message:'你好，徐鹏'
}
})
</script>
</body>
</html>
5.v-cloak：如果script延迟加载，那么加载之前对应的值不显示
如果我们new Vue里的script因为一些原因没加载，那么对应显示在页面上的值为{ {message}}，这种显示不行。所以在渲染好之前我们不显示
v-cloak特性：vue解析之前可以有v-cloak，vue解析之后一定没有v-cloak。所以只要有v-cloak，就表示他下面的内容，如果没渲染好就不展示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<h2>{
{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
setTimeout(function(){
const app = new Vue({
el:'#app',//用于挂载要管理的元素
data:{//定义数据
message:'你好，徐鹏'
}
})
},1000)
</script>
</body>
</html>
二、v-bind：绑定属性
1.v-bind基本使用
我们之前用{ {}}绑定值，属性可以用{ {}}吗？不能，会报错。
对于一些链接，图片等属性，我们不想写死，想写成动态的。这就需要绑定属性v-bind。
试想一下，imgURL是动态的图片地址，我们怎么告诉img标签对应的src对应的动态地址呢？用v-bind
2.v-bind语法糖：v-bind简写
因为v-bind用的很多，所以简写：直接：加后面的，省略v-bind
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<img v-bind:src="imgURL" /><br />
<a v-bind:href="aHref">百度一下</a><br />
<img :src="imgURL" /><br />
<a :href="aHref">百度一下</a><br />
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'你好，徐鹏',
imgURL:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606119633963&di=50e35982e602b373e8d4be94d328af00&imgtype=0&src=http%3A%2F%2Fmedia-cdn.tripadvisor.com%2Fmedia%2Fphoto-s%2F01%2F3e%2F05%2F40%2Fthe-sandbar-that-links.jpg',
aHref:'http://www.baidu.com'
}
})
</script>
</body>
</html>
3.v-bind绑定class
既然可以绑定src，href，自然也是可以绑定class。
v-bind里的class如果为真，显示。如果不为真，不显示。
class里的属性和v-bind的class属性会合并。因此一定有的放在class里面，可能有的放在v-bind:class里面
当然，也可以吧类判断的抽一个方法出来：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.active {
color: blue;
}
</style>
</head>
<body>
<div id="app">
<!-- v-bind里的class如果为真，显示。如果不为真，不显示。 -->
<!-- class里的属性和v-bind的class属性会合并 -->
<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>
4.v-bind绑定数组class
用的比较少。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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:'aaa',
line:'bbb'
},
methods:{
getClasses:function(){
return [this.active,this.line];
}
}
})
</script>
</body>
</html>
5.v-bind绑定style
基本上同绑定class
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<h2 :style="{fontSize:'50px'}">{
{message}}</h2>
<h2 :style="{fontSize:size,color:color}">{
{message}}</h2>
<h2 :style="getStyles()">{
{message}}</h2>
<h2 :style="[baseStyle,baseStyle1]">{
{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'你好，徐鹏',
size:'30px',
color:'red',
baseStyle:{fontSize:'30px'},
baseStyle1:{color:'red'},
},
methods:{
getStyles:function(){
return {fontSize:this.size,color:this.color}
}
}
})
</script>
</body>
</html>
三、计算属性
1.基本使用
（1）将名字放在一起
（2）计算几本书的价格之和
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<h2>{
{fullName}}</h2>
<!-- <h2>{
{totalPrice}}</h2> -->
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
firstName:'你好',
lastName:'徐鹏',
/* books:[
{id:1,name:'java',price:100},
{id:2,name:'python',price:200},
{id:3,name:'linux',price:300},
] */
},
computed:{
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
}
},
/* totalPrice:function(){
let result = 0;
//for循环1
/* for(let i=0;i<this.books.length;i++){
result += this.books[i].price;
} */
//for循环2
/* for(let i in this.books){
result += this.books[i].price;
} */
//for循环3
/* for(let book of this.books){
result += book.price;
}
return result;
} */
}
})
</script>
</body>
</html>
2.深入理解计算属性
以这段代码为例，computed里面有一个fullName属性，该属性其实对应的值是一个对象。这个对象里面自带一个set和get方法。所以应该是这样（当然还有一个set方法）
对应结果：
但是一般我们不set值，只用get。所以没必要写set。只有一个孤零零get每次写也麻烦，所以最后省略之后就是最上面我们看到的代码。
因此，调用计算属性的时候不要加()，他表示的是一个对象，它里面自带get()，set()
3.计算属性和methods的比较
（1）缓存：计算属性性能高于methods
computed计算属性会对计算结果做缓存，如果多次出现同一个计算结果，实际上只执行一次。
methods没有缓存，出现几次就调用几次
（2）每次需要最新数据的时候用methods
四、ES6的一些语法
1.let和var的区别
var有缺陷，别用。常量用const，变量用let（let是更完美的var）
ES5之前，var中，if和for没有块级作用域概念，只有函数（function）有作用域。
但是ES6中加入了let，let中if和for有块级作用域的概念
没有块级作用域，你传一个方法给别人，人家想读取方法里的东西。但是因为没有块级作用域，任何地方都可以修改这个方法里变量的值，那这个方法里的东西还有可信度吗？
例子：
而我们的闭包就可以提供块级作用域。有的后端过来的小伙伴可能对闭包没啥概念，先来看一个闭包的例子：
如果没有闭包永远都显示最后一个，因为你的i被for循环覆盖了。
为什么闭包可以解决问题呢？因为函数是一个作用域，且只有函数有作用域。
再来看看var和let，你就知道let有多爽：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>块级作用域</title>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
</body>
<script>
<!-- var没有闭包 -->
var btns1 = document.getElementsByTagName('button');
for(var i=0;i<btns1.length;i++){
btns1[i].addEventListener('click',function(){
console.log('第'+i+'个按钮被点击')
})
}
<!-- var有闭包 -->
var btns2 = document.getElementsByTagName('button');
for(var j=0;j<btns2.length;j++){
(function(j){
btns2[j].addEventListener('click',function(){
console.log('第'+j+'个按钮被点击')
})
})(j)
}
<!-- let -->
const btns3 = document.getElementsByTagName('button');
for(let m=0;m<btns3.length;m++){
btns3[m].addEventListener('click',function(){
console.log('第'+m+'个按钮被点击')
})
}
</script>
</html>
2.const
const修饰常量，不可以再次赋值，开发中优先使用const，只有需要修改才用let。
const必须要赋值，赋了值就不能变，但是对象内部的属性可以变。这个怎么理解？看代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>const相关知识</title>
</head>
<body>
<script>
/* const要赋值，且该值不可改变 */
const obj = 'aaa'
console.log(obj)
/* const值不可变，但是内部属性可以变 */
const obj1 = {
name:'xupeng',
age:18
}
console.log(obj1)
obj1.age=8
console.log(obj1)
</script>
</body>
</html>
看懂代码之后解释一下，其实const内部存的是内存地址，赋值改变其实就是变了内存地址不行。对象改变属性，他的内存地址不变，所以可以。
3.对象的增强写法
直接看代码吧，有一说一，属性和函数的增强代码真的太香了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>对象增强写法</title>
</head>
<body>
<script>
const name = 'xupeng';
const age = 18;
/* 1.属性的增强写法 */
//ES5的写法
const obj1 = {
name:name,
age:age
}
console.log(obj1)
//ES6的写法
const obj2 = {
name,
age
}
console.log(obj2)
/* 2.函数的增强写法 */
//ES5的写法
const obj3 = {
run:function(){
console.log('run')
},
eat:function(){
console.log('eat')
}
}
//ES6的写法
const obj4 = {
run(){
console.log('run')
},
eat(){
console.log('eat')
}
}
</script>
</body>
</html>
五、事件监听
1.v-on的基本使用，语法糖
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<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>
</body>
</html>
2.事件监听传参的问题
（1）事件调用没有参数，可以不用()
（2）在事件定义时，写函数时省略了小括号，但是方法本身是需要一个参数的,这个时候vue会默认的把浏览器生成的event事件对象作为参数传入到方法
（3）方法定义时，我们需要event对象，同时也需要其他参数，通过$event获取event对象。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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>
<button>按钮4</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
message:'你好，徐鹏'
},
methods:{
btn1Click(){
console.log('btn1Click')
},
btn2Click(abc){
console.log('btn2Click',abc)
},
btn3Click(abc,event){
console.log('btn3Click',abc,event)
},
}
})
</script>
</body>
</html>
3.v-on的修饰符
（1）事件冒泡
首先大家要只是了解什么是事件冒泡，看个例子：
两个方法嵌套，会先执行里面，在执行外面。
（2）事件监听的常用修饰符
1）stop修饰符：取消冒泡
stop修饰符：取消冒泡。但是这个修饰符是放在里面，取消外层的冒泡
2）prevent修饰符：取消自动提交，以让自己手动提交
3）监听某个键盘的键帽
4）once修饰符的使用：只触发一次回调
下面看一下代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!-- 1.stop修饰符：取消冒泡。但是这个修饰符是放在里面，取消外层的冒泡 -->
<div @click="divClick">
<button @click.stop="btnClick">按钮</button>
</div>
<br />
<!-- 2.prevent修饰符：取消自动提交，以让自己手动提交 -->
<form action="baidu">
<input type="submit" value="提交" @click.prevent="submitClick()" />
</form>
<br />
<!-- 3.监听某个键盘的键帽 -->
<input type="text" @keyup.enter="keyUp()" />
<!-- 4.once修饰符的使用：只触发一次回调 -->
<button @click.once="btn2Click()">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'你好，徐鹏'
},
methods:{
divClick(){
console.log('divClick')
},
btnClick(){
console.log('btnClick')
},
submitClick(){
console.log("submitClick")
},
keyUp(){
console.log('keyUp')
},
btn2Click(){
console.log('btn2Click')
},
}
})
</script>
</body>
</html>
六、条件判断
1.v-if
条件判断有如下几种：v-if、v-else-if、v-else
实例：姓名输入框点击按钮，切换成邮件输入框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<h2 v-if='score>90'>{
{score}}</h2>
<h2 v-else-if='score>80'>{
{score}}</h2>
<h2 v-else>{
{score}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'你好，徐鹏',
score:85
}
})
</script>
</body>
</html>
这边有一个问题：你输入2之后，点击切换，其实你的输入框里还是有2的。为什么这个2还会存在？
因为我们的input输入框在渲染之前其实经过一个叫虚拟节点。当你切换之后，虚拟节点其实还是那个节点，因此你的值是不会变的。
那怎么办呢？如果一个需求就是，每次点击必须使input内容清空，我们使用key属性：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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>
2.v-show
如果v-show对应的值为false，不显示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<h2 v-show="false">{
{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'你好，徐鹏'
}
})
</script>
</body>
</html>
3.v-show和v-if的区别？
如果v-if为false，根本就不会存在dom中
如果v-show为false，存在，只是不显示，为隐藏状态
所以，当在显示和隐藏之间切换频率很高用v-show，如果只是一次的显示隐藏用v-if
七、for循环遍历
1.v-for
v-for遍历数组和对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!-- for获取数组的值和下标 -->
<ul>
<li v-for="(name,index) in names">{
{index+1}}.{
{name}}</li>
</ul>
<!-- for获取对象：只写一个值，获取的是value -->
<ul>
<li v-for="item in info">{
{item}}</li>
</ul>
<!-- for获取对象：（value,key） -->
<ul>
<li v-for="(value,key) in info">{
{key}}:{
{value}}</li>
</ul>
<!-- for获取对象：（value,key,key） -->
<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:{
names:['aa','bb','cc'],
info:{
name:'xupeng',
age:18,
height:180
}
}
})
</script>
</body>
</html>
2.循环里的key
我们在遍历的时候不免会遇到需要插入数据的情况：（不要在意目录哈，两个环境开发，上传代码的时候会合并）
我们可以通过splice来做添加。但是这种添加很笨，他会先看第三个位置，把C删除插入f，然后把d删除插入c，再在最后插入d。其实我们只需要在b和c之间做一次插入就行了对吧。这样效率很低。
我们通过key来让数值与其对应虚拟节点一一对应（因为我们的代码跟渲染中间其实有一个虚拟节点的），因此key的作用key更高效的更新虚拟DOM（虚拟节点）。
也就是说，他发现原本c之前要插入一个f了，他不会像splice一样一个个位移覆盖，而是直接插入。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<ul>
<li v-for="letter in letters" :key="letter">{
{letter}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
letters:['a','b','c','d']
}
})
</script>
</body>
</html>
3.修改数组的响应式与否
我们都知道，在F12里修改一个数据，页面会立刻刷新，这立刻有反应就叫响应式。但事实上不是所有的方法都是响应式的。
（1）响应式
push(),pop(),shift(),unshift(),sort(),reverse()
（啥？你不知道这些啥意思？可以看我的java基础专栏里第17篇文章js部分，我这里给大家截个图）
（2）非响应式
通过索引值修改数组中元素。那怎么通过响应式来修改数组的元素呢，方法有二：
1）我们可以用splice（第几个位置，替换几个，替换的内容）来替换
2）通过Vue.set(要修改的对象，索引值，修改后的值)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<ul>
<li v-for="letter in letters">{
{letter}}</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') */
/* 2.通过索引值修改数组元素，非响应式 */
/* this.letters[0]='bbb' */
/* 3.通过splice修改数组元素，响应式 */
this.letters.splice(0,1,'bb')
/* 4.通过Vue.set修改数组元素，响应式 */
Vue.set(this.letters,1,'tt')
}
}
})
</script>
</body>
</html>
八、js的高阶用法
1.for循环的写法
三种：普通，for in ，for of
2.filter/map/reduce（箭头函数）
我们先假设遇到这个情况：
一个数组，我们要取出小于100的数字。然后将所有小于100的数字*2。最后将这些数字相加，记录最终的结果。
我们先来看看传统写法：
（1）filter
filter中的回调函数有一个要求，必须返回布尔值
（2）map
返回一个数组
（3）reduce
对数组中所有内容进行汇总
但是我们这样代码是不是还是很多啊？我们把它整合在一起：（禁止套娃啊！！！）（函数式编程）
三段代码变成一段了，但是那么多function还是看着难受，继续精简：（芜湖，起飞）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<h2>{
{getNum()}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'你好，徐鹏'
},
methods:{
getNum(){
const nums = [10,20,150,200,60]
let total = nums.filter(n => n<100).map(n => n*2).reduce((pre,n) => pre + n)
return total
// let total = nums.filter(
// function(n){
// return n<100
// }).map(
// function(n){
// return n*2
// }).reduce(
// function(preValue,n){
// return preValue + n;
// },0)
// return total
//1.取出小于100的数字
//filter中的回调函数有一个要求，必须返回布尔值
// let newNums = nums.filter(
// function(n){
// return n<100
// }
// )
// //2.将所有小于100的数字*2
// //map函数的使用
// let new2Nums = newNums.map(
// function(n){
// return n*2
// }
// )
// //3.将这些数字相加，记录最终的结果
// //reduce作用：对数组中所有内容进行汇总
// //preValue：上一次返回的值
// let total = new2Nums.reduce(
// function(preValue,n){
// return preValue + n;
// }
// )
// //1.取出小于100的数字
// let newNums = []
// for(let i of nums){
// if(i<100){
// newNums.push(i)
// }
// }
// //2.将所有小于100的数字*2
// let new2Nums = []
// for(let i of newNums){
// new2Nums.push(i*2)
// }
// //3.将这些数字相加，记录最终的结果
// let total=0
// for(let i of new2Nums){
// total += i
// }
// return total
}
}
})
</script>
</body>
</html>
九、表单绑定v-model
1.v-model的双向绑定
页面上的字段值和Vue()对象里的字段值双向绑定，不管哪边改变，另一边都会改变。
v-model可用于input和textarea
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!-- <input type="text" v-model="message" /> -->
<input type="text" :value="message" @input="message=$event.target.value">
<input type="text" :value="message" @input="valueChange">
<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;
}
}
})
</script>
</body>
</html>
2.v-model原理
首先我们要知道，<input>标签里有一个@:input的事件，这个事件的作用是：只要input框里面输入东西，就会调用该事件里的方法。
原理：
我们之前学了v-bind:value，可以吧Vue对象里的值响应式的显示在页面上。这样我们实现了Vue对象向<input>标签的绑定。
然后对于input事件的方法，我们把每次输入的值赋值给Vue对应的属性，也可以实现v-on:input标签向Vue属性的绑定。那么怎么获取input里的值呢？通过event对象
下面看代码：我们不通过v-model实现双向绑定
3.v-model结合其他类型
（1）radio
以前我们需要一个name属性表示这是同一个选项，用了v-model可以去掉name属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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>
（2）checkbox
checkbox分单个和多个，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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>
<br /><br /><br />
<!-- 2.checkbox多选框 -->
<label for="hobby">
<input type="checkbox" value="足球" v-model="hobbies" />足球
<input type="checkbox" value="篮球" v-model="hobbies" />篮球
<input type="checkbox" value="羽毛球" v-model="hobbies" />羽毛球
</label>
<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>
（3）select
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!-- 1.选择一个 -->
<select name="abc" id="" v-model="fruit">
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="榴莲">榴莲</option>
</select>
<h2>你选择的水果:{
{fruit}}</h2>
<br/><br/><br/><br/>
<!-- 2.选择多个 -->
<select name="abcd" id="" v-model="fruits" multiple>
<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>
（4）值绑定
什么叫值绑定？以多选框为例，选项我们之前是写死的，能不能写活呢？实际上多加个for就好了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<label v-for="item in originalHobbies">
<input type="checkbox" :value='item' v-model="hobbies" />{
{item}}
</label>
<h2>你的爱好是：{
{hobbies}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'你好，徐鹏',
hobbies:[],//多选框
originalHobbies:['足球','羽毛球','篮球']
}
})
</script>
</body>
</html>
（5）修饰符（lazy,number,trim）
1）.修饰符lazy :不实时，敲击回车或者失去焦点加载
2）.修饰符number：指定类型为数字
3）.修饰符trim：去除两边空格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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" />
{
{typeof age}}
<!-- 3.修饰符trim：去除两边空格 -->
<input type="text" v-model.trim="message" />
<h2>{
{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'你好，徐鹏',
age:''
}
})
</script>
</body>
</html>