Vue (miscellany)

stray 2020-11-12 18:17:47
vue miscellany


Common modifiers and functions are as follows :

  • .stop: Stop the event from bubbling , Equivalent to calling event.stopPropagation();
  • .prevent: Block default events , Equivalent to event.preventDefault();
  • .capture: Listen for events in capture mode , namely addEventListener(event, fn, true);
  • .self: Only when event.target Start for yourself , When bubbling out of an internal element, it doesn't trigger ;
  • .once: Only one trigger after binding .

also Key modifier , It simplifies our handling of key events .

  • keyCode: Such as @keyup.13, I.e. monitoring keyCode by 13( Enter key ) The button lift event of .
  • Alias : Use it directly keyCode It's also more troublesome , After all, we don't remember all the buttons keyCode, The nicknames here provide easy access to the buttons , Such as @keyup.enter, Common nicknames are :

    • .enter
    • .tab
    • .delete
    • .esc
    • .space
    • .up
    • .down
    • .left
    • .right
  • System modifier keys : Modifier keys are different from regular keys , In the and keyup When things are together , The modifier key must be pressed when the event is triggered . for example :@keyup.ctrl.enter, That is, press and hold ctrl key , lift enter The key will trigger , Single lift ctrl Will not be triggered .Vue In total, there are four kinds of system modifiers :

    • .ctrl
    • .alt
    • .shift
    • .meta:Mac On the system keyboard ,meta Corresponding command key (⌘). stay Windows System keyboard meta Corresponding Windows Winkey (⊞).

in addition , Modifiers support superposition , And Execute in order , for example :

  • @click.stop.prevent="doSth" That is to prevent default events and prevent bubbling ;
  • @keyup.ctrl.enter I.e. monitoring ctrl+ Press enter to release the event ;
  • @click.self.prevent Only block default events to the element itself , and @click.prevent.self All default actions will be blocked ( hinder .self It didn't work ).
  • v-text: Update element textContent, With direct use {{}} comparison , You can avoid Vue Instances have not yet been applied to elements , Users can directly see {{ data }} This template syntax .
  • v-html: Update element innerHTML.
  • v-pre: Skip the compilation of elements and their children , Speed up compilation , Such as <div v-pre>...</div>.
  • v-cloak: Keep the attribute on the element , until The associated instance ends compiling , It is often used to hide uncompiled tags until the end of compilation . for example :

v-once: Render only elements and components once , After that, even if a retransmission is triggered , The element or node within the component that acts will be treated as static content , It won't be updated with it .

Earliest Vue Communication between components is realized by using distributed (dispatch, The event bubbled up , Stop bubbling when triggered ) and radio broadcast (broadcast, Events are passed down to all descendants ) To achieve communication between components . But this way is more suitable for communication between father and son , But there are two problems :

  • Communication flow between brother components is too long : Communication between sibling components needs to be transferred through the parent component . for example , Brother components A、B, Parent component C,A The distribution event bubbled up to C,C After receiving it, broadcast it again to A、B,B Trigger your own event after listening to it , The process is relatively long .
  • Communication flow depends on DOM structure : Both dispatch and bubbling processes depend on the structure between components , This creates coupling , It's not conducive to the splitting of components .

So in Vue 2.0 After that, the support for this mode of communication was canceled , It is recommended to use Event bus The way , In a simple scenario , You can use an empty Vue Instance as event bus , for example :

`var bus = new Vue()
Components A:
bus.$emit('action', data) // Trigger action event
Components B:
bus.$on('action', funtion (data) { ... }) // monitor action event `
Copy

So no matter the component A In which position ,B Can be monitored A The trigger action event , And DOM The structure is decoupled . In more complex situations , We will use State management : vuex To develop ~~~~

Vue.js It also provides a way to render child component data within the parent component , That's it Scope slot , It's usually used in some forms 、 List type plug-ins , In this way, users can customize the rendering of each specific item

// 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>
// Control of rendering specific properties is left to the parent component
// Without changing the subcomponents , We can base on the parent component , To render different properties , for example props.item.value And so on
// This is more extensible than rendering directly between sub components , But relatively speaking , The ability to encapsulate subcomponents is also relatively weakened ( Not responsible for the logic of rendering , All need to be completed by the parent component )
</template>
</list>

In the parent , Need to use with slot-scope Of <template> label , Indicates that it is a template for the scope slot .slot-scope The value of a variable is used as a temporary name , This variable receives the prop object .
<list :items="items"><li slot-scope="props" slot="item">{{ props.item }}</li></list>

1、 How to understand Vue Is the scope of the slot
for instance , For example, I wrote a list component that can implement alternate stripes , After the release of , Users can customize the content or style of each line ( ordinary slot You can finish the work ). And the key to the scope slot is , The parent component can receive slot The parameters passed in , See the case and the notes .

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue Scope slot </title>
<script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
</head>
<body>
<div id="app2">
<!-- Component users simply pass users Data is enough -->
<my-stripe-list :items="users" odd-bgcolor="#D3DCE6" even-bgcolor="#E5E9F2">
<!-- props Object receives from the subcomponent slot Of $index Parameters -->
<template slot="cont" scope="props">
<span>{{users[props.$index].id}}</span>
<span>{{users[props.$index].name}}</span>
<span>{{users[props.$index].age}}</span>
<!-- It's up to you [ edit ][ Delete ] Links and styles of buttons -->
<a :href="'#edit/id/'+users[props.$index].id"> edit </a>
<a :href="'#del/id/'+users[props.$index].id"> Delete </a>
</template>
</my-stripe-list>
</div>
<script> Vue.component('my-stripe-list', {
/*slot Of $index Can be passed to the parent component */
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: ' Zhang San ', age: 20},
{id: 2, name: ' Li Si ', age: 22},
{id: 3, name: ' Wang Wu ', age: 27},
{id: 4, name: ' Zhang long ', age: 27},
{id: 5, name: ' Zhao Hu ', age: 27}
]
}
}); </script>
</body>
</html>
版权声明
本文为[stray]所创,转载请带上原文链接,感谢

  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