vue基础知识整理
每天的练习代码：https://github.com/hhhh25/VUE
目录
DAY-1
MVC
MVVM
MVC（后端）和MVVM（前端）的区别
基本指令
事件修饰符
遍历方法
全局过滤器和私有过滤器
DAY-2
Vue实例的生命周期
1.创建期间
2.运行阶段
3.销毁阶段
过渡类名：写两组类的样式
进入过渡：
离开过渡
DAY-3
定义vue组件
组件间的切换：
DAY-4
父子组件之间数据的传递
父组件向子组件传值
父组件向子组件传递方法
子组件向父组件传值：
data和prop 的两点区别
ref（referance）获取Dom元素/组件
路由
前端路由：
代码高亮
vue-router的使用
路由规则中定义参数的方法
children属性实现路由嵌套
watch属性的使用
computed计算属性的使用
watch、computed和methods之间的对比
DAY-1
MVC
Model-View- Controller
模型-视图-控制器
模型Model：后端传递的数据
视图View：前端所看到的页面
控制器Controller：页面业务逻辑
使用MVC的目的就是将Model和View的代码分离
MVC是单向通信，View跟Model必须通过Controller来承上启下。
MVVM
Model-View-ViewModel
模型-视图-视图模型
模型Model：后端传递的数据
视图View：前端所看到的页面
视图模型ViewModel：
连接Model和View的桥梁，mvvm模型的核心。
方向：
1.模型---->视图，即将后端传递的数据转化为所看到的页面
实现方式：数据绑定
2.视图----->模型，将所看到的页面转化为后端的数据
实现方式：DOM事件监听
这两个方向都实现的，我们称之为数据的双向绑定。
总结：在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信。MVVM流程图如下：
MVC（后端）和MVVM（前端）的区别
并不是VM完全取代了C，ViewModel存在目的在于抽离Controller中展示的业务逻辑，而不是替代Controller，其它视图操作业务等还是应该放在Controller中实现。
也就是说MVVM实现的是业务逻辑组件的重用。
MVVM框架:VUE的介绍
Vue就是基于MVVM模式实现的一套框架。
在vue中：
Model:指的是js中的数据，如对象，数组等等。
View:指的是页面视图
viewModel:指的是vue实例化对象
它用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
vue实例控制的元素区域就是view
注意：new出来的对象就是mvvm的调度者
页面里面的数据data就是mvvm中的model,用来保存每个页面的数据
el:指定要控制的区域
data:(对象)，指定了控制区域内要用到的数据
methods(对象)，用来定义方法
在实例中，如果想要调用data/method中的方法，必须通过this.属性名/方法名来访问，这里的this就是new 出来的实例对象。
基本指令
v-cloak 解决闪烁
v-text / 插值表达式 都是将数据添加到页面 但v-text会覆盖元素中的内容
v-html 将内容解析为html，也会覆盖
v-bind: 绑定属性的指令，v-bind中可以写合法的表达式
简写 ：
v-on: 绑定事件
简写：@
为事件指定处理函数的时候，如果加了小括号，就可以给函数传参了
v-bind：只能实现数据的单向绑定(从M绑定到V中去)
v-model：来实现数据的双向绑定
v-model只能运用在表单元素中 input(radio text address email...) select checkbox textarea
v-for：可用来遍历数组（普通数组，对象数组），对象，数字
key属性的使用：只接受string和number类型
v-if：每次都会重新删除或者创建元素
有更高的切换消耗
v-else：表示 v-if 的“else 块”
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别
v-show：只是让元素存在或者隐藏，只是简单的切换display属性
有更高的初始渲染消耗
注意：v-show 不支持 元素，也不支持 v-else。
v-if、v-show 指令都是根据后面表达式的值的真假来插入/移除 元素。
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
v-show 不管初始条件是什么，元素总是会被渲染且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
绑定样式
两种方式：1.v-bind:class
2.v-bind:style
事件修饰符
.stop阻止冒泡
.prevent 阻止默认事件
.capture 添加事件侦听器时使用事件捕获模式
.self只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡行为
.once 事件只触发一次
遍历方法
遍历：some()、foreach()
some():随时都有可能终止
在 数组的 some 方法中，如果 return true，就会立即终止这个数组的后续循环
some()、foreach()、filter（）、findIndex（）都属于数组的新方法，都会向数组中的每一项进行遍历，执行相关的操作。
ES6字符串新方法 string.prortotype.includes(),返回布尔值
全局过滤器和私有过滤器
过滤器可传多个参数
也可使用多个过滤器
全局过滤器：在所有的vm中共享
私有过滤器：filters(){}
注意：
过滤器调用采用的是就近原则，若是私有过滤器和全局过滤器名称一致则优先调用私有过滤器
ES6中的填充字符串方法：
头部填充：String.prototype.padStart(maxLength, fillString='')
尾部填充：String.prototype.padEnd(maxLength, fillString='')
举例：可适用于项目中补零的情况
自定义按键修饰符（全局）
Vue.config.keyCodes.按键 = 码值;
存在问题：不输入数据点击也会添加行
刷新---->选中
钩子函数的参数：
name
value
expression
DAY-2
Vue实例的生命周期
Vue实例创建、运行、销毁期间伴随的事件统称为生命周期
生命周期钩子 = 生命周期函数 = 生命周期事件
1.创建期间
beforeCreate():实例刚被创建，data和methods
created():
beforeMount():
mounted():实例初始化完毕
2.运行阶段
beforeUpdate()
update()
3.销毁阶段
beforeDestory()
destory()
过渡类名：写两组类的样式
进入过渡：
v-enter：
进入过渡的开始状态。
在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：
进入过渡生效状态。
在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to:
进入过渡结束状态。
在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
离开过渡
v-leave:
离开过渡的开始状态。
在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：
离开过渡生效状态。
在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to:
离开过渡结束状态。
在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。
注意：对于这些在过渡中切换的类名来说，如果你使用一个没有名字的
duration:过渡持续时间
可在过渡中使用钩子函数
只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。
如果要为v-for循环创建的元素设置动画，必须为每一个元素设置：key属性
配合使用能够实现列表后续的元素，渐渐的飘上来的效果：
.v-move{ transition: all .6s ease; } .v-leave-acitve{ position: absolute; }
列表过渡(使用v-for循环渲染出来的)，需要使用transition-group来包裹元素
给transition-group添加appear属性，实现页面飘上来的效果
通过设置tag属性指定transition-group渲染元素，不指定会默认渲染
DAY-3
定义vue组件
创建组件的三种方式：
1.使用 Vue.extend 配合 Vue.component 方法
2.直接使用 Vue.component 方法（字面量）
3.将模板字符串，定义到script标签种
注意：组件只能有一个根元素
自定义私有组件
组件间的切换：
1.v-if/v-else(两个组件的切换)
2.component结合:is
当前学习的Vue组件：component,template,translation,transitionGroup
DAY-4
父子组件之间数据的传递
父组件向子组件传值
1.子组件默认无法访问父组件中data上的数据和methods中的方法
2.父组件可在引用子组件的时候通过绑定自定义属性（v-bind:name=" "）的形式，把需要传递给子组件的数据传递给子组件内部，供子组件使用
3.要想在子组件中使用父组件，需要在子组件中使用props属性（数组）定义一下
父组件向子组件传递方法
事件绑定机制（v-on:name=" "）
子组件向父组件传值：
父组件给子组件传递一个方法（
子组件调用该方法（this.$emit('func', this.sonmsg)），
同时将子组件的数据当做参数传递给父组件
父组件拿到子组件传递的数据
组件中的所有props数据都是通过父组件传递给子组件的
data和prop 的两点区别
子组件中的data属性，都是子组件自身私有的数据，可读可写
props中的数据都是只读的，无法重新复制
ref（referance）获取Dom元素/组件
使用 this.$refs 可获取元素和组件
路由
前端路由：
单页面应用程序主要通过URL中的hash(#号)来实现不同页面之间的切换。
hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；
代码高亮
1.给默认router-link-active添加样式
2.在实例路由对象中添加 linkActiveClass:'myactive',再添加样式
vue-router的使用
1.导入 vue-router 组件类库；
2.使用vue-link来进行导航
3.使用 router-view 组件来显示匹配到的组件
4.创建使用Vue.extend创建组件
// 4.1 使用 Vue.extend 来创建登录组件
var login = Vue.extend({
template: '
登录组件
'});
// 4.2 使用 Vue.extend 来创建注册组件
var register = Vue.extend({
template: '
注册组件
'});
5.创建一个路由 router 实例，通过 routers 属性来定义路由匹配规则
// 5. 创建一个路由 router 实例，通过 routers 属性来定义路由匹配规则
var router = new VueRouter({
routes: [
{ path: '/login', component: login },
{ path: '/register', component: register }
]
});
6.使用 router 属性来使用路由规则
// 6. 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
router: router // 使用 router 属性来使用路由规则
});
路由规则中定义参数的方法
1.query传参
this.$route.query
2.params传参
this.$route.params
children属性实现路由嵌套
子路由前面不可以带/
如果属性前面加冒号，就要考虑这个属性是一个变量还是一个值
watch属性的使用
1.用来监听data中属性的改变
2.监听路由对象的改变
computed计算属性的使用
watch、computed和methods之间的对比
computed
属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
methods
表示一个具体的操作的方法，主要书写业务逻辑；
watch
是一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；
可以看作是computed和methods的结合体。