每天一点VUE（DAY 1-VUE2篇）

Pot Kiss

已于 2022-05-14 13:43:26 修改

阅读量1k

点赞数 1

分类专栏：每天一点VUE 文章标签： vue.js vue 学习

于 2022-03-26 20:51:01 首次发布

本文链接：https://blog.csdn.net/m0_60681099/article/details/123754393

版权

每天一点VUE 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

5、理解Object.defineProperty

在创建完成一个Vue实例以后，Vue会把我们的data里面的数据复制一份到实例里面的_data里面，并在实例里面创建出我们data里面的所有值，如果我们要获取data里面的值，首先获取会在Vue实例里面找，找到以后，通过实例里面的getter获取_data里面这个的值。改变值也是一样，首先在Vue实例里面找，找到以后，通过实例里面的setter去改变_data里面的值。

1、引入VUE

1.1、安装VUE开发者工具插件

https://github.com/vuejs/vue-devtools#vue-devtools

1.2、在官网下载js文件或者npm

https://cn.vuejs.org/v2/guide/installation.html

或者直接引入CDN
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

1.3、关闭生产环境提示

Vue.config.productionTip = false;

2、创建一个VUE实例模板语法

2.1、创建一个vue实例

new Vue({

})

2.2、插值

<div id="block">{{num}}</div>

new Vue({
    el:'#block',
    data:{
        num: '2',
    }
})

2.3、数据绑定

1 数据绑定（单向绑定和双向绑定）

<div id='block'>
    <a href="http:xxx.com">你好</a> //原始数据

    <a v-bind:href="link">你好</a> //单向绑定
    <a :href="link">你好</a> //单向简写

     <input v-model:value="link"></input> //双向绑定,无简写
 </div>


new Vue({
    el:'#block',
    data:{
        link: 'http:xxx.com',
    }
})

2 事件绑定

    <div id='block'>
      <button v-on:click="click1">btb</button> //非简写
      <button @click="click1">btb</button> //简写
    </div>


    new Vue({
        el: '#block',
        data: {
            link: 'http:xxx.com',
        },
        methods:{
            click1(){
                alert('nihao')
            }
        }
    })

3、data和el的两种写法

3.1、data的两种写法

第一种对象绑定

<div id="block">
    {{num}}    
</div>

let vm = new Vue({
    el: '#block',
    data:{
        num : "2";
    }
})

第二种函数写法

<div id="block">
    {{num}}    
</div>

let vm = new Vue({
    el: '#block',
    data:function(){
        return {
         num : "2"
       } 
    }
})

3.2、el的两种写法

第一种正常写法

<div id="block">
    {{num}}    
</div>

let vm = new Vue({
    el: '#block',
    data:{
        num : "2";
    }
})

第二种挂载写法

<div id="block">
    {{num}}    
</div>

let vm = new Vue({
    data:{
        num : "2";
    }
})

v.$mount("#block");

4、MVVM模型

M（模型）：model----data中的数据

V（视图）：view-------模板我们能看到的

VM（视图模型）：ViewModel------Vue实例对象

5、理解Object.defineProperty

5.1、不可枚举问题

<script>
    let a =  {
        name:'potkiss',
        age:"66",
        height:"22"
    }
    for (let index in a) {
        console.log(a[index]);
    }
    console.log(a);
</script>


<script>
    let a =  {
        name:'potkiss',
        age:"66",
    }
    Object.defineProperty(a,'height',{
        value:'29'
    })
    for (let index in a) {
        console.log(a[index]);
    }
    console.log(a);
</script>

添加enumerable即可枚举

<script>
    let a =  {
        name:'potkiss',
        age:"66",
    }
    Object.defineProperty(a,'height',{
        value:'29',
        enumerable:true
    })
    for (let index in a) {
        console.log(a[index]);
    }
    console.log(a);
</script>

5.2、无法修改问题

 <script>
    let a =  {
        name:'potkiss',
        age:"66",
    }
    Object.defineProperty(a,'height',{
        value:'29',
        enumerable:true,
    })
    a.height = 19;
    console.log(a);
</script>

添加writable属性即可

<script>
    let a =  {
        name:'potkiss',
        age:"66",
    }
    Object.defineProperty(a,'height',{
        value:'29',
        enumerable:true,
        writable:true,
    })
    a.height = 19;
    console.log(a);
</script>

5.3、无法删除问题

//没用Objec，可以删除的情况
<script>
    let a =  {
        name:'potkiss',
        age:"66",
        height:"18"
    }
    delete a.height;
    console.log(a);
</script> 

//用了Object，不可以删除
 <script>
    let a =  {
        name:'potkiss',
        age:"66",
    }
    Object.defineProperty(a,'height',{
        value: '20',
        enumerable:true,
        writable:true,
    })
    delete a.height;
    console.log(a);
</script>

添加confighrable属性

 <script>
    let a =  {
        name:'potkiss',
        age:"66",
    }
    Object.defineProperty(a,'height',{
        value: '20',
        enumerable:true,
        writable:true,
        configurable:true,
    })
    delete a.height;
    console.log(a);
</script>

5.4、getter和setter

 <script>
    let num = 19;
    let a =  {
        name:'potkiss',
        age:"66",
    }
    Object.defineProperty(a,'height',{
        get(){
            console.log("有人获取了getter的值");
            return num;
        },
        set(value){
            console.log('有人修改了setter的值');
            num = value;
            return value;
        },
    });
</script>

6、数据代理

定义：通过一个对象代理另一个对象中的属性的操作（读 / 写）；

<script>
    let a =  {
        name:'potkiss',
    }
    let b = {
        age:'27',
    }
    Object.defineProperty(b,'name',{
        get(){
            console.log("有人获取了getter的值");
            return a.name;
        },
        set(value){
            console.log('有人修改了setter的值');
            a.name = value;
            return value;
        },
    });
    console.log(b.name);
</script>

vue 数据代理：通过vm对象来代理data中所有属性的操作，更方便操作data中的数据

在创建完成一个Vue实例以后，Vue会把我们的data里面的数据复制一份到实例里面的_data里面，并在实例里面创建出我们data里面的所有值，如果我们要获取data里面的值，首先获取会在Vue实例里面找，找到以后，通过实例里面的getter获取_data里面这个的值。改变值也是一样，首先在Vue实例里面找，找到以后，通过实例里面的setter去改变_data里面的值。

Pot Kiss

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
每天一点VUE（DAY 1-VUE2篇）

在创建完成一个Vue实例以后，Vue会把我们的data里面的数据复制一份到实例里面的_data里面，并在实例里面创建出我们data里面的所有值，如果我们要获取data里面的值，首先获取会在Vue实例里面找，找到以后，通过实例里面的getter获取_data里面这个的值。改变值也是一样，首先在Vue实例里面找，找到以后，通过实例里面的setter去改变_data里面的值。
复制链接

扫一扫