vue初学干货
本篇文章是一写vue的知识点,只适合刚开始接触vue的同学用来学习参考,主要还是要参考vue官网及vue API
-
Vue的两个核心
数据驱动:ViewModel,保证数据和视图的一致性。 组件系统:应用类UI可以看作全部是由组件树构成的。
-
在vue中is的使用场景
改变html标签的默认规则,比如ul里放li,dl里放dt等, 动态切换组件: <component v-bind:is="currentView"></component> 特殊嵌套: <table> <tr is="my-row"></tr> </table>
-
常用指令及常用事件修饰符
用指令 常用事件修饰符 v-bind stop (阻止冒泡) v-if (显示和隐藏) prevent (阻止默认事件) v-else (必须和v-if连用) capture (将事件流设为捕获方式) v-on:click (给标签绑定的时候可简写为@) self (只对自身触发事件) v-text (解析html标签) once (只执行一次) v-html (解析文本) enter (回车键) v-show (显示内容) tab v-hide (隐藏内容) delete (删除) v-for esc (退出) v-model (表单元素实现双向数据绑定) space (空格) v-focus (自动获取焦点命令) up (上) v-clock down (下) :is (用来切换组件值填写组件名称即可) left (左) v-enter right (右) v-enter-active config.keyCode (自定义修饰符) v-enter-to lazy v-leave number v-leave-active trim v-leave-to sync (自动添加一个update事件很方便的让子组件去修改total值) -
v-if和v-show的区别
v-show通过控制display:none,v-if通过删除节点。 频繁操作元素显示隐藏使用v-show v-show和v-if都可以控制元素的显示与隐藏。
-
渐进式框架
主张最少 框架分层 最核心的是视图层渲染,然后往外是组件机制,在此基础上再加入路由机制,再加入状态管理,最外层是构建工具
-
组件的定义
Vue最核心的功能之一,类似自定义标签,但是它具有独立的HTML+JS,独立的数据管理 组件的优势:重用性比较高、自由组合
-
组件的作用如何定义组件和使用组件
组件是可复用的Vue实例,如果网页中的某一个部分需要在多个场景中使用,那么我们可以将其抽出为一个组件进行复用。组件大大提高了代码的复用率。
-
定义组件有两种方式
全局方式 直接使用Vue.component()创建的组件,所有的Vue实例都可以使用。 局部方式 三步:1.创建这个组件;2.注册这个组件;3.使用这个组件
-
组件化
一个具有独立的逻辑和功能或界面,同时又能根据规定的接口规则进行相互融合,变成一个完整的应用页面只不过是这些组件的容器,组件自由组合形成功能完善的界面,当不需要某个组件,或者想要替换某个组件时,可以随时进行替换和删除,而不影响整个应用的运行。
特点: 提高开发效率、方便重复使用、简化调试步骤、提升项目的可维护性、便于协同开发 -
组件中data为什么不是一个对象而是一个函数
组件中的data写成一个函数,数据以函数返回值形式定义,这样每复用一次组件,就会返回一份新的data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。而单纯的写成对象形式,就使得所有组件实例共用了一份data,就会造成一个变了全都会变的结果。
-
计算属性对比监听函数
计算属性与普通data中的属性区别在于,计算属性可以通过一些运算逻辑返回属性值, 函数会在相关属性值变化时自动执行,也就是说计算属性也是动态绑定的。场景:主要是对data里面的数据进行过滤,往往过滤的过程中不应该影响原始数据
1.意义不同:计算属于用于返回一个计算结果、watch是完成一系列动作
2.异步代码:watch可以包含异步操作,计算属性不行
3.缓存效果:重新渲染值不变化,计算属性会立即返回之前的计算结果,watch不能缓存 -
Watch和computed的区别
computed特性 1.是计算值(过滤data中的数据) 2.应用:就是简化tempalte里面{{}}计算和处理props或$emit的传值 3.具有缓存性,页面重新渲染值不变化,计算属性会立即返回之前的计算结果,而不必再次执行函数 watch特性 1.观察的动作 2.应用:监听props,$emit或本组件的值执行异步操作 3.无缓存性,页面重新渲染时值不变化也会执行
-
computed和method的区别
computed是响应式的,methods并非响应式。 computed是带缓存的 computed中的成员可以只定义一个函数作为只读属性,也可以定义get/set变成可读写属性,这点是methods中的成员做不到的 computed是以对象的属性方式存在的,在视图层直接调用就可以得到值
-
父子组件如何传值
父组件通过 prop 给子组件下发数据,子组件通过$emit触发事件给父组件发送消息非父子关系的通过创建一个新的Vue实例,用于数据传递通过$on()绑定一个自定义事件、通过$emit()去触发这个事件并传参
-
生命周期
beforeCreate[创建实例之前] created[创建实例之后] beforeMount[挂载之前] mounted[挂载之后] beforeUpdate[数据更新之前] update[数据更新之后] beforeDestroy[销毁之前] destroy[销毁之后] activated[激活] deactivated[失活]
-
第一次页面加载会触发哪几个生命周期钩子函数
beforeCreate[创建实例之前] created[创建实例之后] beforeMount[挂载之前] mounted[挂载之后]
-
自定义指令
bind(el,binding); //指令第一次绑定到元素时调用,只调用一次 inserted(el,binding); //被绑定元素插入父节点时调用 update(el,binding); //被绑定元素所在的模板更新时调用 unbind(el,binding); //只调用一次,DOM元素被VUE移除时调用(不可以手动解除绑定)
-
MVVM设计模式
把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来,还负责把View的修改同步回Model