VUE---3.插值符原理

文章目录

文章目录

前言

一、插值符是什么？

二、使用步骤

1.插值符写法

2.引入Vue（根据自己的vue文件地址来）

3.JS原理---Vue底层写法

总结

---

前言

插值符原理，代码附有哦

---

一、插值符是什么？

        1. 插件符 {{表达式}} || 字符串模板

        2. 是将数据转化成字符串输出

        3. data发生变化 视图(HTML)结构也会发生变化

二、使用步骤

1.插值符写法

代码如下（示例）：

<div id="app">

        {{name}}--插值符

        <p>{{age}}</p>

        {{sex}}

    </div>

2.引入Vue（根据自己的vue文件地址来）

代码如下（示例）：

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

3.JS原理---Vue底层写法

<script>

        // vue 底层写法 => 能懂更好,,,不懂了解即可 => 更加的了解vue

        class  Vue{

            constructor(value){

                // 获取html节点

                this.$el = document.querySelector(value.el);

                // 将数据放置在_data上

                this._data= value.data;

                // 初始化

                this.$el.append(this.init(this.$el))

            }

            // 初始化

            init(node){

                // 创建文本代码片段 存储虚拟DOM(在程序的内存中比较) 虚拟DOM很小

                let fram = document.createDocumentFragment();

                let child;;

                // 第一个子节点

                while(child = node.firstChild){

                    this.renderDOM(child)

                    // 插入 剪切节点功能

                    fram.appendChild(child)

                }

                return fram

            }

            //渲染处理的

            renderDOM(node){

                switch (node.nodeType) {

                    // 元素节点

                    case 1:

                        node.append(this.init(node))

                        break;

                    // 文本节点

                    case 3:

                        // 正则 Reg 用于匹配 {{}}  

                        let Reg = /\{\{(.*)\}\}/g

                        // Reg.test() 正则方法 判断是否符合正则规则

                        if(Reg.test(node.nodeValue)){

                            // 获取正则匹配的数据

                            let name = RegExp.$1.trim();

                            node.nodeValue = node.nodeValue.replace(Reg,this._data[name])

                        }

                        break;

                    default:

                        break;

                }

            }

        }

        // 实例化

        let vm = new Vue({

            el:"#app",

            data:{

                name:"路遥111",

                age: 18,

                sex:"女"

            }

        })

    </script>

---

总结

1. 插件符 {{表达式}} || 字符串模板

2. 是将数据转化成字符串输出

3. vue中data发生变化 视图(HTML)结构也会发生变化

4. 了解{{}}插件符