目录
data：存储数据，这些数据可以是我们直接定义，也可以是来自网络
9.3.v-if v-else-if v-else 的结合使用
一、Vue基本概念
Vue（读作 /vjuː/，类似于 view ）是一个 的 渐进式框架 用于构建用户界面 。 与其他单体框架不同，Vue 从一开始就被设计为可逐步采用的。 核心库仅专注于视图层，易于获取并与其他库或现有项目集成。 另一方面，当与 结合使用时，Vue 也完全有能力支持复杂的单页应用 现代工具 和 支持库 程序 。
Vue是一个渐进式的框架，什么是渐进式的呢？
渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。比如Core+Vue-router+Vuex，也可以满足你各种各样的需求。
Vue特点
解耦视图和数据
可复用的组件
前端路由技术
状态管理
虚拟DOM
Vue中的MVVM
View层：
视图层
在我们前端开发中，通常就是DOM层。
主要的作用是给用户展示各种信息。
Model层：
数据层
数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。
ViewModel层：
视图模型层
视图模型层是View和Model沟通的桥梁。
一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中
另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚 动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。
Vue的生命周期
/上述图片摘自网络
beforeCreate : 初始化之后，Vue实例被创建之前的时候执行
created : Vue实例创建完成后开始执行，在此函数中可以访问我们实例中data数据
beforeMount : Vue实例创建好之后，还需要挂载，该函数在被挂载之前执行
mounted : Vue实例挂载完成后执行，在该函数中，可以执行一些初步的异步请求，值得注意的是，虽然此时我们已经将vue实例挂载完成，但是我们的数据渲染到页面仍然需要时间，这是我们需要注意的一点
beforeUpdate : Vue实例中的数据有变化更新前执行
updated : Vue实例数据更新后并将更新的数据渲染到界面完成后执行
beforeDestroy : Vue实例被销毁之前执行，此处执行的是一些清除定时器等操作
destroyed : Vue实例被销毁后执行
activated ：组件激活时调用。也就是说，这个函数是在我们刚进入某一个组件的时候被调用，该钩子在服务器端渲染期间不被调用。
deactivated ： 组件停用时调用。也就是说，这个函数是在我们要离开某一个组件的时候被调用，该钩子在服务器端渲染期间不被调用。
errorCaptured : 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
/////此处生命周期函数是借鉴了百度等知识来源并加入了部分自我理解。如有错误请指正，我会进行更改
二、基础使用方式
const app = new Vue({
el: "#app",
data: {
},
methods: {
}
})属性：
el： 决定了将这个Vue对象挂载到哪一个元素上
类型：string | HTMLElement
作用：决定之后的Vue实例会管理哪一个DOM
语法： el："参数" 参数一般为选择器
const app = new Vue({
el: "#app"
})data：存储数据，这些数据可以是我们直接定义，也可以是来自网络
类型：objecy | Function(组件中必须是一个函数)
作用：Vue实例对应的数据对象
语法：data:{
数据1名称：数据1，
数据2名称：数据2
}
注意：数据1和数据2可以是函数，数组等类型
const app = new Vue({
el: "#app",
data: {
firstName: 'Lebron',
lastName: 'James'
}
})methods：该属性用来在Vue对象中定义方法。
类型：{[key:string]:Function}
作用：定义一些属于Vue的方法，可以在其他地方调用，也可以在指令中使用
语法：methods:{
方法名:function() {
return 数据处理过程
}
}
const app = new Vue({
el: "#app",
data: {
firstName: 'Lebron',
lastName: 'James'
},
methods: {
getFullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})computed：数据处理后并返回
当我们需要对数据进行某种变化后再显示的时候 我们可以在计算属性中重新定义一个属性并返回变化之后的值
注意： 计算属性是有缓存的，也就是说，多次使用的时候，使用计算属性的效率更高。一般而言，我们在起名的时候尽可能按照属性的方式来起名
<div id="app">
<h2>{{fullName}}</h2>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
firstName: 'Lebron',
lastName: 'James'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
},
})
</script>1.我们也可以通过计算属性来实现一些较为复杂的计算
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 () {
let result = 0
for (let i = 0; i < this.books.length; i++) {
result += this.books[i].price
}
return result
}
}2.计算属性的get和set
一般情况下，我们不希望计算属性有set方法。是一个只读属性。当我们写入set方法时，在我们想要改变该属性的值时，会调用set方法。事实上，set方法是一定有一个参数的，这个参数是我们想要改变属性的值。
当我们给一个计算属性设置了set方法后，我们就不仅仅只能调用该计算属性了，还可以通过控制台来给该计算属性赋值，通过这种方式来掉用set方法来使得set方法中的代码被执行。
<script>
const app = new Vue({
el: "#app",
data: {
firstName: 'Kobe',
lastName: 'Bryant'
},
computed: {
fullName: {
set: function (newValue) {
const names = newValue.split(' ');
this.firstName = names[0];
this.lastName = names[1];
},
get: function () {
return this.firstName + ' ' + this.lastName
}
}
}
})
</script>计算属性的缓存：计算属性和methods的比较
相较而言，计算属性会进行缓存，如果多次使用时，计算属性只会调用一次。而我们的methods，每次调用都是重新调用函数，计算属性则不然。
三.基础语法
1.模板语法:Mustache
<div id="app">
<h2>{{message}}</h2>//输出为：你好啊
<h2>{{message}},李银河！</h2>//输出为：你好啊，李银河！
<h2>{{firstName + lastName}}</h2>//输出为：Kobejack
<h2>{{firstName + " " + lastName}}</h2>//表达式，输出为：Kobe jack
<h2>{{firstName}} {{lastName}}</h2>//使用多个{{}}语法，输出为：Kobe jack
<h2>{{counter * 2}}</h2>//添加一个表达式，输入为：200
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好啊",
firstName: "kobe",
lastName: "jack",
counter: 100
}
})
</script>
我们可以在HTML标签中通过该语法来使用我们的data数据或计算属性
注意：可以在一个标签中使用多个{{}}语法，也可以在一个{{}}语法中添加一个简单算式表达式值得注意的是，该语法是响应式的。
2.v-text
v-text作用和Mustache比较相似：都是用于将数据显示在界面中
v-text通常情况下，接受一个string类型
我的理解是v-text虽然和{{}}语法作用类似，但是，v-text的作用机制更像是将v-text后面所接受的参数内容替换到整个标签中，因此才导致第四行拼接不成功，而第五行成功
<div id="app">
<h2>{{message}}</h2>//你好啊
<h2 v-text="message"></h2>//你好啊
<h2>{{message}}，李银河!</h2>//你好啊，李银河！
<h2 v-text="message">，李银河!</h2>//你好啊
<h2 v-text="message + '，李银河！'"></h2>//你好啊，李银河！
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好啊",
}
})
</script>3.v-once
在某些情况下，我们不希望界面随意的跟随改变，此时我们就需要用到我们的v-once指令
作用：该指令表示元素和组件只会被渲染一次，不会随着数据的改变而改变，也就是说，添加该指令后，当数据发生改变后，界面不会根据新数据重新渲染。
语法：该指令后面不需要跟任何的表达式
<div id="app">
<h2>{{message}}</h2>//跟随message改变而改变
<h2 v-once>{{message}}</h2>//此处我们初始被渲染出来的为“你好啊”即使在控制台修改了message，也不会发生改变
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好啊"
}
})
</script>4.v-html
某些情况下，我们从服务器请求到的数据本身就是一个HTML代码,如果我们直接通过{{}}来输出，数据返回中会连带着将html的标签一起返回，这样就会将标签也同时展示在屏幕上。但是我们可能希望的是按照HTML格式进行解析，并且显示对应的内容。此时我们就需要使用v-html这个指令。
作用：该指令会使得界面在展示{{}}中的数据时，按照html格式进行解析，并显示对应内容。
在此例中，我们索要展示的url中带有<a></a>但是当我们使用了v-html之后，他在显示时就会以html格式进行解析并显示内容。该指令往往会跟上一个string类型，将string中的html解析出来并渲染
<div id="app">
<h2>{{url}}</h2>//<a href='http://www.baidu.com'>百度一下</a>
<h2 v-html="url"></h2>//百度一下
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
url: "<a href='http://www.baidu.com'>百度一下</a>"
}
})
</script>5.v-pre
作用：添加v-pre的标签会将标签中内容原封不动地显示出来，而不要进行解析。也就是说，标签中写的什么，页面就会输出什么。
值得注意的是，该标签并不是v-html标签的相反，该标签是所有的都不不解析，而v-html则是只解析标签内容中的HTML标签，并将其结果展示
<div id="app">
<h2>{{message}}</h2>//你好啊
<h2 v-pre>{{message}}</h2>//{{message}}
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好啊",
}
})
</script>6.v-cloak
在某些情况下，我们浏览器可能会直接显然出未编译的Mustache标签。大多数情况下都是，当我们的网络不好时，有可能会出现先显示一个{{message}}，然后再显示正确内容。
分析： 代码从上往下解析，当网络不好时，解析到{{message}}后会因为网速不够而不能迅速解析到我们的vue中，导致页面先显示{{message}}后显示正确数据
解决方法： 使用v-cloak cloak:斗篷
使用该方法后，在解析到{{message}}时，会发现其具有v-cloak这个属性，而不在页面中展示 只有当解析到vue后，vue会取消其v-cloak这个属性，此时才会在页面中显示。此时，vue也已经解析完毕，所以我们看到就时正常数据 。
在vue解析之前，div中有一个属性v-cloak；在vue解析之后，div中没有一个属性v-cloak
总结： 总的来说。就是将原来显示为{{message}}的时间变成白页显示
注意： 使用v-cloak时，还需要在<style>中设置一下显示方式。
<style>
[v-cloak] {
display: none;
}
</style>
<div id="app" v-cloak>
<h2>{{message}}</h2>
</div>
<script src="../vue.js"></script>
<script>
setTimeout(function () {
const app = new Vue({
el: "#app",
data: {
message: "你好啊",
}
})
},1000)
</script>7.v-bind
当我们希望某些属性动态来绑定。比如动态绑定a元素的href属性；比如动态绑定img元素的src属性。这个时候，我们可以使用v-bind指令：
作用：动态绑定属性
缩写：:
预期：any (with argument) | Object (without argument)
参数：attrOrProp (optional)
用法：v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值
语法糖，也就是简写方式。在开发中，我们通常会使用语法糖的形式，因为这样更加简洁。
注意：v-bind本身不支持驼峰写法，因此在使用v-bind时，最好将驼峰写发换一种方式来写，比如，itemClick换成item-click
7.1.用法一：v-bind绑定class
对象语法：class后面跟的是一个对象。
我们可以通过动态添加class达成更加丰富的样式表达，比如，当我们在很多相同样式的东西上点击某个东西时，该样式会发生改变。以前，当我们点击那个东西时，会将其原来的class所代表的样式删除，增加一个新的class样式。现在，我们可以利用class后面跟的值是一个对象，因此里面可以存放键值对。而，我们仅仅需要改变键值对中后面的值就可以做到这一点。
1.直接通过{}绑定一个类
<h2 :class="{'active': isActive}">{{message}}</h2> 2.也可以通过判断，传入多个值
<h2 :class="{'active': isActive , 'line': isLine}">{{message}}</h2> 3.和普通的类可以同时存在，并不冲突。所以，我们一般将一些共有样式或是将来不会改变的样式采用非动态绑定的形式绑定
<h2 class="title" :class="{'active': isActive , 'line': isLine}">{{message}}</h2> 4.如果动态样式过多，导致代码过长，显得过于复杂，可以将其都放在一个methods或者computed中
注意：
1.此时需要我们将我们实际要添加的类放入methods的一个方法中，并将其作为返回值。
2.事实上我们调用函数的时候的使用方法应该是函数名（），有时候可以不加是因为被省略掉了，但是实际上是需要加的
<h2 class="title" :class="getClasses()">{{message}}</h2>
getClasses: function (){
return {
'active': this.isActive , 'line': this.isLine
}
}
数组语法：class后面跟的是一个数组。该方式和普通的类可以同时存在，并不冲突。
1.直接通过[]绑定一个类
将绑定的class样式名，作为一个数组的不同元素，整合进一个数组中，来传递给class。
<h2 class="title" v-bind:class="['active','line']">{{message}}</h2>2.事实上，这种方式，由于数组中的数据是写死的，与直接指定的方式作用相同。因此，我们可以将数组中的元素写成变量， 在变量中存储真正需要添加的class名 这样，我们就可以通过改变变量的值来改变其class
<h2 class="title" v-bind:class="[active,line]">{{message}}</h2>注意：如果数组中的元素带有 " " 则说明其是一个字符串，此时传递的是一个字符串，而不是我们需要的变量。
3.我们也可以像对象语法一样将数组放进一个methods中,在这个方法中返回我们所需要的class名
<h2 class="title" v-bind:class="getClasses()">{{message}}</h2>
methods: {
getClasses: function () {
return [this.active, this.line]
}
}7.2.用法二：v-bind绑定style
我们可以利用v-bind:style来绑定一些CSS内联样式。在写CSS属性名的时候，比如font-size
我们可以使用驼峰式 (camelCase) fontSize或短横线分隔 (kebab-case，记得用单引号括起来) ‘font-size’。
对象语法：style后面跟的是一个对象类型
对象的key是CSS属性名称
对象的value是具体赋的值，值可以来自于data中的属性
1.直接通过{}绑定一个style
<h2 :style="{key(属性名): value(属性值)}">{{message}}</h2>
<h2 :style="{fontSize: 50px}">{{message}}</h2>2.此时我们的数据还是写死的，我们可以通过变量来让我们所添加的style的值不在写死
<h2 :style="{fontSize: finaSize}">{{message}}</h2>3.我们此时的变量需要注意和我们的样式的单位保持一致，因此，我们可以通过直接在代码中写上单位，来让我们给变量赋值的时候不变
<h2 :style="{fontSize: finaSize + 'px', color: finaColor}">{{message}}</h2>4.我们也可以像动态添加class一样，将其写入到一个methods或计算属性中
<h2 :style="getStyles()">{{message}}</h2>
methods: {
getStyles: function () {
return {fontSize: this.finaSize + 'px', color: this.finaColor}
}
}数组语法：style后面跟的是一个数组类型。多个值以，分割即可
<h2 :style="[baseStyle, baseStyle1]">{{message}}</h2>
data: {
message: "你好啊",
baseStyle: {backgroundColor: 'red'},
baseStyle1: {fontsize: '100px'}
}8.v-on
在前端开发中，我们需要经常和用于交互。这个时候，我们就必须监听用户发生的时间，比如点击、拖拽、键盘事件等等
在Vue中如何监听事件呢？使用v-on指令
作用：绑定事件监听器
缩写：@
预期：Function|Inline Statement|Object
参数：event
用法：v-on:事件名="该事件要执行的方法或要实现的表达式
<div id="app">
<h2>{{counter}}</h2>
<!--<button v-on:click="counter++">+</button>
<!--<button v-on:click="increment()">+</button>
<!--使用语法糖@-->
<button @click="increment()">+</button>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
counter: 0,
},
methods: {
increment() {
this.counter++;
},
},
});
</script>8.1.v-on的参数问题
1.如果该方法不需要额外的参数，那么方法后的（）可以不添加
2.如果该方法需要参数，如果我们仅仅省略了参数，但是有(),函数此时的参数就成了undefined
3.如果该方法需要参数，但是我们省略了()时，函数会将event作为参数传递进去；
4.如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件
<div id="app">
<!--1.事件调用的方法没有参数时，后面的()可以省略-->
<button @click="btn1Click()">按钮1</button>
<button @click="btn1Click">按钮1</button>
<!--2.在事件定义时，写函数时省略了小括号，但是方法本身是需要一个参数的-->
<button @click="btn2Click(123)">按钮2</button>
<!--正常来说，我们需要参数，但是没有传参时，那么函数的形参为undefined。-->
<button @click="btn2Click()">按钮2</button>
<!--3.此时我们不仅省略了参数，而且省略了()时，那么函数会将event当作参数传入-->
<button @click="btn2Click">按钮2</button>
<!--4.在方法定义时，我们需要event对象，同时又需要其他参数-->
<!--当我们不写参数并省略()时，系统会将event当作参数传递给第一个参数，第二个参数则按照没有传递参数的情况默认为undefined-->
<button @click="btn3Click">按钮3</button>
<!--如果我们没有省略()但是仍然没有写实参的话，此时我们参数的值都为undefined-->
<button @click="btn3Click()">按钮3</button>
<!--当我们按照如下方式填写参数时，第二个参数我们传递的event会被当做一个变量或者是方法去寻找，
当我们找不到时，就会报错，返回undefined-->
<button @click="btn3Click(123,event)">按钮3</button>
<!--在调用方式，手动的获取到浏览器参数的event对象，则使用$event-->
<button @click="btn3Click(123,$event)">按钮3</button>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好啊"
},
methods: {
btn1Click() {
console.log('btn1Click');
},
btn2Click(abc) {
console.log('-----------', abc)
},
btn3Click(abc, event) {
console.log('++++++++', abc, event)
}
}
})
</script>8.2.v-on的修饰符
.stop：调用 event.stopPropagation()。
作用：防止冒泡
当我们没有写.stop时，我们点击按钮时，同时也会触发div的点击事件。 当我们写了.stop就不会有这样的情况发生了
<div @click="divClick">
aaaaaaa
<button @click.stop="btnClick">按钮</button>
</div>.prevent： 调用 event.preventDefault()。
作用：阻止默认行为 比如：input标签的自动提交等
<form action="baidu">//input中会自动提交信息 .prevent则会将这个自动提交取消
<input type="submit" value="提交" @click.prevent="submitClick" />
</form>.{keyCode | keyAlias}：只当事件是从特定键触发时才触发回调。
作用： .监听某个键盘按键的点例如： .enter仅仅监听enter的点击
<input type="text" @keyup.enter="keyUp" />// .enter指的是只监听enter键的点击.native：监听组件根元素的原生事件。
作用：监听组件的事件
<cpn @click.native="cpnClick"></cpn>//cpn是一个组件，可以思考成一个独立的vue组件，监听整个组件的点击时，需要添加.native.once：只触发一次回调。
作用：点击回调只会触发一次
<button @click.once="btn2Click">按钮2</button>//该点击事件btn2Click只会触发一次9.v-if v-else-if v-else
vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件。
v-if后面的条件为false时，对应的元素以及其子元素不会渲染。也就是根本没有不会有对应的标签出现在DOM中。
9.1.v-if的使用
v-if，控制的是标签中的内容的渲染，内容可以写很多，这里用的是{{}}来代表，只有当其满足一定条件时才会被渲染。
我们可以把条件写成一个变量，满足一定条件时，我们只需要更改变量的值，就可以决定该标签是否被渲染，这样会更为灵活
<div id="app">
<!--注意，在h2标签中加上的v-if，控制的是h2标签中的内容的渲染，可以写很多，这里用的是{{}}来代表-->
<!--可以通过v-if来控制其，满足一定条件才会被渲染到页面中显示-->
<h2 v-if="true">{{message}}</h2>
<h2 v-if="false">{{message}}</h2>
<!--也可以将v-if的值用一个变量来指明，这样会更加灵活,只需要更改变量的值，就可以决定其是否显示-->
<h2 v-if="isShow">{{message}}</h2>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好啊",
isShow: true
}
})
</script>9.2v-if和v-else的结合使用
v-if和v-else结合使用时，则表示当v-if的值为false时，将带有v-else的内容渲染到页面中。注意，当有多个v-else时，只显示上面那个，下面那个则不显示
<div id="app">
<!--v-if和v-else结合使用时，则表示当v-if的值为false时，将带有v-else的内容渲染到页面中-->
<h2 v-if="isShow">{{message}}</h2>
<h2 v-else>false时会显示谁呢</h2>//显示我不显示下面的
<h1 v-else>isShow为false时显示我</h1>
</div>9.3.v-if v-else-if v-else 的结合使用
当v-if条件满足时，就显示v-if的标签，否则就进入下一条语句v-else-if，判断其条件是否满足；直到v-else上方的所有条件都判断为不满足时，执行v-else
注意：代码的执行顺序是遇到的第一个v-if开始从上往下到第一个v-else结束。也就是说，如果我们把v-else放到v-if的下面，那么下面有没有v-else-if，只要v-if的判断条件不符合，就会执行v-else所在的代码行。而且，如果我们在v-if和v-else之间的判断条件不合理，最后得到的结果也有可能不是我们想要的结果；
<h2 v-if="score >= 90">优秀</h2>
<h2 v-else-if="score >= 80">良好</h2>
<h2 v-else-if="score >= 60">合格</h2>
<h2 v-else>不合格</h2>10.v-show
作用： v-if和v-show作用类似，也是用于决定一个元素是否被渲染。
区别：
v-if：当我们条件为false时，包含v-if指令的对应元素根本就不会存在我们的DOM中； 当我们条件改为true时，我们在重新创建一个。
v-show：当我们条件为false时，v-show只是给我们的元素添加了一个行内样式，display：none； 当我们条件改为true时，v-show则是修改样式，display：block
选择：当需要在显示和隐藏之间切换频繁时，使用v-show；当只有一次切换时，使用v-if
<div id="app">
<h2 v-if="isShow" id="aaa">{{message}}</h2>
<h2 v-show="isShow" id="bbb">{{message}}</h2>
</div>11.v-for遍历
当我们有一组数据需要进行渲染时，我们就可以使用v-for来完成。v-for的语法类似于JavaScript中的for循环。格式如下：item in items的形式。
遍历数组
语法：v-for="(item, index) in letters" :key="index"
<li v-for="(item,index) in names" :key="index">{{index + 1}}---{{item}}</li>数组的方法
Vue是响应式的，所以当数据发生变化时，Vue会自动检测数据变化，视图会发生对应的更新。
push()：(可以一次添加多个元素)
pop()：删除数组中最后一个元素
shift()：删除数组中第一个元素
unshift()：在数组最前面添加元素(可以一次添加多个元素)
splice()：将指定元素从原数组中删除并将被删除元素作为返回值返回(最少两个参数);也可以插入元素和替换元素
第一个参数：开始位置的索引；
第二个参数：删除元素时传入要删除的元素的数目，不传则全部删除；替换元素时则传入要替换的元素数目；插入元素时传入0
第三个参数及之后的参数：替换元素时传入要替换进的元素；插入元素时传入在该位置顺序插入的元素
sort()：排序:可以传递参数，即按照某一个规则进行排序
reverse()：反转
注意：当我们通过数组下标来对数组中数据进行修改时，此时的修改并不是响应式的，所以我们可以通过使用splice()来代替这种不能响应式的方式
//1.push():(可以一次添加多个元素)
//this.letters.push('aaa', 'bbb');
//2.pop():删除数组中最后一个元素
//this.letters.pop();
//3.shift()：删除数组中第一个元素
//this.letters.shift();
//4.unshift():在数组最前面添加元素(可以一次添加多个元素)
//this.letters.unshift('aaa', 'bbb');
//5. splice():将指定元素从原数组中删除并将被删除元素作为返回值返回(最少两个参数);也可以插入元素和替换元素
// 第一个参数：开始位置的索引；
// 第二个参数：删除元素时传入要删除的元素的数目，不传则全部删除；替换元素时则传入要替换的元素数目；插入元素时传入0
// 第三个参数及之后的参数：替换元素时传入要替换进的元素；插入元素时传入在该位置顺序插入的元素
//this.letters.splice(3, 0, 'f');
//6.sort():排序:可以传递参数，即按照某一个规则进行排序
//this.letters.sort();
//7.reverse():反转
//this.letters.reverse();遍历对象
1.在遍历对象的过程中，如果只是获取一个值，那么获取到的是value
<li v-for="item in info">{{item}}</li>2.获取key和value:格式是（value，key）
注意：先获取到的是value，后面获取到的是值
<li v-for="(value, key) in info">{{value}}--{{key}}</li>3.获取value，key，index：格式是（value，key，index）
<li v-for="(value, key, index) in info">{{value}}--{{key}}--{{index}}</li>12v-model表单绑定
表单控件在实际开发中是非常常见的。特别是对于用户信息的提交，需要大量的表单。
Vue中使用v-model指令来实现表单元素和数据的双向绑定。
双向绑定：
首先，当我们使用v-model绑定数据后，在我们渲染时，就会将绑定的数据直接在文本框显示
1.当我们在文本框中输入新的数据时，我们的文本框所绑定的元素的数据也会一起跟着改变
2.当我们在控制台修改数据本身时，也会相对应地馈到文本框中
<input type="text" v-model="message">
{{message}}v-model的原理：
当我们使用v-model来对data中的数据进行绑定后，如果我们在v-model所绑定的组件中输入信息，比如input，那么我们所输入的信息，就会通过v-model传递给我们所绑定的data中的数据，该数据将发生改变，之后，因为data中数据的改变，我们的{{}}语法，也会使得我们最终的DOM因为数据的改变而重新渲染发生改变，因此，我们就是这样通过v-model来实现双向绑定的。
实质上，v-model是一个语法糖，它的双向绑定可以使用v-bind和v-on指令来实现。
第一件事：将数据动态绑定到文本框中（使用v-bind绑定一个value属性）
<input type="text" :value="message">第二件事：将文本框中显示的动态绑定给数据，让数据跟随着输入的信息而改变。此处使用了input所自带的事件就是输入文本（类似button自带的事件点击click）
<input type="text" :value="message" @input="valueChange">//该方法利用的是v-on的省略()时会传入一个event作为参数
valueChange(event) {
this.message = event.target.value;
}
<input type="text" :value="message" @input="message = $event.target.value">12.1.v-model在单选框radio中的使用
radio实际上就是input标签的type类型之一。当我们创建radio单选框的时候，我们的input中的name属性一致时，才会互斥，只能选择一个
注意：v-model=“sex”这里的sex是data中保存的数据名称，不是name里面的sex。name里的sex是为了保证我们的radio是一个单选框，只能选择男或女。当我们选择男时，data中的数据就会因为v-model而变成男，选择女也是一样的，并实时地显示到下方的{{}}中
<label for="male">
<input type="radio" id="male" name="sex" value="男" v-model="sex">男
</label>
<label for="female">
<input type="radio" id="female" name="sex" value="女" v-model="sex">女
</label>
<h2>您选择的性别是：{{sex}}</h2>12.2.v-model在复选框chenbox中的应用
复选框checkbox实际上就是input标签的一种type之一。分为两种情况：单个勾选框和多个勾选框
单个勾选框
单个勾选框，实质上就是在一个复选框中只放了一个选项，当我们通过v-model来进行双向绑定之后，当我们勾选了同意按钮以后，v-model所绑定的数据也会随着我们的选中和不选中来决定自己的状态，此时我们可以根据这个不同的状态来进行不同的功能实现。比如，各个app的同意协议界面，只有同意协议之后，才能进行下一步。
注意：此时v-model即为布尔值。input的value并不影响v-model的值。
<label for="agree">
<input type="checkbox" id="agree" v-model="isAgree">同意协议
</label>
<h2>您选择的是：{{isAgree}}</h2>
<button :disabled="!isAgree">下一步</button>多个勾选框
当是多个复选框时，因为可以选中多个，所以对应的data中属性是一个数组。选中某一个时，就会将input的value添加到数组中。
<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>12.3.v-model在select中的使用
selecct的作用跟checkbox的作用相同，两者的区别在于，select的单选和多选都是在一个下拉列表中，而checkbox则是一个个选项。而且，select的单选，可以在很多选项中选择一个来选择，而checkbox则是只有一个可以选择。
v-model在select中的使用方式和在checkbox、radio中的使用方式都是相同的，三者区别在于：v-model在selet中使用，只需要绑定到select标签中即可，不需要再给每一个选项options再绑定数据；而在checkbox和radio中使用则需要在每一个input标签中都绑定同一个数据。
<!--1.选择一个：fruit中保存的是一个""-->
<select name="abc" v-model="fruit">
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="榴莲">榴莲</option>
<option value="葡萄">葡萄</option>
<option value="橘子">橘子</option>
</select>
<h2>您选择的水果是：{{fruit}}</h2>
<!--2.选择多个: fruits中保存的是一个数组-->
<select name="abc" v-model="fruits" multiple>
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="榴莲">榴莲</option>
<option value="葡萄">葡萄</option>
<option value="橘子">橘子</option>
</select>
<h2>您选择的水果是：{{fruits}}</h2>12.4.v-model的值绑定
在上述的几种v-model的使用中，我们在定义input时就已经给这条input所代表的值定义好了，这无疑时不够灵活的，因此，我们可以通过v-bind来给这些input动态的赋值，这将大大提高我们的input的代码复用率。
<div id="app">
<label v-for="item in originHobbies" :for="item">//for是确定label和哪一个inout连接的for和id一一对应
<input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
</label>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
originHobbies: ['篮球', '足球', '乒乓球', '羽毛球', '台球', '高尔夫球', '保龄球']
}
})
</script>12.5.v-model的修饰符
lazy
默认情况下，v-model默认是在input事件中同步输入框中的数据的。也就是说，一旦有数据发生改变，对应的data中的数据就会自动发生改变。lazy修饰符可以让数据在失去焦点或者回车时才会更新
<input type="text" v-model.lazy="message">
<h2>{{message}}</h2>回车或是失去焦点时更新数据number
默认情况下，在输入框中无论我们输入的是字母还是数字都会被当作字符串类型进行处理，但是如果我们虚妄处理的是数字类型，那么最好是直接将内容当作数字处理。number修饰符可以让在输入框中输入的内容自动装成数字类型
注意：我们在input文本框中输入的字符，默认值为''，即为空时，我们data中的数据默认为字符串类型；默认值不为空，是一个数字时，初始为Number类型，但是当我们输入一个数字到文本框后，就会变成字符串类型；当我们添加了number修饰符后，则一致保持Number类型。
值得注意的是，当我们添加了number这个修饰符之后，当我们的文本框中为空时，其所绑定的数据的数据类型会变为字符串类型。
<!--情况一-->
<input type="number" v-model="ageOne">
<h2>{{typeof ageOne}}</h2>//初始为空，字符串，输入数字仍为字符串
<!--情况二-->
<input type="number" v-model="ageTwo">
<h2>{{typeof ageTwo}}</h2>//初始不为空时number，随便输入一个数字变为字符串
<!--使用修饰符-->
<input type="number" v-model.number="ageThree">
<h2>{{typeof ageThree}}</h2>//为空时字符串，有数字时numbertrim
如果输入的内容首位有很多空格，通常我们希望将其去除。trim修饰符可以过滤内容左右两边的空格
<input type="text" v-model.trim.lazy="name">
<h2>您输入的名字是：{{name}}</h2>//当我们在输入框中输入 aaa 时，我们得到的结果是aaa
16万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
