1.①绑定＜a :href=‘url‘＞点＜/a＞＜button @click=‘say‘＞点＜/button＞②双向数据绑定MVVM用v-model③Object.defineProperty()

原创已于 2022-04-07 00:08:40 修改 · 397 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

于 2021-11-08 15:27:42 首次发布

vue 专栏收录该内容

17 篇文章

订阅专栏

3.script里面有一个 vm实例化对象，和挂载点进行挂载

二：数据的绑定及事件的添加（跳转和点击事件）及简写

1. 点我去百度

2. 点击事件绑定

三：双向数据绑定MVVM和data的两种写法

1.双向数据绑定：一般情况下只针对表单类元素使用 v-model

2.data可以是对象也可以是函数

四：Object.defineProperty()专门用来监控对象属性变化的，

添加或修改对象的属性为响应式属性，实现双向绑定

有三个参数

1.第一个参数:目标对象

2.第二个参数:需要定义的属性或方法的名字。

3.第三个参数:目标属性所拥有的特性。（descriptor）

Object.keys方法之详解

调试工具：

插件安装目录：

一：基本语法

1.引入 vue.js

2.body里面必须有一个挂载点app

3.script里面有一个 vm实例化对象，和挂载点进行挂载

请求回来的数据，是配置对象里的data

二：数据的绑定及事件的添加（跳转和点击事件）及简写

1. <a v-bind:href='url'>点我去百度</a>

2. <button v-on:click='say'>点击事件绑定</button>

三：双向数据绑定MVVM和data的两种写法

1.双向数据绑定：一般情况下只针对表单类元素使用 v-model

<div id="app">
        <p>{{msg}}</p>
        <input type="text" v-model='msg'></input>  
        <!-- 当input里面的值改变时，p标签里面的字也改变 -->
    </div>

    <script>
        const vm = new Vue({
            el: '#app',
            // data 可以是对象也可以是函数
            /*             data: {
                        }, */
            data() {
                return {
                    msg: '哈喽~'
                }
            },
        })
    </script>

2.data可以是对象也可以是函数

四：Object.defineProperty()专门用来监控对象属性变化的，

添加或修改对象的属性为响应式属性，实现双向绑定

        let s = {
            one: '1',
            two: '2'
        }
        Object.defineProperty(s, 'three', {
            value: 3
        })
        console.log(s)

有三个参数

1.第一个参数:目标对象

2.第二个参数:需要定义的属性或方法的名字。

3.第三个参数:目标属性所拥有的特性。（descriptor）

第三个参数descriptor里面有以下取值：第一次设置时以下(除了value)的值默认为false

①value:属性的值

②writable:如果为false，属性的值就不能被重写,只能为只读了,再次赋值不起作用

③configurable:总开关，一旦为false，就不能再设置他的（value，writable，configurable），再次赋值报错

④enumerable:是否能在for…in循环中遍历出来或在Object.keys中列举出来。

⑤set:

⑥get:

Object.keys方法之详解

 let s = {
            one: '1',
            two: '2'
        }
        Object.defineProperty(s, 'three', {
            value: 3,
            enumerable: true
        })
        console.log(Object.keys(s))//为true时可以遍历出新添加的属性名three['one', 'two', 'three']

set和get

<script>
        let s = {
            one: '1',
            two: '2'
        }
        let s2 = {}
        Object.defineProperty(s, 'three', {
            get() {
                // 当访问对象的three属性时
                return this.one + "-" + this.two
            },
            set(val) {
                // 当对象的three属性被修改时，
                const arr = val.split('-')   //split是以-为分隔符分隔val字符串到arr数组中去
                this.one = arr[0]
                this.two = arr[1]
            }
        })
        console.log(s.three)  //1-2
        s.three = '4-5'
        console.log(s.one)    //4
        console.log(s.two)    //5
    </script>

模拟数据代理：

        // 模拟数据代理
        let vm = {}
        let data = { msg: "hello" }

        Object.defineProperty(vm, 'msg', {
            get() {
                return data.msg
            },
            set(val) {
                // 当vm的值修改时
                data.msg = val
            }
        })

        console.log(vm.msg)   //hello

        vm.msg = '我更改了'
        console.log(vm.msg)   //hello
        console.log(data.msg) //hello