7.v-bind指令，插值表达式是将值插入到我们的模板内容中改变的是内容，v-bind改变的是属性，缩写为 : 。

​ 1.基本使用：比如，动态绑定a元素的href属性；动态绑定img元素的src属性。

eg：<img v-bind:src="imgURL" alt="">
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                imgURL: 'https://img.jpg',
    </script>
v-bind用于动态改变src属性，src属性需要动态绑定来改变，此时等号右边"imgURL"就被认为是变量而不是字符串。然后变量imgURL去下方实例里面寻找对应的地址，再把地址放到这个变量里，也就是变量imgURL通过寻找地址找到要显示的内容。
​	2.v-bind动态绑定class（对象语法用法）
就是原本是直接在标签上添加class，使用v-bind后可以为一个class添加多个键值对使标签显示不同的内容样式，甚至可以用methods控制显示class中的某个键值对并使其他键值对不显示从而控制标签属性样式。
<style>
        .classes {
            color: pink;
        .red {
            color: red;
    </style>
</head>
    <div id="app">
            //正常使用class
            <li v-for="(item, index)  in movies" class="classes">{{index}}--{{item}}</li>
            //使用v-bind更改class
            <li v-for="(item, index)  in movies" v-bind:class="{red: isRed, black: isBlack}">{{index}}--{{item}}</li>            
<script>
    const app = new Vue({
        el: '#app',
        data: {
            movies: ['123', '321', '456', '789'],
            isRed: true,//通过在控制台更改app.isRed=true/false可使样式red作不作用于li标签
            isBlack: false,
</script>
​	3.v-bind绑定class（数组语法）
数组语法的含义是：class后面跟的是一个数组。
​		1.直接通过{}绑定一个类

<h2 :class="['active']">Hello World</h2>
​		2.也可以传入多个值
<h2 :class="['active','line']">Hello World</h2>
​		3.和普通的类同时存在，并不冲突，会有title/active/line三个类
<h2 class="title" :class="['active','line']">Hello World</h2>
​		4.如果过于复杂，可以放在一个methods或者computed中，注：classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>"
​	4.v-bind动态绑定style（对象语法）
可以使用v-bind绑定一些CSS内联样式。
在写css属性名的时候，比如font-size
我们可以使用驼峰式（camelCase）fontSize；
或短横线分隔（kebab-case，记得用单引号括起来）'font-size'
​	绑定class有两种方式：
绑定方式一：对象语法
:style="{color: currentColor, fontSize: fontSize + 'px'}"
style后面跟的是一个对象类型
​	对象的key是CSS属性名称；
​	对象的value是具体的值，值可以来自于data中的属性
绑定方式二：数组语法
<div v-bind:style="[baseStyles,  overridingsStyles]"></div>
style后面跟的是一个数组类型
​	多个值，分割即可。
8.v-for遍历，意义由vue赋予的
​	1.遍历数组
1.在遍历过程中，没有使用索引值（下标值）时：
<div id="app">
//v-for遍历的是movies中的每一项，使其在ul中以列表形式呈现，所以是item in movies，代表movies[0]、movies[1]、movies[2]、movies[3]，故li中展示的内容应该是item。
            <li v-for="item in movies">{{item}}</li>
const app = new Vue({
        el: '#app',
        data: {
            movies: ['123', '321', '456', '789']
2.在遍历过程中，获取索引值
<div id="app">
            <li v-for="(item, index) in movies">{{item}}---{{index}}</li>
const app = new Vue({
        el: '#app',
        data: {
            movies: ['123', '321', '456', '789']
//显示结果为123---0；321---1；456---2；789---3
​	2.遍历对象
1.在遍历对象的过程中，如果只是获取一个值，那么获取到的是value
	<li v-for="item in info">{{item}}</li>
2.获取对象的key和value，格式：(value,key)
	<li v-for="(value, key) in info">{{value}}--{{key}}</li>
3.获取key和value和index，格式：(value, key, index)，先写value再key，最后也是按这个顺序显示
	<li v-for="(value, key, index) in info">{{value}}--{{key}}--{{index}}</li>
info: {
	name: 'why',
	age: 18,
	height: 50,
​	3.组件的key属性
官方推荐我们在使用v-for时，给对应的元素或组件添加上一个:key属性；
使用key给每个节点做一个唯一标识，Diff算法可以正确识别此节点，找到正确的位置区插入新的节点，key的作用主要是为了高效的更新虚拟DOM。
key与要展示的内容对应，总之可以使内部性能高，比如要展示的是item则key绑定item。
9.计算属性
在模板中可以使用插值语法显示一些data中的数据，但是在某些情况，可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示，
​	1.基础用法：
​	比如有firstName和lastName两个变量，需要显示完整的名称；
但是如果多个地方都需要显示完整的名称，就需要写多个{{firstName}}{{lastName}}
注意：计算属性本质为属性不是函数，所以在调用它时不用在后面加括号，不像methods调用时要在后面加括号。
    <div id="app">
        <h2>计算属性</h2>
        <p>{{firstName}}  {{lastName}}</p>
        <p>{{getFullName()}}</p>
        <p>{{fullName}}</p>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            firstName: '木之本',
            lastName: '樱',
        computed: {
            fullName: function() {
                return this.firstName + this.lastName
        methods: {
            getFullName() {
                return this.firstName + this.lastName
</script>
​	2.计算属性复杂用法，实现数据计算再显示出来。
    <div id="app">
        <h2>{{totalPrice}}</h2>
<script>
     const app = new Vue({
        el: '#app',
        data: {
            books: [
                {id: 110,name: 'Unix编程艺术', price: 119},
                {id: 111,name: 'Unix编程艺术2', price: 110},
                {id: 112,name: 'Unix编程艺术3', price: 120},
                {id: 113,name: 'Unix编程艺术4', price: 100}
        computed: {
            totalPrice: function() {
                let result = 0
                for (let i = 0;i < this.books.length; i++) {
                    result += this.books[i].price
                return result
</script>
</body>
​	3.计算属性setter和getter
每个计算属性都包含一个getter和一个setter，一般只用get方法只读属性。
​	4.计算属性和methods对比
计算属性会进行缓存，如果多次使用，计算属性只会调用一次。
10.补充es6用法let/var/const（let/const为es6中新添）
let可看作更完美的var，let有自己的作用域，甚至不用借用闭包。
​	块级作用域
​	JS中使用var来声明一个变量时，变量的作用域主要和函数的定义有关，针对其他块定义来说是没有作用域的，比如if/for等，会引起问题。
const关键字
​	在很多语言中已经存在，主要作用是将某个变量修饰为常量；
​	在js中也是如此，使用const修饰的标识符为常量不可以再次赋值。
​	什么时候使用const？
​		当我们修饰的标识符不会被再次赋值时可以使用const来保证数据的安全性。
​	const的注意点：
​		一：const a = 20; a = 30;//错误，不可以修改
​		二：const name;//错误，const修饰的标识符必须赋值。
建议：在ES6开发中，优先使用const，只有需要改变某一个标识符的时候才使用let。
11.补充es6-----对象字面量的增强写法
创建一个对象：const obj = new Object()
一般写法：		const obj = {}    //其中大括号为对象字面量
一般写带内容的对象时：
const obj = {
    name: 'why',
    age: 18,
    run: function() {
      console.log('在跑');
    eat: function() {
      console.log('在吃东西');
增强写法：
​	1.属性增强写法(es5)
const name = 'why';
const age = 18;
const height = 1.88;
const obj = {
	name: name,
	age: age,
	height: height,
console.log(obj)
//结果为{name:"why", age:18, height:1.88}
​	属性增强写法(es6)
const name = 'why';
const age = 18;
const height = 1.88;
const obj = {
	name,
	height,
console.log(obj)
//结果为{name:"why", age:18, height:1.88}
​	2.函数的增强写法(es5)
const obj = {
    run: function() {},
    eat: function() {}
函数的增强写法(es6)
const obj = {
    run() {},
    eat() {}
methods: {
	getFullName: function() {
		return this.firstName + this.lastName
	//可写为：
	getFullName() {}
12.v-on基本使用和语法糖
在vue中使用v-on指令监听。
v-on介绍：
​	作用：绑定事件监听器；
​	缩写：@；
​	预期：Function|Inline Statement|Object
​	参数：event
基本写法：
<div id="app">
    <h2>{{counter}}</h2>
    <!-- 语法糖写法 -->
    <!-- <button @click="increment">+</button> -->
    <button v-on:click="increment">+</button>
    <button v-on:click="decrement">-</button>
const app = new Vue({
	el: '#app',
	data: {
		counter: 0
	methods: {
		increment() {
			this.counter++
		decrement() {
			this.counter--
v-on参数传递：

当通过methods中定义方法，以供@click调用时，需要注意参数问题。
情况一：如果该方法不需要额外参数，那么方法后的()可以不添加；
​	但是注意：如果方法本身中有一个参数，那么会默认将原生时间event参数传递进去。
情况二：如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件。
事件调用的方法没有参数：此时两个button按钮中调用的btn1Click加不加括号结果都一样，此时没有传参数
<button @click="btn1Click()">按钮1</button>
<button @click="btn1Click">按钮1</button>
methods: {
	btn1Click() {
		console.log('btn1Click')
在事件定义时，写函数时省略了小括号，但是方法本身是需要一个参数的
<button @click="btn2Click(123)">按钮2</button>  
//此时若为btn2Click()，也即函数需要参数但没有传入，那么函数的形参为undefined
methods: {
	btn2Click(abc) {
		console.log(abc)
此时若为btn2Click，省略小括号，但是方法本身需要一个参数，这时候Vue会默认将浏览器生产的event事件对象作为参数传入到方法methods中。
<button @click="btn2Click">按钮2</button>  
methods: {
	btn2Click(event) {
		console.log(event)
方法定义时，需要event对象同时又需要其他参数
//如果写成如下形式，btn3Click中的event会被当成变量而不是参数，会在data中找有无event变量，因为没有所以会报错
<button @click="btn3Click(123, event)">按钮3</button> 
//如果想要正常获得两个参数应写为下面样式，当想要使用调用方式手动获取到浏览器参数的event对象时使用：$event
<button @click="btn3Click(123, $event)">按钮3</button> 
//当想传入的不是基本数字类型时,其中methods中btn3Click括号中只代表变量名
<button @click="btn3Click('abc', $event)">按钮3</button> 
methods: {
	btn3Click(abc, event) {
		console.log(abc, event)
v-on修饰符
在某些情况下，拿到event的目的可能时进行一些事件处理，Vue提供了修饰符来帮助我们方便的处理一些事件：
.stop - 调用event.stopPropagation()
.prevent - 调用event.preventDefault()
.{keyCode | keyAlias} - 只当是从特定键触发时才触发回调
.native - 监听组件根元素的原生事件
.once - 只触发一次回调
.stop修饰符使用场景
//此时点击按钮会触发两个点击事件，点击aaaaaaa会触发div中点击事件，若只触发div中点击事件，则可以为button点击事件添加stop
<div @click="divClick">
    aaaaaaaaaa
    <button @click="btnClick">按钮</button>
    //更改为
    <button @click.stop="btnClick">按钮</button>
methods: {
	btnClick() {
		console.log('btn点击')
	divClick() {
		console.log('div点击')
.prevent修饰符使用场景
//阻止表单的默认提交事件
<form action="baidu">
	<input type="submit" value="提交" @click.prevent="submitClick">
</form>
methods: {
	submitClick() {
		console.log('提交')
13.v-if、v-else-if、v-else（适用于条件判断简单情况，复杂的还是在计算属性用if-else写好些）
这三个指令与js的条件语句if、else、else if类似，Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件。
v-if的原理：v-if后面的条件为false时，对应的元素及子元素不会被渲染，也就是不会有对应的标签出现在DOM中。
v-else与else类似，都是与v-if进行相反操作，不需要条件。
<h2 v-if="isShow">{{message}}</h2>
<h1 v-else>isShow为false时，显示内容</h1>
data: {
	message: '你好',
	isShow: true
//控制台输出结果：因为isShow为true所以显示‘你好’，当直接在控制台更改isShow的值为false时，显示内容为‘isShow为false时，显示内容’，原本显示的‘你好’隐藏。
v-else-if：也需要条件，可以与v-if接连使用用于分开条件实现对应内容。
<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>
const app = new Vue({
	el: '#app',
	data: {
		score: 90
14.v-show使用，v-if和v-show对比
v-show和v-if非常相似，也用于决定一个元素是否渲染。
v-if和v-show对比
v-if当条件为false时，压根不会有对应元素在DOM中；
v-show当条件为false时，仅仅是将元素的display属性设置为none而已。
开发中如何选择？
当需要在显示和隐藏之间切片很频繁时，使用v-show
当只有一次切换时，通过使用v-if
//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>
const app = new Vue({
	el: '#app',
	data: {
		message: '你好啊',
		isShow: true,
15.哪些数组的方法是响应式的
检测数组更新
因为Vue是响应式的，所以当数据发生变化时，Vue会自动检测数据变化，视图会发生对应的更新。
Vue中包含了一组观察数组编译的方法，使用它们改变数组也会触发视图的更新。
数组有：push()；pop()；shift()；unshift()；splice()；sort()；reverse()。
但是也有能修改数组中内容不能修改视图内容的数组：letters，数组内容会改变但是页面显示无变化，此时可以使用splice()方法或者vue内部set()方法解决。
<div id="app">
        <p v-for="item in letters">{{item}}</p>
        <button @click="btnClick">按钮</button>
const app = new Vue({
        el: '#app',
        data: {
            letters: ['a', 'b', 'c', 'd']
        methods: {
            btnClick() {
                //1.push方法，数组末尾添加元素，可添加多个
                //this.letters.push('aaa')
                //2.pop方法，数组末尾删除元素
                //this.letters.pop()
                //3.shift()方法，删除数组中的第一个元素
                //this.letters.shift()
                //4.unshift()方法，在数组最前面添加元素，可添加多个
                //this.letters.unshift('mmmm')
                //this.letters.unshift('mmmm','ccc','ddd')
                //5.splice作用：删除元素/插入元素/替换元素
                //  1.删除元素：第二个参数传入你要删除几个元素（如果没有传，就删除后面所有的元素）
                //    splice(start)，start为第一个参数，代表从哪个位置开始；第二个参数代表从第一个参数指定位置开始删除几个
                //this.letters.splice(1,2)
                //  2.替换元素：第一个元素start代表从哪开始，第二个元素代表要替换几个，之后内容为要替换的内容
                //this.letters.splice(1, 3, 'm','n','l')/* 从b开始把b/c/d替换为m/n/l */
                //  3.插入元素：第二个参数是，传入0，并且后面跟上要插入的元素
                //this.letters.splice(1, 0, 'x', 'y', 'z')
                //6.sort()排序方法
                //this.letters.sort()
                //7.反转函数，把当前元素顺序完全颠倒
                //this.letters.reverse()
                //注意：通过索引值修改数组中的元素，letters方法，非响应式，数组已经改变但是界面无变化，此时可以使用splice方法或者vue内部set方法解决
                //this.letters[0] = 'bbbb'
                //set()方法，set(要修改的对象，索引值，修改后的值)
                Vue.set(this.letters, 0 , 'bbbbbb')
16.表单绑定v-model
表单控件是实际开发中非常常见的，特别对于用户信息的提交，需要大量的表单。
Vue中使用v-model指令来实现表单元素和数据的双向绑定。
​	1.v-model的原理：
​		1.v-bind绑定一个value属性；
​		2.v-on指令给当前元素绑定input事件；
<input type="text" v-model="message">
<input type="text" v-bind:value="message" v-on:input="message = $event.target.value">
<div id="app">
        <input type="text" :value="message" v-on:input="valueChange">
        <h2>{{message}}</h2>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊'
        methods: {
            valueChange(event) {
                this.message = event.target.value
</script>
​	2.v-model结合radio使用
<div id="app">
        <label for="male">
            <!-- 加上value="男/女"才能将值传给data中sex -->
            <!-- name="sex"设置同一名称可实现选择时互斥，或者v-model="sex"也可以实现选择时互斥 -->
            <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>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊',
            sex: '女'/* 设置一个默认，直接一开始就是选中状态，之后选择也能变化 */
</script>
​	3.v-model与checkbox
复选框分为两种情况：单个勾选框和多个勾选框。
单个勾选框：
​	v-model即为布尔值；
​	此时input的value并不影响v-model的值；
多个复选框：
​	当是多个复选框时，因为可以选中多个，所以对应的data中属性是一个数组；
​	当选中某一个时，就会将input的value添加到数组中；
单选框一般使用场景： 
<div id="app">
        <label for="agree">
            <input type="checkbox" id="agree" v-model="isAgree">同意协议
        </label>
        <h2>您选择的是：{{isAgree}}</h2>
        <button :disabled="!isAgree">下一步</button>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊',
            isAgree: false
</script>
多选框一般使用场景：
<label for="">
            <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>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊',
            hobbies: []
​	4.v-model与select
和checkbox一样，select也分为单选和多选两种情况。
单选：只能选中一个值。
​	v-model绑定的是一个值；
​	当我们选中option中的一个时，会将它对应的value赋值到fruit中；
多选：可以选中多个值。
​	v-model绑定的是一个数组；
​	当选中多个值时，就会将选中的option对应的value添加到数组fruits中；
<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>
const app = new Vue({
   el: '#app',
   data: {
       message: '你好啊',
       fruit: '香蕉',
<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>
const app = new Vue({
    el: '#app',
    data: {
        message: '你好啊',
        fruits: [],
​	5.v-model修饰符（lazy/number/trim修饰符）
lazy修饰符：
​	默认情况下，v-model默认是在input事件中同步输入框的数据的；
​	一旦有数据发生改变对应的data中的数据就会自动发生改变；
​	lazy修饰符可以让数据在失去焦点或者回车时才会更新；
number修饰符：
​	默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当作字符串类型进行处理；
​	但是如果我们希望处理的是数字类型，那么最好直接将内容当作数字处理；
​	number修饰符可以让在输入框中输入的内容自动转成数字类型；
trim修饰符：
​	如果输入的内容首尾有很多空格，通常我们希望将其去除；
​	trim修饰符可以过滤内容左右两边的空格；
<div id="app">
        <input type="text" v-model.lazy="message">
        <h2>{{message}}</h2>
        <input type="number" v-model.number="age">
        <h2>{{age}}---{{typeof age}}</h2>
        <input type="text" v-model.trim="name">
        <h2>您输入的名字：{{name}}</h2>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊',
            age: 0,
            name: '',
</script>
17.JavaScript高阶函数的使用（filter / map / reduce）
编程范式：命令式编程/声明式编程
编程范式：面向对象编程（第一公民：对象）/函数式编程（第一公民：函数）
​	1.filter中的回调函数有一个要求：必须返回一个boolean值；
​	true：当返回true时，函数内部会自动将这次回调函数的n加入到新的数组中；
​	false：当返回false时，函数内部会过滤掉这次的n
const nums = [10, 20, 111, 222, 444, 40, 50]
//把小于100的加入到新数组中10，20，40，50
let newNums = nums.filter(function (n) {
	return n < 100
console.log(newNums)
​	2.map函数的使用
let new2Nums = newNums.map(function (n) {
	return n * 2
console.log(new2Nums)
​	3.reduce函数的使用，作用对数组中所有的内容进行汇总
let total = new2Nums.reduce(function (preValue, n) {
	return preValue + n
}, 0)
console.log(total)
18.值绑定
就是动态给value赋值，在真实开发中input的值可能是从网络获取或定义在data中，可以通过v-bind:value动态的给value绑定值。
不是在一开始就写死的，比如下面代码中的value="篮球"，这样是写死了，改写为动态可更改。
<input type="checkbox" value="篮球" v-model="hobbies">篮球
<label v-for="item in originHobbies" :for="item">
    <input type="checkbox" :value="item" v-model="hobbies">{{item}}
</label>
const app = new Vue({
   el: '#app',
   data: {
     message: '你好啊',
     hobbies: [],
     originHobbies: ['篮球','足球','乒乓球','羽毛球','台球','高尔夫球']