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中对应的属性
相关推荐
爱生活的苏苏4 分钟前
vue生成二维码图片+文字说明
前端·vue.js
拉不动的猪6 分钟前
安卓和ios小程序开发中的兼容性问题举例
前端·javascript·面试
乖乖是干饭王19 分钟前
Linux系统编程中的_GNU_SOURCE宏
linux·运维·c语言·学习·gnu
贩卖纯净水.23 分钟前
浏览器兼容-polyfill-本地服务-优化
开发语言·前端·javascript
前端百草阁29 分钟前
从npm库 Vue 组件到独立SDK:打包与 CDN 引入的最佳实践
前端·vue.js·npm
且白1 小时前
vsCode使用本地低版本node启动配置文件
前端·vue.js·vscode·编辑器
程序研1 小时前
一、ES6-let声明变量【解刨分析最详细】
前端·javascript·es6
待什么青丝1 小时前
【TMS570LC4357】之相关驱动开发学习记录2
c语言·arm开发·驱动开发·单片机·学习
疯狂的沙粒1 小时前
在uni-app中如何从Options API迁移到Composition API?
javascript·vue.js·uni-app
行云流水剑1 小时前
【学习记录】如何使用 Python 提取 PDF 文件中的内容
python·学习·pdf