1.1 v-model基本使用
Vue中使用v-model指令来实现表单元素和数据的双向绑定。
案例的解析
- 当输入框输入内容时，因为input中的v-model绑定了message。所以会实时将输入的内容传递给message，message发生改变。
- 当message发生改变时，因为上面我们使用Mustache语法，将message的值插入到DOM中，所以DOM会发生响应的改变。
- 所以，通过v-model实现了双向的绑定。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model的基本使用</title>
</head>
<body>
<!--2.定义一个div元素-->
<div id="app">
<input type="text" v-model="message">
<h2>{
{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
// 创建对象
const app = new Vue({
// 挂载要管理的元素
el: '#app',
// 定义数据
data: {
message: 'hello Vue.js!!!'
}
})
</script>
</body>
</html>
执行结果
1.2 v-mode的原理
v-model其实是一个语法糖，它的背后本质上是包含两个操作
- v-bind绑定一个value属性。
- v-on指令给当前元素绑定input事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model使用原理</title>
</head>
<body>
<!--2.定义一个div元素-->
<div id="app">
<!--输入和监听-->
<input type="text" :value="message" @input="message = $event.target.value">
<h2>{
{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
// 创建对象
const app = new Vue({
// 挂载要管理的元素
el: '#app',
// 定义数据
data: {
message: 'hello world!'
},
// 方法
methods: {
valueChange(event){
this.message = event.target.value;
}
}
})
</script>
</body>
</html>
执行结果
最低0.47元/天 解锁文章
1222
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
