vue.js

vue.js的概述
是一款渐进式的JavaScript框架
兼容性好，利于性能的优化
作者：尤雨溪
MVVM框架
M : model层 即数据层 数据的增删改查
V : view 视图层 类似于html模板
VM ： view 与 model 之间的一个映射层
特点
1.数据操控视图 ， 即 M 操控 V
2.再也不用去操作DOM元素来改变view视图的变化了 ； 注：操控dom元素是非常耗费性能的
创建一个简单的vue实例
var vm = new Vue( ){ }
注：vue作用的范围只会在挂载点内部
注：在vue中，我们可以直接访问 data 中的属性
指令
v-text 等同于 {{}}
底层原理主要应用于数据的解析 ， 类似原生中的innerText
v-html
作用和 v-text 相同 ； 但可以解析html ， 类似原生中的 innerHTML
v-show
显示隐藏 非权限 例：选项卡、组件操作
底层原理 是操作元素的 display 属性
v-if
显示隐藏 权限 例： 后台管理系统登录、会员登录
底层原理 是操作元素的 创建 与 销毁
v-for
data中的 数据的遍历
可遍历 数组 字符串 对象
v-for=“（item，index） in arr/str/obj”
v-on 等同于 @
事件的绑定
v-on：事件名称 = “事件函数” 或 @事件名称 = “事件函数”
v-bind 等同于 ：
属性的绑定
v-bind：属性 = “属性值” 或 ：属性 = “属性值”
常用属性： src class id title href alt 等
v-once
只绑定一次，数据的渲染 仅渲染一次
v-pre
不解析 vue 的数据
v-cloak
解决 {{}} 提前渲染的问题
v-model
实现双数据绑定
注： v-model 这个指令 只能应用于表单中
注： v- model 是自动根据表单的 value值 来改变 data中属性的值
自定义指令 directives
注：必须要在vue实例化前创建
1. 全局创建
Vue.directives( )
两个参数
第一个参数为指令名称 ，
第二个为一个函数，两个参数
第一个为指令作用的元素
第二个为一个对象，描述指令的信息 常用的键：value：指表达式的结果 modifiers ：修饰符
2.局部创建
只对当前的挂载点起作用，和全局创建的区别是指令写在 new Vue（）中
修饰符
概念：指令后面用 . 连接的属性就称之为修饰符
常用修饰符
stop
阻止事件冒泡
prevent
阻止浏览器默认行为
once
事件只触发一次
enter
回车
注：若需使用事件对象，则需要在事件函数中传递一个事件对象 $event 作为参数
day2
计算属性 computed
指通过计算得来的属性，用于监听属性的变化
computed里面的函数调用的时候 不需要加（）
方法里必须有一个返回值 return
computed中的函数不会通过事件去触发的，而是当属性（必须是data中的属性）发生改变的时候，computed里面的函数就自然而然的去触发
computed最大的特点就是 当属性状态未发生改变的时候。当前的函数会从缓存中读取
监听属性 watch
用于监听每一个属性的变化
watch这个对象里面都是函数，函数的名称一定是 data中属性的名称 。 watch中函数是不需要调用的
我们可以在watch中进行新旧值的判断 从而来减少虚拟DOM的渲染
只要当前属性发生改变就会触发 与之对应的函数
若我们需要对对象进行监听 ， 需要将属性设置为 key 值 ， val 为一个对象 且对象中有两个参数必写 ， 一个数handle函数， 一个为 deep = true 从而实现深度监听
computed 与 watch 区别
1 computed中的函数调用是不需要（）的 ， 而watch是不需要进行函数调用的
2. 当属性没有发生改变的时候 ，computed中的函数会从 缓存 中读取值 当属性发生改变的时候，watch中的函数会接受两个参数，一个代表 新值，另一个代表旧值
3. watch 若需要监听对象，必须使用 深度监听
4. computed 中的函数必须要带有返回值 return
5. 命名: computed 中的函数命名是任意的 ， watch中的函数名必须是 data 中参数的名
生命周期
一个组件从创建到销毁的过程就叫做生命周期
生命周期函数
beforeCreate（）{ } 创建前
我们一般在这个生命周期函数中进行初始化工作，我们可以创建一个loading
created （）{ } 创建后
我们可以在这个生命周期函数中访问 new Vue（）中的所有属性和方法
在这个生命周期函数中，会将data中所有属性和methods中所有的方法都挂载到 new Vue（）的实例化对象上
在这个生命周期函数中，会给data的所有属性都添加一个getter/setter方法，有了这两个方法，我们可以对数据进行动态操作 ； 故，若要和后端进行数据交互，必须在该函数中进行
beforeMount （）{ } 挂载前
数据和模块还未进行结合
我们还可以对数据进行最后的更改
我们在这个生命周期函数中不能访问到真实的DOM结构
mounted（）{ } 挂载后
数据和模块已经融合
我们可以通过 this.$refs.值 来访问DOM结构
注：标签的ref = “值是唯一的" ， 该属性类似于id
beforeUpdate（）{ } 更新前
在这个声明周期函数中可以访问到真实的DOM结构
我们可以对数据做最后的修改
注：该函数中数据和模板还未更新完毕
update（）{ } 更新后
在这个生命周期函数中，我们可以访问到 最新的 DOM结构
注：由于这个生命周期函数是频繁被触发的，所以我们若要在该函数中绑定一些事件或进行实例化的时候需要做一个提前判断 if（!....）{ }
beforeDestroy（）{ } 销毁前
在这个生命周期函数中，我们还继续可以访问到DOM结构
我们一般在这个函数中做一些事件的解绑/移除操作
destroyed（）{ } 销毁后
数据和dom的关联已经断开
在这个生命周期函数中是访问不到真实的dom结构的
new Vue() 实例化对象的方法
$mount( ) 手动挂载
$destroy() 手动销毁
$forceUpdate() 强制更新
$on() 事件绑定
$emit() 事件触发
$once() 事件仅绑定一次
$off() 事件解绑
day3
组件
概念：页面上每一部分都可以称之为一个组件 复用性 封装性
创建
1.全局创建 Vue.component( )
2.局部创建 component（）
两个参数
一为 组件的名称 注：首字母大写
二为 组件的配置项（是个对象）

配置项 描述
new Vue（）里有什么参数，那么组件的配置项中就有什么参数，包括 生命周期函数
组件内部多了一个属性 template 模块的意思，写结构
注：组件内部的data不再是一个对象，而是一个函数 带返回值 返回一个对象
data（）{ return { } }
使用
直接将组件的名称当做标签使用即可
脚手架
安装 npm install @vue/cli -g
创建项目 在当前文件夹打开命令行 执行 vue create 项目名称
启动项目 配置完毕后 yarn serve
各文件含义
public 放置静态的文件夹
src 工作目录文件夹
main.js 入口文件
render 用于渲染的函数
App.vue 页面显示的内容就取决于该文件 在这个文件中使用你写的组件 需引入（使用 import .. from "相对于该文件的路径" 引入） 需配置 （使用 export default{ }配置）
component 用于写组件的文件夹
<template>中写结构 注 ： 一个组件只能有一个子元素
<script></script>中写逻辑 ， 必须导出去一个对象，这个对象就是一个组件 ， 一个小型的Vue实例化对象
<style></style>中写样式
组件的传值（组件通讯）
父传子
传递：当子组件在父组件中当做标签使用时 ， 在父组件中给子组件绑定一个自定义的的属性（通过：），值为需要传递的数据 传递的数据一般写在data中
接收：在子组件内部通过props接受，props一个属性，值为 自定义的属性 ，方式2种
1.通过数组接收 props ： ["val"]
2.通过对象接受 props : {val:String}
注：一般我们采用对象接收，因为该方式可以校验数据的类型
注：props类似于data ， 值我们可以直接获取
子传父
传递 ： 当子组件给父组件传递数据时 ， 通过调用 父组件 给子组件绑定的 自定义事件 实现传递 自定义（@） 调用 this.$emit("自定义事件" ， 传输的值)
接收 ： 父组件通过自定义事件的函数来接受 子组件传递的值 这个自定义事件有一个形参，该形参就是 子组件传来的值
注：这个自定义事件的函数在绑定时不能加（）；
非父子 （事件监听来实现）
方法1
在vue的原型上添加一个公共的vue实力，组件之间调用这个公共实例的 $on/$emit来传递数据， 传递方使用$emit ， 接收方使用 $on
Vue.prototype.Observer = new Vue( )
接收方： 在created生命周期函数中写： this.Observe.$on("handle",(val)=>{console.log(val)})
传递方 ： 在methods中 ： this.Observer.$emit("handle”，传递的值)
该方法影响性能
方法2
手动封装 $on $emit $off 原理应用了观察者模式
需引入 inport from
需创建 Vue.prototype.Observer =
day4
组件
页面上的每一个部分都是组件
结构
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
内存中最多可以存放多少个组件