Vue面试题分享Vue中目前本人遇到的面试题分享,之后遇到新的面试题会实时更新分享.这个不代表是所有面试能遇到的面试题(

Vue面试题分享

1. 简易实现双向数据绑定

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>

<body>
    <input type="text" value="" id="ipt" oninput="iptChange(this.value)">
    <h3 id="title" ></h3>
</body>

</html>
<script>
    // 获取元素
    var ipt = document.getElementById('ipt')
    var title = document.getElementById('title')

    // 声明一个data对象 专门用来放数据
    var data = {};

    // 用来给对象添加属性 define(定义) Property(属性)
    // Object.defineProperty(对象的名称,属性的名称,配置项)
    Object.defineProperty(data, 'msg', {
        // get方法: 定义这个msg时要赋值的数据
        get: function () {
            return '你好世界'
        },
        // set方法: 代表当你拿到最新的值时,需要做的事
        set: function (newVal) {
            title.innerHTML = newVal
            ipt.value = newVal
            console.log(newVal);
        }
    })
    // 初始样式
    title.innerHTML = data.msg
    ipt.value = data.msg

    // input的value值发生改变
    function iptChange(val) {
        data.msg = val  // 修改数据源 会自动触发set方法
    }
</script>