04vue组件，监听计算属性ref_vue2监听refs的值-CSDN博客

本文链接：https://blog.csdn.net/ahuaaaaa/article/details/141286941

【一】补充：nodejs

# 1 javascript:ECMA+bom+dom--->浏览器中执行的
# 2 ECMA
# 3 TypeScript：微软
    -js：弱类型动态语言
    -强类型语言：类型---》编译成js在浏览器中允许
    -ts是js的超集：ts完全兼容js的语法
    -闭包函数是装饰器的超集
    
    
    
# 4 后端：go，python，c，java，php
    -谷歌浏览器的v8引擎：js解释器
    -使用c重写了--》能够运行在操作系统上--》文件处理，数据操作，网络
        -在这个环境中写js语法了
    -nodejs：后端语言，运行在解释器之上
        -node     python
        -npm      pip
    
    -vue+nodejs 全站
    -vue+python 全站

【二】计算属性-监听属性

2.1计算属性

类似python的把函数包装成数据用的装饰器
# 1 本质是一个函数，但是当属性用
# 2 计算属性和普通函数的区别
    -1 如果使用计算属性，只要 计算属性中使用的变量，发生变化时，计算属性才重新运算
    -2 如果使用函数，只要页面发生变化，函数就会重新运算
    -3 计算属性当属性用，可以被for循环，可以被v-if判断

2.1.1 基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue2/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="username" >-->{{uppername}}
</div>

</body>
<script>
    new Vue({
        el:'#app',
        data:{
            username:"",
        },
        computed:{
            uppername(){
                console.log(this.username.substring(0,1).toUpperCase()+this.username.substring(1))
                return this.username.substring(0,1).toUpperCase()+this.username.substring(1)
            }
        }
    })
</script>
</html>

2.1.2 使用计算属性重写过滤案例-->就不用一个新数组存，也不用输入事件了，计算属性，只要检测到变量改变就会重新计算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue2/vue.js"></script>
<!--    <script src="./vue3/vue.js"></script>-->
</head>
<body>
<div id="app">
  <input type="text" v-model="inputtext" @input="handleinput">
  <p v-for="item in get_list">{{item}}</p>
</div>

</body>
<script>
 var vm=new Vue({
    el:'#app',
    data:{
      inputtext:'',
      data_list:['a','bbbb','abcd','shahi','sahk','oiqru3','dhaihyd9qhfigpb','138907409','am','amm','ammo'],
    },
    computed:{
        get_list(){
            return this.data_list.filter(item=>item.indexOf(this.inputtext)>=0)
        }
    }
  })

</script>
</html>

2.2 监听属性

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

以下案例先点的水果，那么旧值是all,新值水果
下一次点旧值就是水果了

2.2.1监听你点击了什么显示的内容就是什么

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue2/vue.js"></script>
</head>
<body>
<div id="app">
    <button @click="type_good='水果'">水果</button>
    <button @click="type_good='蔬菜'">蔬菜</button>
    <button @click="type_good='鲜肉'">鲜肉</button>
    <p>{{type_good}}</p>

</div>

</body>
<script>
    new Vue({
        el:"#app",
        data:{
            type_good:'all'
        },
        watch:{
        //    以变量属性命名的函数
            type_good(new_data,old_data){
                console.log(new_data,old_data)
                console.log("换楼")
            }
        }
    })
</script>
</html>

【三】生命周期

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

3.1案例信息交互定时器的开启与销毁

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue2/vue.js"></script>
</head>
<body>
<div id="app">
  <div style="width:220px;height: 400px;background: paleturquoise;margin: auto">
  <p>我：你好</p>
  <child v-if="show"></child>
    <div style="margin-top: 350px" ><input type="text" v-model="msg"><button >发送</button></div>
  </div>
<button @click="handleShow">点我隐藏显示组件</button>
</div>

</body>
<script>
  Vue.component('child', {
    template: `
          <div>---》一定要写个盒子否则会出错，确保模板有一个根元素。这是因为Vue在将组件的模板渲染到DOM时，需要有一个单一的根节点来挂载和更新组件的内容
            <p v-for="item in data_list">客服说：{{ item }}</p>
          </div>`,
    data(){
      return {
        data_list:["hello啊"],
        t:null

      }},
      created(){
        this.t=setInterval(()=>{
            console.log('开始追加拉')
          this.data_list.push("下次再来")
        },2000)
      },
    beforeDestroy(){
        console.log("摧毁拉")
      clearInterval(this.t)
      this.t=null
    }



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

【四】组件

# 1 组件：有自己的html，css，js
	
# 2 后面我们写组件，就是写一个 xx.vue
	在指定的位置写html，css，js
    
    
# 3 局部组件和全局组件
1 全局组件---》可以在其他组件中直接使用"""意思为在vue实例里不用写了，这里不需要在components选项中再次声明， 因为它已经是全局可用的了  """
    // 组件有自己的 生命周期，数据，事件，计算属性，监听属性等--》"""另外写一个Vue.component"""
    // 组件的data必须是个方法，返回对象
2 局部组件--->只能用在它父亲中,定义在组件的components 配置项上"""写在vue实例里，键是components"""


#4data的写法与vue实例不同原因
组件内的 data 属性名称（如 myname）可以与外部 Vue 实例中的 data 属性名称不同，也可以相同，但这并不意味着它们之间有直接的关联或共享。它们各自维护着自己的状态。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue2/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>组件</h1>
    <p>全局</p>
    <child></child>
    <p>局部</p>
    <child2>

    </child2>
</div>

</body>
<script>
    Vue.component('child',{
         template: `
          <div>
            <p>hhhhhhhhhajaiodjoaij</p>
          </div>`,
    })
    var vm=new Vue({
        el:'#app',
        components:{
            'child2':{
                template:`<div>
                  <button>后退</button>
                  <span style="font-size: 30px">标题</span>
                  <button>前进</button>
                  </div>`,
               
            }

        }
    })
</script>
</html>

【五】组件通信之父传子

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

# 2 父传子
由于这个子组件是写在父上，我们自定义个属性对应父的属性名---》在子组件中写props:[注册自定义的属性名]--》在模板里就可以直接用插值了--》如果data中有同名变量用data中的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue2/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>组件</h1>
    <p>全局</p>
    <child :myname="name"></child>

</div>

</body>
<script>
    Vue.component('child',{
         template: `
          <div>
            <p>{{ myname }}</p>
          </div>`,
        data(){
             return{
             }
        },
        props:['myname','aa'],
    })
    var vm=new Vue({
        el:'#app',
       data:{
            name:'llh'
       }


    })
</script>
</html>

【六】组件通信之子传父

1.子组件中有name这个值，
2.我们设置一个按钮会触发某个函数
senddata(){         this.$emit('send_myname',this.myname)
             }
3.在子组件上写自定义绑定事件对应父组件中的方法
<child @send_myname="handlesend">
4.父组件中的方法会对应的赋值
handlesend(a){
                this.name=a
            }


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue2/vue.js"></script>
</head>
<body>
<div id="app">
    <h1 >父组件，子传父的值{{name}}</h1>


    <hr>
    <p>全局</p>
    <child @send_myname="handlesend"></child>

</div>

</body>
<script>
    Vue.component('child',{
         template: `
          <div>
            <input v-model="myname">
            {{myname}}
          <button @click="senddata">点击子传父</button>
          </div>`,
        data(){
             return{
               myname:''
             }
        },
        methods:{
             senddata(){
                 //会触发send_myname事件绑定的函数this.$emit('自定义事件',函数所要传的参数)
                 this.$emit('send_myname',this.myname)
             }
        }

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


    })
</script>
</html>

【七】ref属性

1.在标签里写上ref="xx"
2.那么在vue实例中获取就是this.$refs.xx，那个dom对象
3.就能对这个对象进行操作

"""联想到可以进行子传父"""
1.给子组件标签里写上ref="xx"，--》在父组件获取子组件对象，调用子组件的方法给父组件的变量赋值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue2/vue.js"></script>
</head>
<body>
<div id="app">
    <img src="./img/1.jpg" width="200px" height="200px" ref="myimg">
    <input type="text" ref="myinput">{{name}}
    <button @click="see">点我看</button>

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

</body>
<script>
    Vue.component('child', {
        template: `
          <div>
          <p>{{ myname }}</p>
          </div>`,
        data() {
            return {
                myname: 'llh'
            }
        },
        methods: {
            senddata(a) {
                this.name = a
            }

        }
    })
    new Vue({
        el: '#app',
        data:{
            name:''
        },
        methods: {
            see() {
                //拿到ref为myimg的那个html语句--》可以直接点他有的属性进行修改
                console.log(this.$refs.myimg)//<img src="./img/1.jpg" width="200px" height="200px">
                this.$refs.myimg.src = './img/2.jpg'
                this.$refs.myinput.value = 'ajehqkh'
                // 也可以实现子传父-->获取到该子组件对象后去调用子组件对象的赋值方法，
                this.$refs.mychild.senddata('llh')
            }
        }
    })
</script>
</html>