VUE2学习（数据绑定，数据代理） - day01

原创已于 2023-11-14 11:29:01 修改 · 133 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2023-09-10 16:22:25 首次发布

VUE2-VUE3 学习专栏收录该内容

14 篇文章

订阅专栏

本文介绍了Vue框架的渐进式特性，包括组件化、声明式编码、虚拟DOM和数据绑定（单向和双向），以及MVVM模型和数据代理的概念，通过实例展示了如何在HTML中使用Vue进行基础开发。

1-简介

一套用于构建用户界面的渐进式JavaScript框架。

渐进式：vue可以自底向上逐层应用；简单应用：只需一个轻量小巧的核心库；复杂应用：可以引入各式各样的vue插件。

2-VUE特点

2-1采用组件化模式，提高代码复用率、且让代码更好的维护

2-2 声明式编码（原生js为命令式编码），使无需直接操作DOM，提高开发效率

2-3 使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点

比如新增赵六，vue的diff算法会比较虚拟DOM，一样的就复用

3-初识VUE

初识Vue:

1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象:

2.root容器里的代码依然符合htm1规范，只不过混入了一些特殊的Vue语法;

3.root容器里的代码被称为[Vue模板]

4- root容器的作用：为vue提供模板，存入vue数据，2者是一一对应的关系

5- {{ }} ：插值表达式中间放的是 js 表达式。

6- data 中数据发生改变页面上数据也会发生改变

<!DOCTYPE html>
<html>

<head>
    <mate charset="UTF-8"></mate>
    <title > 初识VUE</title>
    <script type="text/javascript" src="../js/vue.js"></script>

</head>

<body>
    <div id = "root">
        <h1>
           {{name}}
        </h1>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false; //阻止VUE生产提示

        //创建VUE实例
        new  Vue({
            el:'#root', //el 指定当前vue实例为哪个容器服务，通常为css选着器字符
            data:{      //date 封装数据对象，提供vue容器使用
                name:"HELLOW,VUE 插值语法123" 
            }

        });
    </script>
</body>
</html>

4-VUE模板语法

4-1 插值语法 {{}} 上面已经看到过。

4-2 指令语法

v-bind :

功能:用于解析标签(包括: 标签属性、标签体内容、绑定事件.....)

举例:v-bind:href="xxx" 或简写为 : href="xxx," xxx同样要写js表达式，且可以直接读取到数据中的所有属性。

代码展示如下

<!DOCTYPE html>
<html>

<head>
    <mate charset="UTF-8"></mate>
    <title > 初识VUE</title>
    <script type="text/javascript" src="../js/vue.js"></script>

</head>

<body>
    <div id = "root">
        <h1>
           {{name}}
        </h1>

        <h1>
            指令语法
         </h1>
         <a v-bind:href="school.url" v-bind:data="school.address">去百度</a>
         <a v-bind:href="school.url" :data="school.address">去百度</a>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false; //阻止VUE生产提示

        //创建VUE实例
        new  Vue({
            el:'#root', //el 指定当前vue实例为哪个容器服务，通常为css选着器字符
            data:{      //date 封装数据对象，提供vue容器使用
                name:"HELLOW,VUE 插值语法123" ,
               school:{
                url:"www.baidu.com",
                address:"中国北京"
               }
            }

        });
    </script>
</body>
</html>

5- 数据绑定

Vue中有2种数据绑定的方式:
1.单向绑定(v-bind): 数据只能从data流向页面。2.双向绑定(v-model): 数据不仅能从data流向页面，还可以从页面流向data。备注:
1.双向绑定一般都应用在表单类元素上(如: input、select等)2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。

<!DOCTYPE html>
<html>

<head>
    <mate charset="UTF-8"></mate>
    <title > 初识VUE</title>
    <script type="text/javascript" src="../js/vue.js"></script>

</head>

<body>
    <div id = "root">  
        <!--单项数据绑定：<input type="text" v-bind:value="name"><br/>
        双向数据绑定：<input type="text" v-model:value="name">-->

        单项数据绑定：<input type="text" :value="name"><br/>
        双向数据绑定：<input type="text" v-model="name">

        <!--如下错误 v-model 只能用于表单类元素-->
        <h1 v-model:x="name">

        </h1>
      
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false; //阻止VUE生产提示

        //创建VUE实例
        new  Vue({
            el:'#root', //el 指定当前vue实例为哪个容器服务，通常为css选着器字符
            data:{      //date 封装数据对象，提供vue容器使用
              name:"古力娜扎"
            }

        });
    </script>
</body>
</html>

6- el和data 的2种写法

1.e1有2种写法

(1).new Vue时候配置el属性。

(2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。

2.data有2种写法

(1).对象式

(2).函数式如何选择: 目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错

3.一个重要的原则:由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

<!DOCTYPE html>
<html>

<head>
    <mate charset="UTF-8"></mate>
    <title > 初识VUE</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id = "root">  
        <h1>
            {{name}}
        </h1>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false; //阻止VUE生产提示

        //创建VUE实例
        const vm = new  Vue({
            //第一种 el 指定当前vue实例为哪个容器服务，通常为css选着器字符
            //el:'#root', 
            
            /**
             第一种 data 对象式封装数据对象
            data:{      //date 封装数据对象，提供vue容器使用
              name:"古力娜扎"
            }**/

            //第二种 data 函数式：指定data的写法
            /**data:function(){
                console.log("谁调用：",this);
                return {
                    name:"古力娜扎"
                }
            }**/

            //简写
            data(){
                console.log("谁调用：", this);
                return {
                    name:"古力娜扎"
                }
            }

        });


        //第二种  el 指定容器,写法
        vm.$mount('#root');
    </script>
</body>
</html>

7-MVVM模型

5.1、MVVM模型
M：模型（Model） =====》对应data中的数据
V：视图（View） =====》对应模板
VM：视图模型（ViewModel）=====》对应Vue实例对象

data（M）中多有属性最后都出现在了vm身上
vm身上所有属性及Vue原型上所有属性，在vue模板（V）中都可以直接使用

8-数据代理

8-1 Object.defineProperty方法

功能：给对象添加属性
语法：Object.defineProperty(对象名,新属性名,{value:新属性值[,其他配置]})

<!DOCTYPE html>
<html>

<head>
    <mate charset="UTF-8"></mate>
    <title > 初识VUE</title>
    <script type="text/javascript" src="../js/vue.js"></script>

</head>

<body>
    <div id = "root">  
      
      
    </div>
    <script type="text/javascript">
        let num = 18;
       let person= {
        name:"张三", 
        addr:"总理故乡"
       }

     //  案例一: 给person绑定age属性
    //    Object.defineProperty(person,'age',{
    //     value:18
    //    } )
    //    console.log(person)

    //    //输出 ['name', 'addr']  age这个添加的变量不可枚举
    //    console.log(Object.keys(person))


    //案例二：属性介绍，getter 和 setter方法介绍
       Object.defineProperty(person,'age',{
        // value:18,
        // enumerable:true ,//控制属性可以枚举，默认不可枚举
        // writable:true,    //可以修改的，默认不可以修稿
        // configurable:true, //可以删除掉，默认不可删除

        //比如 ： 当有人读取 person种age属性时候，getter函数就会被调用
        get:function(){
            console("有人获取age值")
            return 19;
        },
        //比如 ： 当有人修改 person种age属性时候，setter函数就会被调用
        set:function(value){
            console("有人修改age值：" , value)
        }
       } )
       
        //打压key 输出 ['name', 'addr','age1']  age这个添加的变量不可枚举
        console.log(Object.keys(person))

        //属性对象 观察控制台
        console.log(person)
    </script>
</body>
</html>

控制台测试

8-2 数据代理

<!DOCTYPE html>
<html>
<head>
    <mate charset="UTF-8"></mate>
    <title > 初识VUE</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id = "root">  
    </div>
    <script type="text/javascript">
        <!--通过一个对象， 代理另外一个对象属性的操作 读写-->
      let obj ={x:100};

      let obj2 ={y:100};
      
      //通过obj2 对象的getter，setter 设置obj对象的属性
      Object.defineProperty(obj2, 'x',{
        get(){
            return obj.x
        },
        set(val){
            obj.x = val;
        }
      }
      )
    </script>
</body>
</html>

8-3 VUE中单数据代理

模板中用的是name，而不是data.name（即data.name），这里就用到了数据代理，vue对象代理了data对象；通过vm.name就可以读写_data中的name。

这里vm.name和vm.data.name的值相同，修改vm.name的值，vm.data.name也会改变。

原理：

数据代理，通过Object.defineProperty()方法把data对象中所有属性添加到vm，为每一个添加到vm上的属性，都指定一个getter/setter，getter/setter内部去操作（读写）data中对应的数据

vue中数据代理的好处：
更加方便的操作data中的数据

<!DOCTYPE html>
<html>
<head>
    <mate charset="UTF-8"></mate>
    <title > 初识VUE</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id = "root">  
        <H1>名称 : {{name}}</H1>
        <H1>地址 : {{addr}}</H1>
    </div>
    <script type="text/javascript">

            let data = {
                name: 'VUE学习123',
                addr: '淮安总理故乡'
            };

        const vm = new Vue({
          el:'#root',
           data(){
            return data
        }

        })
    </script>
</body>
</html>