VUE视频截图

VUE视频截图

模板语法





data的写法—不常用



object.defineproterty



数据绑定 双向代理


VUE事件处理













computed


只能读不能改的computed 相当于只有get 没有set

可以读 可以改的computed get和set都有


data methods computed 对比总结

第二种写法

watch的总结

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210615122135424.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MzA3MjY2,size_16,color_FFFFFF,t_7


样式绑定

绑定style

v-for遍历对象

watch丢失数据，改变原数组

使用computed 就不会改变原数组

arr.sort()会改变原数组


表单收集数据


工具

生命周期解释


原生过度

VUE动画

需呀过度的放在transition标签里，并给他一个名字

过度的总结

动画

总结

处理时间的moment.js

全局注册过滤器

常用指令

v-html v-text

arr.sort(a,b)----前 - 后 升序 ；后-前 降序
如果要收集input type=“CheckBox”,那么必须：需要v-model=“hobby” value=“抽烟” hobby在data里定义是一个数组[]，value值就是能收集到的数据。
自定义指令–全局注册

自定义指令–局部注册

自定义插件

在需要用的时候
在要用的页面 引入，在Vue.use(atguigu),就能用了
单文件组件和非单文件组件

组件：组件是实现界面局部功能全部代码和资源的集合。
组件的定义

全局注册组件

组件使用流程

局部注册组件




继承

显：显式原型属性 隐：隐式原型属性 他们同指向一个原型对象

继承和原型链

非单文件是不用的 只能用于学习


使用ref 只有一种写法，字符串


props使用 必须要声明接收



几种写法

组件命名 name

eslint语法检查关闭


根本方法 写一个vue.config.js文件 参考vue/cli官网

arr.filter()过滤出
localstorage只能存字符串

try catch{

cookie localstorage sessionstorage

json.parse

watch默认浅层监视，deep:true就是深度监视

todo里面的done属性发生改变，如果不用深度监视。也监测不到，用了deep就可以监视到了。
自定义事件–用于子组件向父组件传值 @ this.$emit()事件总线，适用于各个组件之间的通信。传送方：bus.$on() 接收方：bus.$emit
自定义事件

全局时间总线

全局事件总线总结

用箭头函数来接收这个传过来的值
插槽
用于解析组件标签中的内容–也就是标签体 通过组件结构里的v-slot来接收这个内容


插槽更加灵活，两个地方用同一个组件，但是90%都相似，偏偏有10%的不同。需要看不同情况，那么插槽的作用就很明显了
命名插槽

请求数据
axios 首先安装 yarn add axios
try catch async await写法

对象的修改

pub-sub实现组件通信
v-model.number 把绑定的值转为数字类型

vuex
1.安装vuex,创建store.js文件 创造出一个store vuex是一个插件 所以必须要Vue.use(vuex),并且这个过程得是在创建store之前完成

actions mutations

组件里通过方法 dispatch分发任务给actions

各个名字需要对上，就好像自定义事件 $bus,$on 需要对上$bus.$emit这才行

actions里写条件判断，组件里不写，只管dispatch，mutations里也不写，只管改数据 。因为在context里已经能拿到state

vues----------getters–功能类似于computed、过滤器 他能收到state所以可以加工数据

靠mapstate生成计算属性 l里面，代码等价自己写computed引入

yinru

简写形式

mapgetters

mapmutations—这种简写方式必须保证在increment这个方法里传了参数

如果actions里没有其他逻辑判断 仅仅是commit一下。那么完全可以在组件的方法里通过this.$store.commit直接对话mutations，而不用再写一个actions

mapactions

mapstate、mapgetters在computed里的，mapmutations、mapactions（一定要在标签体触发时传递参数）在methods里

路由：好像vuex 也要使用到一个插件 ，他是vue-router，也是单独形成一个文件 暴露一个router路由器来统一管理路由

原生的a标签对应 router-link href对应 to ，路由定义好了 需要一个router-view占位，从而匹配到路由就把组件展示到这个位置。
一个路劲匹配多个组件


二级路由注册方式

二级路由注册的简写方式–记得/是不要的

vue路由里面导航高亮（点击了的高亮）的对应有个active-class 给每个导航都加上 当被点击了 会自动识别哪个被点击，然后加上这个高亮样式；当然也可以自己定义高亮样式，别忘记！important加权重就行了。
路由传参
传递params


传递成功

使用参数

传递query参数 无需声明


同时传递params和query 但是一次一般只用一种


路由命名

用的时候动态绑定 写成对象形式


路由配置 通过props接收

配置时

编程式路由导航–this.$router.push

缓存路由组件–展示其他组件 不销毁 保留输入内容 include 是指定哪个组件不销毁 值是组件的名字 name（export 定义的那个）