当前位置：首页 > news >正文

vue 入门：组件事件

news 2025/4/18 17:20:34

文章目录

vue介绍
vue 入门
- 简单示例
- 自定义组件
- 事件

vue介绍

vue2 官网

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层。

vue 入门

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。
v-bind attribute 被称为指令，指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute，简写，例如 :id="message" 将元素节点的 id 属性和 vue 实例的 message 属性的内容保持一致
v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。
v-on 指令添加一个事件监听器。
<template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素.

简单示例

当创建一个 Vue 实例时，你可以传入一个选项对象,选项对象文档
一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成
当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值，当这些数据改变时，视图会进行重渲染
Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀 $，以便与用户定义的 property 区分开来，实例 property 和方法的列表

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><div id="app">{{message}} {{message + message}}<div :id="message"></div><ul><li v-for="item in list"><span v-if="!item.del">{{item.title}}</span><span v-else style="text-decoration: line-through">{{item.title}}</span><button v-show="!item.del">删除</button></li></ul></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>//  // 创建一个 Vue 实例var vm = new Vue({el: '#app',data: {message: 'hello world',list: [{title: '课程1',del: false}, {title: '课程2',del: true}],}})
</script></body></html>

PS: 在浏览器控制台上可以通过 vm 获取数据（代码vue实例挂再在vm上），也可以修改相关的变量值

在这里插入图片描述

自定义组件

在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例

组件API

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body>
<div id="app">{{message}} {{message + message}}<div :id="message"></div><!--<ul>创建一个 todo-item 组件的实例<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,},},// 复用html代码template:`<li><span v-if="!del">{{ title }}</span><span v-else style="text-decoration: line-through">{{ title }}</span><button v-show="!del">删除</button></li>`,data: function () {return {}},methods: {},})// 定义名为 todo-list 的新组件Vue.component('todo-list', {template:`<ul><todo-item v-for="item in list" :title="item.title" :del="item.del"></todo-item></ul>`,data: function () {return {list: [{title: '课程1',del: false}, {title: '课程2',del: true}],}}})var vm = new Vue({el: '#app',data: {message: 'hello world',}})
</script>
</body></html>

事件

事件APi
自定义事件
在 Vue.js 中，v-on:my-event 的简写方式是 @my-event，@xxx 进行事件绑定(简写形式)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body>
<div id="app">{{message}} {{message + message}}<div :id="message"></div><!-- <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>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: function () {return {}},methods: {handleClick(e) {console.log('点击删除按钮')// $emit 事件告诉上层（父组件））this.$emit('delete', this.title)}},})Vue.component('todo-list', {// @delete 的方式来绑定一个用来接收 delete事件的方法template:`<ul><todo-item @delete="handleDelete" v-for="item in list" :title="item.title":del="item.del"></todo-item></ul>`,data: function () {return {list: [{title: '课程1',del: false}, {title: '课程2',del: true}],}},methods: {// 子组件触发 delete 事件，父组件接收到事件，执行相应的方法handleDelete(val) {console.log('handleDelete', val)}}})var vm = new Vue({el: '#app',data: {message: 'hello world',}})
</script>
</body></html>