计算属性-监听属性,生命周期,组件,组件通信之父传子,组件通信之子传父,ref属性

Ⅰ 计算属性-监听属性

【一】计算属性:computed

# 1 本质是一个函数，但是当属性用
	计算属性是基于它们的依赖进行缓存的
     计算属性只有在它的相关依赖发生改变时才会重新求值
     计算属性就像Python中的property，可以把方法/函数伪装成属性
# 2 计算属性和普通函数的区别
	-1 如果使用计算属性，只要 计算属性中使用的变量，发生变化时，计算属性才重新运算
    -2 如果使用函数，只要页面发生变化，函数就会重新运算    # 别的输入框变化，函数就会重新运算
    -3 计算属性当属性用，可以被for循环，可以被v-if判断
    
    
    当属性用：
    computed:{ //里面的值，当属性用
            new_name(){
                console.log('执行了')
                return this.username.substring(0,1).toUpperCase()+this.username.substring(1)
            }
        }

【1】基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js2/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>用户输入英文名-首字母转大写</h1>
    <input type="text" v-model="username">-->{{getUser()}}
   <input type="text" v-model="username">--->{{this.username.substring(0,1).toUpperCase()+this.username.substring(1)}}
    <input type="text" v-model="username">-->{{new_name}}

    <hr>
        <input type="text" v-model="age">-->{{age}}
</div>

</body>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            username:'',
            age:''
        },
        methods:{
            getUser(){
                console.log('-----执行了')
                return this.username.substring(0,1).toUpperCase()+this.username.substring(1)
            }
        },
        computed:{ //里面的值，当属性用
            new_name(){
                console.log('执行了')
                return this.username.substring(0,1).toUpperCase()+this.username.substring(1)
            }
        }
    })
</script>
</html>

【2】实用计算属性重写过滤案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤案例</title>
    <script src="./js2/vue.js"></script>

</head>
<body>
<div class="app">
    <input type="text" v-model="myText">
    <ul>
        <li v-for="item in newDataList">{{item}}</li>
    </ul>

</div>
</body>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            myText: '',
            dataList: ['a', 'at', 'atom', 'atommon', 'be', 'beyond', 'cs', 'csrf'],
        },
        methods: {
        },
        computed: {
            newDataList() {
                return this.dataList.filter(item => {
                    if (item.indexOf(this.myText) >= 0) {
                        return true
                    } else {
                        return false
                    }

                })
            }
        }
    })
</script>
</html>

【二】监听属性:watch

# 1 监听一个属性的变化，只要属性发生了变化，就执行 xx代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>监听属性</title>
    <script src="./js2/vue.js"></script>

</head>
<body>
<div class="app">
    <h1>监听属性</h1>

    <button @click="goods_type='食品'">食品</button>
    <button @click="goods_type='蔬菜'">蔬菜</button>
    <button @click="goods_type='冷藏'">冷藏</button>
    <hr>
    {{goods_type}}

</div>
</body>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            goods_type: '所有数据'
        },
        watch: {
            goods_type(new_val,old_val){
                console.log(old_val)
                console.log(new_val)
                console.log('向后端发送请求，过滤数据了')
            }
        }
    })
</script>
</html>

Ⅱ 生命周期

# 1 vue组件：从创建开始-->到被销毁经历了一个过程
	-过程中会有一些函数-->到某个过程时，就会触发这个函数的执行
    -8 个生命周期钩子函数
    
    
# 2 8个 （创建，挂在，更新，销毁）
    beforeCreate	    创建 Vue实例/组件之 前调用
    created	            创建Vue实例成功后调用（可以在此处发送异步请求后端数据）
    beforeMount	        渲染DOM之前调用
    mounted	            渲染DOM之后调用
    beforeUpdate	    重新渲染之前调用（数据更新等操作时，控制DOM重新渲染）
    updated	            重新渲染完成之后调用
    beforeDestroy	   销毁之前调用
    destroyed	      销毁之后调用
    
    
    
# 3 重点
	-created会经常用：组件创建完成，就向后端发送ajax请求获取数据
    -beforeDestroy 可能会用

【一】展示从创建开始到被销毁经历了一个过程

  • 但是由于销毁是关闭，所以暂时还看不到销毁过程
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生命周期钩子</title>
    <script src="./js2/vue.js"></script>

</head>
<body>
<div class="app">
    <h1>生命周期钩子</h1>
    {{name}}
    <br>
    <button @click="name='跳大象舞'">点我换名字</button>
</div>
</body>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            name:'蜡笔小新'
        },
        beforeCreate() {
            console.log('当前状态：beforeCreate')
        },
        created() {
            console.log('当前状态：created')
        },
        beforeMount() {
            console.log('当前状态：beforeMount')
        },
        mounted() {
            console.log('当前状态：mounted')
        },
        beforeUpdate() {
            console.log('当前状态：beforeUpdate')
        },
        updated() {
            console.log('当前状态：updated')
        },
        beforeDestroy() {
            console.log('当前状态：beforeDestroy')

        },
        destroyed() {
            console.group('当前状态：destroyed')
        },


    })


</script>
</html>

【二】用一个组件展示从创建开始到被销毁经历了一个过程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生命周期钩子</title>
    <script src="./js2/vue.js"></script>

</head>
<body>
<div class="app">
    <h1>组件生命周期</h1>
    <hr>
    <child v-if="show"></child>

    <hr>
    <button @click="handleShow">点我隐藏显示组件</button>


</div>


</body>
<script>
    //1 组件是有自己的html，css和js的一个对象--》能放在其它组件中使用
    Vue.component('child', {
        template: `
          <div>
          <h1>{{ title }}</h1>
          <button @click="handleChange">点我换标题</button>
          </div>`,
        data() {
            return {
                title: '我是child组件'
            }
        },
        methods: {
            handleChange() {
                this.title = '变了'
            }
        },
        beforeCreate() {
            console.group('当前状态：beforeCreate')
            console.log('当前el状态：', this.$el)
            console.log('当前data状态：', this.$data)
            console.log('当前name状态：', this.title)
        },
        created() {
            console.group('当前状态：created')
            console.log('当前el状态：', this.$el)
            console.log('当前data状态：', this.$data)
            console.log('当前name状态：', this.title)
        },
        beforeMount() {
            console.group('当前状态：beforeMount')
            console.log('当前el状态：', this.$el)
            console.log('当前data状态：', this.$data)
            console.log('当前name状态：', this.title)
        },
        mounted() {
            console.group('当前状态：mounted')
            console.log('当前el状态：', this.$el)
            console.log('当前data状态：', this.$data)
            console.log('当前name状态：', this.name)
        },
        beforeUpdate() {
            console.group('当前状态：beforeUpdate')
            console.log('当前el状态：', this.$el)
            console.log('当前data状态：', this.$data)
            console.log('当前name状态：', this.title)
        },
        updated() {
            console.group('当前状态：updated')
            console.log('当前el状态：', this.$el)
            console.log('当前data状态：', this.$data)
            console.log('当前name状态：', this.title)
        },
        beforeDestroy() {
            console.group('当前状态：beforeDestroy')
            console.log('当前el状态：', this.$el)
            console.log('当前data状态：', this.$data)
            console.log('当前name状态：', this.title)
        },
        destroyed() {
            console.group('当前状态：destroyed')
            console.log('当前el状态：', this.$el)
            console.log('当前data状态：', this.$data)
            console.log('当前name状态：', this.title)
        },
    })

    var vm = new Vue({
        el: '.app',
        data: {
            show: true
        },
        methods:{
            handleShow(){
                this.show=!this.show
            }
        }
    })
</script>
</html>

【三】生命周期钩子-组件-案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生命周期钩子</title>
    <script src="./js2/vue.js"></script>

</head>
<body>
<div class="app">
    <h1>组件生命周期</h1>
    <hr>
    <child v-if="show"></child>

    <hr>
    <button @click="handleShow">点我隐藏显示组件</button>


</div>


</body>
<script>
    //1 组件是有自己的html，css和js的一个对象-->能放在其它组件中使用
    Vue.component('child', {
        template: `
          <div>
          <div style="height: 500px;width: 200px;background-color: pink">
            <p>我说：你好</p>
            <p v-for="item in data_list">客服说：{{ item }}</p>

          </div>
          </div>`,
        data() {
            return {
                data_list: ['欢迎光临'],
                t: null
            }
        },
        created() {
            // 启动定时器--》每隔3s中向data_list 追加一条记录
            this.t = setInterval(() => {
                console.log('开始追加拉')
                this.data_list.push('下次再来！！')
            }, 3000)
        },


        beforeDestroy() {
            // 销毁定时器
            clearInterval(this.t)
            this.t = null

        },
    })


    var vm = new Vue({
        el: '.app',
        data: {
            show: true
        },
        methods: {
            handleShow() {
                this.show = !this.show
            }
        }
    })
</script>
</html>

Ⅲ 组件

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

</head>
<body>
<div class="app">
    <h1>组件</h1>
    <child></child>
    <hr>
<!--<chile2></chile2>    是全局组件的子组件  所以放在这里 控制台会报错-->
    <chile3></chile3>

</div>


</body>
<script>


    //1 全局组件--->可以在其他组件中直接使用
    // 组件有自己的 生命周期，数据，事件，计算属性，监听属性。。。
    // 组件的data必须是个方法，返回对象
    Vue.component('child', {
        template: `
          <div>
          <div style="height: 200px;width: 100px;background-color: pink">
          </div>
        <chile2></chile2>
          </div>`,
        data() {
            return {}
        },
         components: {
           'chile2': {
               template: `
          <div>
            <button>后退</button>
          <div style="height: 200px;width: 100px;background-color: pink">
          </div>
          </div>`,
           }

        }
<!---->

    })
            // ('child',这里是个对象)  所以对象可以换种操作



    //  还是全局组件  换了一种输出方式
    var obj =  {
        template: `
          <div>
          <div style="height: 200px;width: 100px;background-color: pink">
          </div>
        <chile2></chile2>
          </div>`,
        data() {
            return {}
        },
         components: {
           'chile2': {
               template: `
          <div>
            <button>后退</button>
          <div style="height: 200px;width: 100px;background-color: pink">
          </div>
          </div>`,
           }

        }
<!---->

    }

    Vue.component('child', obj)



    // 2 局部组件--->只能用在它父亲中,定义在组件的components 配置项上

    var vm = new Vue({
        el: '.app',
        data: {},
        methods: {},
        components: {
           'chile3': {
               template: `
          <div>
            <button>前进</button>
          <div style="height: 200px;width: 100px;background-color: pink">
          </div>
          </div>`,
           }   // 这样就能在上面展示 组件 <chile3></chile3>
        }
    })


    // 局部操作中 也可以更换

    var obj = {
               template: `
          <div>
            <button>前进</button>
          <div style="height: 200px;width: 100px;background-color: pink">
          </div>
          </div>`,
           }   // 这样就能在上面展示 组件 <chile3></chile3>

    var vm = new Vue({
        el: '.app',
        data: {},
        methods: {},
        components: {
           'chile3':obj
           }
    })

    //  再或者是
    var vm = new Vue({
        el: '.app',
        data: {},
        methods: {},
        components: {
           obj
           }
    })  //  这里  的局部展示  再上面就要展示成 <obj></obj>



</script>
</html>

Ⅳ 组件通信之父传子

# 1 组件和组件之间数据隔离，但是有时候，我们想组件和组件之间通信
# 2 父传子


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父传子---自定义属性</title>
    <script src="./js2/vue.js"></script>

</head>
<body>
<div class="app">
    <h1>父传子---自定义属性</h1>
    <p>这是父组件</p>
    <hr>
    <child :mytitle="title" :aa="cc" :bb="true"></child>
    <hr>


</div>


</body>
<script>

    Vue.component('child', {
        template: `
          <div>
          <div style="height: 200px;width: 100px;background-color: pink">
            <p>这是子组件</p>
            <p>{{mytitle}}</p>
            <p>{{aa}}</p>
          </div>
          </div>`,
        data() {
            return {}
        },
        props:['mytitle','aa'],

    })



    var vm = new Vue({
        el: '.app',
        data: {
            title:'给你的，儿子',
            cc:'zyb'
        },

    })


</script>
</html>

Ⅴ 组件通信之子传父

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子传父--自定义事件</title>
    <script src="./js2/vue.js"></script>

</head>
<body>
<div class="app">
    <h1>子传父--自定义事件</h1>
    <p>这是父组件,子组件传过来的值是：{{name}}</p>
    <hr>
    <child  @send_data="handleA"></child>
    <hr>


</div>


</body>
<script>

    Vue.component('child', {
        template: `
          <div>
          <div style="height: 200px;background-color: pink">
            <input type="text" v-model="username"> <button @click="handleSend">点我传给父亲</button>
            <br>
            {{username}}
          </div>
          </div>`,
        data() {
            return {
                username:''
            }
        },
        methods:{
            handleSend(){
                //传给父亲
                // this.$emit('自定义事件名字','参数')
                this.$emit('send_data',this.username)  // <child  @send_data="handleA"></child>
            }
        }

    })



    var vm = new Vue({
        el: '.app',
        data: {
            name:''
        },
        methods: {
            handleA(name){
                this.name=name
            }
        }

    })


</script>
</html>

Ⅵ ref属性

# 1 ref 属性也可以做组件间通信
# 2 ref是vue提供的属性-->可以放在任意标签或组件上
	-如果放在标签上
    	-通过  this.$refs.标签上的名字   拿到的值是 标签 对象
        -我们可以通过标签对象，修改 标签的属性。。。src属性，value属性
    -如果放在组件上
    	-通过  this.$refs.标签上的名字   拿到的值是 组件 对象
        -我们可以通过 组件对象，直接修改对象中得数据，直接调用对象中得方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ref属性</title>
    <script src="./js2/vue.js"></script>

</head>
<body>
<div class="app">
    <h1>ref属性</h1>
    <img src="./img/6.jpg" alt="" width="400px" height="400px" ref="myimg">
    <br>
    <input type="text" ref="myinput">

    <button @click="handleClick">点我看控制台</button>

    <hr>

    <child ref="mychild"></child>



</div>


</body>
<script>
    Vue.component('child', {
        template: `
          <div>
          <div style="height: 200px;width: 100px;background-color: pink">
            <p>这是子组件</p>
            <p>{{name}}</p>
          </div>
          </div>`,
        data(){
            return {
                name:"zyb"
            }
        },
        methods:{
            handleA(a){
                console.log(a)
                this.name=a
            }
        }

    })


    var vm = new Vue({
        el: '.app',
        data: {
            name:'',
            pice:'998'
        },
        methods:{
            handleClick(){
                console.log(this.$refs)

                // 改图片地址
                 //console.log(this.$refs.myimg)
                 //this.$refs.myimg.src='./img/3.jpg'

                //改input内容
                // console.log( this.$refs.myinput)
                 // this.$refs.myinput.value='xxxx'

                //拿到组件对象
                //1 在父亲中，改了子的值
                // this.$refs.mychild.name='xxxxxx'
                //2 把子中得值，赋值给父亲
                // this.name=this.$refs.mychild.name
                // console.log(this.name)
                //3 调用子的方法，传入父的参数
                this.$refs.mychild.handleA(this.pice)



            }
        }


    })


</script>
</html>

posted on   silence^  阅读(5)  评论(0)  编辑  收藏  举报

相关博文：
· vue-router,vue3介绍,vue3快速创建项目,常用api,生命周期,setup的特殊写法
· vue程序之src使用,ref-父传子-子传父使用, props ,混入,插件,插槽,vuex,本地储存,vue-router
· vue组件、组件通信、ref属性、动态组件、slot插槽、计算属性、监听属性
· python72前端框架之vue 组件间父子通信，ref属性，动态组件，插槽，计算属性，监听属性，node环境搭建
· 【Vue】计算属性 监听属性 组件通信 动态组件 插槽 vue-cli脚手架
阅读排行：
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
点击右上角即可分享
微信分享提示