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

最新推荐文章于 2023-11-20 09:31:19 发布
最新推荐文章于 2023-11-20 09:31:19 发布
阅读量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 组件之间使用eventbus传值
08-29
Vue 组件之间使用 EventBus 传值 在 Vue 组件之间传递数据是一种常见的需求，vuex 是一个非常流行的解决方案，但是对于小型项目或者简单的数据传递，使用 Vuex 可能会显得过于复杂。这时，使用 EventBus 就是一个...
Vue基础知识
qq_47433906的博客
01-21 2097
Vue基础知识
vue基础总结
weixin_50939386的博客
05-14 1274
vue是什么 渐进式javacript框架, 一套拥有自己规则的语法 vue脚手架 ​ 作用： 帮助我们搭建项目 搭建项目及环境 安装 npm install - g @vue/cli 创建项目 注意： 项目不能有大写，中文和特殊符号 vue create 项目名 切换到根目录，可以在命令行中cd,也可以自己在文件夹中cmd打开 cd 项目名 运行vue项目 npm run serve 项目结构 ​ ​ 最为主要的几个 node_modules
Vue.js项目中全面解析定义全局变量的常用方法与技巧
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
11-03 1万+
在Vue项目中我们需要使用许多的变量来维护数据的流向和状态，这些变量可以是本地变量、组件变量、父子组件变量等，但这些变量都是有局限性的。在一些场景中，可能需要在多个组件中共享某个变量，此时全局变量就派上了用场。
Vue学习5----Vue点击事件，方法，获取数据，改变数据，事件对象及自定义属性
翟浩浩Android专栏
04-01 6879
效果图： 源码（复制即可运行） App.vue <!--06Vue点击事件，方法，获取数据，改变数据，事件对象及自定义属性--> <template> <!--渲染--> <div id="app"> <div>{{this.msg}}</div> <button v-on:click="ime...
【VUE复习·2】@click 之事件处理与函数（可传参）；@click 阻止事件冒泡应用场景；@click 多修饰符应用场景（高级）
要思考，要努力
09-27 6745
1.“事件处理”是什么2.@click 函数参数传递应用3.@click 阻止事件冒泡应用场景4.@click 多修饰符应用场景（高级）
vue父子模板传值问题解决方法案例分析
10-15
本文将深入探讨如何解决Vue父子模板间的传值问题，结合案例详细讲解其实现方法和步骤。 首先，我们需要了解Vue中父子组件通信的基本原理。在Vue中，父组件可以通过props向下传递数据给子组件，而子组件则通过事件...
Vue 组件间传值及事件触发Demo
09-07
本教程将详细讲解如何在Vue组件间进行值传递以及事件触发，帮助你更好地理解并运用这些概念。 一、组件间传值 1. `props` 下传：父组件向子组件传递数据是最常见的传值方式，通过在子组件定义`props`属性接收父...
vue组件间的传值-小案例
07-06
在Vue.js框架中，组件是构建用户界面的基本单元，它们可以独立地管理和更新各自的视图。组件间的通信是实现复杂应用交互的关键。本教程通过几个小案例，详细讲解了Vue中父组件向子组件传递数据、子组件向父组件回传...
vue3父子组件传值.doc
02-05
本文将详细探讨Vue3中如何使用`setup`语法糖格式来实现父子组件的数据传递，包括`defineProps`和`defineEmits`这两个关键函数的用法。 ### 1. `defineProps`: 接收父组件传递的数据 在Vue3中，父组件向子组件传递...
vue @click 赋值_vue 手写一个时间选择器
weixin_39610353的博客
12-12 544
vue 手写一个时间选择器最近研究了 DatePicker 的实现原理后做了一个 vue 的 DatePicker 组件，今天带大家一步一步实现 DatePicker 的 vue 组件。原理 DatePicker 的原理是——计算日历面板中当月或选中月份的总天数及前后月份相近的日子，根据点击事件计算日历面板显示内容，以及将所选值赋值给<input/>标签。实现CSS 代码于文章末尾处1...
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"&...
【Vue】全局变量的定义及使用
蓝胖子的博客
01-13 1万+
【Vue】全局变量的定义及使用
Vue中变量操作
欢乐时光已经开始---博客
07-29 724
1.插值表达式{{}}：顾名思义，用于渲染表达式的返回值，既可以是单纯的变量，也可以是表达式例如三目运算，又可以是函数的返回值；用作html里渲染标签内容。 2.:/v-bind：vue指令，用于动态绑定，用作html标签上绑定动态的属性，当不使用动态绑定时，那么就是字符串属性。 3.模板字符串+占位符：用于js中做字符串的动态拼接 ...
vue项目中如何使用环境变量
m0_52765288的博客
11-04 2357
1.认识环境变量 环境变量是指在不同的环境中使用不同的环境下使用不同的变量来进行配置 2.常见的环境 .env.development //开发环境 .env.production //生产环境 .env.development ：开发环境——webpack未打包上线之前的环境 .env.production : 生产环境——webpack进行打包之后的环 .env.staging : 测试环境 .env ...
vue: 在页面模板中使用{{js变量}}
最新发布
头条:俊哥前端工程师，真正的大师永远怀揣着一颗学徒的心。
11-20 901
{{}}表达式会返回一个数据值, 肯定没有分号, 它不是完整的js的解析指令, 需要与其它语法组成一条完整的语句。
Vue antd 按钮事件的动态赋值，自定义变量
x1a0x0的博客
02-08 1194
在处理一个点击事件时 有时需要获取当前控件的原始点击的变量以及自定义变量 原始点击的变量值如果是单一的 可以直接使用$event @click="onSelect(value, $event)" 如果是多值 可以使用... @click="(...data) => { onSelect(...data, value) }" ...
vue中传值的方法
czw2ly的博客
12-05 3299
主要是谈谈vue中组件传值的方法，供大家参考
【Vue】Vue中传值的几种方法，案例代码解析
m0_48465196的博客
12-23 2263
Vue中传值的几种方法
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、付费专栏及课程。

余额充值