[JavaScript知识库]Vue学习（二）————数据绑定、el与data的两种写法、MVVM

数据绑定

<div id="d">
<!--    v-bind:单向绑定
        即改变只能从数据流向页面
-->
    单向数据绑定:<input type="text" :value="m">
<!--    v-model:双向绑定
        用法有限定，一般用于表单元素，即input、select...
        v-model默认是对value进行操作，即v-model:value，因此可以简写为v-model
-->
    双向数据绑定:<input type="text" v-model="m">
</div>

<script type="text/javascript">
    new Vue({
        el: '#d'
        ,data: {
            m: '上海'
        }
    })
</script>

el与data的两种写法

<div id="d">
    <h1>你好 {{m}}</h1>
</div>

<script type="text/javascript">
    const v = new Vue({
        // el: '#d',第一种el
        
        //第一种data，对象式
        // data: {
        //     m: '上海'
        // }

        //第二种data，函数式，在以后写组件时，必须要用函数式
        data() {//data: function () {
            console.log(this);//是Vue对象
            return{//返回值必须是一个对象
                m: '上海'
            }
        }
    })
    console.log(v);
    setTimeout(() => {
        // 更加灵活 第二种el
        v.$mount('#d');
    }, 1000);
</script>

MVVM

M：模型，对于data中的数据

V：视图，模板

VM：视图模型，Vue实例对象

<div id="d">
    <h1>hello {{m}}</h1>
<!--    Vue对象中的属性-->
    <h1>测试：{{$vnode}}</h1>
    <h1>测试：{{_watchers}}</h1>
<!--    原型上的属性-->
    <h1>测试：{{$watch}}</h1>
</div>

<script type="text/javascript">
    // 阻止Vue启动时产生提示
    Vue.config.productionTip = false;
    const vm = new Vue({
        el: '#d'
        //data中的所有属性，最后都出现在了Vue实例上
        //vm对象上的属性以及Vue原型上的属性，最后都可以直接在Vue模板上使用
        ,data: {
            m: '上海'
        }
    })
    console.log(vm);
</script>

Object.defineProperty()

<script type="text/javascript">
    let number = 20;//实现操作，当我们修改number时，会使age的值发生变化
    let person = {
        name: 'www',
        // age: 21,
        gender: '女',
    }
    //用此方法声明的属性不可遍历，即不可枚举
    Object.defineProperty(person, 'age', {
        // value: 21,
        // enumerable: true,//控制属性是否可以枚举，默认为false
        // writable: true,//控制属性是否可以修改，默认为false
        // configurable: true,//控制属性是否可以删除，默认为false

        //当读取person的age属性时，get函数/getter就会被调用，且返回的值就是age的值
        get(){
            console.log("调用了getter，获取到的age")
            return number//此方法将number和age绑定在了一起，当修改number时就会修改age的值
        },

        //当修改person的age属性时，set函数/setter就会被调用，修改age的值
        set(value) {
            console.log("调用了setter，修改age为",value)
            number = value;
        }
    })
    console.log(person);
    console.log(Object.keys(person));
</script>