Vue 核心原理理解及原生 JS 实现

艺能人金广发

于 2023-01-05 15:29:43 发布

阅读量283

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/Chico_Feng/article/details/128564197

版权

1.声明式渲染，模板引擎

Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统，简单来说，就是在 JavaScript 中写变量，然后，可以通过一定的语法规则，直接渲染到页面上

<body>
    <!-- 这里本质上来讲是一个 模板引擎 -->
    <div id="app">
        <h2>{{msg}}</h2>
        <h3>{{info}}</h3>
        <h3>{{view}}</h3>
        <h1 v-text="msg"></h1>
        <h1 v-text="info"></h1>
    </div>
</body>
</html>
<script>
    // 首先声明一个 JS 变量，内部包含在 DOM 中可能使用的属性
    let data = {
        msg: "你好，中国！",
        info:"Vue的本质还是JavaScript!",
        view: "我是一个页面"
    }
    // 获取 id 为 app 下的所有元素的 html 字符串
    const bhtml = document.getElementById("app").innerHTML;
    console.log(bhtml)
    // 使用正则表达式来进行 replace 关键部分替换 {{}}（胡子语法）
    const nhtml = bhtml.replace(/{{(.+)}}/g, function(res){
        // 使用正则表达式进行匹配
        res.match(/{{(.+)}}/g);
        // 使用 RegExp 来获取匹配到的 （） 里面的内容
        console.log(RegExp.$1);
        return data[RegExp.$1];
    });
    console.log(nhtml)
    document.getElementById("app").innerHTML = nhtml;
    data.msg = "我是新的值！"
    // 使用属性选择器来选择具有 v-text 的元素
    var nodes = document.querySelectorAll("[v-text]");
    for(let i=0; i< nodes.length; i++){
        nodes[i].innerHTML = data[nodes[i].getAttribute("v-text")]
    }
</script>

2.组件化应用构建，模块复用

组件系统是 Vue 的另一个重要概念（后续学习），因为它是一种抽象的允许我们使用小型、独立和通常可复用的“小积木”构建大型应用，几乎任意类型的应用界面都可以抽象为一个组件树。简单来说，其实就是将一个模块封装为一个函数（对象），然后可以快速的进行复用

<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: red;
    }
</style>
<body>
    <div id="app"></div>
</body>
</html>
<script>
    function createComponent(index) {
        // 创建一个 div 元素
        let oneCompoent = document.createElement("div");
        // 设置一个 class 为 box 的属性
        oneCompoent.setAttribute("class", "box");
        // 给当前构建的 div dom 对象添加内部元素
        oneCompoent.innerHTML = `
        <h1>我是第` + index + `个标题</h1>
            <p>我是一个段落</p>
        `;
        // 获取 id 为 app 元素，添加我们构建的一个 dom 节点
        document.getElementById("app").appendChild(oneCompoent)
    }
    createComponent(1);
    createComponent(2);
    createComponent(3);
    createComponent(4);
    createComponent(5);
    createComponent(6);
</script>

3.响应式数据对象双向绑定

Vue 中使用响应式数据对象声明，进而驱动页面行为。通俗的讲就是：

在 js 中修改了数据，在页面中的 DOM 直接就配合进行修改数据
同时，在 DOM 表单中用户操作修改了数据，js 中也同步接收这个数据。

<body>
    <div id="msg">你好</div>
    <input type="text" name="" id="" oninput="changeName(this)">
</body>
</html>
<script>
    const userinfo = {
        name: "你好，中国"
    }
    const obj = {}
    // 这就是一个程序公式，按照对应方法调用
    Object.defineProperty(obj, "name", {
        // 每一次读取，都会经过 get ，里面的逻辑都会执行
        get(){
            document.getElementById("msg").innerHTML = userinfo.name;
            return userinfo.name;
        },
        // 每一次赋值，都会经过 set，里面的逻辑都会执行
        set(name){
            userinfo.name = name;
            document.getElementById("msg").innerHTML = name;
        }
    })
    console.log(obj.name)
    obj.name = "这是一个有点忧郁的天！"
    function changeName(that){
        obj.name = that.value;
    }
</script>

艺能人金广发

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 核心原理理解及原生 JS 实现

Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统，简单来说，就是在 JavaScript 中写变量，然后，可以通过一定的语法规则，直接渲染到页面上。的“小积木”构建大型应用，几乎任意类型的应用界面都可以抽象为一个组件树。简单来说，其实就是将一个模块封装为一个函数（对象），然后可以快速的进行复用。同时，在 DOM 表单中用户操作修改了数据，js 中也同步接收这个数据。在 js 中修改了数据，在页面中的 DOM 直接就配合进行修改数据。3.响应式数据对象双向绑定。
复制链接

扫一扫