vue中的属性绑定和双向数据绑定、计算属性和侦听器

1、属性绑定

v-bind ：

例如

<div id="root">
        <div v-bind:title="title">hello world</div>
</div>
<script>
    new Vue({
        el:"#root",
        data:{
           title:"this is hello world"
        }
    })
</script>

v-bind可以缩写为“：” 

即<div v-bind:title="title">hello world</div>可以写为
<div :title="title">hello world</div>

单向绑定：数据决定页面的显示，但页面不能决定数据的内容

双向绑定：数据决定页面的显示，但页面也能修改数据的内容

用v-model实现双向绑定

例如

<div id="root">
    <input type="text" v-model:value="content">//当修改input的值时，content的值也会做相应修改
    <div>{{content}}</div>
</div>
<script>
    new Vue({
        el:"#root",
        data:{
            content: "this is content"
             },
       
    })
</script>

2、vue中的计算属性和侦听器 

2.1计算属性computed：一个属性通过其他属性计算而来

fullName由firstName和lastName计算而来。每当fullName发生变化时，count就会加1

当firstName和lastName不发生变化时，fullName不会重新计算而是调用缓存值，提高了程序效率。

    <div id="root">
        姓：<input type="text" v-model:value="firstName">
        名：<input type="text" v-model:value="lastName">
        <div>{{fullName}}</div>
        <div>{{count}}</div>
    </div>
    <script>
        new Vue({
            el: "#root",
            data: {
                firstName: '',
                lastName: '',                
            },
            //计算属性
            computed:{ 
                fullName: function () {
                    return this.firstName+" "+this.lastName
                }
            },                     
        })
    </script>

展示

2.1侦听器watch：监听某个数据的变化，一旦数据发生变化，就可以在侦听器中进行逻辑计算

<div id="root">
        姓：<input type="text" v-model:value="firstName">
        名：<input type="text" v-model:value="lastName">
        <div>{{fullName}}</div>

    </div>
    <script>
        new Vue({
            el: "#root",
            data: {
                firstName: '',
                lastName: '',
                fullName: ''
            },           
            watch:{
                firstName:function () {
                    this.fullName=this.firstName+" "+this.lastName;
                },
                lastName: function () {
                    this.fullName=this.firstName+" "+this.lastName;
                }
            }
        })
    </script>

结果展示：

2.3 计算属性computed的getter和setter： 

<div id="root">
    {{fullName}}
</div>
<script>
    var vm=new Vue({
        el: "#root",
        data: {
            firstName: 'Dell',
            lastName: 'Lee',
            fullname: 'Dell Lee'
        },
        computed:{
            fullName:{
                get: function () {
                    return this.firstName+" "+this.lastName
                },
                set: function (value) {
                    var arr=value.split(" ");
                    this.firstName=arr[0];
                    this.lastName=arr[1];
                }
            }
        }
     
    })

结果展示：