VUE 入坑系列 一 双向绑定

Posted dahuo

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VUE 入坑系列 一 双向绑定相关的知识,希望对你有一定的参考价值。

html代码
技术分享图片
<div id="app">
    <p>{{message}}</p>
    <span>message1</span> <input v-model="message">
    <span>message2</span> <input v-model="message">
 </div> 
View Code
技术分享图片
var vm = new Vue({
  el: "#app",
  data: {
    message: ‘‘
  },
  methods: {}
});
View Code

说明

1) v-model 是用在表单中的指令

2) 双向绑定:都是指的是类似input这样的,自带change事件的表单项目

3) p标签中的message发生了变化,input的value的变化改变了message,从而使视图发生了相应的变化。

以上是关于VUE 入坑系列 一 双向绑定的主要内容,如果未能解决你的问题,请参考以下文章

VUE 入坑系列 一 事件

Vue基础系列——Vue模板中的数据绑定语法

Vue基础系列数据绑定-单项数据绑定-双向数据绑定-el与data的两种写法

Vue双向绑定的实现原理系列:补充指令解析器compile

Vue双向绑定的实现原理系列:监听器Observer和订阅者Watcher

Vue生命周期与单向、单次、双向绑定