vue(杂记)

stray 2020-11-12 18:17:47
vue 杂记 技术开发 SegmentFault


常见的修饰符及作用如下:

  • .stop:阻止事件冒泡,等价于调用 event.stopPropagation();
  • .prevent:阻止默认事件,等价于 event.preventDefault();
  • .capture:以捕获模式监听事件,即 addEventListener(event, fn, true);
  • .self:只有当 event.target 为自身时才出发,从内部元素冒泡出来时不触发;
  • .once:绑定后只触发一次。

还有按键修饰符,简化了我们对按键事件的处理。

  • keyCode:如 @keyup.13,即监听 keyCode 为 13(回车键)的按键抬起事件。
  • 别名:直接使用 keyCode 也比较麻烦,毕竟我们不会去记所有按键的 keyCode,这里给常见的按键提供了别名方便使用,如 @keyup.enter,常见的别名有:

    • .enter
    • .tab
    • .delete
    • .esc
    • .space
    • .up
    • .down
    • .left
    • .right
  • 系统修饰键:修饰键与常规按键会有所不同,在和keyup事件一起用时,事件触发时修饰键必须处于按下状态。例如:@keyup.ctrl.enter,即为按住ctrl键,抬起enter键才会触发,单抬起ctrl不会被触发。Vue 总共包含以下四种系统修饰键:

    • .ctrl
    • .alt
    • .shift
    • .meta:Mac 系统键盘上,meta 对应 command 键(⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。

另外,修饰符支持叠加,且按顺序执行,例如:

  • @click.stop.prevent="doSth"即为阻止默认事件且阻止冒泡;
  • @keyup.ctrl.enter 即监听 ctrl+ 回车键释放事件;
  • @click.self.prevent仅阻止对元素自身的默认事件,而@click.prevent.self则会阻止所有的默认操作(后面的.self其实没有起作用)。
  • v-text:更新元素的textContent,与直接使用{{}}相比,可以避免 Vue 实例尚未作用于元素上,用户能直接看到{{ data }}这样的模板语法。
  • v-html:更新元素的innerHTML
  • v-pre: 跳过元素和其子元素的编译过程,加快编译速度,如<div v-pre>...</div>
  • v-cloak:保持该属性存在于元素上,直到关联的实例结束编译,常用于隐藏未编译的标签直到编译结束。例如:

v-once:只渲染元素和组件一次,随后即使触发重发渲染,该作用的元素或组件内的节点都将被视为静态内容,不会随之更新。

最早 Vue 在实现组件间通信的时候是采用派发(dispatch,事件向上冒泡,触发后停止冒泡)和广播(broadcast,事件向下传递给所有后代)的方式实现组件间通信。但这种方式在父子间通信时较为适用,但存在两个问题:

  • 兄弟组件间通信流程过长:兄弟组件间通信需要通过父组件中转。例如,兄弟组件 A、B,父组件 C,A 派发事件冒泡到 C,C 接受到后再次广播到 A、B,B 监听到后触发自己的事件,流程相对而言较长。
  • 通信流程依赖于 DOM 结构:派发和冒泡的流程都会依赖于组件间的结构,这样就形成了耦合,不利于组件的拆分。

所以在 Vue 2.0 后就取消了这种通信方式的支持,而推荐使用事件总线的方式,在简单场景下,可以使用一个空的 Vue 实例作为事件总线,例如:

`var bus = new Vue()
组件A:
bus.$emit('action', data) // 触发action事件
组件B:
bus.$on('action', funtion (data) { ... }) // 监听action事件`
复制

这样无论组件 A 在哪个位置,B 都能监听到 A 触发的 action 事件,与 DOM 结构就解耦了。在更加复杂的场景下,我们会使用状态管理: vuex 来进行开发~~~~

Vue.js 也提供了在父组件内渲染子组件数据的方法,那就是作用域插槽,通常会用在一些表格、列表类型的插件上,这样使用者就可以自定义渲染具体的每一项

// List.vue
<ul>
<slot name="item" v-for="item in items" :item="item"></slot>
</ul>
// ListDemo.vue
<list :items="items">
<template slot-scope="props" slot="item">
<li>{{ props.item.text }}</li>
// 渲染具体属性的控制权交由给了父组件
// 在不改变子组件的情况下,我们可以根据父组件的情况,来渲染不同的属性,例如 props.item.value 之类
// 这比在子组件间直接渲染提升了扩展性,但相对而言,子组件封装的能力也相对减弱了(并不负责渲染的逻辑,都需父组件完成)
</template>
</list>

在父级中,需要使用具有slot-scope<template>标签,表示它是作用域插槽的模板。slot-scope的值将被用作一个临时变量名,此变量接收从子组件传递过来的prop对象。
<list :items="items"><li slot-scope="props" slot="item">{{ props.item }}</li></list>

1、如何理解Vue的作用域插槽
举个例子,比如我写了一个可以实现条纹相间的列表组件,发布后,使用者可以自定义每一行的内容或样式(普通的slot就可以完成这个工作)。而作用域插槽的关键之处就在于,父组件能接收来自子组件的slot传递过来的参数,具体看案例和注释。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue作用域插槽</title>
<script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
</head>
<body>
<div id="app2">
<!-- 组件使用者只需传递users数据即可 -->
<my-stripe-list :items="users" odd-bgcolor="#D3DCE6" even-bgcolor="#E5E9F2">
<!-- props对象接收来自子组件slot的$index参数 -->
<template slot="cont" scope="props">
<span>{{users[props.$index].id}}</span>
<span>{{users[props.$index].name}}</span>
<span>{{users[props.$index].age}}</span>
<!-- 这里可以自定[编辑][删除]按钮的链接和样式 -->
<a :href="'#edit/id/'+users[props.$index].id">编辑</a>
<a :href="'#del/id/'+users[props.$index].id">删除</a>
</template>
</my-stripe-list>
</div>
<script> Vue.component('my-stripe-list', {
/*slot的$index可以传递到父组件中*/
template: `
<div>
<div v-for="(item, index) in items" style="line-height:2.2;" :style="index % 2 === 0 ? 'background:'+oddBgcolor : 'background:'+evenBgcolor">
<slot name="cont" :$index="index"></slot>
</div>
</div>
`,
props: {
items: Array,
oddBgcolor: String,
evenBgcolor: String
}
});
new Vue({
el: '#app2',
data: {
users: [
{id: 1, name: '张三', age: 20},
{id: 2, name: '李四', age: 22},
{id: 3, name: '王五', age: 27},
{id: 4, name: '张龙', age: 27},
{id: 5, name: '赵虎', age: 27}
]
}
}); </script>
</body>
</html>
版权声明
本文为[stray]所创,转载请带上原文链接,感谢
https://segmentfault.com/a/1190000038150349

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple