Vue入门四（计算属性｜监听属性｜组件介绍｜父子通信｜Ref属性｜动态组件）

最新推荐文章于 2023-07-20 10:20:43 发布
最新推荐文章于 2023-07-20 10:20:43 发布
阅读量481 收藏 1
点赞数 1
分类专栏： Vue 文章标签： vue.js 前端 javascript python Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MeiJin_/article/details/127586301
版权

文章目录

一、计算属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./Js/vue.js"></script>
</head>
<body>
<div id="first">
    <h1>计算属性函数方式</h1>
    <input type="text" v-model="name"> ------> {{nameUpper()}}
    <h1>计算属性Computed</h1>
    <input type="text" v-model="name1"> ------> {{Upper}}
</div>
</body>
<script>
    var vm = new Vue({
        el: '#first',
        data:{
            name: '',
            name1: '',
        },
        methods:{
            nameUpper(){
                console.log('页面发生变化就会执行 ')
                return this.name.slice(0,1).toUpperCase() + this.name.slice(1)
            }
        },
        computed:{
            Upper(){
                console.log('涉及到计算属性中使用变量发生变化')
                return this.name1.slice(0,1).toUpperCase() + this.name1.slice(1)
            }
        }
    })
</script>
</html>

在这里插入图片描述

1）重写过滤案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./Js/vue.js"></script>
</head>
<body>
<div id="first">
    <h1>过滤案例计算属性方法</h1>
    <p><input type="text" v-model="search" placeholder="请输入想要搜索的内容"></p>
    <ul>
        <li v-for="item in newdataList">{{item}}</li>
    </ul>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#first',
        data:{
            search: '',
            dataList:[
                'a', 'ace', 'am', 'atm',
                'b', 'bit', 'big', 'baby',
                'c', 'city', 'ccc',
            ],
        },
        computed:{
            newdataList(){
                return this.dataList.filter(item => item.indexOf(this.search) >= 0)
            }
        }
    })
</script>
</html>

在这里插入图片描述

二、监听属性

监听一个属性的变化 只要它发生变化 就执行一个函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./Js/vue.js"></script>
</head>
<body>
<div id="first">
    <span><button @click="type='篮球'">篮球</button>｜<button @click="type='足球'">足球</button>｜<button @click="type='台球'">台球</button></span>
    <br>
    <hr>
    <br>
    {{type}}
</div>
</body>
<script>
    var vm = new Vue({
        el: '#first',
        data:{
            type:'篮球',
        },
        watch:{
            type(val){
                console.log('修改后变成了,', val)
                console.log('向后端加载数据')
            }
        }
    })
</script>
</html>

在这里插入图片描述

三、组件介绍和定义

组件相当于Python中的模块 拓展HTML元素 可以重复使用的代码 使用它就是为了重复使用
例如：一个轮播图需要使用放到很多页面当中使用， 一个轮播图有它自己的Js Css Html,
组件就可以快捷的做出一个轮播图 有自己的JS Css Html放到一起 有自己的逻辑样式这样到哪里都可以使用了不用重复代码

定义组件
全局组件：全局可以使用的组件 可以用在任意其他的组件中
局部组件：局部组件只能在定义的组件中使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./Js/vue.js"></script>
</head>
<body>
<div id="first">
    <h1>全局组件</h1>
    <child></child>
    <hr>
    <h1>局部组件</h1>
    <like></like>
    <hr>
</div>
</body>
<script>
    var obj = {
        template: `
          <div>
	          <button>后退</button>
	          {{ title }}
	          <button @click="oneClick">前进</button>
          </div>
        `,
        data() {
            return {title: '标题'}
        },
        methods: {
            oneClick() {
                alert('前进')
            }
        },
    }
    Vue.component('child', obj)

    var like = {
        template: `
          <div>{{ name }}
	          <child3></child3>
	          <child></child>
          </div>
        `,
        data() {
            return {name: 'Like'}
        },
        components: {
            'child3': {
                template: `
                    <div>
                   		<h1>like组件内的组件</h1>
					</div>
                `
            }
        }
    }

    var vm = new Vue({
        el:'#first',
        data:{},
        components:{
            like
        }
    })


</script>
</html>

四、父子通信之父传子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./Js/vue.js"></script>
</head>
<body>
<div id="first">
    <h1>自定义属性实现父子通信</h1>
    {{name}}
    <child :myname="name">name</child>
    <hr>
</div>
</body>
<script>
    var child = {
        template:`
        <div>
            <h1>我是child组件</h1>
            {{myname}}
        </div>`,
        props:{
            myname: String,
        },
        created(){
            console.log(typeof this.myname)
        }
    }

    var vm = new Vue({
        el: '#first',
        data:{
            name:'胡歌'
        },
        components:{
            child
        }
    })
</script>
</html>

在这里插入图片描述

五、父子通信之子传父

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./Js/vue.js"></script>
</head>
<body>
<div id="first">
    <h1>父子通信</h1>
    父组件中的name值为：{{name}}
    <hr>
    <child @myevnet="oneEvent"></child>
    <hr>
</div>
</body>
<script>
    var child = {
        template:`
            <div>
            <h1>我是child组件</h1>
            <input type="text" v-model="name"> -----> {{ name }}
            <br>
            <button @click="handleSend">点我把name传给父组件</button>
            </div>`,
        data(){
            return{
                name:''
            }
        },
        methods:{
            handleSend(){
                this.$emit('myevnet', this.name)    //在这里触发自定义事件的执行
            }
        }
    }

    var vm = new Vue({
        el: '#first',
        data:{
            name:'胡歌'
        },
        methods:{
            oneEvent(name){
                this.name = name
            }
        },
        components:{
            child
        }
    })
</script>
</html>

在这里插入图片描述

六、Ref属性

Ref可以放在普通标签上 通过this.$refs.自定义的名称取到的是 原生的dom对象

Ref可以放在组件上 通过this.$refs.自定义的名称取到的是 Vc对象（组件对象）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./Js/vue.js"></script>
</head>
<body>
<div id="first">
    <h1>ref属性放在普通标签上</h1>
    <input type="text" ref="myinput" v-model="name">  ------->{{name}}
    <br>
    <button @click="handlePrint">点我 打印</button>
    <hr>
    <h1>ref属性放在组件上</h1>
    <child ref="mychild">{{name}}</child>
</div>
</body>
<script>
    var child = {
        template:`
            <div>
                <button>后退</button>
                首页 ----{{age}} ------{{show}}
                <button @click="handleQ('江疏影')">前进</button>
            </div>`,
        data(){
            return{
                show:true,
                age:20
            }
        },
        methods:{
            handleQ(name){
                alert(name)
            }
        }
    }

    var vm = new Vue({
        el:'#first',
        data:{
            name:'迪丽热巴'
        },
        methods:{
            handlePrint(){
                this.$refs.myinput      // 原生dom对象
                this.$refs.myinput.value='XXXX'
                console.log(this.$refs)
                this.$refs.mychild.age=999
                this.$refs.mychild.show = false
                this.$refs.mychild.handleQ()
                this.name = this.$refs.child.age
                this.$refs.mychild.handleQ(this.name)
            }
        },
        components:{
            child
        }
    })
</script>
</html>

在这里插入图片描述

七、动态组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./Js/vue.js"></script>
</head>
<body>
<div id="first">
    <div>
        <span @click="type='home'">首页</span>|
        <span @click="type='goods'">商品</span>｜
        <span @click="type='order'">订单</span>
    </div>
    <div>
        <compoent :is="type"></compoent>
    </div>
</div>
</body>
<script>
    Vue.component('home', {
        template:`
            <div>
                <h1>首页</h1>
            </div>`,
    })
    Vue.component('goods',{
        template: `
        <div>
            <h1>商品</h1>
        </div>`,
    })
    Vue.component('order',{
        template: `
        <div>
            <h1>订单</h1>
        </div>`,
    })
    var vm = new Vue({
        el: '#first',
        data:{
            type: 'home'
        },
    })
</script>
</html>

在这里插入图片描述

1）keep-alive

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./Js/vue.js"></script>
</head>
<body>
<div id="first">
    <div>
        <span @click="type='home'">首页</span>｜
        <span @click="type='goods'">商品</span>｜
        <span @click="type='order'">订单</span>
    </div>
    <div>
        <keep-alive>
           <component :is="type"></component>      <!-- 会缓存不会销毁了-->
        </keep-alive>
    </div>
</div>
</body>

<script>
    Vue.component('home', {
        template:`
            <div>
                <h1>首页</h1>
            </div>`,
    })
    Vue.component('goods',{
        template: `
        <div>
            <h1>商品</h1>
            <input type="text" placeholder="请输入您想要搜索的内容"> <button>搜索</button>
        </div>`,
    })
    Vue.component('order',{
        template: `
        <div>
            <h1>订单</h1>
        </div>`,
    })
    var vm = new Vue({
        el: '#first',
        data:{
            type: 'home'
        },
    })
</script>
</html>

在这里插入图片描述

八、插槽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./Js/vue.js"></script>

</head>
<body>
<div id="app">

    <h1>插槽的使用</h1>
    <home>
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.yanziwoo.com%2Fuploads%2F281f15b06949f6c7209b397cb6576e46.jpg&refer=http%3A%2F%2Fwww.yanziwoo.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669732052&t=1319bb27547b185ebe2c86feb318b719" width="200px" height="200px">
    </home>
    <hr>
    <home>
        <div>我是div</div>
    </home>
    <hr>

    <goods>
        <div slot="bottom">
            我是底部
        </div>
        <a href="" slot="top">点我看美女</a>

    </goods>

</div>
</body>
<script>

    // 1 定义三个全局组件
    Vue.component('home', {
        template: `
        <div>
        <button>后退</button>
           <span>首页</span>
         <button>前进</button>
         <hr>
         <slot></slot>
        </div>`,
    })

    Vue.component('goods', {
        template: `
        <div>
        <slot name="top"></slot>
        <hr>
        <button>后退</button>
           <span>首页</span>
         <button>前进</button>
         <hr>
         <slot name="bottom"></slot>
        </div>`,
    })

    var vm = new Vue({
        el: '#app',
        data: {
            type: 'home'
        },


    })


</script>
</html>

在这里插入图片描述

LoisMay
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
VUE之组件（绑定原生事件、$listeners、$ref）
zuomengjia的博客
10-28 945
组件绑定原生事件 有时，我们想要在一个组件的根元素上直接监听一个原生事件，一般操作步骤如下 1、首先定义一个 child 组件，什么事件都不绑定，代码如下： 2、接下来，给 child 组件增加一个 @click 事件，如下所示 3、这个 handleClick 方法是谁的呢？当然是父作用域下的方法，所以接下来在根组件中增加一个方法，代码如下 分析验证： 当点击按钮的时候发现，没有弹框提示...
组件扩展、ref、监听、计算属性的使用
llj1028的博客
12-31 1189
子传父组件传值 ref的使用 wacth监听属性的使用 computed计算属性的使用
vue中$refs, $emit, $on, $once, $off的使用详解
coldriversnow的专栏
06-06 2252
只能监听自定义事件。
Vue this.$refs的使用
qq_41451744的博客
10-11 2804
【示例】Vue this.$refs的使用。
Vue3学习：监视（watch）ref定义的数据
weixin_47295886的博客
03-19 1642
监视ref所定义的一个响应式数据。基本数据类型使用ref。
什么？？？你连vue中父组件怎么监听子组件的事件都不知道？快来看看vue2和vue3中父组件监听子组件事件的区别吧
qq_45745778的博客
04-10 3322
vue2和vue3中父组件监听子组件事件
vue-父子组件和ref实例详解
10-16
下面我们将详细讲解 `vue-父子组件` 之间的数据传递和使用 `ref` 获取 DOM 或组件实例。 1. **父组件向子组件传值** 在 Vue 中，父组件向子组件传递数据主要通过 `props` 属性实现。在父组件模板中，我们可以使用 ...
vue之父子组件间通信实例讲解(props、$ref、$emit)
08-27
Vue 之父子组件间通信实例讲解（props、$ref、$emit） 在 Vue 中，组件间的通信是非常重要的知识点之一。本文将通过 props、$ref 和 $emit 三个知识点，来讲解如何实现父子组件间的通信。 首先，让我们来建立两个...
Vue2.0学习之详解Vue 组件及父子组件通信
08-28
5. **Ref引用**：Vue允许在模板中使用`ref`属性创建一个引用，通过`this.$refs`在父组件中访问到子组件实例，可以直接调用子组件的方法或访问其属性。 总结起来，Vue2.0的组件系统和父子组件通信机制为开发者提供了...
使用Vue父子组件通信实现todolist的功能示例代码
10-17
在本文中，我们将深入探讨如何使用Vue.js框架中的父子组件通信机制来实现一个简单的todolist功能。Vue.js是一个流行的前端JavaScript库，它提供了一种声明式的数据绑定和组件化的方法，使得开发用户界面更加简洁高效...
vue组件父子间通信详解（三）
08-28
Vue 组件父子间通信详解（三） Vue 组件父子间通信是指在 Vue 应用程序中，父组件和子组件之间的数据交换和事件传递。这种通信方式是 Vue 应用程序中非常重要的一部分，涉及到数据的传递、事件的触发、生命周期的...
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
10-18
今天小编就为大家分享一篇基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue响应ref和监听
weixin_58428537的博客
03-27 2349
监听后面如果没有用json.parse则 改了子组件定义的空对象，父组件也会听到并监听到，refs. show应该是子组件接受了才响应的， this.newArr=｛｝然后在赋值，子组件反应一下如果不用json.parse也是不能监听的子组件 ...
vue子组件监听父组件数据变化并作出改变（亲测有效）
热门推荐
mrliucx的博客
03-01 1万+
vue子组件监听父组件数据变化并作出改变（亲测有效）
ref,refs,和$nextTick
m0_64207574的博客
03-01 437
ref,refs,和$nextTick
vue3中子组件监听父组件传来的实时数据变化
最新发布
m0_58266149的博客
07-20 9485
vue3中子组件监听父组件传来的实时数据变化 watch 和 watchEffect 方法实现
Vue2 --动态绑定class、过滤器参数、$ref、自定义指令、计算属性与监听器
weixin_51972964的博客
12-15 1100
v-bind动态绑定class <div :class='['default-class',{'active-class':isActive}]'> </div> <div :class='{'active-class':isActive}' data(){ return{ isActive:true } } 过滤器-filter参数 过滤器默认有一个实参,即管道符前面的数值,如果需要传参,则设多个形参,实参从第二个形参开始 <div>{{ text
vue3 ref/监听/计算属性
Xiang_Gong_Ya_的博客
12-12 526
【代码】vue3 ref/监听/计算属性。
vue2的数据监听
weixin_58428537的博客
03-19 749
父组件定义了一个对象 包含 name age属性 子组件只定义了一个属性 则 通过this.$ref.方法传参数 子组件可以拿到 并且数据是 响应式的 同上 如果子组件 只定义了一个属性 并且 是通过监听 来给这个属性赋值 那么拿到的里面的属性也是响应式的 这个上面这两种情况 前提是 在父组件里面定义了name 和age 如果子组件在接受的时候如果不用json.parse处理的话 会父子组件同时变化 因为是浅拷贝的问题 //////////////////...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

LoisMay

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值