MVVM原理—双向数据绑定——v-model 指令 & 是数据绑定和事件监听的语法糖

MVVM原理—双向数据绑定——v-model 指令 & 数据绑定和事件监听

  • MVVM原理
  • 双向数据绑定的原理
    • v-model 指令
      • 数据绑定
      • 事件监听
代码-单页面实现-引进vue文件

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Documenttitle>
head>
<body>
  <div id="app">
    {{msg}}
    <div>
      
      <input type="text" v-bind:value='msg' v-on:input='changeValue'>      
    div>
  div>
  <script type="text/javascript" src="./vue.js">script>
  <script type="text/javascript">
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'hello'
      },
      methods: {
        changeValue: function (e) {
          // console.log(e.target.value)
          this.msg = e.target.value
        }
      }
    })
    /*
      IE8以下版本,不兼容es5新特性
      ES5中对象属性的访问方式:set get
      defineProperty(obj, 'abc', {
        set: function () {},
        get: function () {}
      })
      访问对象属性时,自动触发get函数
      设置对象属性时,自动触发set函数

      Vue3的底层实现进行了重构,性能会更加优越
      数据响应式原理不再是基于set 和 get
      而是采用ES6新特性:Proxy
    
    */
  script>
body>
html>
页面验证
1、页面变化导致数据变化

MVVM原理—双向数据绑定——v-model 指令 & 是数据绑定和事件监听的语法糖_第1张图片

2、数据变化导致页面变化

MVVM原理—双向数据绑定——v-model 指令 & 是数据绑定和事件监听的语法糖_第2张图片

原理拆解
1、数据绑定- v-bind:value=‘msg’

MVVM原理—双向数据绑定——v-model 指令 & 是数据绑定和事件监听的语法糖_第3张图片

2、事件监听- v-on:input=‘changeValue’
methods: {
        changeValue: function (e) {
          // console.log(e.target.value)
          this.msg = e.target.value
        }
}

打印验证

MVVM原理—双向数据绑定——v-model 指令 & 是数据绑定和事件监听的语法糖_第4张图片

3、事件监听时,把页面数据进行更新- this.msg = e.target.value

MVVM原理—双向数据绑定——v-model 指令 & 是数据绑定和事件监听的语法糖_第5张图片

可知:上述写法方式和v-model实现效果一致

总结:
v-model是数据绑定和事件监听的语法糖

你可能感兴趣的:(vue知识,面试类,vue)