vuejs2.0与1.x版本中怎样使用js实时访问input的值的变化

vuejs 2.0中js实时监听input

在2.0的版本中，vuejs把v-el 和 v-ref 合并为一个 ref 属性了，可以在组件实例中通过 $refs 来调用。这意味着 v-el:my-element 将写成这样： ref="myElement"， v-ref:my-component 变成了这样： ref="myComponent"。绑定在一般元素上时，ref 指DOM元素，绑定在组件上时，ref 为一组件实例。

因为 v-ref 不再是一个指令了而是一个特殊的属性，它也可以被动态定义了。这样在和v-for 结合的时候是很有用的：

以前 v-el/v-ref 和 v-for 一起使用将产生一个DOM数组或者组件数组，因为没法给每个元素一个特定名字。现在你还仍然可以这样做，给每个元素一个同样的ref：

和 1.x 中不同， $refs 不是响应的，因为它们在渲染过程中注册/更新。只有监听变化并重复渲染才能使它们响应。
另一方面，设计$refs主要是提供给 js 程序访问的，并不建议在模板中过度依赖使用它。因为这意味着在实例之外去访问实例状态，违背了 Vue 数据驱动的思想。

下面给一个vuejs2.0版本的例子：

    
    
    
输入框一的内容：{{items.type1}}
    
输入框二的内容：{{items.type2}}

结果如图所示：

当在输入框输入文字的时候，js可以实时监听其指定输入框文本的值。

vuejs 1.x中js实时监听input

那么在vuejs 1.x的版本中是如何在js中监听某个指定的input的value变化的呢？
通过如下方式：

然后在vuejs中的watch中监听：

watch:{
    items:{
        handler:function(val,oldval){
            console.log(this.$els.texttype1.value);
        },
        deep:true
    }
}

整体代码：

    
    
    
输入框一的内容：{{items.type1}}
    
输入框二的内容：{{items.type2}}

实现的效果如图所示：

当在输入框中输入文字时，js中实时监听其变化的值。