效果如图

这里使用了v-model，代码如下：
html:

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

vue:

  var app = new Vue({
        el: '#app',
        data: {
            word: 'irose'
        }
    });

vue中经常使用到和这类表单元素，vue对于这些元素的数据绑定和我们以前经常用的jQuery有些区别。vue使用v-model实现这些标签数据的双向绑定，它会根据控件类型自动选取正确的方法来更新元素。
v-model本质上是一个语法糖。如下代码本质上是<input :value=“test” @input=“test = $event.target.value”>，其中@input是对输入事件的一个监听:value="word"是将监听事件中的数据放入到input，上面面代码是v-model的一个简单的例子。在这边需要强调一点，v-model不仅可以给input赋值还可以获取input中的数据，而且数据的获取是实时的。