单向操作：获取/设置input内容

<div id="app">
    <input type="text" v-bind:value="value" v-on:input="changeValue"> <!--输入即改变value值-->
    <p>{{ value }}</p> <!--用于显示当前value值-->
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data:{
            value:"ccy"
        },
        methods:{
            changeValue: function(e){
                this.value = e.target.value;
            } // 改变value值
        }
    })
</script>

效果：
1.文本框的value原本为data中的value值，即用v-bind来设置input值
2.文本框内容改变时，也改变了data的value值，显示在p标签中，即获取文本框值
两者均是单向操作

双向数据绑定：v-model
不需要在另外定义函数，将文本框的内容赋值到data的value上：

<div id="app">
    <input type="text" v-model="value">
    <p>{{ value }}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data:{
            value:"ccy"
        }
    })
</script>

效果同上

用ref来标识input
另外补充一个，上一篇提到的另外一种获取input文本框的方法：ref
input标签上注明ref：

<input type="text" v-bind:value="value" v-on:input="changeValue" ref = "input1">

在method中的changeValue函数中就可以找到这个input：

changeValue: function(){
            this.value = this.$refs.input1.value;
        }

一样可以获取input框的内容（与上述单向操作中的获取操作效果一致）