1.4 Vue实现数据绑定

最新推荐文章于 2024-04-12 15:32:24 发布

Pluto-z

最新推荐文章于 2024-04-12 15:32:24 发布

阅读量211

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/Zchzzzz/article/details/99887449

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<body>
  <div id="app">
    {{ msg }}
    msg
  </div>
  msg
</body>
<script src="../../lib/vue.js"></script>
<script>
  // 当我们第一次通过script标签对引入vue.js时，我们就会有一个全局变量  Vue   
  //   Vue它是一个构造器函数

  //   Vue( options )
  //     this._init( options ) //在初始化执行vue

  //     参数： options 我们称之为‘ 选项 ’
  //       类型： Object


  //     options / el 
  //       我们称之为自动挂载： 将页面一个已经存在dom作为整个实例的作用范围，出了这个范围那么vm实例就没有作用了
  //       body不能作为el的挂载目标

  //     options / data 数据
  //       new类型中 data选项是一个对象
  //       使用形式： 在实例范围内，它相当于全局变量 
  //                 我们要将这个变量放在一个模板语法中才能解析，这个语法叫做mustache语法，也叫 ‘双大括号语法’
  //       使用范围： el确定的那个范围


  // Vue是一个MVVM框架
  //   M: data选项
  //   V：el挂载的东西
  //   VM： vm实例

  console.log(Vue)

  // var vm = new Vue( options ) // 实例化Vue的到vm实例
  var vm = new Vue({
    el: '#app', // document.querySelector('#app')
    data: {
      msg: 'hello Vue.js'
    }
  }) // 实例化Vue的到vm实例
</script>

<body>
  <div id="app">
    <h3> VM改变 ——>  V也跟着改变 </h3>
    {{ msg }}
    <h3> V改变 -> VM也跟着改变 </h3>
    <input type="text" v-model = "msg">
  </div>
</body>
<script src="../../lib/vue.js"></script>
<script>

  /* 
    1. 通过new Vue中el选项确定的实例范围，这个dom结构我们叫它 'Root组件/根组件/根实例'
    2. Vue中双向数据绑定式通过 v-model 这个指令来实现的
    3. 当我们将vm中的data改变时，会发现视图也跟着改变了，这个模式我们称之为： 数据驱动 
          数据驱动： 数据驱动视图改变
          Vue官方将这种模式称之为： 深入响应式原理 
  
   */
  
  var vm = new Vue({
    el: '#app',// document.querySelector('#app')
    data: {
      msg: 'hello Vue.js'
    }
  }) // 实例化Vue的到vm实例

</script>

<body>
  <button> 点击 </button>
  <div class="box"></div>
</body>

<script>
  // Vue 底层原理 

  // 目的： 使用原生js来实现Vue深入响应式 

  var box = document.querySelector('.box')

  var button = document.querySelector('button')

  var data = {
    name: 'Jick'
  }

  // 观察者对象

  var observer = {...data} 

  // es5提供的api方法,这个方法不兼容ie8以及以下
  // Object.defineProperty(对象，对象的属性，对象属性的修饰符 )



  Object.defineProperty(  data,'name',{
    // get/set  统称为: '存储器'
    get () {
      return  observer.name // 初始化赋值一个值给name属性
    },
    set ( val ) {
      console.log( val )
      box.innerHTML = val
    }
  })

  button.onclick = function () {
    data.name = "Rose"
  }

  box.innerHTML = data.name 
  
</script>

面试题/理解：如何理解深入响应式原理？