Vue.component，click，事件修饰符

最新推荐文章于 2024-05-07 01:25:59 发布
最新推荐文章于 2024-05-07 01:25:59 发布
阅读量783 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sc0002/article/details/109333234
版权 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <div>{{message}}</div>
            <ul>
                <todo-list></todo-list>
            </ul>
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.component('todo-item', {
            // 声明
            props: {
                title: String,
                del: {
                    type: Boolean,
                    default: false, // 默认值
                },
            },
            template: `<li>
                    <span>{{title}}</span>
                    <button v-show="del" @click="handleClick">删除</button>
                </li>`,
            data: function () {
                return {};
            },
            methods: {
                handleClick() {
                    console.log('del');
                    this.$emit('delete', this.title);
                },
            },
        });
        Vue.component('todo-list', {
            template: `<ul>
                <todo-item
                    v-for="item in list"
                    data-test="dd"
                    :title="item.title"
                    :del="item.del"
                    @delete="handleDelete"
                ></todo-item>
            </ul>`,
            data: () => {
                return {
                    list: [
                        {
                            title: 't1',
                            del: false,
                        },
                        {
                            title: 't2',
                            del: true,
                        },
                    ],
                };
            },
            methods: {
                handleDelete(val) {
                    console.log('handleDelete', val);
                },
            },
        });
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'hellwo',
            },
        });
    </script>
</html>

.stop
.prevent
.capture
.self
.once
.passive

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

LeuPener
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue的自定义组件不能使用click方法的解决
12-28
先贴代码 var myButton = Vue.extend({//设置标签 props: ['names', 'item2'],//names为按钮名,item2为数据 template: '<span><span v-for=obj v-if=obj.name v-html=obj.code></span></span>' }) Vue.component('my-button', myButton);//注册组件 这是上篇博客的自定义按钮权限的代码,然后调用代码: <my-button names=”修改” v-
Vue.js组件通信之自定义事件详解
10-16
如果希望监听组件的根元素上的原生事件，可以在`v-on`后面加上`.native`修饰符，如`v-on:click.native="handleClick"`，这样`handleClick`就会在组件的根元素被点击时执行。 Vue 2.x引入了`v-model`指令，使得在...
vue练习3 component @click :class 简单练习
前端大菜鸟
01-30 262
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1"> <title></title> <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.css
vue的学习之路（Vue中组件(component )
最新发布
2401_84093054的博客
05-07 1153
1、传递以键值对的形式 定义在局部组件的调用处2、局部组件 核心：接收 props属性props:[传递数据时的键]注意：使用props属性接收的值 就相当于在data中定义对应的内容{key:value}{{msg}}
Vue.js组件(component)的应用---实现点击按钮转换页面的功能
PILIpilipala的博客
11-13 1557
组件的应用组件的内部构成实现点击按钮出现相应的页面 组件的内部构成 组件和Vue实例类似，都有自己的data和methods属性，但是组件中的data和实例的data有点不一样： 实例中的data可以为一个对象，组件中的data除了必须是一个方法之外，该方法内部还必须返回一个对象 <div id="app"> <mycom1/> </div> <script> Vue.component('mycom1',{ template:
6-vue-component
mao_mao37的博客
04-03 256
组件： data属性必须是一个函数 全局和局部的作用域问题：只要变量是组建内部的，这些变量就必须是局部的，而在外部html结构中引用的变量，都引用的改挂在下的实例里边的变量 Vue中所谓的全局指的是该挂载下的区域； 全局组件：构造器外定义 全局组件必须写在Vue实例创建之前，才在该根元素下面生效； 组件处于全局下不可以添加默认事件，要用全局的事件函数，必须父子通信 <body...
vue中component标签的使用
weixin_43837268的博客
02-15 5391
1.component.vue &lt;template&gt; &lt;div id="app"&gt; &lt;component :is="key"&gt;&lt;/component&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; var componentA = { te
如何理解Vue的.sync修饰符的使用
12-29
本文介绍了Vue的.sync修饰符的使用，分享给大家，也给自己留个笔记 案例 <div>{{bar}} <my foo.sync=bar> <!-- <my foo=bar update:foo=val> bar = val></my> --> [removed] Vue.component('my-comp',...
vue.js 简单的组件和点击事件应用
03-21
除了简写`v-on`为`@`，Vue还支持事件修饰符，比如`.stop`阻止事件冒泡，`.prevent`阻止默认行为，`.once`只执行一次等。例如，阻止按钮的默认提交行为： ```html <form @submit.prevent="onSubmit"> <!-- 表单内容...
Vue.js简单的组件化和点击事件应用
03-21
Vue.js 还支持事件修饰符，比如 `.stop` 可以阻止事件冒泡，`.prevent` 可以阻止默认行为，`.once` 让事件监听器只触发一次等。例如，如果我们要阻止点击事件冒泡，可以这样写： ```html <button @click.stop=...
ppt课件-第4章 Vue事件处理.zip
03-22
Vue事件处理中的另一个重要概念是事件修饰符`.self`，它确保只有在事件源是当前元素时才执行回调函数： ```html <div v-on:click.self="onlySelfHandler"> 点击 ``` 在此例中，即使按钮在div内，点击按钮也不会...
Vue全家桶之组件（component）
m0_57002951的博客
03-29 2994
a、全局组件的使用 1）定义组件 2）使用组件 Vue中父组件向子组件传递事件并通过事件子组件传递数据到父组件
vue-cli2 component组件的使用
weixin_36521716的博客
08-16 323
<template> <div class="knowledge--info__side" v-if=" checkRelatedShow('Law') || checkRelatedShow('Standard') || checkRelatedShow('Enforce') || checkRelatedShow('Justice') "> .
2020大厂前端面试之vue专题（二）
qq_40665861的博客
05-09 909
11.Vue中模板编译原理 将 template 转化成 render 函数 function baseCompile( template: string, options: CompilerOptions ) { const ast = parse(template.trim(), options) // 1.将模板转化成ast语法树 if (options.optimize !== false) { // 2.优化树
使用 HTTPS 和 click-to-react-component 提升 React 开发体验
程序员成长指北
06-08 445
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群前言前几天了解到一个工具仓库click-to-component[1]，这个工具的主要作用是：在 React 项目里，我们通过Option+ 鼠标左or右键 点击页面元素可以快速跳转到 IDE 中对应的代码部分，就像下面这样 ????next.gif简单看了下教程后，立马...
VUE-组件（component）
damadashen的博客
05-20 8945
VUE组件介绍
Vue组件components只需3分钟实现简易模态框
1000001000
03-02 1775
Vue组件components只需3分钟实现简易模态框
vue 内置组件 component 的用法
热门推荐
weixin_42333548的博客
06-01 9万+
component is 内置组件切换方法一： component组件（单独拿出一个组件来专门进行切换使用） 使用is来绑定你的组件：如下面的reviewedPlan planDetailsList attachmentList等引入的组件名 changeViewFun 是用来切换组件的方法 通过给is绑定的currentView来实现切换组件 pathUrl就是当前的路由 ...
【Vue】Vue中实现单击click事件获取html元素和css样式的解决方法（持续更新中...）
【敦厚的曹操】的专栏
02-16 5774
一、通过event获取 console.log(event.target); // 当前元素点击的子节点 console.log(event.currentTarget); // 当前Vue元素 var pro = event.currentTarget; // 当前元素 pro.lastElementChild.style.color = "#DE3E3E"; /
vue中.sync修饰符
08-23
在 Vue 中，.sync 是一个语法糖，它能够简化父子组件之间的数据传递。.sync 修饰符实际上是一个双向绑定的简写形式，它会自动创建一个名为 update:propName 的自定义事件，并且在父组件中监听这个事件，然后更新子组件的数据。 例如，在父组件中使用子组件时，可以通过 v-bind.sync 修饰符将父组件的数据与子组件的数据绑定在一起： ``` <template> <ChildComponent :message.sync="messageFromParent"></ChildComponent> </template> ``` 这里的 .sync 修饰符会自动将子组件的 message 属性与父组件的 messageFromParent 属性进行双向绑定，并且在父组件中监听名为 update:message 的自定义事件，以更新父组件的数据。 ``` <template> <ChildComponent :message.sync="messageFromParent"></ChildComponent> <button @click="updateMessage">Update Message</button> </template> <script> export default { data() { return { messageFromParent: 'Hello World' } }, methods: { updateMessage() { this.messageFromParent = 'Hello Vue' } } } </script> ``` 在子组件中，可以通过 $emit() 方法触发 update:message 事件，以更新父组件的数据。 ``` <template> <div> <input type="text" v-model="message"> <button @click="$emit('update:message', message)">Update Message</button> </div> </template> <script> export default { props: { message: { type: String } } } </script> ``` 这样，父组件和子组件之间就可以通过 .sync 修饰符实现双向数据绑定了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值