vue--watch监听器、修饰符、计算属性、自定义指令、生命周期

一、watch监听器

watch是vue实例的一个属性 主要作用是监听data中的数据 当data中的数据改变的时候 watch就会触发

语法： 写在el data methods 的同级
watch:{
​ 你要监听的数据（newval,oldval）{
​ 你要完成的逻辑
​ }
}

二、创建脚手架

1.在全局下载vue脚手架（除非你重装系统了 或者重装node了）否则不需要再次下载
npm install -g @vue/cli@4
2.查看版本
vue --version
3.把cmd 切换到你要创建项目的路径下
4.开始创建 vue create 项目名
5.把cmd的路径切换到你刚才下载的项目中
6启动 npm run serve

项目启动方式修改

vue脚手架项目启动是 npm run serve
在项目下package.json文件中进行配置 修改scripts节点下的第一个内容
所有的名字都要是npm run 你设置的名字
但是注意 除了start例外 只有start可以不加run

三、事件对象与修饰符

事件对象–$event

谁触发这个事件事件对象就指向谁 （事件对象中包含触发这个事件的元素所有信息）

修饰符

通过vue提供的修饰符可以来处理dom事件的一些细节性的内容

按键修饰符 @keydown.up=“fun()”

.up .down .left .reght .ctrl .space .enter

事件修饰符

1. .stop修饰符 阻止事件传播
2. .prevent修饰符 阻止事件默认行为
3. .captrue修饰符 设置捕获
4. .self 修饰符 只会触发自己范围内的事件 不包含子元素
5. .once修饰符 只触发当前事件一次

四、计算属性–computed

computed是什么

计算属性 带有计算功能的vue实例的属性 就是对data中的数据计算处理的功能 在计算之后返回计算之后的结果 并且可以非常方便的在页面进行展示 (如果数据变化了 那么计算属性会重新计算返回新的结果)

语法:
写在 data methods watch的同级
computed:{
​ 存储计算结果的变量(){
​ return 你的计算逻辑
​ }
}

computed计算属性与methods方法的区别

观察如下代码 在运行的时候会发现
计算属性处理的数据多次被调用 但是计算属性只执行一次
方法如果多次被调用 调用几次执行几次
计算属性是依赖缓存的 之后数据改变了计算属性才会重新计算返回结果 如果数据没有变 只是多次调用 那么他就在第一次执行一次之后就把数据保存在内存中 节省资源与性能

computed与watch区别

计算属性是依赖data的数据 当依赖的data数据改变了 他会重新计算这个数据 并且返回新的结果

watch 他是监听一个data的数据 当data的数据改变了他会触发一个函数 来进行逻辑的处理

五、自定义指令–directives

在现有内置指令不够用的时候 我们可以自己定义指令来进行使用
语法：写在与data methods watch computed 同级的位置
directives:{
​ 自定义指令的名字:{
​ 自定义指令的钩子函数（el代表的就是指定放在那个dom上形参就是谁）{
​ 你的逻辑
​ }
​ },
​ 自定义指令的名字2:{
​ },

}

使用 v-自定指令的名字

自定义指令的钩子函数

bind 指令绑定到元素之上的时候执行 但是只执行一次
unbind 指令被移除的时候执行 只执行一次
update 所有组件节点更新的时候执行调用
componentUpdate 指令所在节点以及所有的子节点都更新完成的时候调用
inserted 绑定指令的元素在页面展示的时候调用

钩子函数

自动执行的函数叫做钩子函数

生命周期的钩子函数

vue实例从创建到销毁的过程中被自动执行的函数

写在与 data methods watch computed directives 同级的位置

作用

就是给程序提供一个自动执行逻辑的场所

六、8大钩子

实例创建
实例创建之前-----beforeCreate
实例创建之后-----created
模板渲染
模板渲染之前-----beforeMount
模板渲染之后-----mounted
数据更新
数据更新之前-----beforeUpdate
数据更新之后-----updated
实例销毁
实例销毁之前-----beforeDestrory
实例销毁之后-----destroyed

七、生命周期第一次执行那些？

实例创建之前-----beforeCreate

实例创建之后-----created

模板渲染之前-----beforeMount

模板渲染之后-----mounted