<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <h1>{{name}}</h1>
        <h1>{{age}}</h1>
    </div>
    <script>
        const vm = new Vue({
            // Vue源码中关键性代码
            // var data = vm.$options.data;
            // 此处是获取data,程序执行到此处仍然没有给vm加上_data属性
            // data = vm.data = isFunction(data) ? getData(data,vm) : data
            // 程序执行完这个代码后,VM上多了一个_data的属性
            // 通过以上源码可知,data不一定是一个{}json对象,也可以是一个函数
            // 此处的代码含义是,如果data是函数,则调用getData(data,vm)来获取data
            // 如果不是函数,则直接将data返回,给data变量赋值给vm._data属性
            // 程序执行到这里为什么要给VM拓展一个_data属性
            // 重点函数
            // function isReserved(str)
            // {
            //     var c = (str + '').charCodeAt(0);
            //     return c === 0x24 || c === 0x5f;
            // }
            // 这个函数就是用来判断字符串是否以_或$开始
            // true表示是,false表示否
            // 重点函数
//             function proxy(target, sourceKey, key) {
//       sharedPropertyDefinition.get = function proxyGetter() {
//           return this[sourceKey][key];
//       };
//       sharedPropertyDefinition.set = function proxySetter(val) {
//           this[sourceKey][key] = val;
//       };
//       Object.defineProperty(target, key, sharedPropertyDefinition);
//   }
            el : "#app",
            data : {
                msg : "Hello",
                name : "Jack",
                age : 30
            }
        });
    </script>
</body>
</html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

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

</head>

<body>

    <div id="app">

        <h1>{{msg}}</h1>

        <h1>{{name}}</h1>

        <h1>{{age}}</h1>

    </div>

    <script>

        const vm = new Vue({

            // Vue源码中关键性代码

            // var data = vm.$options.data;

            // 此处是获取data,程序执行到此处仍然没有给vm加上_data属性

            // data = vm.data = isFunction(data) ? getData(data,vm) : data

            // 程序执行完这个代码后,VM上多了一个_data的属性

            // 通过以上源码可知,data不一定是一个{}json对象,也可以是一个函数

            // 此处的代码含义是,如果data是函数,则调用getData(data,vm)来获取data

            // 如果不是函数,则直接将data返回,给data变量赋值给vm._data属性

            // 程序执行到这里为什么要给VM拓展一个_data属性

            // 重点函数

            // function isReserved(str)

            // {

            //     var c = (str + '').charCodeAt(0);

            //     return c === 0x24 || c === 0x5f;

            // }

            // 这个函数就是用来判断字符串是否以_或$开始

            // true表示是,false表示否

            // 重点函数

//             function proxy(target, sourceKey, key) {

//       sharedPropertyDefinition.get = function proxyGetter() {

//           return this[sourceKey][key];

//       };

//       sharedPropertyDefinition.set = function proxySetter(val) {

//           this[sourceKey][key] = val;

//       };

//       Object.defineProperty(target, key, sharedPropertyDefinition);

//   }

            el : "#app",

            data : {

                msg : "Hello",

                name : "Jack",

                age : 30

            }

        });

    </script>

</body>

</html>

class Vue
{
    //定义构造函数
    constructor(Options)//一个简单的纯粹的JS对象
    {
        //options对象类有一个data配置项
        Object.keys(Options.data).forEach((propertyName,index) => {
            console.log(propertyName,index);
            let firstCode = propertyName.charAt(0);
            if(firstCode != "$" && firstCode != "_")
            {
                Object.defineProperty(this,propertyName,{
                    get()
                    {
                        return Options.data[propertyName];
                    },
                    set(val)
                    {
                        Options.data[propertyName] = val;
                    }
                });
            }
        });
    }
}

class Vue

{

    //定义构造函数

    constructor(Options)//一个简单的纯粹的JS对象

    {

        //options对象类有一个data配置项

        Object.keys(Options.data).forEach((propertyName,index) => {

            console.log(propertyName,index);

            let firstCode = propertyName.charAt(0);

            if(firstCode != "$" && firstCode != "_")

            {

                Object.defineProperty(this,propertyName,{

                    get()

                    {

                        return Options.data[propertyName];

                    },

                    set(val)

                    {

                        Options.data[propertyName] = val;

                    }

                });

            }

        });

    }

}

# vue.js # 前端 # javascript # 前端框架 # html5
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

avatar GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

avatar GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m

avatar GitCode 开源社区