vue @click 传值_VUE 的使用，学会这些就足够了！

最新推荐文章于 2024-04-13 10:31:47 发布
最新推荐文章于 2024-04-13 10:31:47 发布
阅读量1.7k 收藏
点赞数
文章标签： vue @click 传值
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40002009/article/details/111325017
版权

bd4653346387a8a1643e0880720e1ff6.png

码小辫专注更多编程视频和电子书 837e3418a06426259394b6487bad0dc6.png 天天在用钱

dacc0172652b17f5e287b9fd05599b1e.png

作者 |  敲出亿行bug 责编 | 夕颜 出品 | CSDN博客

Vue.js 是什么?

vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

01

vue实例

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。

1、在文件中引入vue.js，下面两种方式选择其中一种

2、建立简单的vue实例对象

<div id="app">//调用vue中的数据<h1>{{message}}h1>//下面的两种书写方式结果相同<button v-on:click="click()">clickbutton><button @click="click()">click01button>div><script>var ve=  new Vue({el:'#app',data:{message:'hello',},methods:{click:function(){alert("你好，世界");}}});script>

02

vue常用指令

1、v-on：绑定事件监听器，事件的类型由参数决定

例如：v-on：事件名称

或者@事件名称

8b4a8217958fd1bed582f73a1a5aa93a.png

2、v-if/v-else-if/v-else判断指令：根据表达式的值，进行渲染

例如：

//isshow为true时，标签内的内容显示到页面

{{isshow}}ok

new Vue({el:'#app',data:{message:'hello',isshow:true,},methods:{click:function(){alert("你好，世界");}}});

3、v-model：数据绑定指令(一般为表单输入绑定)

//v-model 指令在表单、 及  元素上创建双向数据绑定{{message}}

文本框里的内容与外面的内容绑定

8ca41ad2e7c2973143e0e253cb05bec6.png

4、v-for：循环(可以多层嵌套显示和java中的for循环原理一致)

v-for格式：

{{item}}  li>

其中：item是被迭代数组元素的别名

items是源数据数组

使用 item in items 的特殊格式语法

{{item}}{{item}}{{item}}
new Vue({el:'#demo',data:{items:[23,23,344,45],arr1:{"a":[1,2,3],"b":[2,2,3]},},methods:{}});

运行结果如图

8c7f316119d794962ba9cd75beb029f3.png

5、v-bind：动态绑定属性

使用格式

v-bind:属性名=“data数据对象中的值”

简写

：属性名=“data数据对象中的值”

.child{width: 50px;height: 50px;background-color: gray;color: black;}
//动态绑定了imges属性，img改变了图片，那么img标签也会改变
div6
//div区域的显示根据isshow的值来判定
new Vue({el:'#app',data:{isshow:true,img:'111.png',}})

03

生命周期函数|钩子函数

1、生命周期函数

beforecreated:加一些loading事件

created：结束loading事件，还做一些初始化，实现函数自执行

mounted：发起后端请求，取回数据

接受页面之间传递的参数

子组件向父组件传递参数

2、下面用一个生命周期函数演示的实例

{{message}}

changemessage
var ve =new Vue({el:'#demo',data:{message:'vue生命周期',},beforeCreate:function(){console.group("------------beforecreate-----------")console.log('el:'+this.$el)console.log('data:'+this.$data)console.log('message:'+this.message)},created:function(){console.group("------------created-----------")console.log('el:'+this.$el)console.log('data:'+this.$data)console.log('message:'+this.message)},beforeMount:function(){console.group("------------beforemount-----------")console.log('el:'+this.$el)console.log('data:'+this.$data)console.log('message:'+this.message)},mounted:function(){console.group("------------mounted-----------")console.log('el:'+this.$el)console.log('data:'+this.$data)console.log('message:'+this.message)},beforeUpdate:function(){console.group("------------beforeupdate-----------")console.log('el:'+this.$el)console.log('data:'+this.$data)console.log('message:'+this.message)},updated:function(){console.group("------------updated-----------")console.log('el:'+this.$el)console.log('data:'+this.$data)console.log('message:'+this.message)},beforeDestroy:function(){console.group("------------destotry-----------")console.log('el:'+this.$el)console.log('data:'+this.$data)console.log('message:'+this.message)},destroyed:function(){console.group("------------destroyed-----------")console.log('el:'+this.$el)console.log('data:'+this.$data)console.log('message:'+this.message)},methods:{changemessage:function(){this.message='666'}}});//销毁是在实例外面调用的ve.$destroy()

实际的效果

5737a6e7c0e1aeaba27345353d6726b6.png

点击changemessage按钮

7d43dc626b19c130b6908bd7aa481280.png

04

vue组件

借用官网的一张图。

b9a59a765f92bd45200102e11d31e9c3.png

1、为什么使用组件？

使用组件一方面可以不用去直接修改标签，另一方面也会优化页面显示。

注意:组件在实例前面书写

2、全局组件

{{message}}
Vue.component("all",{template:'

{{name}}

',// template:'#box1',data:function(){return{name:'李四'}}})var ve = new Vue({el:"#box",data:{message:'hello'}});

3、局部组件:局部组件放在实例中

父子组件可以嵌套使用

父子组件间作用域相互独立

子组件只能在父组件的模板中进行调用

子组件是父组件细化拆分的过程

父组件向子组件传值通过props进行

下面的示例中包含了父组件向子组件传值的功能

 var ve = new Vue({el:'#box',data:{},//父級components:{'test':{template:"#box1",data:function(){return{message:'aaa'}},//子级components:{'box1':{template:"#box2",//子级想将父级的一个值，作为自己的一个局部变量data:function(){return{mymsg:this.msg}},//计算属性computed:{mymsg1:function(){return this.msg+'!'}},props:['num','txt','msg']}}}}})

3e03cd6fa0c27500af32779b88a44684.png

4、自定义监听事件(子组件向父组件传值)

自定义监听事件：$emit()

传值的过程：

子组件设定了一个点击事件，点击事件中夹带着传递的值—》通过getval方法将拿到的值赋值给父组件的message—》父组件显示出message值

父组件:{{parentmsg}}||{{message}}

子组件:{{childmsg}}

var vm = new Vue({el:"#box",components:{"parent":{template:'#par',data:function(){return {parentmsg:"父组件的信息",message:''}},methods:{getval:function(val){this.message = valconsole.log(val)}},components:{'child':{template:'#child',data:function(){return{childmsg:'子组件的信息'}},methods:{fn:function(){this.$emit('change',this.childmsg)}}}}}}})

5、SLOT插槽(vue2.6.0之前版本使用的slot)

目的:其目的在于让组件的可扩展性更强,用来混合父组件的内容与子组件自己的模板。

分为匿名slot和具名slot

//匿名slot

头部

如果没有分发，则默认显示

底部

Vue.component('my-component',{template:'#mycomponent'})Vue.component('my-computer',{template:'#mycomputer'})var vm = new Vue({el:'#box',})

a9b5525982bee6719db7703e839948f2.png

//具名slot
n9000
OOOO
GPUCPUDIST
Vue.component('my-computer',{template:'#mycomputer'})var vm = new Vue({el:'#box',})

c99ec2c47db5768f4718f49bad39fd8c.png

05

vue的路由设置

要引入vue-router.js库文件

作用：根据url锚点的位置，在容器中加载不同的模块，本质是作为页面导航，完成SPA(Singal Page Application)的开发。

一种特殊的web应用，它将所有活动局限于一个web页面中，仅web页面初始化时加载项应的html、JavaScript、css。

一旦页面加载完成，SPA不会因为用户的操作而进行页面的重新加载或跳转，而是利用JavaScript动态的变换HTML(采用的是div切换显示或隐藏)，从而实现ui与用户的交互。

下面是一个简单地单页面示例

首页新闻热点go back
const Home={template:'

首页

'}const News={template:'

新闻

'}const Hot={template:'

热点

'}//Vue.extend(template:'

首页

')//配置路径const routes=[{path:'/home',component:Home},{path:'/news',component:News},{path:'/hot',component:Hot}]//创建routerconst router = new VueRouter({routes})var vm = new Vue({el:'#app',router,beforeCreate:function(){this.$router.push('/home').catch(err=>{err})},methods:{back(){this.$router.go(-1);}}})

二级路由的配置是在一级路由的基础上，在某一个path下再分离出几个低级的path。

示例

{//新闻模块下有将新闻进行分类：科技、军事等；其他步骤不影响path:'/news',component:News,children:[/* 二级路由，path分配，前面没有“ / ” */{path:'js',component:{template:'

军事类新闻

'}},{path:'kj',component:{template:'

科技类新闻

'}},{/* 默认页面可以直接用一个组件，也可以重定向 */path:'/',redirect:'js'// component:{// template:'

默认值

'// }}]}

路由的进一步详解

06

axios的使用

使用了常用的两种axios的方法：

5a0add7f0175968cc55ae0d2382b1505.png

axios的get方法使用

{{msg}}

Click
/* 创建Vue实例 */var vm=new Vue({el:'#app',data:{msg:''},methods:{ getMsg:function(){/* 方式一axios.get('./text.txt?name=zhy&age=20').then(res=>{console.log(res.data)this.msg=res.data}).catch(err=>{console.log(err)}) *///方式二axios.get('./text.txt',{params:{name:'zhy',age:20}}).then(res=>{this.msg=res.data}).catch(err=>{console.log(err)})} }})

点击事件触发后，就会将text文件中的数据拿到前端显示，post和get方法使用相同。

版权声明：本文为CSDN博主「敲出亿行bug」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/wenquan19960602/article/details/106174485

5e1b83babfef3718f558209db37e4ac4.gif

*版权声明：转载文章和图片均来自公开网络，版权归作者本人所有，推送文章除非无法确认，我们都会注明作者和来源。如果出处有误或侵犯到原作者权益，请与我们联系删除或授权事宜。

温馨提示

返回上一级 回复 “java” , "python 爬虫"……等你要的资源的关键词，即可得到内部电子书和视频，或参考关键词回复功能这篇文章

9f13af48d97069e913c4f378670dc7da.png

商务合作

WX：dot3721

61d9124504d573de39f694a3e655a0d3.png你点的每个“在看”，我都认真当成了喜欢
weixin_40002009
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue基础知识
qq_47433906的博客
01-21 2080
Vue基础知识
Vue 定义变量
A2382662404的博客
01-13 1万+
1、Vue 中定义变量 使用Vue，接触到了ES6。以前使用的JavaScript，定义变量使用的Var，现在Vue中还使用let 和 const来定义变量。 2、 var var定义的变量可以修改，如果不初始化会输出undefined，不会报错 var a = 1; // var a;//不会报错 console.log('函数外var定义a:' + a);//可以输出a=1 function change(){ a = 4; console.log('函数内var定义a:'
【Vue 响应式原理】发布订阅模式、观察者模式
zimeng303的博客
12-13 4064
响应式原理 课程目标 模拟 Vue 响应式原理。 准备工作 数据驱动 数据响应式 数据模型仅仅是普通的 JavaScript 对象，而当我们修改数据时，视图会进行更新，避免了繁琐的 DOM 操作，提高开发效率。 双向绑定 数据改变，视图改变；视图改变，数据也随之改变 我们可以使用 v-model 在表单元素上创建双向数据绑定 数据驱动（Vue 最独特的特性之一） 开发过程中仅需要关注数据本身，不需要关心数据是如何渲染到视图 响应式的核心原理 Vue 2.x – 基于 Object.d
vue环境变量
weixin_42666092的博客
06-11 5095
1.mode 模式 设置后， --mode production,是在打包后生成的文件中启动触发， --mode development 是在开发环境下启动触发触发 模式设置，在package.json 的 scripts属性中设置的命令 development(开发环境) 模式用于 vue-cli-service serve test(测试) 模式用于 vue-cli-service test:unit production(生产环境) 模式用于 vue-cli-service build 和 vu
Vue中定义全局变量与常量的各种方式详解
最新发布
2401_84092574的博客
04-13 1015
更近一步, 可以让这个 key 的名字为 _const 或者 _var, 或者让用户自己控制这个变量的名字.在实际情景上, 你可能拥有一份配置, 比如说微信公众号开发的时候, 你有一份配置, 写着。
详解vue 组件之间使用eventbus传值
08-29
Vue 组件之间使用 EventBus 传值 在 Vue 组件之间传递数据是一种常见的需求，vuex 是一个非常流行的解决方案，但是对于小型项目或者简单的数据传递，使用 Vuex 可能会显得过于复杂。这时，使用 EventBus 就是一个...
vue父子模板传值问题解决方法案例分析
10-15
本文将深入探讨如何解决Vue父子模板间的传值问题，结合案例详细讲解其实现方法和步骤。 首先，我们需要了解Vue中父子组件通信的基本原理。在Vue中，父组件可以通过props向下传递数据给子组件，而子组件则通过事件...
Vue 组件间传值及事件触发Demo
09-07
本教程将详细讲解如何在Vue组件间进行值传递以及事件触发，帮助你更好地理解并运用这些概念。 一、组件间传值 1. `props` 下传：父组件向子组件传递数据是最常见的传值方式，通过在子组件定义`props`属性接收父...
vue组件间的传值-小案例
07-06
在Vue.js框架中，组件是构建用户界面的基本单元，它们可以独立地管理和更新各自的视图。组件间的通信是实现复杂应用交互的关键。本教程通过几个小案例，详细讲解了Vue中父组件向子组件传递数据、子组件向父组件回传...
Vue 组件传值几种常用方法【总结】
08-27
Vue 组件传值方法总结 在 Vue 开发中，组件之间的数据传递是一个非常重要的环节。今天，我们将总结 Vue 组件传值的几种常用方法，希望能够对大家有所帮助。 通过路由带参数传值 在 Vue 中，我们可以通过路由带...
Vue选项式和组合式两种方法声明变量以及基本属性的讲解
defined_的博客
03-27 2297
Data中的数据是一个普通的对象，一般需要使用return返回数据，使用return包裹后，变量只在当前组件中生效，不会影响其他组件。用于在vue中定义函数，与以上三种不同的是，定义在methods中的函数需要被手动调用才可以执行，具体参照“watch”中的例子。需要注意的一点是，watch中的函数名称必须要和data中的属性名一致，watch是依赖于 data中的数据去工作的。是一个监听器，用于监听data中的数值变化，watch中的方法默认是不执行的，只有当监听的数值发生变化时才会执行。
Vue 的全局变量
Zhangq_1208的博客
02-15 313
在 VueCLI 项目中，经常需要声明一些全局变量（在每一个组件中都可以直接访问的变量）用于保存全局数据
Vue--click事件传递参数--方法/教程/实例
热门推荐
IT利刃出鞘的博客
11-08 6万+
原文网址： 简介 说明 本文用示例介绍Vue中事件传参的方法。 Vue的事件用法为：v-on:click="xxx"。可以用@click="xxx"来简写。 本处采用click这个事件进行展示，其他的事件也是一样的。 官网 事件处理 — Vue.js 只传自定义参数 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"&...
Vue2.5学习笔记（二）深入了解组件
Zijeak的博客
09-08 3943
1.组件使用的细节 1.2 子标签内使用组件 假设想在表格便签内使用一个组件作为行，直接使用组件是不行的，原因在于tbody内只能放tr便签，否则浏览器就会将tbody内的标签解析到外面，从而导致结构的错乱。 为了解决这个问题，我们可以使用is特性，将is特性设置为组件名称，这样既保证了tbody和tr之间的层级关系，也使用了组件。 1.2 非根组件的data必须是一个函数 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。 1.3 在Vue中操作DOM：使用ref
vue中使用@click进行传参
weixin_53815644的博客
05-06 9038
在右侧操作栏添加按钮并将该行信息（id）传递到方法中 1.template中必须使用slot-scope="scope" 才能在方法handleCount中使用scope.row进行传参 </template> <template slot="menu" slot-scope="scope"> <el-button type="text" icon="el-icon-circle-plus-outlin
vue对象如何传变量进行取值
zxh7770的博客
04-25 3302
vue对象如何传变量进行取值 阐述 在开发的过程中，在使用key取值的时候，key 不一定要是一个固定的，也有可能是一个变量。 案例代码如下： let key1 = 'name'; let objectList = { 'id': '1', [key1]: '李四' }; console.log(objectList['id']) // "1" console.log(objectList[key1]) // "李四" console.log(objectList.id) // '1' 根据k
vue @click 赋值_从零玩转Vue全家桶（三）
weixin_39707693的博客
11-21 2557
点点关注不迷路，江哥带你上高速~本系列文章为Vue.js的学习，《Vue全家桶+项目实战》和《手写Vue全家桶》系列课程已完结，请在知播渔官网(www.it666.com)上点击查看学习哦。本章内容为Vue.js内置指令的使用，请配合前两章结合食用，效果更佳哦~Vue 指令指令(Directives)是带有v-前缀的特殊属性。指令属性的值预期是单一 JavaScript 表达式(除了 v...
vue @click 传值_vue中组件通信的方式
weixin_39791225的博客
11-25 1421
我看了网上的博客，觉得不是特别详细，我也说说组件通信的方式，分别是父传子、子传父、兄弟传值！父传子：父组件App.vue中定义一个自定义属性title，然后在子组件中用props进行接收，最后用{{ title }}渲染页面父组件App.vue代码：<template> <div id="app"> <big :title="msg"></big&...
vue中 @click 绑定点击事件 方法传递参数 typescript(通用)
刘振兴的博客
09-03 4万+
话不多说还是直接上图 简单明了 <template> <div id="header"> <img src="../../assets/logo.jpeg" /> <div v-for="(item,i) in navList" v-bind:key="i" :to="item.path" @click.stop="show(ite...
vue3组件传值的方式以及使用
07-25
在Vue 3中，组件传值的方式和使用方法如下： 1. Props：父组件通过props向子组件传递数据。 ```html <!-- Parent Component --> <template> <ChildComponent :message="message" /> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { message: 'Hello from parent' }; } }; </script> <!-- Child Component --> <template> <div>{{ message }}</div> </template> <script> export default { props: ['message'] }; </script> ``` 2. Emit：子组件通过emit向父组件传递数据。 ```html <!-- Parent Component --> <template> <ChildComponent @messageUpdated="handleMessageUpdated" /> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, methods: { handleMessageUpdated(message) { console.log(message); } } }; </script> <!-- Child Component --> <template> <button @click="updateMessage">Update Message</button> </template> <script> export default { methods: { updateMessage() { this.$emit('messageUpdated', 'Hello from child'); } } }; </script> ``` 3. Provide/Inject：祖先组件通过provide提供数据，后代组件通过inject来注入数据。 ```html <!-- Ancestor Component --> <template> <div> <ChildComponent /> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, provide() { return { message: 'Hello from ancestor' }; } }; </script> <!-- Child Component --> <template> <div>{{ message }}</div> </template> <script> export default { inject: ['message'] }; </script> ``` 4. Refs：父组件可以通过$refs来访问子组件，从而调用子组件的方法或获取子组件的数据。 ```html <!-- Parent Component --> <template> <div> <ChildComponent ref="childComponent" /> <button @click="getChildMessage">Get Child Message</button> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, methods: { getChildMessage() { const message = this.$refs.childComponent.message; console.log(message); } } }; </script> <!-- Child Component --> <template> <div>{{ message }}</div> </template> <script> export default { data() { return { message: 'Hello from child' }; } }; </script> ``` 这些是Vue 3中常用的组件传值方式和使用方法。根据具体情况，选择适合的方式来实现组件之间的数据传递。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值