Vue学习计划--Vue2(二)Vue代理方式

Vue

  1. data中的两种方式

    1. 对象式

      data:{

      }

    2. 函数式

      data(){
      return {

      复制代码
       }

      }

    示例:

    复制代码
    <body>
         <div id="app">
           {{ name }} {{ age}} {{$options}}
           <input type="text" v-model="value">
         </div>
       <script>
         let vm = new Vue({
           el: '#app',
           // 对象式
           // data:{
           //   name: '小红',
           //   age: 16
           // }
           // 函数式
           data(){
             return {
               name: '小明',
               age: 55,
               value: '111'
             }
           }
         })
       </script>
     </body>
  2. el中的两种方式

    1. new Vue时候配置 el 属性

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

    2. 先创建Vue实例,随后再通过 vm.$mount('#root')指定el的值(这种方式更加灵活)

      const vm = new Vue({})
      vm.$mount('#root')

    示例:

    复制代码
    <body>
       <div id="app">
         {{ name }}
       </div>
       <script>
         //el的两种方式
         // let vm = new Vue({
         //   // el:'#app',
         //   data:{
         //     name: '小红'
         //   }
         // })
     
         let vm = new Vue({
           data:{
             name: '小红'
           }
         })
     	// 这种方式更加灵活,比如加个定时器
         setTimeout(()=>{
           vm.$mount('#app')
         }, 3000)
       </script>
     </body>
  3. MVVM模型 vue受到mvvm模型的启发

    1. M: 模型(Model): data的数据
    2. V: 视图(View): 模板代码
    3. VM: 视图模型(ViewModel): Vue实例对象(核心)

    ViewModel 包含 DOM Listeners 和 Data Bindings。Data Bindings 用于将数据绑定到 View 上显示,DOM Listeners 用于监听操作。

    • 从 Model 到 View 的映射,也就是 Data Bindings 。这样可以大量省略我们手动 update View 的代码和时间。
    • 从 View 到 Model 的事件监听,也就是 DOM Listeners 。这样我们的 Model 就会随着 View 触发事件而改变。
    复制代码
        <p>{{ name }}</p> // 改变data中的数据,页面随之变化
        <input type="text" v-model="name"> //改变input的value值,data中的值也变化

    在Vue中的mvvm:

    • data中所有的属性、computed的计算属性、methods中的方法等,最后都出现在了vue实例vm身上。
    • vue实例vm身上所有的属性 及 Vue原型上所有属性,在Vue模板{{}}中都可以直接使用。
  4. 数据代理:

    问题:{``{}} 为什么可以访问vm实例上的所有属性|data里的数据为什么会出现在vm身上

    1. 先认识一个方法:Object.defineProperty(obj,prop, options):
      1:作用:就是直接在一个对象上定义一个新属性,或者修改一个已经存在的属性
      2. 接收三个参数:
      obj 需要定义属性的当前对象
      prop 当前需要定义的属性名
      options:属性配置
      3. 这个方法有缺点:现在先点一下:

      1. 不能监听数组的变化
      2. 不能监听新属性的添加
      3. 兼容性问题
      4. 不能深度监听
        示例:

      let num = 300
      let person = {
      name: '小明',
      sex: '男'
      }
      Object.defineProperty(person, 'age', {
      //value: 15,
      //enumerable: true, // 控制属性是否可以枚举, 默认false
      //writable: true, // 控制属性是否可以被修改,默认false
      //configurable: true, // 控制属性是否可以被删除,默认false

      复制代码
       // 当有人读取person的age属性时,get函数(getter)就会被调用,且返回值是age的值
       // 注意:不能同时指定访问器和值或可写属性,什么意思呢,就是上面的配置和下面的get、set不可同时存在
       get(){
           console.log('有人读取了age属性')
           return number
       }
       // 当有人修改person的age属性时,set函数(setter)就会被调用,且会收到修改的具体指
       set(value){
           console.log('有人修改了age属性')
           number = value
       }

      })

    2. 数据代理: 通过一个对象代理对另一个对象中属性的操作(读/写),可以在控制台做两个操作:

      • 输出一下obj,obj2,和obj2.x,并且把obj2输出后的对象展开一下
      • 更改一下obj2.x并输出一下obj

      let obj = {x: 100}
      let obj2 = {y: 200}
      Object.defineProperty(obj2, 'x', {
      get(){
      return obj.x
      },
      set(value){
      obj.x = value
      }
      })

    3. Vue中的数据代理:通过vm对象来代理data对象中的属性的操作(读/ 写)

    1. 好处:
      更加方便操作data中的数据
    2. 基本原理:
      通过Object.defineProperty()把data对象中所有的属性添加到vm上
      为每一个添加到vm上的属性,都指定一个getter/setter
      在getter/setter内部去操作(读/写)data中对应的属性
相关推荐
_李小白25 分钟前
【OSG学习笔记】Day 18: 碰撞检测与物理交互
笔记·学习·游戏·3d
拉不动的猪33 分钟前
JQ常规面试题
前端·javascript·面试
Sleepless_斑马1 小时前
【FFmpeg学习(1)】图像表示
学习·ffmpeg
新中地GIS开发老师1 小时前
三维GIS开发cesium智慧地铁教程(5)Cesium相机控制
javascript·arcgis·智慧城市·大学生·gis开发·webgis·地理信息科学
Shimeng_19891 小时前
前端如何通过(手机)扫描二维码下载app
前端·javascript·vue.js·二维码·扫描二维码下载软件app
Mr...Gan2 小时前
TypeScript
开发语言·javascript·typescript
Moonnnn.2 小时前
【单片机期末】汇编试卷
笔记·学习
MZWeiei2 小时前
MVVM 模式,以及 Angular、React、Vue 和 jQuery 的区别与关系
vue.js·react.js·angular.js
前端 贾公子2 小时前
《Vuejs设计与实现》第 8 章(挂载与更新)
开发语言·前端·javascript
述雾学java2 小时前
Spring Boot + Vue 前后端分离项目解决跨域问题详解
vue.js·spring boot·后端