Vue 开发实战基础篇 # 3:Vue组件的核心概念:事件
Posted 凯小默
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue 开发实战基础篇 # 3:Vue组件的核心概念:事件相关的知识,希望对你有一定的参考价值。
说明
【Vue 开发实战】学习笔记。
事件
vue 提供了一个简单的方式进行绑定事件,就是使用 @xxx
就可以进行事件绑定,这里以 click 事件为例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue组件的核心概念:事件</title>
</head>
<body>
<div id="app">
message
<ul>
<todo-item v-for="item in list" :title="item.title" :del="item.del"></todo-item>
</ul>
<todo-list></todo-list>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 定义一个名为 todo-item 的组件;名字需要唯一
Vue.component("todo-item",
props:
title: String,
del:
type: Boolean,
default: false
,
template: `
<li>
<span v-if="!del">title</span>
<span v-else style="text-decoration: line-through;">title</span>
<button v-show="del" @click="handleClick">删除</button>
</li>
`,
// data 需要为函数返回一个对象,保证唯一性
data: function()
return
,
methods:
handleClick()
console.log('点击了删除按钮');
// 发射时间出去
this.$emit("delete", this.title);
,
);
// 定义一个名为 todo-list 的组件
Vue.component("todo-list",
template: `
<ul>
<todo-item v-for="item in list" :title="item.title" :del="item.del" @delete="handleDelete"></todo-item>
</ul>
`,
data: function()
return
list: [
title: "课程3",
del: true
,
title: "课程4",
del: false
,
]
,
methods:
handleDelete(val)
console.log('handleDelete---->', val);
);
var vm = new Vue(
el: "#app",
data:
message: "kaimo 313",
list: [
title: "课程1",
del: true
,
title: "课程2",
del: false
,
]
)
</script>
</body>
</html>
然后点击删除按钮,结果如下
以上是关于Vue 开发实战基础篇 # 3:Vue组件的核心概念:事件的主要内容,如果未能解决你的问题,请参考以下文章