不积跬步,无以至千里;不积小流,无以成江海。
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>