vue2.0 入门到精通

Vue的基础知识点

1.vue的特点

  • 采用了组件化模式,提高代码复用率、让代码更好维护
  • 声明式编码,让编码人员无需直接操作DOM,提高开发效率(命令式和声明式的不同)
  • 使用虚拟DOM + 优秀的diff算法,尽量符用DOM节点

2.vue的数据绑定和模板语法
通过el属性可以将vue模板挂载到指定的html标签上,而挂载使得视图层能够读取来自model的数据;比如使用模板语法读取data属性中的数据;除此之外,在视图层改变数据时也会直接影响到data属性中的数据,从而实现了双向数据流的绑定;

3.vue的事件处理
vue能通过使用v-on指令实现事件绑定的效果,能够对常见的事件,如click、keyup等;除此之外,vue-on绑定的事件还支持添加修饰符,如.once、prevent、stop等;

4.vue的计算属性
当某个变量的值依赖其他data属性中的值时,可以通过使用计算属性获得变量的值;计算属性相对methods有自己的缓存,效率更加高效;

5.vue的watch属性
watch属性提供对data和computed中的变量的监视,一但变量的值发生改变就会执行对应的handler函数;通过配置watch中的属性,可以开启immediate、deep等效果;

6、vue的条件渲染
vue提供v-if和v-show实现元素的显示与隐藏,注意v-if和v-show的区别和适应场景;多用v-show,少用v-if;

7、vue的列表渲染
vue提供v-for指令实现列表渲染,且需要给每个循环的元素绑定唯一的key值以便diff算法区分元素的变化;可配合watch属性实现列表过滤效果;

8、vue的过滤器
vue提供filters属性对指定的数据内容进行过滤,具体格式为data | formatter;

9、vue的内置指令
v-text能在指定节点中渲染文本内容,v-html能在指定节点中解析标签内容;v-cloak能标明vue实例是否接管html模板;v-once能设置节点内容只在初次动态渲染;v-pre能跳过所在节点的编译过程;

10、vue的自定义指令
vue提供directives属性以实现自定义指令,自定义指令将在元素和指令成功绑定时和指令所在的模板被重新解析时被调用;

11、vue的refs属性
vue提供refs属性获取已注册过 ref 的所有的子组件; ref 被用来给元素或子组件注册引用信息, 引用信息将会注册在父组件的 $refs 对象上,如果是在普通的DOM元素上使用,引用指向的就是 DOM 元素,如果是在子组件上,引用就指向组件的实例。

12、vue的mixin属性
vue提供mixin属性对一些公共的方法进行集中存放;

Vue-router的使用

1.缓存路由组件keep-alive
由于每次切换路由组件会导致组件的销毁,而在某些情况下需要保存组件的状态(让组件不被销毁),为了解决此问题,可以通过使用keep-alive组件让指定路由组件保存挂载,不被销毁;具体代码如下:

<keep-alive includes="News">
	<router-view></router-view>
</keep-alive>

对于keep-alive组件,vue提供两个特别的生命周期钩子函数,分别是:activated、deactivated;

2.路由组件

posted @ 2021-10-17 21:12  石青  阅读(399)  评论(0)    收藏  举报