lanshengyougu

一:常见的指令:

v-if/v-else-if/v-else:  判断元素是否应该被渲染

v-show: 判断元素是否被隐藏(元素被隐藏后仍然存在, 但是页面看不到)

v-bind: 为元素绑定特性,  可简写, 如v-bind: class写为:class

v-on: 监听dom事件, 可简写, 如v-on:click简写为@click

v-for: 可用于遍历循环数组

v-html: 将文本当作html解析

v-text: 展示文本

v-model: 表单或组件实现数据双向绑定

二:通信方式:

  (1), props/@emit 实现父子通信

  (2), $children/$parent 直接调用子/父组件实例, 不推荐

  (3), bus.js的$emit/$on方法  兄弟组件通信

  (4), vuex 针对整个项目的数据存储, 每个组件都能访问到数据   官网教程: https://vuex.vuejs.org/zh/

  (5), $attrs/$listeners 多级组件嵌套通信

  (6), provide/inject 隔代组件通信, 较少用到

三:常用的生命周期:

官网教程: https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90

  created: 数据实例初始化之后, 可用来异步请求并初始化页面数据

  mounted: DOM已生成并且挂载到对应节点上, 可用来访问dom实例

  beforeDestroy: 组件即将被销毁, 可用来发移除定时器/监听器 

四:常用的重点的api:

 (1), data: 存储组件的数据

    (2), computed 计算属性, 基于响应式原理实现自动获取最新值

    (3), watch 监听器, 监测到特定值变化时可触发回调, 常用来执行开销较大的操作

    (4), filter过滤器, 将数据进行处理展示在页面上(原数据并没有改变)

    (5), props 接受来自父组件的数据

    (6), methods 存放组件函数

    (7), mixin 混入通用的方法, 达到复用的目的

    (8), vue-router 路由  单页面应用中利用不同路由展示不同的页面   官网教程: https://router.vuejs.org/zh/

    (9), vue-cli 配置 对webpack进行封装, 可快速搭建项目

   (10), components: 引入的组件

 

 

关于上面的一些常见用法的区别:

1,v-if 和v-show 的区别:

官方给出的答案:

 

 

2,computed和watch的区别:

computed擅长处理的事情:一个数据依赖于多个数据

watch擅长处理的事情:多个数据依赖一个数据

computed缓存计算结果,再重复的调用中,只要依赖数据不变,就直接取缓存中的计算结果

watch  可能在每次的计算结果都是一样的,算是重复计算

3,vue的单向数据流

所有的prop都使其父子prop之间形成一个单向下行绑定,这个值可是数字 布尔值 数组 对象,

即:父级prop的更新会向下流动到子组件中,但是反过来则不行,如果强行修改变量值,则会发出警告. 这样会防止从子组件意外改变父级组件的状态,从而导致你的应用的数据流难以理解.

但这里的单向数据流却有一个限制, 就是所传的变量必须是基本数据类型,数字,布尔,字符串, 而数组和对象则是双向绑定,在子组件中修改了父组件传进来的一个数组,同时会作用到父组件上,从而影响父组件的状态.

4,v-on的解释:

绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句,如果没有修饰符也可以省略。

 用在普通元素上时,只能监听原生 DOM 事件。用在自定义元素组件上时,也可以监听子组件触发的自定义事件。

 v-on事件修饰符:

  • .stop 阻止冒泡。本质是调用event.stopPropagation()
  • .prevent 阻止默认事件(默认行为)。本质是调用 event.preventDefault()。
  • .capture 添加事件监听器时,使用捕获的方式(也就是说,事件采用捕获的方式,而不是采用冒泡的方式)。
  • .self 只有当事件在该元素本身(比如不是子元素)触发时,才会触发回调。
  • .once 事件只触发一次。
  • .{keyCode | keyAlias} 只当事件是从侦听器绑定的元素本身触发时,才触发回调。
  • .native 监听组件根元素的原生事件。

 

分类:

技术点:

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2021-09-27
  • 2022-12-23
  • 2021-06-24
  • 2021-05-21
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2021-09-29
  • 2022-12-23
  • 2021-06-16
  • 2021-04-11
  • 2022-01-02
  • 2022-12-23
相关资源
相似解决方案