关于Vue的一些基本参数、方法及其应用规则
表单绑定v-model
表单控件在实际开发中是非常常见的,特别是对于用户信息的提交,需要大量的表单。
Vue中使用v-model指令来实现表单元素和数据的双向绑定。以下面代码为案例:
<div id = "app">
<input type="text" v-model="message">
<h2>{
{message}}</h2>
</div>
<script src = "../JS/vue.js"></script>
<script>
let app = new Vue({
el: "#app",
data:{
message: "",
},
})
</script>
当我们在输入框输入数据时,因为input中的v-model绑定了message,所以会实现将输入的数据传递给message,message发生改变;当message发生改变,因为上面我们使用mustache语法将message值渲染到dom中,所以dom会发生相应的改变,所以说v-model实现了双向绑定。
v-model原理:v-model实际上是一个语法糖,它的背后本质上是包含两个操作:1.v-bind绑定一个value属性,2.v-on指令给当前元素绑定input事件。以上面案例为例,实际上v-model实现操作为:
<div id = "app">
<!-- <input type="text" v-model="message">-->
<input type="text" v-bind:value="message" @input="message = $event.target.value">
<h2>{
{message}}</h2>
</div>
<script src = "../JS/vue.js"></script>
<script>
let app = new Vue({
el: "#app",
data:{
message: "",
},
methods: {
valueChange(event) {
this.message = event.target.value;
}
}