Vue.js3学习篇--Vue组件的属性和方法

最新推荐文章于 2024-06-17 20:38:01 发布

前段被迫创业

最新推荐文章于 2024-06-17 20:38:01 发布

阅读量2k

点赞数 1

文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/weixin_63009369/article/details/133490728

版权

一.属性和方法

1.属性基础

在编写Vue组件时，组件的数据都放在data选项中，Vue组件的data选项是一个函数，该函数返回一些我们定义属性的数据

例如：

<script>
    const App={
        data(){
            return{
                count:0,
            }
        }
    }
</script>

2.方法基础

组件的方法定义在methods选项中，在我们实现组件的方法时，可以放心地使用this关键字，Vue组件会自动将其绑定到当前组件实例本身

例如定义一个方法：

 methods:{
            addation(){
                this.count++
            }
        }

二.计算属性和侦听器

大多数情况下，Vue组件中定义的属性数据组件都可以直接渲染到HTML元素，但是有写情况属性中的数据并不适合直接渲染，需要经过处理后再渲染，在Vue中，就可以使用计算机属性或侦听器来实现这种逻辑

1.计算属性

之前的data函数中定义的属性是存储属性，存储属性的值是我们直接定义好的，这个属性只起到存储数据的作用。在Vue中还有一种计算属性，它不是用来存储数据，而是通过一些计算逻辑来实时地维护当前属性的值，计算属性在compute选项中定义。

例如：定义一个组件的type属性，当组件的count属性大于4时，type属性值为牛逼，否则为不牛逼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="Application">
    <div>{
  {count}}</div>
    <div>{
  {type}}</div>
    <button @click="addation">累加</button>
</div>
<script>
    const App={
        data(){
            return{
                count:0,
            }
        },
        methods:{
            addation(){
                this.count++
            }
        },
        computed:{
            type(){
                return this.count>4?"牛逼":"不牛逼"
            }
        },
    }
    let instance=Vue.createApp(App).mount("#Application")
    console.log(instance.count)
    console.log(instance.$data.count)
</script>
</body>
</html>

计算属性效果：

2.计算属性和函数的选择

上面的代码实现我们也可以通过函数来实现，函数定义为：

  methods:{
            addation(){
                this.count++
            },
            type(){
                return this.count>4?"牛逼":"不牛逼"
            }
        }

插值变量定义为函数：

<div>{
  {type()}}</div>

从运行的结果来说，使用函数和使用计算属性的结果一样，但实际上，计算属性是基于存储属性的值的变化而重新计算的，计算完成后，其结果会被缓存，下次访问计算属性时，只要依赖的属性没有变化，其内的逻辑代码不会被重复执行，而函数不一样，每次访问都会重新执行函数内的代码才可以得到结果。所以，在实际开发中，我们可以根据是否需要缓存这个标准来选择使用计算属性还是函数

3.计算属性的赋值

存储属性主要用于数据的存储，通常情况下，计算属性只用来取值，不会存值，这个取值的方法我们称为get方法，但存值的方法我们可以自己实现，称为set方法。

例如：

     computed:{
        type:{
            //get方法取值
            get(){
                return this.count > 4?"牛逼":"不牛逼"
            },
            //set方法存值
            set(newValue){
                if (newVue=="牛逼"){
                    this.count=5
                }else {
                    this.count=0
                }
            }
        }
        }

即可通过get和set方法实现计算属性的存取值功能

4.属性侦听

属性侦听是Vue非常强大的功能之一，使用属性侦听可以方便地监听某个属性的变化。在Vue组件中可以通过watch选项来定义属性侦听器。Vue侦听器提供的了两种语法的定义格式，分别是方法格式和对象格式

1.方法格式

  //侦听器定义在watch中，监听哪个数据,就把哪个数据当函数名
        watch:{
         watchname(oldvalue,newvalue){
             //语句
         }
        }

方法格式侦听器的缺点：

（1）首次进入浏览器的时候，无法立即触发一次侦听器

（2）如果侦听的是一个对象，对象里的数据发生了变化，并不会触发侦听器

2.对象格式

 //侦听器定义在watch中，监听哪个数据,就把哪个数据当函数名
        watch:{
         watchname(oldvalue,newvalue){
             //语句
         },
        //可以通过immediate控制侦听器自动触发一次，默认为false
        immediate:true
        //深度监听
        depp:true
        }

对象格式的缺点：

（1）可以通过immediate属性控制侦听器自动触发一次，当默认是false的

（2）不能监听到每一个属性的变化，除非设置deep属性

例如：

在页面输入框中输入字符，如果超过10个字符

最低0.47元/天解锁文章

前段被迫创业

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue.js3学习篇--Vue组件的属性和方法

从运行的结果来说，使用函数和使用计算属性的结果一样，但实际上，计算属性是基于存储属性的值的变化而重新计算的，计算完成后，其结果会被缓存，下次访问计算属性时，只要依赖的属性没有变化，其内的逻辑代码不会被重复执行，而函数不一样，每次访问都会重新执行函数内的代码才可以得到结果。这样，我们就通过了设置style属性来设置class属性，但需要注意的是，内联设置的CSS和外部定义的CSS有一点区别，外部的多用“-”符号连接，如font-Size，而内联样式常用驼峰命名法，如fontSize。
复制链接

扫一扫