（1）vue基础——1.4 数据绑定

1. Vue中有2种数据绑定的方式：

1.单向绑定(v-bind)：数据只能从data流向页面。
2.双向绑定(v-model):数据不仅能从data流向页面，还可以从页面流向data。

备注：
1.双向绑定一般都应用在表单类元素上。如input、select等。
2.v-model：value 可以简写为 v-model，因为v-model默认收集的就是value值。

代码示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>模板语法</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <!-- Vue中有2种数据绑定的方式：
        1.单向绑定(v-bind):数据只能从data流向页面
        2.双向绑定(v-model):数据不仅能从data流向页面，还可以从页面流向data
            备注：
            1.双向绑定一般都应用在表单类元素上，（如:input、select等）
            2.v-model:value可以简写为v-model,因为v-model默认收集的就是value值 -->

    <body>
        <!-- 准备好一个容器 -->
        <div id="root">
            <!-- 普通写法 -->
            <!-- 单向数据绑定：<input type="text" v-bind:value="name">
            <br>
            双向数据绑定：<input type="text" v-model:value="name"> -->
            <!-- 简写 -->
            单向数据绑定：<input type="text" :value="name">
            <br>
            双向数据绑定：<input type="text" v-model="name">
        
            <!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 -->
            <!-- <h2 v-model:x='name'>LSF</h2> -->
        </div>
        <script>
            Vue.config.productionTip = false
            new Vue({
                el:'#root',
                data:{
                    name:'真理',
                }
            })
        </script>
    </body>

 

展示效果

 

 

 

2. 双向绑定的原理：

利用Object.defineProperty方法，其中用 get() 来获取 对象属性 数据，
把获取的数据利用新的属性名装起来，然后用set()调用改值来监听设置修改，当内容被修改时就会触发，并且把修改的值赋值给原来的属性名。

 Object.defineProperty(obj,'age',{
    // value:18,  //这样添加的属性不可枚举（无法遍历）
    // configurable:'true', //控制属性是否可删除
    // enumerable:true,  //该属性控制是否可枚举性
    // writable:true, //控制属性是否可修改
    
    // 获取
    get(){
        console.log("你访问了obj对象的age属性");
        return value=num
    },
    // 监听设置修改
    set(value){
        console.log("你修改了age的值，值是",value);
        num=value
    }

 

posted @ 2022-07-08 20:33  陈晓猛  阅读(80)  评论(0)    收藏  举报