vue的详细介绍

MVVM框架
M:model层 数据层 做数据的增删改查
V:view视图层 类似于html的模板
VM：viewmodel映射层 model层与view层之间的一个映射层（嫁接的桥梁）
特点
数据的驱动视图
再也不会去操作DOM来改变view层的变化（因为操作DOM元素是非常耗费性能的）
如何使用
var vm = new Vue({
//挂载点 vue作用的范围只会在id为app的这个元素内部
el:"#app",//document.querySelector()
//定义当前组件所需要的一些状态 定义当前vue所需要的一些属性
data:{
message:"1824"
}
})
在Vue中我们可以直接访问data中的属性
指令
v-text:值可以写任意的js表达式
简写{{}}
{{}}在页面第一次加载的时候会显示{{}}
v-html：解析html 相当于innerHTML
v-show:显示隐藏 （非权限）
底层是操控元素的display属性
主要用于：
选项卡
组件切换
动画
v-if：显示隐藏 （涉及到权限）
底层是操控元素的创建和销毁
主要用于：
后台管理系统
用户会员级别
登录与非登录
v-for:数组的遍历
v-on:进行事件的绑定（：冒号后面是事件的名称，值为事件的函数）
格式：v-on：事件名称=事件函数（），简写@事件名称
once：只绑定一次
stop：阻止事件冒泡
prevent：阻止浏览器的默认事件
vue中所有的事件都需要放在methods中
v-bind：绑定属性 ，简写（：属性）
语法 v-bind:属性 = 值
v-once:只绑定一次，数据的渲染只渲染一次
v-pre:不解析vue的数据
v-cloak:解决{{}}的问题
v-model:可以用来实现双数据的绑定
只给表单进行使用
作用：如果表单上面家了v-model，那么data 中与表单绑定的那个属性就会随着表单的改变而改变
是根据表单的value值来改变data中属性的值
自定义指令
全局创建
vue.directive()
参数一：指令的名称
参数二：指令实现的函数
参数一：指令作用的元素DOM元素
参数二：指令的信息对象
value:表达式的结果
rawName：指令的全程
modifiers:修饰符
局部创建
directives()
computed
是一个计算属性，用来监听属性的变化
computed：里面的方法调用的时候是不需要加（），另外里面的方法必须要有一个返回值
computed:里面的方法不是通过事件来触发的，而是当属性（必须是data中的属性）发生了改变的时候那么当前函数就会被触发
特点：当属性如果没有发生改变的时候。当前方法的值会从缓存中读取
watch
用来监听每一个属性的变化
watch这个对象里面都是函数，函数的名称是data中属性名称，watch中的函数是不需要调用的
当属性发生改变，就会触发watch中的函数，每一个函数都会接收到两个值，一个是新值另外一个值是旧值
我们可以在watch中进行新旧值的判断来减少虚拟DOM的渲染
只要当前是属性发生改变就会触发它所对应的的函数
如果我们需要对对象进行监听的时候需要将属性设置为key值，val值为一个对象，对象中有两个参数是必填的，一个是handler函数，一个是deep为true,这样才能实现深度监听
computed与watch的区别
computed在调用时不需要加（），watch是不需要调用的
computed如果属性没有发生改变的时候，会从缓存中读取值。watch当属性改变的时候会接收到两个值，一个是新值，一个是旧值
computed里面的函数必须要有一个return的结果
watch如果需要监听对象的情况下，必须设置深度监听
命名：computed里面函数的名称可以随意命名，watch命名必须与data中的属性名保持一致
生命周期
一个组件的创建到销毁的过程
创建
创建前 beforeCreate
对数据进行初始化
我们可以创建一个loading
创建后 created
可以访问到VM中所有的属性和方法
将data和mathods的所有属性和方法挂载到vm的实例对象上
会将data身上所有的属性和方法添加一个gettet/setter方法，在当前生命周期函中进行前后端数据的交互（响应式原理），如果数据没有提前在data中进行绑定，那么属性身上就不会有getter/setter方法，因此数据也不会动态的改变
挂载
挂载前 beforMount
数据和模板还没有进行结合，可以对数据做最后的修改
在当前生命周期函数中访问不到真实的DOM结构
挂载后 mounted
数据和模板已经进行结合
可以通过 this.$refs访问到真实的DOM结构
更新 多次执行的生命周期函数
更新前beforUpdate
可以访问到真实的DOM结构
可以对数据进行最后的修改
当前生命周期函数中的数据和模板还没有更新完毕
更新后 updated
数据更新后最新的DOM结构
在当前生命周期函数中需要特别注意。因为当前函数是一个频繁触发的函数，因此如果在当前生命周期函数中做一些事件绑定或者实例化的时候需要做一个提前的判断
销毁
销毁前 beforeDestroy
我们还可以继续访问到真实的DOM结构以及data中的数据
一般我们会在这个生命周期函数中做一些事件的解绑/移除的操作
销毁后 destroyed
将DOM与数据之间的关联进行断开
在当前生命周期函数中使访问不到真实的DOM结构
vm实例身上的方法
$mount()手动设置挂载点 eg:vm.$mount("#app")
$destroy();销毁
$foreceUpdate 强制更新（强制调用了render方法）
$on()事件绑定
$emit()事件触发
$off()事件解绑
$once()只绑定一次
innerText，innerHTML ,outerText ,outerHTML 的区别
innerHTML 与outerHTML在设置对象的内容时包含的HTML会被解析，而innerText与outerText则不会
在设置时，innerHTML与innerText仅设置标签内的文本，而outerText与outerHTML设置包括标签在内的文本
outHTML和innerText(非W3)
组件
页面上的每一个部分都是组件
结构
template
样式
style
逻辑
script
作用：复用
组件的创建
全局创建
Vue.component()
参数一：组件的名称 参数二：组件的配置项
new Vue这个里面有什么参数。那么组件的配置项中就有什么
组件内部多了一个属性 template
组件内部的data不在是一个对象，而是一个函数
直接将组件的名称当做标签使用即可，组件名称首字母必须大写
局部创建
components()
脚手架的使用：
安装
3.0 cnpm install @vue/cli -g
2.9.3 cnpm install vue-cli -g
创建项目
3.0 vue create <项目的名称>
2.9.3 vue initwebpack <项目名称>
组件的传值
父传子
传递方：当子组件在父组件中当做标签使用的时候，通过给子组件绑定一个自定义属性，值为需要传递的数据
接收：在子组件内部通过props进行接收
一种是数组接收
一种是对象接收
一般情况下我们使用对象进行接收，因为对象接收可以校验数据的类型
子传父
传递：当子组件给父组件传递数据的时候，通过调用父组件给子组件绑定的自定义事件，然后将值传递过去
接收：父组件通过自定义事件的函数来接收子组件传递过来的数据。*这个自定义方法的函数在绑定的时候不需要加（）
非父子
在vue的原型身上添加一个公共的vue实例，组件之间调用这个公共的实例的$on,$emit来传递数据，传递一方调用$emit,接收一方调用$on
EventBus
手动封装$on $emit $off （原理应用了观察者模式）
vueX
动态组件
多个组件通过同一个挂载点进行组件的切换，is的值是哪个组件的名称，那么页面就会显示哪个组件
内置组件keep-alive
（内置组件不会被渲染到页面上）
作用：可以让前或者路由不经历创建和销毁，而是进行缓存
凡是被keep-alive组件包裹的组件，除了第一次以外，不会经历创建和销毁阶段的，第一次创建后就会缓存到缓存当中
多了两个生命周期：
activated（活跃状态）
如果当前页面是一个显示状态，那么activated这个生命周期就会被触发
deactivated(缓存状态)
如果当前页面是一个非显示状态，那么deactivated这个生命周期就会被触发
keep-alive的属性
include
只包含哪些组件进入缓存
exclude
排除哪些组件进入缓存
max
内存中最多可以存放多少个组件
组件
页面上的每一个部分都是组件
结构
template
样式
style
逻辑
script
作用：复用
组件的创建
全局创建
Vue.component()
参数一：组件的名称 参数二：组件的配置项
new Vue这个里面有什么参数。那么组件的配置项中就有什么
组件内部多了一个属性 template
组件内部的data不在是一个对象，而是一个函数
直接将组件的名称当做标签使用即可，组件名称首字母必须大写
局部创建
components()
脚手架的使用：
安装
3.0 cnpm install @vue/cli -g
2.9.3 cnpm install vue-cli -g
创建项目
3.0 vue create <项目的名称>
2.9.3 vue initwebpack <项目名称>
组件的传值
父传子
传递方：当子组件在父组件中当做标签使用的时候，通过给子组件绑定一个自定义属性，值为需要传递的数据
接收：在子组件内部通过props进行接收
一种是数组接收
一种是对象接收
一般情况下我们使用对象进行接收，因为对象接收可以校验数据的类型
子传父
传递：当子组件给父组件传递数据的时候，通过调用父组件给子组件绑定的自定义事件，然后将值传递过去
接收：父组件通过自定义事件的函数来接收子组件传递过来的数据。*这个自定义方法的函数在绑定的时候不需要加（）
非父子
在vue的原型身上添加一个公共的vue实例，组件之间调用这个公共的实例的$on,$emit来传递数据，传递一方调用$emit,接收一方调用$on
EventBus
手动封装$on $emit $off （原理应用了观察者模式）
vueX
动态组件
多个组件通过同一个挂载点进行组件的切换，is的值是哪个组件的名称，那么页面就会显示哪个组件
内置组件keep-alive
（内置组件不会被渲染到页面上）
作用：可以让前或者路由不经历创建和销毁，而是进行缓存
凡是被keep-alive组件包裹的组件，除了第一次以外，不会经历创建和销毁阶段的，第一次创建后就会缓存到缓存当中
多了两个生命周期：
activated（活跃状态）
如果当前页面是一个显示状态，那么activated这个生命周期就会被触发
deactivated(缓存状态)
如果当前页面是一个非显示状态，那么deactivated这个生命周期就会被触发
keep-alive的属性
include
只包含哪些组件进入缓存
exclude
排除哪些组件进入缓存
max
内存中最多可以存放多少个组件
插槽
组件标签包裹的元素默认是不会显示的，如果想要进行显示，那么就需要用到了插槽
具名插槽（带名字的插槽）
在组件内部进行接收的时候《slot> 通过name属性来去接收,例如：<slot name="back">
组件标签内部的元素如果加上slot属性。那么当前插槽就是一个具名插槽了，例如：<p slot="back">
匿名插槽
在组件内部通过slot进行接收，就可以显示了，slot默认会接受所有的元素，但是除了具名插槽外
作用域：子传父
反向传值
将子组件的数据传递给父组件，只需要给组件内部的slot绑定一个自定义属性 。给自己的页面：<slot :自定义属性名 = 要传的值>
在父组件中，子组件标签的内部书写一个template标签，通过scope来接收子组件传递过来的数据。app页面：<template scope="a">
动画
1.如果需要让一个元素进行动画展示的时候，那么当前元素/组件必须通过v-if/v-show动态组件来显示隐藏
2.如果需要添加动态的元素，外层必须包裹一个内置组件<transition>
3.transtion会有一个name属性，当前name属性的值为动画的类名
动画类名的划分
enter
<name>-enter
<name>-enter-active
过渡，动画的类型，时间，延迟
<name>-enter-to
leave
<name>-leave
<name>-leave-active
过渡，动画的类型，时间，延迟
<name>-leave-to
4.如果需要多个元素一起加动画的时候需要将transition组件换成transition-group，除此之外每个元素身上必须有一个唯一的标识key
5.transition当前内置组件可以给动画提前定义类名
<transition
enter-class=""
enter-active-class = ""
enter-to-class=""
></transition>
动画库（swiper）
用法：先下载Animate.css

路由
根据用户请求的路径或参数返回不同的页面或者数据
路由常用的配置项
path:路由请求的路径
component:路径匹配成功后需要渲染的组件或者页面
路由跳转的方式：
1.<a href = "#/home"></a>
2.<router-link to="/home"></router-link>
to的路径会与path进行匹配，如果匹配成功会渲染component对应的组件
组件怎样才能在页面上进行展示，必须依赖一个内置组件
<router-view></router-view>展示路径匹配成功后相对应的组件
自由主题
自由主题
自由主题
自由主题
自由主题
自由主题
自由主题