一.vue双向绑定原理

文章目录

• 前言
• 一、vue简单介绍
• 二、引入步骤
  • 1.库引入
  • 2.实例化
  • 3.作用域
  • 4.数据绑定

---

前言

第一天学习vue的双向绑定原理和常用修饰器。

---

一、vue是什么？

前端开发框架MVVM类，不允许直接操作dom节点，所有的dom节点都为：虚拟dom

二、使用步骤

1.引入库

   <script src="./vue.min.js"></script>

前言2.实例化vue对象

 new Vue({

            // 指定实例对象作用域哪个dom对象上

            el: '#root',

            // 数据模型 -- data

            data: {

                firstName: 'zhang',

                secondName: '',

                age: 16

            }

}）

3.作用域

指定实例对象作用域哪个dom对象上

实列对象.$mount('root')   (dom对象id名）

4.数据绑定

指令v-model

三.双向绑定原理

1.对象.defineproperty(1,2,3)的参数介绍

1.第一个为属性所在对象

2.第二个为属性名字

3.一个描述符对象

该方法的第三个参数除了可以是数据属性，也可以是访问器属性 

数据属性

1.configurable:表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性，默认值为true。

2.enumerable：表示能否通过for in循环访问属性，默认值为true

3.writable：表示能否修改属性的值。默认值为true。

4.value：包含这个属性的数据值。默认值为undefined。

 访问器属性 

1.get：在读取属性时调用的函数，默认值是undefined 

2..set：在写入属性的时候调用的函数，默认值是undefined

<div>
        姓：<input id="inputNode" onchange="inputEvt()"/>
        <!-- 通过修饰符来给v-model指令添加一个增强 如果需要使用一个修饰符: "." + 功能名字即可 -->
        名：<input/>

        <p>
            用户姓名：<span id="showNode"></span>
        </p>

        <div>
            <div>
                <ul>
                    <li id="myNode"></li>
                </ul>
            </div>
        </div>
    </div>

  <script>
        var obj = {
                firstName: 'zhang'
            }

   Object.defineProperty(obj, 'firstName', {
            // get() {
            get: function() {
                // return obj.firstName 引起无限递归
                return document.getElementById('inputNode').value
            },

            set(val) {
                // 给firstName赋值，调用setter方法，进入死循环
                // obj.firstName = val
                render(val)
            }
        })
     function inputEvt() {
            var evt = window.event
            obj.firstName = evt.target.value

            // 不能主动调用方法
            // render()
        }


        function render(val) {

            
            var showNode = document.getElementById('showNode')

            var myNode = document.getElementById('myNode')

            document.getElementById('inputNode').value = val
            showNode.innerText = val
            myNode.innerText = val
           
        }
        
    </script>