Vue的第三日|柠零的博客中心

el和data的两种写法

el的两种写法：

<html>
    <head>
        <meta charset="UTF-8">
        <title>你好啊！</title>
        <script type="text/javascript" src="../JS/vue.js"></script>
    </head>
    <body>
        <div>
            <h1 id="root">你好,{{name}}</h1>
        </div>
        <script type="text/javascript">
            const x = new Vue({
                el:"#root",
                data:{
                  name:"柠"
                }
            })
            console.log(x)
        </script>
    </body>
</html>

使用Vue构造函数方法，直接定义

第二种写法：实例化之后使用具体的方法进行构造

查看方法请使用console.log(x)，其中x是已经实例化后的Vue实例

具体代码如下：

        <script type="text/javascript">
            const x = new Vue({
                data(){
                  name:"柠"
                }
            })
            x.$mount('#root')
            console.log(x)
        </script>

简而言之：一种是通过构造函数进行创建，一种依赖实例本身具有的函数进行后期实现（说白了就是setter和构造函数的使用了）

data的两种写法

第一种写法和之前常用的写法一样，称之为对象式写法，在构造函数中进行使用

        <script type="text/javascript">
            const x = new Vue({
                data(){
                  name:"柠"
                }
            })
        </script>

第二种写法：函数式写法

            const x = new Vue({
                el:"#root",
                data:function(){
                    return {
                        name:"柠"
                    }
                }
            })

总结：

el的两种写法：

1）构造函数的时候就配置el属性

2）创建完vue实例之后再通过函数指定el的值

data的两种写法：

1）对象式

2）函数式

学习到组件时，data必须使用函数式写法，否则报错

重要原则：

一个由Vue管理的函数一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了

例如：data的函数式写法

MVVM模型

M：模型，对应data中的数据

V：视图，模板

VM：视图模型，Vue实例对象

在Vue中，通过指令v-bind和v-model实现数据绑定，Vue实例充当VM，负责管理数据和逻辑，开发者只需专注于业务逻辑，无需手动更新视图

知识点补充：

DOM：简单来说，就是将HTML，XML，SVG等文档解析为一棵树（树状结构），以对象形式存储，让JS等语言对其进行访问和修改

Document根节点，Element HTML标签节点，Text 标签内文本节点，Attr元素的属性节点

<!DOCTYPE html>
<html lang="zh-CN">

<body>
    <div id="container">原始内容</div>
    <script>
        // 获取元素
        const div = document.getElementById("container");
        // 修改内容
        div.textContent = "新内容";
        // 创建新元素并添加
        const p = document.createElement("p");
        p.textContent = "这是新段落";
        div.appendChild(p);
        // 删除元素
        // div.removeChild(p);
    </script>
</body>

</html>

document获取Element元素，然后对div当中的内容进行修改，

createElement，创建一个新元素

data里面所拥有的，都能通过双花括号展示在页面上

data中所有的属性，最后都出现在vm身上

vm身上的所有属性，以及Vue原型上的所有属性，都能在Vue模板上都可以直接使用

数据代理

先学习一些方法的使用：Object.defineProperty()方法

Object.defineproperty 就是给一个对象添加属性而用

        let person ={
            name:"张三",
            age:18,
            sex:"男"
        }
        Object.defineProperty(person,"tel",{
            value:"123456789",
        })

let在JS中用于定义变量，也可以定义对象，其中对象的定义方式为键值对格式

传参：要添加属性的对象名person，要添加属性的属性名"tel"(代表新加入的属性名为tel)，配置项

配置项使用花括号进行括起来

1，value，用于定义这个属性的初始值

        let person ={
            name:"张三",
            age:18,
            sex:"男",
            value:"123456789"
        }

这种方法和上面得到的结果看上去是一致的，但是本质却有着很大差别

区别1：如果是因为Object.defineProperty而定义属性，那么该属性无法被枚举，简单来说，就是无法被遍历

Object.keys() 内部传参为一个对象，这个方法可以把传入对象其属性的属性名提取出来组成一个数组

下面就使用这个方法来进行遍历

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>你好啊！</title>
    <!-- 引入vue.js文件 -->
    <script type="text/javascript" src="../JS/vue.js"></script>
</head>

<body>
    <div>
        <h1 id="root">你好,{{name}}</h1>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;//阻止vue在启动时生成生产提示
        new Vue({
            el: "#root",
            data: {
                name: "柠"
            }
        })

        let tel = "123456789"
        let person ={
            name:"张三",
            age:18,
            sex:"男",
        }
        Object.defineProperty(person,"tel",{
            value:"123456"
        })
        //遍历方式一
        console.log(Object.keys(person))

        //遍历方式二
        for(let index in person){
            console.log('@',index,person[index])
        }
        console.log(person)
    </script>
</body>

</html>

2，配置项enumerable 设置为true就可以遍历，简言之：控制属性是否可以枚举，默认值为false

3，配置项 writeable 设置是否可以被修改，默认为false

4，配置项 configurable是否可被删除，默认值为false

问题：

当number修改之后，貌似并不会将person对象当中的age同时进行修改，那么如何将其自动修改？

    let number=18
    let person={
        name:"柠",
        sex:"男",
        age:number

    }

解决方法:

Object.defineProperty(person,'age',{
    //当有人读取person的age属性时，get方法就会被调用，且返回值就是age的值
    get:function(){
        return number
    }//这三行被统称为getter
})