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

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你点的每个“在看”,我都认真当成了喜欢
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
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、付费专栏及课程。

余额充值