乐趣区

关于javascript:vue杂记

jiezi

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

  • .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>
退出移动版