Vue 常用属性

news2024/12/23 23:15:38

数据属性

组件的 data 选项是一个函数（data里面是有return的）。Vue 会在创建新组件实例的过程中调用此函数（将里面定义的变量都放到实例里面去，你就可以使用this点出来，包括HTML里面就能够使用这些变量的）。
它应该返回一个对象，然后 Vue 会通过响应性系统将其包裹起来，并以 $data 的形式存储在组件实例中。
为方便起见，该对象的任何顶级“属性”也会直接通过组件实例暴露出来。（本来是使用this.$data.msg点出来，现在this.msg就可以出来了）

vm.$data.msg其实和vm.msg就是同一个东西，就像一个语法糖。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <script src="https://unpkg.com/vue@3"></script>
    <style type="text/css">

    </style>
</head>

<body>    
    <div id="vue">
        <!--引入并且使用变量-->
      msg:{{ msg }}
    </div>

    <script type="text/javascript">
        const HelloVueApp = {
            data(){
                return{
                    msg: "hello"
                }
            }
        } 
    //创建vm实例,vm是实例的名称
    const vm = Vue.createApp(HelloVueApp).mount("#vue")
    //将vue实例挂载到对应的选择器上面去，干了两件事情，第一初始化实例，其次是挂载 
     // 'Hello Vue!'
    console.log(msg)   // 'Hello Vue!'
    vm.msg = "hello world"
    console.log(vm.$data.msg) 

    
    </script>

</body>

</html>

方法

方法(methods):处理数据的函数，在methods选项中定义的函数称为方法。

在 methods 选项中定义的方法与 data 选项中的数据一样，可以在组件的模板中使用（挂载到html中某个dom上面）。在模板中，它们通常被当做事件监听使用。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <script src="https://unpkg.com/vue@3"></script>
    <style type="text/css">
    </style>
</head>

<body>    
    <div id="hello-vue">
       <button type="button" @click="increment()">增加</button>
       <p>count:{{ count }}</p> 
    </div>
         
    <script type="text/javascript">
      const HelloVueApp = {
        data(){
            return{
                count: 0
            }
        },
        methods:{
            increment(){
                this.count++
            }
        }
      }
      Vue.createApp(HelloVueApp).mount("#hello-vue")
    </script>

</body>

</html>

计算属性

计算属性(computed):根据所依赖的数据动态显示新的计算结果。

示例 : 需要在 {{}} 里添加计算再展示数据，例如统计分数，数值计算一般用法：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <script src="https://unpkg.com/vue@3"></script>
    <style type="text/css">
    </style>
</head>

<body>    
    <div id="hello-vue">
       <button type="button" @click="increment()">增加</button>
       <p>总分:{{ chinese + math + english }}</p> 
    </div>
         
    <script type="text/javascript">
      const HelloVueApp = {
        data(){
            return{
                chinese: 10,
                math: 20,
                english: 30
            }
        }
      }
      const vm = Vue.createApp(HelloVueApp).mount("#hello-vue")
    </script>

</body>

</html>

computed 计算属性用法：

小结：计算属性一般就是用来通过其他的数据算出一个新数据，而且它有一个好处就是，它把新的数据缓存下来了，当其他的依赖数据没有发生改变，它调用的是缓存的数据，这就极大的提高了我们程序的性能。

而如果写在methods里，数据根本没有缓存的概念，所以每次都会重新计算。这也是为什么不用methods 的原因 !

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <script src="https://unpkg.com/vue@3"></script>
    <style type="text/css">
    </style>
</head>

<body>    
    <div id="hello-vue">
       <p>总分:{{ sum }}</p> 
    </div>
         
    <script type="text/javascript">
      const HelloVueApp = {
        data(){
            return{
                chinese: 10,
                math: 20,
                english: 30
            }
        },
        computed:{
            sum: function(){
              let a = this.math + this.chinese + this.english
              return a 
            }
        }
      }
      const vm = Vue.createApp(HelloVueApp).mount("#hello-vue")
    </script>

</body>

</html>

你要的数据名不需要在data里面去定义，但是数据还是需要的，你的数据都是从data里面拿到的。

监听属性

监听属性(watch):是一个观察动作，监听data数据变化后触发对应函数，函数有newValue(变化之后结果)和oldValue(变化之前结果)两个参数。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

某些值在变化了被监听到之后，获取数据，展示出来。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <script src="https://unpkg.com/vue@3"></script>
    <style type="text/css">

    </style>
</head>

<body>    
    <div id="hello-vue">
      <p>旧值：{{ oldmsg }}</p>
      <p>新值:{{ watchnewmsg }}</p>
      <button type="button" @click="btn()">按钮</button>
    </div>
         
    <script type="text/javascript">
      const HelloVueApp = {
        data(){
            return{
                oldmsg: "Hello Vue!",
                watchnewmsg: '111'
            }
        },
        methods:{
            btn(){
               this.oldmsg = 'Hello xxxx'
            }
        },
        watch: {
            oldmsg: {
                handler(newValue, oldValue) {
                console.log(newValue, oldValue)
                this.watchnewmsg = newValue
            }
        }
     }
        //立即处理，进入页面就触发
        immediate: true
    }
      Vue.createApp(HelloVueApp).mount("#hello-vue")
    </script>

</body>

</html>