什么是Vue?

Vue.js 是一套构建用户界面的框架，它不仅易于上手，还可以与其它第三方库整合(Swiper、IScroll、...)。

2.框架和库的区别?
框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重构整个项目。
库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。
例如: 从jQuery 切换到 Zepto, 无缝切换
从IScroll切换到ScrollMagic, 只需要将用到IScroll的代码替换成ScrollMagic代码即可

3.为什么要学习框架?
提升开发效率：在企业中，时间就是效率，效率就是金钱；
前端提高开发效率的发展历程：原生JS -> jQuery之类的类库 -> 前端模板引擎 -> Vue / React / Angular

4.框架有很多, 为什么要先学Vue
Vue、Angular、React一起，被称之为前端三大主流框架！
但是Angular、React是老外编写的, 所以所有的资料都是英文的
而Vue是国人编写的, 所以所有的资料都是中文的, 并且Vue中整合了Angular、React中的众多优点
所以为了降低我们的学习难度, 我们先学Vue, 学完之后再学习Angular和React

5.使用Vue有哪些优势?
5.1Vue的核心概念之一:
通过数据驱动界面更新, 无需操作DOM来更新界面
使用Vue我们只需要关心如何获取数据, 如何处理数据, 如何编写业务逻辑代码,
我们只需要将处理好的数据交给Vue, Vue就会自动将数据渲染到模板中(界面上)
5.2Vue的核心概念之二:
组件化开发，我们可以将网页拆分成一个个独立的组件来编写
将来再通过封装好的组件拼接成一个完整的网页
https://cn.vuejs.org/images/components.png

<!
1.Vue框架使用方式
1.1传统下载导入使用
1.2vue-cli安装导入使用

2.Vue框架使用步骤
2.1下载Vue框架
2.2导入Vue框架
2.3创建Vue实例对象
2.4指定Vue实例对象控制的区域
2.5指定Vue实例对象控制区域的数据'
-->

<!
1.MVVM设计模式
在MVVM设计模式中由3个部分组成
M : Model 数据模型(保存数据, 处理数据业务逻辑)
V : View 视图(展示数据, 与用户交互)
VM: View Model 数据模型和视图的桥梁(M是中国人, V是美国人, VM就是翻译)

MVVM设计模式最大的特点就是支持数据的双向传递
数据可以从 M -> VM -> V
也可以从 V -> VM -> M

2.Vue中MVVM的划分
Vue其实是基于MVVM设计模式的
被控制的区域: View
Vue实例对象 : View Model
实例对象中的data: Model

3.Vue中数据的单向传递
我们把"数据"交给"Vue实例对象", "Vue实例对象"将数据交给"界面"
Model -> View Model -> View
-->

<!
1.Vue调试工具安装
如果你能打开谷歌插件商店, 直接在线安装即可
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=zh-CN

由于国内无法打开谷歌国外插件商店, 所以可以离线安装
https://www.chromefor.com/vue-js-devtools_v5-3-0/

2.安装步骤:
2.1下载离线安装包
2.2打开谷歌插件界面
2.3直接将插件拖入
2.4报错 程序包无效: "CRX_HEADER_INVALID"
可以将安装包修改为rar后缀, 解压之后再安装
2.5重启浏览器
-->
<!
2.数据双向绑定
默认情况下Vue只支持数据单向传递 M -> VM -> V
但是由于Vue是基于MVVM设计模式的, 所以也提供了双向传递的能力
在<input>、<textarea> 及 <select> 元素上可以用 v-model 指令创建双向数据绑定

注意点: v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值
而总是将 Vue 实例的数据作为数据来源
-->

<!
1.什么是指令?
指令就是Vue内部提供的一些自定义属性,
这些属性中封装好了Vue内部实现的一些功能
只要使用这些指令就可以使用Vue中实现的这些功能

2.Vue数据绑定的特点
只要数据发生变化, 界面就会跟着变化

3.v-once指令:
让界面不要跟着数据变化, 只渲染一次
-->

<!
1.Vue数据绑定过程
1.1会先将未绑定数据的界面展示给用户
1.2然后再根据模型中的数据和控制的区域生成绑定数据之后的HTML代码
1.3最后再将绑定数据之后的HTML渲染到界面上

正是在最终的HTML被生成渲染之前会先显示模板内容
所以如果用户网络比较慢或者网页性能比较差, 那么用户会看到模板内容

2.如何解决这个问题
利用v-cloak配合 [v-cloak]:{display: none}默认先隐藏未渲染的界面
等到生成HTML渲染之后再重新显示

3.v-cloak指令作用:
数据渲染之后自动显示元素
-->

<!
1.什么是v-text指令
v-text就相当于过去学习的innerText

2.什么是v-html指令
v-html就相当于过去学习的innerHTML
-->

<!
1.什么是v-if指令
条件渲染: 如果v-if取值是true就渲染元素, 如果不是就不渲染元素

2.v-if特点:
如果条件不满足根本就不会创建这个元素(重点)

3.v-if注意点
v-if可以从模型中获取数据
v-if也可以直接赋值一个表达式
-->

<!
4.v-else指令
v-else指令可以和v-if指令配合使用, 当v-if不满足条件时就执行v-else就显示v-else中的内容

5.v-else注意点
v-else不能单独出现
v-if和v-else中间不能出现其它内容
-->
<!
6.v-else-if指令
v-else-if可以和v-if指令配合使用, 当v-if不满足条件时就依次执行后续v-else-if, 哪个满足就显示哪个

7.v-else-if注意点
和v-else一样
-->

<!
1.什么是v-show指令
v-show和v-if的能够一样都是条件渲染, 取值为true就显示, 取值为false就不显示

2.v-if和v-show区别
v-if: 只要取值为false就不会创建元素
v-show: 哪怕取值为false也会创建元素, 只是如果取值是false会设置元素的display为none

3.v-if和v-show应用场景
由于取值为false时v-if不会创建元素, 所以如果需要切换元素的显示和隐藏, 每次v-if都会创建和删除元素
由于取值为false时v-show会创建元素并设置display为none, 所有如果需要切换元素的显示和隐藏,
不会反复创建和删除, 只是修改display的值
所以: 如果企业开发中需要频繁切换元素显示隐藏, 那么推荐使用v-show, 否则使用v-if
-->

<!
1.什么是v-bind指令
在企业开发中想要给"元素"绑定数据, 我们可以使用{{}}, v-text, v-html
但是如果想给"元素的属性"绑定数据, 就必须使用v-bind
所以v-bind的作用是专门用于给"元素的属性"绑定数据的

2.v-bind格式
v-bind:属性名称="绑定的数据"
:属性名称="绑定的数据"

3.v-bind特点
赋值的数据可以是任意一个合法的JS表达式
例如: :属性名称="age + 1"
-->

<!
1.v-bind指令的作用
v-bind指令给"任意标签"的"任意属性"绑定数据
对于大部分的属性而言我们只需要直接赋值即可, 例如:value="name"
但是对class于和style属性而言, 它的格式比较特殊

2.通过v-bind绑定类名格式
:class="['需要绑定类名', ...]"

3.注意点:
3.1直接赋值一个类名(没有放到数组中)默认回去Model中查找
:class="需要绑定类名"
2.2数组中的类名没有用引号括起来也会去Model中查找
:class="[需要绑定类名]"
2.3数组的每一个元素都可以是一个三目运算符按需导入
:class="[flag?'active':'']"
2.4可以使用对象来替代数组中的三目运算符按需导入
:class="[{'active': true}]"
2.5绑定的类名太多可以将类名封装到Model中
obj: {
'color': true,
'size': true,
'active': false,
}

4.绑定类名企业应用场景
从服务器动态获取样式后通过v-bind动态绑定类名
这样就可以让服务端来控制前端样式
常见场景: 618 双11等
-->

<!
1.如何通过v-bind给style属性绑定数据
1.1将数据放到对象中
:style="{color:'red','font-size':'50px'}"
1.2将数据放到Model对象中
obj: {
color: 'red',
'font-size': '80px',
}

2.注意点
2.1如果属性名称包含-, 那么必须用引号括起来
2.2如果需要绑定Model中的多个对象, 可以放到一个数组中赋值
-->

<div id="app">
<!- <p style="color: red">我是段落</p>-->
<!
注意点:
和绑定类名一样, 默认情况下v-bind回去Model中查找, 找不到所以没有效果
-->
<! <p :style="color: red">我是段落</p>-->
<!
注意点:
我们只需要将样式代码放到对象中赋值给style即可
但是取值必须用引号括起来
-->
<! <p :style="{color: 'red'}">我是段落</p>-->
<!
注意点:
如果样式的名称带-, 那么也必须用引号括起来才可以
-->
<! <p :style="{color: 'red', 'font-size': '100px'}">我是段落</p>-->
<! <p :style="obj">我是段落</p>-->
<!
注意点:
如果Model中保存了多个样式的对象 ,想将多个对象都绑定给style, 那么可以将多个对象放到数组中赋值给style即可
-->

<!
1.什么是v-on指令?
v-on指令专门用于给元素绑定监听事件

2.v-on指令格式
v-on:事件名称="回调函数名称"
@事件名称="回调函数名称"

3.v-on注意点:
v-on绑定的事件被触发之后, 会去Vue实例对象的methods中查找对应的回调函数
-->

<div id="app">
<! <button onclick="alert('lnj')">我是按钮</button>-->
<!
注意点:
1.如果是通过v-on来绑定监听事件, 那么在指定事件名称的时候不需要写on
2.如果是通过v-on来绑定监听事件, 那么在赋值的时候必须赋值一个回调函数的名称
-->
<! <button v-on:click="alert('lnj')">我是按钮</button>-->
<!
注意点:
当绑定的事件被触发后, 会调用Vue实例的methods对象中对应的回调函数
-->

<!
1.v-on修饰符
在事件中有很多东西需要我们处理, 例如事件冒泡,事件捕获, 阻止默认行为等
那么在Vue中如何处理以上内容呢, 我们可以通过v-on修饰符来处理

2.常见修饰符
.once - 只触发一次回调。
.prevent - 调用 event.preventDefault()。
.stop - 调用 event.stopPropagation()。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.capture - 添加事件侦听器时使用 capture 模式。
-->

<!
1.v-on注意点
1.1绑定回调函数名称的时候, 后面可以写()也可以不写
v-on:click="myFn"
v-on:click="myFn()"

1.2可以给绑定的回调函数传递参数
v-on:click="myFn('lnj', 33)"

1.3如果在绑定的函数中需要用到data中的数据必须加上this
-->

<!
1.什么是按键修饰符
我们可以通过按键修饰符监听特定按键触发的事件
例如: 可以监听当前事件是否是回车触发的, 可以监听当前事件是否是ESC触发的等

2.按键修饰符分类
2.1系统预定义修饰符
2.2自定义修饰符
-->

<!
1.自定义全局指令
在Vue中除了可以使用Vue内置的一些指令以外, 我们还可以自定义指令

2.自定义全局指令语法
ue.directive('自定义指令名称', {
生命周期名称: function (el) {
指令业务逻辑代码
}
});

3.指令生命周期方法
自定义指令时一定要明确指令的业务逻辑代码更适合在哪个阶段执行
例如: 指令业务逻辑代码中没有用到元素事件, 那么可以在bind阶段执行
例如: 指令业务逻辑代码中用到了元素事件, 那么就需要在inserted阶段执行

4.自定义指令注意点
使用时需要加上v-, 而在自定义时不需要加上v-
-->
'
<!
1.自定义指令参数
在使用官方指令的时候我们可以给指令传参
例如: v-model="name"
在我们自定义的指令中我们也可以传递传递

2.获取自定义指令传递的参数
在执行自定义指令对应的方法的时候, 除了会传递el给我们, 还会传递一个对象给我们
这个对象中就保存了指令传递过来的参数
-->

<!
1.自定义全局指令的特点
在任何一个Vue实例控制的区域中都可以使用

2.自定义局部指令的特点
只能在自定义的那个Vue实例中使用

3.如何自定义一个局部指令
给创建Vue实例时传递的对象添加
directives: {
// key: 指令名称
// value: 对象
'color': {
bind: function (el, obj) {
el.style.color = obj.value; }}}
-->

<!
1.插值语法特点
可以在{{}}中编写合法的JavaScript表达式

2.在插值语法中编写JavaScript表达式缺点
2.1没有代码提示
2.2语句过于复杂不利于我们维护

3.如何解决?
对于任何复杂逻辑，你都应当使用计算属性
-->

<!
1.计算属性和函数
通过计算属性我们能拿到处理后的数据, 但是通过函数我们也能拿到处理后的数据
那么计算属性和函数有什么区别呢?
2.1函数"不会"将计算的结果缓存起来, 每一次访问都会重新求值
2.2计算属性"会"将计算的结果缓存起来, 只要数据没有发生变化, 就不会重新求值

2.计算属性应用场景
计算属性:比较适合用于计算不会频繁发生变化的的数据
-->

<!
1.什么是过滤器?
过滤器和函数和计算属性一样都是用来处理数据的
但是过滤器一般用于格式化插入的文本数据

2.如何自定义全局过滤器
Vue.filter("过滤器名称", 过滤器处理函数):

3.如何使用全局过滤器
{{msg | 过滤器名称}}
:value="msg | 过滤器名称"

4.过滤器注意点
4.1只能在插值语法和v-bind中使用
4.2过滤器可以连续使用
-->

<!
1.自定义全局过滤器的特点
在任何一个Vue实例控制的区域中都可以使用

2.自定义局部过滤器的特点
只能在自定义的那个Vue实例中使用

3.如何自定义一个局部指令
给创建Vue实例时传递的对象添加
filters: {
// key: 过滤器名称
// value: 过滤器处理函数
'formartStr': function (value) {}
}
-->

<!
1.transition注意点:
transition中只能放一个元素, 多个元素无效
如果想给多个元素添加过渡动画, 那么就必须创建多个transition组件

2.初始动画设置
默认情况下第一次进入的时候没没有动画的
如果想一进来就有动画, 我们可以通过给transition添加appear属性的方式
告诉Vue第一次进入就需要显示动画

3.如何给多个不同的元素指定不同的动画
如果有多个不同的元素需要执行不同的过渡动画,那么我们可以通过给transition指定name的方式
来指定"进入之前/进入之后/进入过程中, 离开之前/离开之后/离开过程中"对应的类名
来实现不同的元素执行不同的过渡动画
-->

<!
1.当前过渡存在的问题
通过transition+类名的方式确实能够实现过渡效果
但是实现的过渡效果并不能保存动画之后的状态
因为Vue内部的实现是在过程中动态绑定类名, 过程完成之后删除类名
正式因为删除了类名, 所以不能保存最终的效果

2.在Vue中如何保存过渡最终的效果
通过Vue提供的JS钩子来实现过渡动画
v-on:before-enter="beforeEnter" 进入动画之前
v-on:enter="enter" 进入动画执行过程中
v-on:after-enter="afterEnter" 进入动画完成之后
v-on:enter-cancelled="enterCancelled" 进入动画被取消

v-on:before-leave="beforeLeave" 离开动画之前
v-on:leave="leave" 离开动画执行过程中
v-on:after-leave="afterLeave" 离开动画完成之后
v-on:leave-cancelled="leaveCancelled" 离开动画被取消

3.JS钩子实现过渡注意点
3.1在动画过程中必须写上el.offsetWidth或者el.offsetHeight
3.2在enter和leave方法中必须调用done方法, 否则after-enter和after-leave不会执行
3.3需要需要添加初始动画, 那么需要把done方法包裹到setTimeout方法中调用
-->

<!
1.自定义类名动画
在Vue中除了可以使用 默认类名(v-xxx)来指定过渡动画
除了可以使用 自定义类名前缀(yyy-xx)来指定过渡动画(transition name="yyy")
除了可以使用 JS钩子函数来指定过渡动画以外
还可以使用自定义类名的方式来指定过渡动画

enter-class // 进入动画开始之前
enter-active-class // 进入动画执行过程中
enter-to-class // 进入动画执行完毕之后
leave-class // 离开动画开始之前
leave-active-class // 离开动画执行过程中
leave-to-class // 离开动画执行完毕之后
-->

<!
1.配合Animate.css实现过渡动画
1.1导入Animate.css库
1.2在执行过程中的属性上绑定需要的类名
-->

<!
1.v-for注意点
1.1v-for为了提升性能, 在更新已渲染过的元素列表时，会采用“就地复用”策略。
也正是因为这个策略, 在某些时刻会导致我们的数据混乱
例如: 在列表前面新增了内容
1.2为了解决这个问题, 我们可以在渲染列表的时候给每一个元素加上一个独一无二的key
v-for在更新已经渲染过的元素列表时, 会先判断key是否相同, 如果相同则复用, 如果不同则重新创建

2.key属性注意点
不能使用index的作为key,因为当列表的内容新增或者删除时index都会发生变化
-->

<!
1.如何同时给多个元素添加过渡动画
通过transition可以给单个元素添加过渡动画
如果想给多个元素添加过渡动画, 那么就必须通过transition-group来添加

transition-group和transition的用法一致, 只是一个是给单个元素添加动画, 一个是给多个元素添加动画而已
-->

<!
1.transition-group注意点:
默认情况下transition-group会将动画的元素放到span标签中
我们可以通过tag属性来指定将动画元素放到什么标签中

2.transition-group动画混乱问题
一般情况下组动画出现动画混乱都是因为v-for就地复用导致的
我们只需要保证所有数据key永远是唯一的即可
-->

<!
Vue两大核心: 1.数据驱动界面改变 2.组件化
1.什么是组件? 什么是组件化?
1.1在前端开发中组件就是把一个很大的界面拆分为多个小的界面, 每一个小的界面就是一个组件
1.2将大界面拆分成小界面就是组件化

2.组件化的好处
2.1可以简化Vue实例的代码
2.2可以提高复用性

3.Vue中如何创建组件?
3.1创建组件构造器
3.2注册已经创建好的组件
3.3使用注册好的组件
-->

<!
1.创建组件的其它方式
1.1在注册组件的时候, 除了传入一个组件构造器以外, 还可以直接传入一个对象
1.2在编写组件模板的时候, 除了可以在字符串模板中编写以外, 还可以像过去的art-template一样在script中编写
1.3在编写组件模板的时候, 除了可以在script中编写以外, vue还专门提供了一个编写模板的标签template
-->

<!
1.自定义全局组件特点
在任何一个Vue实例控制的区域中都可以使用

2.自定义局部组件特点
只能在自定义的那个Vue实例控制的区域中可以使用

3.如何自定义一个局部组件
在vue实例中新增components: {}
在{}中通过key/vue形式注册组件
components:{
abc: {}
}
-->

<!
1.自定义组件中的data和methods
Vue实例控制的区域相当于一个大的组件, 在大组件中我们可以使用data和methods
而我们自定义的组件也是一个组件, 所以在自定义的组件中也能使用data和methods

2.自定义组件中data注意点
在自定义组件中不能像在vue实例中一样直接使用data
而是必须通过返回函数的方式来使用data
-->

<!
1.什么是生命周期方法?
和wbpack生命周期方法一样, 都是在从生到死的特定阶段调用的方法
PS: 生命周期钩子 = 生命周期函数 = 生命周期事件
2.Vue生命周期方法分类
2.1创建期间的生命周期方法
beforeCreate:
created:
beforeMount:
mounted:
2.2运行期间的生命周期方法
beforeUpdate:
updated:
2.3销毁期间的生命周期方法
beforeDestroy:
destroyed：
-->