Vue思维导图知识梳理
2022-06-17 16:54:40 88 举报AI智能生成
vue前端框架知识梳理
作者其他创作
大纲/内容
Vue的特点
遵循MVVM模式
编码简洁，体积小，运行效率高，适合移动/PC端开发
它本身只关注UI，可以引入其它第三方库开发项目
借鉴 Angular 的模板和数据绑定技术
借鉴 React 的组件化和虚拟DOM技术
Vue周边库
vue-cli：vue脚手架
vue-resource
axios
vuex：状态管理
element-ui：基于vue的UI组件库（PC端）
vue-router：路由
JS表达式和JS代码（语句）
表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
js代码（语句）（1）if(){}（2）for(){}
模板语法
差值语法
功能：用于解析标签体内容。
写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
指令语法
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）
Vue中有很多的指令，且形式都是：v-
数据绑定
双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data。
双向绑定一般都应用在表单元素上（如：input、select等）
v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。
单向绑定（v-bind）：数据只能从data流向页面。
MVVM模型
M：模型(Model)：data中的数据
V：视图(View)：Vue模板
VM：视图模型(ViewModel)：Vue实例对象（绑定数据，dom监听）
事件
事件处理
使用 v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
事件的回调需要配置在methods对象中,最终会再vm上；
methods中配置的函数，不要用箭头函数！否则this就不是vm了而是window；
methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
@click=“demo” 和 @click="demo(e v e n t ) " 效 果 一 致 ， 前 者 默 认 参 数 就 是 事 件 对 象 ， 后 者 要 用 event)" 效果一致，前者默认参数就是事件对象，后者要用event)"效果一致，前者默认参数就是事件对象，后者要用event才能生成事件对象，并且可以传多个参数；
事件修饰符
prevent，阻止默认事件（常用）
stop，阻止默认事件（常用）
once，事件只触发一次（常用）
captur，使用事件的捕获模式
self，只有event.target是当前操作的元素时才触发事件
passive，先执行默认行为，后执行回调函数
计算属性
Vue官方建议组件模板应该质包含简单的表达式，复杂的表达式则应该重构为计算属性或方法
对于Vue来说，data里的配置项就是属性 。而计算属性，就是拿着写完的属性去加工计算，生成一个全新的属性。
差值语法实现
methods实现，注意methods方法在绑定事件的时候才可以省略小括号，在差值里不能
methods函数出现几次就调用几次，效率比较低。
computed实现
computed有缓存机制（复用），效率更高、调试方便（devtools上会有一个computed的分类）。
监视
监视属性watch
当被监视的属性变化时，回调函数自动调用，进行相关操作；
监视的属性必须存在，才能进行监视！！（除了data属性，computed属性也能监视）
监视的两种写法
new Vue时传入watch配置；
通过vm.$watch监视；
watch配置属性
immediate (立即的) 初始化时让handlder调用一下
handler(newVal, oldVal) 当监视的属性发生改变的时候调用，参数可以拿到改变前后的值
deep 深度监听,可以监测多层级数据的改变
深度监视
Vue中的watch默认不监测对象内部值的变化（监测一层)
配置deep:true可以监测对象内部值变化（监测多层）
Vue默认是可以监视到多层级数据的改变的（修改number.a页面发生改变可以看出）。但是watch属性默认是不可以的，要想可以就得打开深度监视（为了效率）。
使用watch时根据数据的具体结果，决定是否采用深度监视。
watch对比computed
computed能完成的功能，watch都能完成。
watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。（点击按钮让a过一秒+1,）
所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数、Promise的回调函数等），最好写成箭头函数，这样this的指向才是vm 或 组件实例对象。
渲染
v-if，用来控制页面元素是否展示
适用于：切换频率较低的场景。
特点：不展示的DOM元素直接被移除。
注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。
v-show
适用于：切换频率较高的场景。
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
v-show底层指令其实就是调整display:none
v-if和template
如果需要频繁切换 v-show 较好
当条件不成立时, v-if 的所有子节点不会解析(项目中使用)
生命周期
new Vue()
初始化事件(.once事件)和生命周期
编译模版
挂载Dom -> 渲染
更新 -> 渲染
卸载
回调函数
是你留个处理方法给事件，事件发生了以后会自动执行你留下调处理方法
勾子函数
是好比找了个代理，监视事件是否发生，如果发生了这个代理就执行你的事件处理方法；在这个过程中，代理就是钩子函数
组件化编程
组件的思想，其实就封装。能很好的实现代码复用技术
methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
组件的定义:实现应用中局部功能代码和资源的集合
template，template用来定义html结构，其实``为模板字符串。它可以随意的换行
Vue中使用组件的三大步骤：
定义组件(创建组件)
使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样
组件中定义的data必须写成函数
注册组件
局部注册：靠new Vue的时候传入components选项
全局注册：靠Vue.component(‘组件名’,组件)
使用组件(写组件标签)
0 条评论
下一页
