vue阶段笔记

一 历史介绍
angular.js 09年，年份较早
react 2013年, ⽤户体验好，
vue 2014年, ⽤户体验好 作者:尤⾬溪 江苏⽆锡⼈ 国⼈骄傲

二 核心原理

DOM节点 + 发请求 + 模板引擎 + 路由功能

VUE-KFC的世界⾥,库就是⼀个⼩套餐, 框架就是全家桶

Vue-KFCvue的全家桶:
Vue基础+vue-cli(脚手架)+vue-router(路由)+vueX(数据)

官网: https://cn.vuejs.org/

三 vue本地运行
去官网下载vue.js的本地文件

1 . 使用: vue起步
1): 引包

2): 启动
new Vue({
el:’#app’,//标签
data:{
保存数据的地方
},
methods:{
保存方法的地方
}
});
3): 插值表达式
{{ 表达式 }} 类似模版中的变量表达

对象 (不要连续3个{} ) {{{name:‘jack’}}}错误 {{ {name:‘jack’} }}正确
字符串 {{ ‘xxx’ }}
判断后的布尔值 {{ true }}
三元表达式 {{ true?‘是正确’:‘错误’ }}

ps: 要⽤插值表达式 必须要data中声明该属性
4.什么是指令
在vue中提供了⼀些对于页面 + 数据的更为方便的输出, 这些操作就叫做指令, 以v-xxx表示
例:

在vue中 以v-xxx开头的就叫做指令
指令中封装了⼀些DOM⾏为, 结合属性作为⼀个暗号, 暗号有对应的值,根据不同的值，框架会进⾏相关DOM操作的绑定

vue中常⽤的v-指令演示 :
v-text: 显示文本
v-html: 显示文档 解析html标签

v-if : 判断是否插⼊这个元素,相当于对元素的销毁和创建
v-else-if
v-else

v-show 隐藏元素
如果确定要隐藏, 会给元素的style加 上display:none。是基于css样式的切换

说明: v-if和v-show的区别?
v-if为DOM渲染属性, 通过添加删除DOM节点实现
v-show属于css渲染, 通过css的display:none实现

v-bind使⽤ 给元素的属性赋值
可以给已经存在的属性赋值
也可以给⾃定义属性赋值

语法:
在元素上 v-bind:属性名=“常量||变量名”

例:
v-bind:href = ‘res.url’ 可以简写为 :href = ‘res.url’

ps: 如果直接绑定属性值时,可以不用外部{ } , 如果设置属性与属性值时,要加入外部的{ }

:src=“变量” 绑定图片地址
:class = “{active:isActive}” 增加样式, active=’变量’

样式改变:
:style=’{color:isColor,fontSize:fontSize+“px”} 中间的变量可以直接被解析

功能类似于 jq中 attr为标签设置属性

v-on: 绑定事件
标准写法: v-on:click = ‘myclick’
简写方式: @事件名=“表达式”

1. 绑定监听:
   v-on:xxx=“fun”
   @xxx=“fun”
   @xxx=“fun(参数)”
   vue中的事件对象获取, 当方法中没有参数时, 在方法中的第一个参数就是事件对象
   当方法中有参数时,需要手动, 在调用事件时,加入$event,代表事件对象所有事件默认事件对象都为:event外部传入时,可以通过$event的方式,把 事件对象传入

2. 事件修饰符:
   .prevent : 阻止事件的默认行为
   原生JS event.preventDefault()

.stop : 停止事件冒泡
原生JS event.stopPropagation()

3. 按键修饰符
   .keycode : 操作的是某个keycode值的健
   .enter : 操作的是enter键

例
@click.prevent = ‘myclick’

v-model 双向的数据绑定(重点) MVVM模式

双向数据流（绑定） 页面改变影响内存(js) 内存(js)改变影响页面

使用v-model(双向数据绑定)自动收集数据
单向数据绑定 内存改变影响页面⾯改变

ps: v-bind 和 v-model 的区别?
v-model: 外部改变数据时,影响内部
v-bind: 外部改变数据时,不影响内部
v-for的使⽤
基本语法 v-for=“item in arr”
对象的操作 v-for=“item in obj”
如果是数组没有id
Vue加入脚手架时, v-for要绑定唯一的标识 :key
v-for="(item,index) in arr" :class=“index”

V-for=(item in 5 ) console.log(item) 1 2 3 4 5

5 vue对象中的组件:
1.El: 获取标签
2.Data: 设置属性
3.Methods:{ } 设置方法
4.computed:{ }
使用场景,如果有属性需要经过处理才输出时, 需要用到计算属性

computed:{

计算方法:functiion(){
Return 结果
}
}

Computed特点:

1.computed默认只有getter方法
2.计算属性最大的优点：产生缓存 如果数据没有发生变化 直接从缓存中取
提升了代码运行效率

Seter方法设置:
监听的属性由方法变为对象格式

属性:{
set:function(newV){
设置值时触发
},
get:function(){
获取值时触发
}
}
5.监听组件:
1.Vue中的监听器 watch, 用于监听 vue中的属性改变

正常监听:基本数据类型
属性:function(新值,老值){  }

深度监听:复合数据类型
属性:{
deep: true  开启深度监听
handler:function(){   回调方法

}
}

   Ps: 监听器与计算属性的区别:

1).计算属性的应用场景是计算的内容需要依赖多个属性的情况
侦听器的应用场景是计算的内容依赖一个属性的情况
2).计算属性缓存结果时每次都会重新创建变量
而侦听器是直接计算，不会创建变量保存结果
计算属性有缓存, 监听没有缓存

3).computed的结果是通过return返回的，而watch不需要return。

.watch中的参数可以得到侦听属性改变的最新结果，而computed函数没有这种参数。

6.Vue中的过滤器 filters
| 管道符

1.属性部过滤器
在vue对象中加入
filters:{
过滤器名 : function(a,b){ return 结果 }
}

2.全局过滤器
Vue.filter(‘过滤器名’, (val) => { })

Vue组件阶段

一 组件
组件是可复用的 Vue 实例，且带有一个名字,具有一定功能

二 组件分类
以创建方式: 自定义组件 与 系统自带组件

以使用范围:  
局部组件:  在vue对象中使用
全局组件:  在任意组件中使用

三 组件使用
component 砍po恩特 部件
template 瘫扑累特 模版

局部组件的使用方式:  创建--挂载--使用

1.局部组件创建 :   局部组件就是一个对象 { }

例:
const mymodel = {
template:<h3>我是局部组件</h3>
}
2.组件的挂载: 在Vue实例中的 components 中挂载
例:
components:{
mymodel ====> mymodel:mymodel
}
3.使用组件: 在HTML中, 以标签的形式加载 单双标签形势都可,推荐双标签

注意:在组件中这个data必须是⼀个函数,返回⼀个对象,要加入return 方式返回
Data: function(){
Return { }
}

全局组件
通过 Vue.component(组件名,{}) 创建全局组件,此时该全局组件可以在 任意模板(template)中使⽤
Vue.component(‘Child’,{
template:`

我是⼀个⼦组件

` })

局部嵌套全局, 在template中 直接使用
局部嵌套局部, 在components中 挂载后在使用
Ps:组件需要有且只有一个父类元素

四.组件通信
父传子:通过props来进行通信
1.在子组件中声明props接收在父组件挂载的属性
2.可以在子组件的template中任意使用
3.在父组件绑定自定义的属性

子往父传值
1.在父组件中 子组件上绑定自定义事件
2.在子组件中 触发原生的事件 在事件函数通过this.$emit触发自定义的事件

平行组件通信:
为了解决这种问题,在vue中我们可以使⽤bus,创建中央事件总线.

1.通过新建vue对象               const bus = new Vue();
2.Created(){  } 绑定总线事件
3.利用新建对象中$on方式绑定
例: 
created(){
         $on 绑定事件
       bus.$on('add',(n)=>{})
 }
4.其它组件通信方式
provide
inject
父组件 provide来提供变量,然后再子组件中通过inject来注入变量.无论组件嵌套多深

五 插槽: 用于在父模版中用于占位,增加组件扩展性
1.匿名插槽
2.具名插槽
3.作用域插槽

1.匿名插槽
⼦组件定义 slot 插槽，但并未具名，因此也可以说是默认插槽。只要
在⽗元素中插⼊的内容，默认加⼊到这个插槽中去

2.具名插槽
具名插槽可以出现在不同的地⽅，不限制出现的次数。只要匹配了
name 那么这些内容就会被插⼊.

只要匹配到slot标签的name值 template中的内容就会被插入到这个槽中

例:

方式1 : 设置插槽

匹配插槽
提交

方式2:
设置插槽
<template #submit> 匹配插槽
提交

3.作⽤域插槽

通常情况下普通的插槽是⽗组件使⽤插槽过程中传⼊东⻄决定了插槽 
的内容。但有时我们需要获取到⼦组件提供的⼀些数据，那么作⽤域 
插槽就排上⽤场了
Ps:在不影响开发开的功能组件前,加入新的组件

六 ⽣命周期
1.什么是⽣命周期
每个 Vue 实例在被创建时都要经过⼀系列的初始化过程。 例如：从
开始创建、初始化数据、编译模板、挂载Dom、数据变化时更新
DOM、卸载等⼀系列过程。 我们称 这⼀系列的过程 就是Vue的⽣命
周期。 通俗说就是Vue实例从创建到销毁的过程，就是⽣命周期。 同
时在这个过程中也会运⾏⼀些叫做⽣命周期钩⼦的函数，这给了⽤户
这给了⽤户 在不同阶段添加⾃⼰的代码的机会，利⽤各个钩⼦来完成我们的业务

2.⽣命周期钩⼦ 函数
1)beforCreate
创建实例之前，数据观察和事件配置都没好准备好。也就是数据 也没有、DOM也没⽣成
2)created
实例创建完成后执⾏的钩⼦
实例创建完成后，我们能读取到数据data的值，但是DOM还没⽣成,可以在此时发起ajax

	3)beforeMount 
	将编译完成的html挂载到对应的虚拟DOM时触发的钩⼦ 此时页面并 没有内容。 即此阶段解读为: 即将挂载 
	4)mounted 
	5)beforeUpdate 在更新DOM之前 调⽤该钩⼦
	6)updated 	   在更新DOM之后调⽤该钩⼦，应⽤：可以获取最新的DOM
	7)beforeDestroy 销毁前
	8)destroyed 	   销毁后
	9)activated     激活前
	10)deactivated  激活后
	当配合vue的内置组件 <keep-alive> ⼀起使⽤的时候,才会调⽤下⾯此,产生缓存,不在走创建成功的钩子函数

七. ref属性
类似于DOM中的id属性,可以方便的添加事件与获取组件

利用$refs 可以获取到绑定属性的 rel

如果绑定元素为标签,获取的为dom节点
如果绑定元素为组件,获取的为组件

可以利用ref 更好的实现子传父 父传子的传值

例:
模版中:

你好

事件中: This.$refs.abc.innerHTML 可以获取到 你好

八 vue中this指向问题
methods中,
正常函数,this指向 当前组件(推荐)
箭头函数中的this指向为window

钩子函数中
正常函数中的this指向 window
箭头函数中的this指向为当前组件(推荐)

九 vue中的过渡与动画
利用vue去操控css的transition/animation动画
模板: 使用包含带动画的标签
css样式
.选择器-enter-active: 进入过程, 指定进入的transition
.选择器-leave-active: 离开过程, 指定离开的transition
.选择器-enter, .xxx-leave-to: 指定隐藏的样式
编码例子
显示与离开默认样式
.a-enter, .a-leave-to {
opacity: 0
}

	.a-enter-active, .a-leave-active {
      transition: opacity .5s
    }

Ps:过渡结束后,恢复开始调置时的样式

    <transition name="xxx">
      <p v-if="show">hello</p>
    </transition>