1.创建Vue实例传入的options
创建Vue实例的时候，传入了一个对象options，这个options可以包含哪些选项？
el：
类型：string | HTMLElement
作用：决定之后Vue实例会管理哪一个DOM。
data：
类型：Object | Function（组件中data必须是一个函数）
作用：Vue实例对应的数据对象。
methods：
类型：{[key:string]:Function}
作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用。
2.开发中什么时候称之为方法，什么时候称之为函数？
方法：method；
函数：function；
3.定义vue中的template
没内容
4.插值表达式
Mustache可以将data中的文本数据插入到HTML中。
mustache语法中，不仅可以直接写变量，也可以写简单的表达式。
5.v-text指令的使用
作用和Mustache用法类似 ，将数据显示在界面中。
6.v-cloak（斗篷）指令，让某一个标签不显示
<style>
[v-cloak] {
display: none;
}
</style>
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>
<body>
<div id="app">
<ul>
//正常使用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>
</ul>
</div>
<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">
<ul>
//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>
</ul>
</div>
const app = new Vue({
el: '#app',
data: {
movies: ['123', '321', '456', '789']
}
})
2.在遍历过程中，获取索引值
<div id="app">
<ul>
<li v-for="(item, index) in movies">{{item}}---{{index}}</li>
</ul>
</div>
const app = new Vue({
el: '#app',
data: {
movies: ['123', '321', '456', '789']
}
})
//显示结果为123---0；321---1；456---2；789---3
2.遍历对象
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)，先写value再key，最后也是按这个顺序显示
<ul>
<li v-for="(value, key, index) in info">{{value}}--{{key}}--{{index}}</li>
</ul>
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调用时要在后面加括号。
<body>
<div id="app">
<h2>计算属性</h2>
<p>{{firstName}} {{lastName}}</p>
<p>{{getFullName()}}</p>
<p>{{fullName}}</p>
</div>
<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.计算属性复杂用法，实现数据计算再显示出来。
<body>
<div id="app">
<h2>{{totalPrice}}</h2>
</div>
<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,
age,
height,
}
console.log(obj)
//结果为{name:"why", age:18, height:1.88}
2.函数的增强写法(es5)
const obj = {
run: function() {},
eat: function() {}
}
函数的增强写法(es6)
const obj = {
run() {},
eat() {}
}
eg:
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>
</div>
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>
</div>
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>
</div>
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>
</div>
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>
</div>
<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>
</div>
<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>
</div>
<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>
</div>
<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>
</div>
<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: ['篮球','足球','乒乓球','羽毛球','台球','高尔夫球']
},
})
