一起学Vuejs(五)----- v-model基本使用和原理

不积跬步,无以至千里;不积小流,无以成江海。

 

Vuejs语言基础

 

v-model:

实现表单元素和数据的双向绑定(表单在实际开发中,特别是对用户信息的提交,非常常见)。

 

基本使用:

<div id="app">
  <input type="text" v-model="message">
  {{message}}
</div>

<script src="../js/vue.js"></script>

<script>
  const app = new Vue({
    el: ‘#app‘,
    data: {
      message: ‘你好呀‘
    }
  })
</script>

 分析:

1.在输入框输入内容时,因为input中的v-model绑定了message,所以会实时将输入的内容传递给message,message发生改变;

2.当message发生改变时,因为使用Mustache语法,将message的值插入到DOM中,所以DOM会发生响应的改变;

3.所以,通过v-model实现了双向的绑定。

 

原理:

v-model其实是一个语法糖,它的背后本质上是包含两个操作:

1. v-bind 绑定一个value值

2. v-on 指令给当前元素绑定 input 事件

<div id="app">
<!--  <input type="text" v-model="message">-->
<!--  <input type="text" :value="message" @input="valueChange">-->
  <input type="text" :value="message" @input="message = $event.target.value">

  {{message}}
</div>

<script src="../js/vue.js"></script>

<script>
  const app = new Vue({
    el: ‘#app‘,
    data: {
      message: ‘你好呀‘
    },
    methods: {
      valueChange(event){
        this.message = event.target.value;
      }
    }
  })
</script>

 

一起学Vuejs(五)----- v-model基本使用和原理

上一篇:jQuery实现元素插入文档的方法


下一篇:为什么要用html、css、js而不直接将UI图纸放在网站上